JS FreeCodeCamp

1 给代码添加注释
单行注释：//
多行注释：/* content */

2 声明变量
八种数据类型：undefined、null、boolean、string、symbol、number、bigint、object
变量声明：var ourName；

3 使用赋值运算符存储值
var myVar；//变量声明
myVar = 5；//变量赋值

4 将一个变量的值赋给另一个
var a；
a = 7；
var b ;
b = a；

5 使用赋值运算符初始化变量
赋值运算符: =
var myVar = 9;

6 声明字符串变量
字符串文字或字符串是用 单引号 或 双引号 括起来的一系列零个或多个字符。
var myFirstName = "Jerry";
var myLastName = "Li";

7 理解未初始化的变量
当 JavaScript 中的变量被声明的时候，程序内部会给它一个初始值 undefined。
当你对一个值为 undefined 的变量进行运算操作的时候，算出来的结果将会是 NaN，
NaN的意思是 "Not a Number"。
用 undefined 变量连接一个字符串，你将得到一个 undefined 的 字符串。

8 了解变量名区分大小写
在 JavaScript 中所有的变量和函数名都是大小写敏感的。 要区别对待大写字母和小写字母。
使用驼峰命名法（camelCase）来书写一个 Javascript 变量。
在驼峰命名法（camelCase）中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母大写

9 探索 var 和 let 关键字之间的差异
使用 var 关键字声明变量的最大问题之一是你可以轻松覆盖变量声明：
let 不像 var，当你使用 let 时，同名的变量只能声明一次。同名的变量声明两次会报错。

10 使用 const 关键字声明只读变量
使用 const 声明的变量是只读的。 它们是一个常量值，一个变量被赋值为 const，它就不能被重新赋值：
const FAV_PET = "Cats";
FAV_PET = "Dogs";
由于重新分配 FAV_PET 的值，控制台将显示错误。

11 加法运算
Number 是 JavaScript 中的一种数据类型，用来表示数值。
JavaScript 中，我们通过符号 + 来进行加法运算。
const sum = 10 + 10;

12 减法运算
JavaScript 中使用 - 来做减法运算。
const difference = 45 - 33;

13 乘法运算
JavaScript 使用 * 符号表示两数相乘。
const product = 8 * 10;

14 除法运算
JavaScript 中使用 / 符号做除法运算。
const quotient = 66 / 33;

15 数字递增
使用 ++，对变量进行自增或者 +1 运算。
i++;
等效于：
i = i + 1;

16 数字递减
使用自减符号 --，对一个变量执行自减或者 -1 运算。
i--;
等效于：
i = i - 1;

17 创建一个小数
我们也可以把小数存储到变量中。 小数有时候也被称作浮点数或者 floats。
const myDecimal = 5.7;

18 两个小数相乘
把两个小数相乘，并得到它们乘积。
const product = 2.0 * 2.5;

19 两个小数相除
一个小数除以另一个小数。
const quotient = 4.4 / 2.0;

20 求余运算
求余运算符 % 返回两个数相除得到的余数。
示例
5 % 2 = 1 因为
Math.floor(5 / 2) = 2 （商）
2 * 2 = 4
5 - 4 = 1 （余数）
用法
在数学中，判断一个数是奇数还是偶数，只需要判断这个数除以 2 得到的余数是 0 还是 1。
17 % 2 = 1（17 是奇数）
48 % 2 = 0（48 是偶数）

21 复合赋值之 +=
赋值时 JavaScript 会先计算等号右边的内容，myVar = myVar + 5;
这是最常见的运算赋值语句，即先运算、再赋值。
还有一类操作符是一步到位，既做运算也赋值的。
其中一种就是 += 运算符。
let myVar = 1;
myVar += 5;
console.log(myVar);
控制台将会显示 6。

22 复合赋值之 -=
与 += 操作符类似，-= 操作符用来对一个变量进行减法赋值操作。
myVar = myVar - 5;
将从 myVar 中减去 5。 等价于：
myVar -= 5;

23 复合赋值之 *=
*= 操作符是让变量与一个数相乘并赋值。
myVar = myVar * 5;
将 myVar 乘以 5。 等价于：
myVar *= 5;

24 复合赋值之 /=
/= 操作符是让变量与另一个数相除并赋值。
myVar = myVar / 5;
将 myVar 除以 5。 等价于：
myVar /= 5;

　　

25 转义字符串中的引号
在 JavaScript 中，可以通过在引号前面使用反斜杠（\）来转义引号。
const sampleStr = "Alan said, \"Peter is learning JavaScript\".";

