JavaScript Basic

Comment Your Code

注释的两种方式:

双斜线的单行注释//

1	// This is an in-line comment

斜线星号的多行注释

1 2	/* This is a multi-line comment */

Declare JavaScript Variables

声明变量：
JS里一共有7种变量类型：undefined, null, boolean, string, symbol, number, object
在JS中使用 var 来声明变量

1	var ourName

Storing Values with the Assignment Operator

用等号给变量赋值, 赋值运算总是从右往左进行，等号右边的最终计算结果被赋予等号左边的变量

1	myVar = 5;

Initializing Variables with the Assignment Operator

在声明变量时，给变量赋值初始化

1	var myVar = 0; // Creates a new variable called myVar and assigns it an initial value of 0

Understanding Uninitialized Variables

当变量被声明时，他的初始值（如果没有手动设置初值）为undefined

var a;
var b;
var c;

a = a + 1; // NaN
b = b + 5; // NaN
c = c + " String!"; // undefined String!

Understanding Case Sensitivity in Variables

在设置变量名时，编译器会区别变量名的大小写。所以当有两个变量的变量名字母相同，但大小写不同时，我们就要注意区分其中的区别。一般情况下，我们不推荐用大小写来区分不同的变量（除非有一些默认常量值，用全部的大写字母表示）

Arithmetic Operate Two Numbers with JavaScript

加减乘除四则运算

var sum = 5 + 10; // assigned 15
var sub = 10 - 5; // assigned 5
var mult = 10 * 5; // assigned 50
var div = 10 / 5; // assigned 2

Increment/Decrement a Number with JavaScript

自加减1

1 2	i++; // i = i + 1; i--; // i = i - 1;

Create Decimal Numbers with JavaScript

JS的变量可以储存小数，小数通常被当作 floating point numbers,floats

1	var myDecimal = 5.7;

Finding a Remainder in JavaScript

整数除法求商和余数

1
2
3

var myNum = 5; 
myNum % 2 = 1;
Math.floor(5 / 2) = 2; //Math.floor(x) 对x向小取整

Declare String Variables

声明字符串变量

1	var myStr = "Hello";

Escaping Literal Quotes in Strings

字符串中的一些转义字符

转义字符

1	var sampleStr = "Alan said, \"Peter is learning JavaScript\".";

Quoting Strings with Single Quotes

在JavaScript 中，单引号和双引号都可以表示字符串变量，且效果相同

Concatenating Strings

用加号来连接字符串

'Hello '+'World'; // "Hello World"

var myStr = 'Hello ';
myStr += 'World'; // "Hello World"

Find the Length of a String

求字符串的长度 string.length 返回长度值（包括空格）

1	"Alan Peter".length; // 10

Use Bracket Notation to Find the First Character in a String

用[]索引字符串中的某个字符
首字母：

1 2	var firstName = "Charles"; var firstLetter = firstName[0]; // firstLetter is "C"

第n个字母（索引值为 n-1）：

1 2	var firstName = "Ada"; var secondLetterOfFirstName = firstName[1]; // secondLetterOfFirstName is "d"

最后一个字母(用length得到字符串长度)：

1 2	var firstName = "Charles"; var lastLetter = firstName[firstName.length - 1]; // lastLetter is "s"

Understand String Immutability

在JS中，String 类型中的某个字符是不能改变的，只能将整个变量重新赋值

1 2	var myStr = "Bob"; myStr[0] = "J"; //报错

正确的修改方法为：

1 2	var myStr = "Bob"; myStr = "Job";

Store Multiple Values in one Variable using JavaScript Arrays

用阵列储存多个数据：

1	var sandwich = ["peanut butter", "jelly", "bread"].

Nest one Array within Another Array

阵列的元素可以是子阵列，这样的阵列也叫多维阵列，可以使用索引读取和修改数据：

1
2
3

var myArray = [["Bulls", 23], ["White Sox", 45]];
myArray[1][0]; // "White Box"
myArray[1][1] = 55; // ["Bulls", 23], ["White Sox", 55]

Manipulate Arrays With push(), pop(), shift(), unshift()