26 用单引号引用字符串
JavaScript 中的字符串可以使用开始和结束都是同类型的单引号或双引号表示。
与其他一些编程语言不同的是，单引号和双引号的功能在 JavaScript 中是相同的。
字符串在开头和结尾都有相同的引号，如果在中间使用了相同的引号，字符串会提前中止并抛出错误。

const goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"';
const badStr = 'Finn responds, "Let's go!"';
在这里 badStr 会产生一个错误。

在上面的 goodStr 中，通过使用反斜杠 \ 转义字符可以安全地使用两种引号。

const myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

27 转义字符
代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行符
\r 回车符
\t 制表符
\b 退格
\f 换页符

使用转义序列把下面三行文本赋值给一个变量 myStr。

FirstLine
\SecondLine
ThirdLine

const myStr = "FirstLine\n\t\\SecondLine\nThirdLine";

28 用加号运算符连接字符串
在 JavaScript 中，当 + 操作符被用于一个 String 类型的值的时候，它被称作拼接操作符。
拼接操作不会在两个字符串之间添加空格。需要自己在字符串里面添加。
const myStr = "This is the start." + " " + "This is the end.";

29 用 += 运算符连接字符串
可以使用 += 运算符来拼接字符串到现有字符串变量的结尾。
例如：

let ourStr = "I come first. ";
ourStr += "I come second.";
ourStr 的值为字符串 I come first. I come second.

30 用变量构造字符串
通过使用连接运算符（+），你可以插入一个或多个变量来组成一个字符串。
例如：
const ourName = "freeCodeCamp";
const ourStr = "Hello, our name is " + ourName + ", how are you?";

31 将变量追加到字符串
可以使用加且赋值（+=）运算符将字符串追加到字符串的末尾。

示例：
const anAdjective = "awesome!";
let ourStr = "freeCodeCamp is ";
ourStr += anAdjective;

32 查找字符串的长度
可以通过在字符串变量或字符串后面写上 .length 来获得 String 的长度。
console.log("Alan Peter".length);
字符串 10 将会出现在控制台中。

33 使用方括号查找字符串中的第一个字符
方括号表示法（Bracket notation）是一种在字符串中的特定 index（索引）处获取字符的方法。
示例：
const firstName = "Charles";
const firstLetter = firstName[0];
firstLetter 值为字符串 C 。

34 了解字符串的不变性
在 JavaScript 中，字符串（String）的值是不可变的（immutable），这意味着一旦字符串被创建就不能被改变。
只是字符串字面量 string literal 的各个字符不能被改变。 改变 myStr 的唯一方法是重新给它赋一个值，例如：
let myStr = "Bob";
myStr = "Job";

35 使用方括号查找字符串中的第 N 个字符
可以使用方括号（ bracket notation）来获得一个字符串中的其他位置的字符。
程序是从 0 开始计数，所以获取第一个字符实际上是第零个字符串。

36 使用方括号查找字符串中的最后一个字符
要获取字符串的最后一个字符，可以用字符串的长度减 1 的索引值。
示例：
const firstName = "Ada";
const lastLetter = firstName[firstName.length - 1];

37 使用方括号查找字符串中的倒数第 N 个字符
可以使用 firstName[firstName.length - 3] 获取 const firstName = "Augusta" 字符串的倒数第三个字母的值

38 填词造句
使用字符串连接运算符 + 来拼接字符串变量：myNoun、myAdjective、myVerb 和 myAdverb 来构建一个新字符串。
const myNoun = "dog";
const myAdjective = "big";
const myVerb = "ran";
const myAdverb = "quickly";

// 只修改这一行下面的代码
const wordBlanks = "My " + myNoun + " is " + myAdjective + " and " + myVerb + " " + myAdverb + "."; // 修改这一行

39 使用 JavaScript 数组将多个值存储在一个变量中
以左方括号开始定义一个数组，以右方括号结束，里面每个元素之间用逗号隔开，例如：
const sandwich = ["peanut butter", "jelly", "bread"];

40 将一个数组嵌套在另一个数组中
可以在其他数组中嵌套数组，如：
const teams = [["Bulls", 23], ["White Sox", 45]];
这也叫做多维数组（multi-dimensional array）。

41 通过索引访问数组中的数据
可以使用索引（indexes）来访问数组中的数据。数组索引与字符串一样使用方括号来表示，索引一样是从 0 开始（zero-based）的
const myArray = [50, 60, 70];
const myData = myArray[0];

42 通过索引修改数组中的数据
与字符串不同，数组的条目是 可变的 并且可以自由更改，即使数组是用 const 声明的
const myArray = [18, 64, 99];
myArray[0] = 45;

43 使用索引访问多维数组
可以把多维数组看作成是数组中的数组。 使用方括号表示法访问数组时，第一个方括号访问的是数组的最外层（第一层），第二个方括号访问的是数组的第二层，以此类推。

例如：

const arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[[10, 11, 12], 13, 14]
];

arr[3];
arr[3][0];
arr[3][0][1];
arr[3] 为 [[10, 11, 12], 13, 14]，arr[3][0] 为 [10, 11, 12]，并且 arr[3][0][1] 为 11。

44 使用 push() 操作数组
一个将数据添加到数组末尾的简单方法是 push() 函数。
.push() 接受一个或多个参数（parameters），并把它压入到数组的末尾。
const myArray = [["John", 23], ["cat", 2]];
myArray.push(["dog", 3]);

　　

45  使用 pop() 操作数组
改变数组中数据的另一种方法是用 .pop() 函数。
.pop() 函数用来弹出一个数组末尾的值。 我们可以把这个弹出的值赋给一个变量存储起来。 换句话说就是 .pop() 函数移除数组末尾的元素并返回这个元素。
数组中任何类型的元素（数值，字符串，甚至是数组）都可以被弹出来 。
const threeArr = [1, 4, 6];
const oneDown = threeArr.pop();
console.log(oneDown);
console.log(threeArr);
第一个 console.log 将显示值 6，第二个将显示值 [1, 4]。

46  使用 shift() 操作数组
想要移出第一个元素要怎么办呢？这时候我们就需要 .shift() 了。
它的工作原理就像 .pop()，但它移除的是第一个元素，而不是最后一个。
示例：
const ourArray = ["Stimpson", "J", ["cat"]];
const removedFromOurArray = ourArray.shift();
removedFromOurArray 值为 Stimpson，ourArray 值为 ["J", ["cat"]]

47  unshift（移入）一个元素到数组的头部。

unshift() 在数组的头部添加元素。
示例：
const ourArray = ["Stimpson", "J", "cat"];
ourArray.shift();
ourArray.unshift("Happy");
在 shift、ourArray 后值为 ["J", "cat"]。 在 unshift、ourArray 后值为 ["Happy", "J", "cat"]。

48  购物清单
创建一个名叫 myList 的购物清单。 清单的数据格式就是多维数组。
每个子数组中的第一个元素应该是购买的物品名称。 第二个元素应该是物品的数量，类似于：
const myList = [['apple', 10], ['peach', 8], ['banana', 50], ['orange', 30], ['dog', 2]];

49  用函数编写可重用代码
在 JavaScript 中，我们可以把代码的重复部分抽取出来，放到一个函数中。
通过函数名加上后面的小括号来调用（invoke）这个函数
举个例子：
function reusableFunction() {
  console.log('Hi World');
}
reusableFunction();

50  将值传递给带有参数的函数
形参：函数中的占位符称为形参。
实参：调用函数时的传递的实际值称为实参。
这是带有两个形参的函数，param1 和 param2：
function testFun(param1, param2) {
  console.log(param1, param2);
}
testFun（“Hello”，“World”）；

51  使用 return 给函数返回值
我们可以通过函数的参数（arguments）把值传入函数， 也可以使用 return 语句把数据从一个函数中传出来。
示例
function plusThree(num) {
  return num + 3;
}
const answer = plusThree(5);
answer 的值为 8。

52  全局作用域和函数
在 JavaScript 中，作用域涉及到变量的作用范围。 
在函数外定义的变量具有 全局 作用域。 这意味着，具有全局作用域的变量可以在代码的任何地方被调用。
未使用 let 或 const 关键字声明的变量会在 global 范围内自动创建。 当在代码其他地方无意间定义了一个变量，刚好变量名与全局变量相同，这时会产生意想不到的后果。 你应该总是用 let 或 const 声明你的变量。

　　

53  局部作用域和函数
在一个函数内声明的变量，以及该函数的参数都具有局部（local）作用域。 这意味着它们只在该函数内可见。
这是在函数 myTest 内声明局部变量 loc 的例子：
function myTest() {
  const loc = "foo";
  console.log(loc);
}
myTest();
console.log(loc);
myTest() 函数调用将在控制台中显示字符串 foo。 console.log(loc) 行（在 myTest 函数之外）将抛出错误，因为 loc 未在函数之外定义。