array.push(x) 把x加到阵列的最后一位，函数返回值为array的元素个数
array.pop() 移除阵列的最后一个元素，返回最后一个元素的值
array.shift() 移除阵列的第一个元素，返回这个元素的值
array.unshift(x) 把x加到阵列的第一位，函数返回值为array的元素个数

Write Reusable JavaScript with Functions

JS的方程示例

1
2
3

function functionName(input) {
  console.log(input);//方程执行的内容
}

Global Scope and Functions

在JS中，在方程外定义的变量是全局可见的，方程内的局部变量在另一个方程里为undefined

var myGlobal = 1;

function fun1() {
  // Assign 5 to oopsGlobal Here
var oopsGlobal = 5;
}

function fun2() {
  var output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {// 不会执行，因为局部变量没有定义
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output); // myGlobal: 1
}

Local Scope and Functions

局部变量在方程之外是不可见的

function myLocalScope() {
  'use strict';
  console.log('inside myLocalScope', myVar);
}
myLocalScope();
console.log('outside myLocalScope', myVar);
// ReferenceError: myVar is not defined

Global vs. Local Scope in Functions

如果全局变量和局部变量重名，那么优先使用方程内部的局部变量，但是全局变量不会因此被修改。

var someVar = "Hat";
function myFun() {
  var someVar = "Head";
  return someVar; // return "Head"
}

console.log(someVar) // Hat

Return a Value from a Function with Return

你可以设置函数变量把参数传递给局部变量，也可以使用 return 把参数传递回方程外部：

function plusThree(num) {
  return num + 3;
}
var answer = plusThree(5); // 8

Understanding Undefined Value returned from a Function

一个函数可以有 return 声明，也可以没有。当一个函数没有return时，它的返回值是undefined

var sum = 0;
function addSum(num) {
  sum = sum + num;
}
addSum(3); // sum will be modified but returned value is undefined

Assignment with a Returned Value

函数的返回值通过等号赋值给变量：

1	ourSum = sum(5, 12);// ourSum = 17;

Understanding Boolean Values

布尔型变量，布尔型变量只有两种：true 和 false

Use Conditional Logic with If Statements

If 语句的写法和条件分支情况：

if (condition is true) {
  statement is executed
}
// Example
function test (myCondition) {
  if (myCondition) {
     return "It was true";
  }
  return "It was false";
}
test(true);  // returns "It was true"
test(false); // returns "It was false"

Comparison with the Equality Operator

比较：相等的情况，相等 ==，强等于 ===

function equalityTest(myVal) {
  if (myVal == 10) {
     return "Equal";
  }
  return "Not Equal";
}

比较：强等于情况下字符串变量不会转化成数字

1 2	3 === 3 // true 3 === '3' // false\

比较：不等于 !=

1 !=  2     // true
1 != "1"    // false
1 != '1'    // false
1 != true   // false
0 != false  // false

比较：强不等于 ! ==

1
2
3

3 !==  3   // false
3 !== '3'  // true
4 !==  3   // true

比较：大于 >

5   >  3   // true
7   > '3'  // true
2   >  3   // false
'1' >  9   // false

比较：大于或等于 > =

6   >=  6   // true
7   >= '3'  // true
2   >=  3   // false
'7' >=  9   // false

比较：小于 <

2   < 5  // true
'3' < 7  // true
5   < 5  // false
3   < 2  // false
'8' < 4  // false

比较：小于或等于 < =

4   <= 5  // true
'7' <= 7  // true
5   <= 5  // true
3   <= 2  // false
'8' <= 4  // false

Comparisons with the Logical And Operators

逻辑运算符：与 and

if (num > 5 && num < 10) {
  return "Yes";
}
return "No";

逻辑运算符：或 or

if (num > 10 || num < 5) {
  return "No";
}
return "Yes";

Introducing Else, Else if Statements

当条件判断结果为 false, 使用 else 和 else if 来表示其他的分支情况：

if (num > 10) {
  return "Bigger than 10";
} else {
  return "10 or Less";
}

if (num > 15) {
  return "Bigger than 15";
} else if (num < 5) {
  return "Smaller than 5";
} else {
  return "Between 5 and 15";
}

Chaining If Else Statements

把 if else 语句连接起来

if (condition1) {
  statement1
} else if (condition2) {
  statement2
} else if (condition3) {
  statement3
. . .
} else {
  statementN
}