54  函数中的全局作用域和局部作用域
一个程序中有可能具有相同名称的局部变量 和全局变量。 在这种情况下，局部变量将会优先于全局变量。
下面为例：
const someVar = "Hat";
function myFun() {
  const someVar = "Head";
  return someVar;
}
函数 myFun 将会返回字符串 Head，因为局部变量的优先级更高。

55  函数也可以返回 undefined
函数一般用 return 语句来返回值，但这不是必须的。 在函数没有 return 语句的情况下，当你调用它时，该函数会执行内部代码，返回的值是 undefined。
示例
let sum = 0;
function addSum(num) {
  sum = sum + num;
}
addSum(3);
addSum 是一个没有 return 语句的函数。 该函数将更改全局变量 sum，函数的返回值为 undefined。

56  使用返回值赋值
如果你还记得我们在使用赋值运算符存储值中的讨论的话，等号右侧的所有操作都会在赋值之前完成。 这意味着我们可以获取函数的返回值，并将其赋值给一个变量。
假设我们有一个预先定义的函数 sum ，它将两个数相加，然后：
ourSum = sum(5, 12);
将调用 sum 函数，该函数返回 17 的值并将其分配给 ourSum 变量。

57  排队
在计算机科学中队列（queue）是一个抽象的数据结构（Data Structure），队列中的条目都是有秩序的。 新的条目会被加到队列的末尾，旧的条目会从队列的头部被移出。
写一个函数 nextInLine，用一个数组（arr）和一个数字（item）作为参数。
把数字添加到数组的结尾，然后移出数组的第一个元素。
最后 nextInLine 函数应该返回被删除的元素。
function nextInLine(arr, item) {
  // 只修改这一行下面的代码
arr.push(item);
item = arr.shift();
  return item;
  // 只修改这一行上面的代码
}
// 设置
const testArr = [1, 2, 3, 4, 5];
// 显示代码
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6));
console.log("After: " + JSON.stringify(testArr));
  
58  理解布尔值
另一种数据类型是布尔（Boolean）。 布尔值只能是两个值中的一个：true 或者 false。 它非常像电路开关，true 是 “开”，false 是 “关”。 这两种状态是互斥的。
注意： 布尔值是不带引号的。 字符串 "true" 和 "false" 不是布尔值，在 JavaScript 中也没有特殊含义。

59  用 if 语句来表达条件逻辑
if 语句用于在代码中做出决定。 关键字 if 告诉 JavaScript 在小括号中的条件为真的情况下去执行定义在大括号里面的代码。 这种条件被称为 Boolean 条件，因为他们只可能是 true（真）或 false（假）。
当条件的计算结果为 true，程序执行大括号内的语句。 当布尔条件的计算结果为 false，大括号内的代码将不会执行。

60  相等运算符
在 JavaScript 中，有很多 相互比较的操作。 所有这些操作符都返回一个 true 或 false 值。
最基本的运算符是相等运算符：==。 相等运算符比较两个值，如果它们是相等，返回 true，如果它们不相等，返回 false。 值得注意的是相等运算符不同于赋值运算符（=），赋值运算符是把等号右边的值赋给左边的变量。

61  严格相等运算符
严格相等运算符（===）是相对相等操作符（==）的另一种比较操作符。 与相等操作符转换数据两类型不同，严格相等运算符不会做类型转换。
如果比较的值类型不同，那么在严格相等运算符比较下它们是不相等的，会返回 false 。

62  比较不同值
如果要比较的值不是同一类型，相等运算符会先执行数据类型转换，然后比较值。 而严格相等运算符只比较值，不会进行数据类型转换。

63  不等运算符
不相等运算符（!=）与相等运算符是相反的。 这意味着不相等并返回 false 的地方，用相等运算符会返回 true，反之亦然。 与相等运算符类似，不相等运算符在比较的时候也会转换值的数据类型。
示例
1 !=  2    // true
1 != "1"   // false
1 != '1'   // false
1 != true  // false
0 != false // false

64  严格不等运算符
严格不相等运算符（!==）与全等运算符是相反的。 这意味着严格不相等并返回 false 的地方，用严格相等运算符会返回 true，反之亦然。 严格不相等运算符不会转换值的数据类型。
示例
3 !==  3  // false
3 !== '3' // true
4 !==  3  // true

　　

80  从函数返回布尔值
你应该还记得相等运算符这道挑战题。 在那里我们提到，所有比较操作符都会返回 boolean：要么是 true 要么是 false。
有时人们通过 if/else 语句来做比较，像这样。
function isEqual(a, b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}
但有更好的方式来达到相同的效果。 既然 === 返回 true 或 false 我们可以直接返回比较结果：
function isEqual(a, b) {
  return a === b;
}

81  函数执行到 return 语句就结束
当代码执行到 return 语句时，函数返回一个结果就结束运行了，return 后面的语句不会执行。
示例
function myFun() {
  console.log("Hello");
  return "World";
  console.log("byebye")
}
myFun();
以上将在控制台中显示字符串 Hello 并返回字符串 World。 字符串 byebye 将永远不会在控制台中显示，因为函数在 return 语句处就退出了。

82 21点游戏

83  创建 JavaScript 对象
对象和 arrays 类似，区别在于数组使用索引来访问和修改数据，而对象中的数据是通过 properties 访问的。
对象非常适合用来存储结构化数据，可以表示真实世界中的物体，比如一只猫。
这里是一个猫对象的样本：
const cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};
在此示例中，所有属性都存储为字符串，例如 name、legs 和 tails。 然而，你也可以使用数字作为属性。 你甚至可以省略单字字符串属性中的引号，如下所示：
const anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};
然而，如果你的对象有非字符串属性的话，JavaScript 会自动将它们转为字符串。

84 通过点号表示法访问对象属性
和访问数组类似，访问对象属性有两种方式：点号表示法（.）和方括号表示法（[]）。

85  使用方括号表示法访问对象属性
访问对象属性的第二种方式是方括号表示法（[]）。 如果你想访问的属性名中包含空格，就必须使用方括号表示法来获取它的属性值。
当然，如果属性名不包含空格，也可以使用方括号表示法。

86  通过变量访问对象属性
对对象上使用方括号表示法，还可以访问对象上作为变量值存储的属性。 当你需要遍历对象的所有属性，或者根据一个变量的值查找对应的属性值时，这种写法尤其适用。
以下是一个使用变量来访问属性的例子：
const dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
};
const myDog = "Hunter";
const myBreed = dogs[myDog];
console.log(myBreed);
字符串 Doberman 将会出现在控制台中。
使用这一概念的另一种情况是：属性的名字是在程序运行期间动态收集得到的。如下所示：
const someObj = {
  propName: "John"
};
function propPrefix(str) {
  const s = "prop";
  return s + str;
}
const someProp = propPrefix("Name");
console.log(someObj[someProp]);
someProp 的值将为字符串 propName，并且字符串 John 将会出现在控制台中。
注意，当使用变量名访问属性时，我们没有使用引号包裹它，因为我们正在使用的是变量的值，而不是变量的名字。

87  更新对象属性
在你创建了 JavaScript 对象后，你可以随时更新它的属性，就像更新任何其他变量那样。 你可以使用点或中括号操作符来更新。
举个例子，让我们看看 ourDog：
const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
既然他是一个特别愉快的狗，让我们将他的名字更改为字符串 Happy Camper。 这有两种方式来更新对象的 name 属性： ourDog.name = "Happy Camper"; 或 ourDog["name"] = "Happy Camper";。更新后，ourDog.name 的值就不再是 Camper，而是 Happy Camper。

88  给 JavaScript 对象添加新属性
你也可以像更改属性一样给 JavaScript 对象添加属性。
这里展示了如何给 ourDog 添加一个属性 bark：
ourDog.bark = "bow-wow";
或者
ourDog["bark"] = "bow-wow";
现在，当我们执行 ourDog.bark 时，就能得到他的叫声，bow-wow。
例如：
const ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
ourDog.bark = "bow-wow";

89  删除对象的属性
我们同样可以删除对象的属性，例如：
delete ourDog.bark;
可以使用点操作符或者中括号操作符。

90  使用对象进行查找
对象和字典一样，可以用来存储键/值对。 如果数据是扁平的，你可以用对象来查找你想要的值，而不是链式使用 switch 或 if/else 语句。 当你知道你的输入数据在某个范围时，这种查找方式极为有效。
这是简单的反向字母表：
const alpha = {
  1:"Z",
  2:"Y",
  3:"X",
  4:"W",
  24:"C",
  25:"B",
  26:"A"
};
alpha[2];
alpha[24];
const value = 2;
alpha[value];
alpha[2] 是字符串 Y，alpha[24] 是字符串 C，alpha[value] 是字符串 Y。