Selecting from Many Options with Switch Statements

使用 Switch 语句从一个判断条件的多种情况中选择：

switch(lowercaseLetter) {
  case "a":
    console.log("A");
    break;
  case "b":
    console.log("B");
    break;
}

添加默认情况：

switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
    break;
}

当多种情况结果相同时，可以将代码简化省略：

switch(val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}

Build JavaScript Objects

建立 JS 对象，对象变量和数组类似，但是在取得和修改对象中的数据时，我们会用到对象的属性 properties.

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
}

我们用“.”记号来获得对象的属性值：

var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

我们也可以用方括号“[ ]” 来读取数据：

var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
myObj["NoSpace"];    // USS Enterprise

更新对象的属性：

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";

添加新属性：

1 2	ourDog.bark = "bow-wow"; ourDog["bark"] = "bow-wow";

删除属性：

var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"],
  "bark": "bow-wow"
};

delete ourDog.bark;

Testing Objects for Properties

为了测试对象是否存在某一属性，我们可以使用命令 .hasOwnProperty(proname) . 函数会返回布尔值。

var myObj = {
  top: "hat",
  bottom: "pants"
};
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

Accessing Nested Objects

当对象变量较为复杂，层层嵌套时，可以一层层读取：

var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"

对于多维对象阵列，可以使用同样的方法：

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"

Iterate with JavaScript Loops

while 循环：

var ourArray = [];
var i = 0;
while(i < 5) {
  ourArray.push(i);
  i++;
}
// ourArray = [0, 1, 2, 3, 4]

for 循环:

var ourArray = [];
for (var i = 0; i < 5; i++) {
  ourArray.push(i);
}
// ourArray = [0, 1, 2, 3, 4]

do … while 循环：

var ourArray = [];
var i = 0;
do {
  ourArray.push(i);
  i++;
} while (i < 5);

Replace Loops using Recursion

使用递归代替循环：

function multiply(arr, n) {
    var product = 1;
    for (var i = 0; i < n; i++) {
        product *= arr[i];
    }
    return product;
  }

function multiply(arr, n) {
    if (n <= 0) {
      return 1;
    } else {
      return multiply(arr, n - 1) * arr[n - 1];
    }
  }

Generate Random Fractions with JavaScript

生成随机数：Math.randon() 会生成一个0（包括）到1（不包括）之间的数：

生成一个整数：

1
2
3

1. Use Math.random() to generate a random decimal.
2. Multiply that random decimal by 20.
3. Use another function, Math.floor() to round the number down to its nearest whole number.

在范围[a,b] 之间生成随机数：

1	Math.floor(Math.random() * (max - min + 1)) + min

Use the parseInt Function

方程 parseInt() 将字符串转化为整型数字：

1	var a = parseInt("007"); // a = 7

方程 parseInt() 还可以设置转换数字的进制：

1	var a = parseInt("11", 2);// a =3

Use the Conditional (Ternary) Operator

条件运算符：

function findGreater(a, b) {
  if(a > b) {
    return "a is greater";
  }
  else {
    return "b is greater";
  }
}

function findGreater(a, b) {
  return a > b ? "a is greater" : "b is greater";
}

多个条件运算符：

function findGreaterOrEqual(a, b) {
  if (a === b) {
    return "a and b are equal";
  }
  else if (a > b) {
    return "a is greater";
  }
  else {
    return "b is greater";
  }
}

function findGreaterOrEqual(a, b) {
  return (a === b) ? "a and b are equal" 
    : (a > b) ? "a is greater" 
    : "b is greater";
}

Use Recursion to Create a Countdown

使用递归来创造一个递减数列：

function countup(n) {
  if (n < 1) {
    return [];
  } else {
    const countArray = countup(n - 1);
    countArray.push(n);
    return countArray;
  }
}
console.log(countup(5)); // [ 1, 2, 3, 4, 5 ]

Use Recursion to Create a Range of Numbers

使用递归来创造某一范围内的整数数列：

function rangeOfNumbers(startNum, endNum) {
  return startNum === endNum
    ? [startNum]
    : rangeOfNumbers(startNum, endNum - 1).concat(endNum);
}