第一章 基础与变量

1.1 语句、标识符

1.1.1 语句

  1. var num = 10;   //num：自定义、变量（命名必须有具体意义）

关键词：var

1.1.2 标识符

最常见的标识符就是变量名
注：所有代码，除了字符串外，都必须在英文状态下写

1.2 变量与常量

1.2.1 变量提升

所有变量的变量声明语句，都会被提升到代码的头部，这就叫变量的提升。
undefined：声明（定义）没有赋值

1.2.2 常量

使用const声明（定义）常量后，常量无法改变（ES6）
报错：Assignment to constant variable

1.2.3 控制台输出语句

console.log( 变量 )

1.3 JS引入方式

1.3.1 嵌入在HTML文件中的js文件
1.3.2 引入本地的独立js文件
“./”索引当前文件
1.3.3 引入网络来源文件，也被称为CDN（速度快，使用比较少）

1.4 JS注释方式

1.4.1 //单行注释
1.4.2 /
多行注释
var num = 20;
/

1.5 JS打印方式

1.5.1 弹窗形式

  1. alert("hello world");

1.5.2 浏览器中显示

  1. document.write("hello world");

1.5.3 控制台显示

  1. console.log("hello world");

第二章 运算符、数据类型和流程循环语句

2.1 数据类型

1）数值（number）：整数和小数（比如1和3.14）
2）字符串（string）：文本（比如Hello World）
注：单双引号必须成对出现
3）布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
4）undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
5）null：表示空值，即为此处的值为空
6）对象（object）：各种值组成的集合

2.2 typeof关键字

typeof作用：检测数据类型

  1. var num = 10;
  2. var str = "Hello World";
  3. console.log( typeof num ); // number
  4. console.log( typeof str ); // string

2.3 加法运算符

2.3.1 定义

加法运算符（+）是最常见的运算符，用来求两个数值的和。

2.3.2 规则

1） js允许非数值的相加。

  1. console.log( true + true ); //2

2） 两个字符串相加，这时加法运算符会变成连接运算符。
3） 字符+非字符，非字符会转成字符串，再连接在一起。
注：任何类型与字符串相加都会被转化成字符串

2.3.3 重载

定义：加法运算符是在运行时决定，到底是执行相加，还是执行连接。也就是说，运算子的不同，导致了不同的语法行为，这种现象称为“重载”（overload）。

  1. '3' + 4 +5  // "345"
  2. 3 +4 +'5'  // "75"

2.4 算术运算符

2.4.1 余数运算符

注：运算结果的正负号由第一个运算子的正负号决定。

  1. -1 % 2  // -1
  2. 1 % -2  // 1

2.4.2 自增和自减运算符

1）自增 ++
++n：先加再输出
n++：先输出再加
2）自减 —
—n：先减再输出
n—：先输出再减

2.5 布尔运算符

2.5.1 取反运算符 ：！

取反运算符是一个感叹号，用于将布尔值变成相反值，即true变成false，false变成true。

  1. !true  // false
  2. !false // true

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。
underfined / null / false / 0 / NaN / 空字符串（’’）

2.5.2 三元运算符 ：？true ：false

可以替换if

2.6 类型转换

JavaStript是一种动态类型语言，变量没有类型限制，可以随时赋予任意值。

2.6.1 强制转换

强制转换主要指使用Number、String、Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。
1）Number( )：函数、方法、包装类型

  1. console.log( typeof Number('4') );  // number

NaN：在数字类型转换失败的时候呈现的结果
2）String函数可以将任意类型的值转化成字符串。
String方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。
3）Boolean函数可以将任意类型的值转为布尔值。
它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。
undefined / null / -0或+0 / NaN / ‘’（空字符串）

2.6.2 自动转换

遇到以下两种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。
1）不同类型的数据互相运算。

  1. 123 + 'abc'  //  "123abc"

2）对非布尔值类型的数据求布尔值。

  1. if ('abc') {   
  2.         console.log('hello')
  3. }

2.7 条件语句

2.7.1 条件语句if

表达式：if( 布尔值 ){
语句；
}

2.7.2 条件语句if…else

表达式：if( 布尔值 ){
语句；
}else{
语句；
}
对同一个变量进行多次判断时，多个if…else语句可以连写在一起。

2.7.3 条件语句Switch

多个if…else连在一起使用的时候，可以转为使用更方便的switch结构。
表达式：switch (表达式) {
case表达式:
语句；
break;
case表达式:
语句；
break;
…
default:
语句；
}
注：1）case代码块之中没有break语句，导致不会跳出switch结构，而会一直执行下去。
2）switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。

2.8 循环语句

2.8.1 循环语句for

表达式：for ( 初始化表达式; 条件; 递增表达式 )
语句
// 或者
for ( 初始化表达式; 条件; 递增表达式 ) {
语句
}

2.8.2 循环语句while

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
表达式：while ( 条件 ) {
语句;
}

2.8.3 循环语句do…while

do…while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。
表达式：do {
语句
} while ( 条件 );

2.8.4 break 语句和 continue 语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
1）break
break语句用于跳出代码块或循环。
2）continue
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。
break跳出循环不再执行，continue跳出当前循环，进行下一次循环。

第三章 数组与字符串

3.1 字符串

3.1.1 属性

1）字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。
2）单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。
3）如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。

  1. 'Did she say \'Hello\'?'

4）字符串默认只能写在一行内，分成多行将会报错。
如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。“/”
5）连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

3.1.2 转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。
需要用反斜杠转义的特殊字符，主要有下面这些。
\0 ：null（\u0000） \t ：制表符（\u0009）
\b ：后退键（\u0008） \v ：垂直制表符（\u000B）
\f ：换页符（\u000C） ‘ ：单引号（\u0027）
\n ：换行符（\u000A） “ ：双引号（\u0022）
\r ：回车键（\u000D） \ ：反斜杠（\u005C）

3.1.3 length 属性

length属性返回字符串的长度，该属性也是无法改变的。 

  1. var s = 'hello';         
  2. s.length // 5 
  3. s.length = 3;         
  4. s.length // 5

3.1.4 Base64 转码

1）概念
有时，文本里面包含一些不可打印的符号，比如 ASCII 码0到31的符号都无法打印出来，这时可以使用 Base64 编码，将它们转成可以打印的字符。有时需要以文本格式传递二进制数据，那么也可以使用 Base64 编码。
所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理。
2）JavaScript 原生提供两个 Base64 相关的方法。
btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值
注：这两个方法不适合非 ASCII 码的字符（中文等），会报错。
3）要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。
function b64Encode( str ) {
return btoa( encodeURIComponent(str) );
}
function b64Decode(str) {
return decodeURIComponent( atob(str) );
}

3.2 字符串的方法与属性

3.2.1 方法

1）String.prototype.charAt()
charAt方法返回指定位置的字符(下标)，参数是从0开始编号的位置。

  1. var a = "hello";
  2. console.log( a.charAt(2) );   // l

2）String.prototype.concat()
concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。

  1. var b = "hello"
  2. var c = "world"
  3. var f = "!"
  4. console.log( b.concat(c, f) );  //  helloworld!

3）String.prototype.slice()
slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。

  1. 'JavaScript'.slice(0, 4)  //   "Java"

如果省略第二个参数，则表示子字符串一直到原字符串结束。

  1. 'JavaScript'.slice(4)  //   "Script"

4）String.prototype.substring()
substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。

  1. 'JavaScript'.substring(0, 4)  //   "Java"

如果省略第二个参数，则表示子字符串一直到原字符串结束。

  1. 'JavaScript'.substring(4)  //   "Script"

5）String.prototype.substr()
substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。

  1. 'JavaScript'.substr(4, 6)  //   "Script"     这里6是长度

substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
如果省略第二个参数，则表示子字符串一直到原字符串结束。

  1. 'JavaScript'.substr(4)  //   "Script"

6）String.prototype.indexOf()
indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。

  1. 'hello world'.indexOf('o')   //  4 
  2. 'JavaScript'.indexOf('script')   //  -1

indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。

  1. 'hello world'.indexOf('o', 6)   //   7

7）String.prototype.trim()
trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。

  1. '  hello world  '.trim()   //   "hello world"

8）String.prototype.toLowerCase()，String.prototype.toUpperCase()
toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。

9）String.prototype.search()，String.prototype.replace()
search方法的用法基本等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。

  1. 'cat, bat, sat, fat'.search('at') // 1

replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。

  1. 'aaa'.replace('a', 'b') // "baa"

10）String.prototype.split()
split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

  1. 'a|b|c'.split('|') // ["a", "b", "c"]

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

  1. 'a|b|c'.split('') // ["a", "|", "b", "|", "c"]

如果省略参数，则返回数组的唯一成员就是原字符串。

  1. 'a|b|c'.split() // ["a|b|c"]

3.3 数组

3.3.1 概念

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。

  1. var arr = ['a', 'b', 'c'];

除了在定义时赋值，数组也可以先定义后赋值。

  1. var arr = [];
  3. arr[0] = 'a';
  4. arr[1] = 'b';
  5. arr[2] = 'c';

任何类型的数据，都可以放入数组。

  1. var arr = [
  2.   100,
  3.   [1, 2, 3],
  4.   false
  5. ];

数组的本质 本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

  1. typeof [1, 2, 3] // "object"

3.3.2 length属性

数组的length属性，返回数组的成员数量。

  1. ['a', 'b', 'c'].length // 3

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。

  1. var arr = [ 'a', 'b', 'c' ];
  2. arr.length // 3
  4. arr.length = 2;
  5. arr // ["a", "b"]

常用：清空数组的一个有效方法，就是将length属性设为0。

  1. var arr = [ 'a', 'b', 'c' ];
  3. arr.length = 0;
  4. arr // []

3.3.3 for…in 循环和数组的遍历

for…in循环不仅可以遍历对象，也可以遍历数组，毕竟数组只是一种特殊对象。

  1. var a = [1, 2, 3];
  3. for (var i in a) {
  4.   console.log(a[i]);
  5. }
  6. // 1
  7. // 2
  8. // 3

数组的遍历可以考虑使用for循环或while循环。

  1. var a = [1, 2, 3];
  3. // for循环
  4. for(var i = 0; i < a.length; i++) {
  5.   console.log(a[i]);
  6. }
  8. // while循环
  9. var i = 0;
  10. while (i < a.length) {
  11.   console.log(a[i]);
  12.   i++;
  13. }

3.4 数组常用属性和方法

3.4.1 构造函数

Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

  1. var arr = new Array(2);
  2. arr.length // 2
  3. arr // [ empty x 2 ]

3.4.2 Array.isArray()

Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。

  1. var arr = [1, 2, 3];
  3. typeof arr // "object"
  4. Array.isArray(arr) // true

上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以识别数组。

3.4.3 valueOf()，toString()

valueOf方法是一个所有对象都拥有的方法，表示对该对象求值。不同对象的valueOf方法不尽一致，数组的valueOf方法返回数组本身。

  1. var arr = [1, 2, 3];
  2. arr.valueOf() // [1, 2, 3]

toString方法也是对象的通用方法，数组的toString方法返回数组的字符串形式。

  1. var arr = [1, 2, 3];
  2. arr.toString() // "1,2,3"
  4. var arr = [1, 2, 3, [4, 5, 6]];
  5. arr.toString() // "1,2,3,4,5,6"

3.4.4 push()，pop()

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

  1. var arr = [];
  3. arr.push(1) // 1
  4. arr.push('a') // 2
  5. arr.push(true, {}) // 4
  6. arr // [1, 'a', true, {}]

上面代码使用push方法，往数组中添加了四个成员。
pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

  1. var arr = ['a', 'b', 'c'];
  3. arr.pop() // 'c'
  4. arr // ['a', 'b']

3.4.5 shift()，unshift()

shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

  1. var a = ['a', 'b', 'c'];
  3. a.shift() // 'a'
  4. a // ['b', 'c']

shift方法可以遍历并清空一个数组。

  1. var list = [1, 2, 3, 4, 5, 6];
  2. var item;
  4. while (item = list.shift()) {
  5.   console.log(item);
  6. }
  8. list // []

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

  1. var a = ['a', 'b', 'c'];
  3. a.unshift('x'); // 4
  4. a // ['x', 'a', 'b', 'c']

unshift方法可以接受多个参数，这些参数都会添加到目标数组头部。

  1. var arr = [ 'c', 'd' ];
  2. arr.unshift('a', 'b') // 4
  3. arr // [ 'a', 'b', 'c', 'd' ]

3.4.6 join()

join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

  1. var a = [1, 2, 3, 4];
  3. a.join(' ') // '1 2 3 4'
  4. a.join(' | ') // "1 | 2 | 3 | 4"
  5. a.join() // "1,2,3,4"

3.4.7 concat()

concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

  1. ['hello'].concat(['world'])
  2. // ["hello", "world"]
  4. ['hello'].concat(['world'], ['!'])
  5. // ["hello", "world", "!"]

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

  1. [1, 2, 3].concat(4, 5, 6)
  2. // [1, 2, 3, 4, 5, 6]

3.4.8 reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

  1. var a = ['a', 'b', 'c'];
  3. a.reverse() // ["c", "b", "a"]
  4. a // ["c", "b", "a"]

3.4.9 slice()

slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变。

  1. arr.slice(start, end);

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。

  1. var a = ['a', 'b', 'c'];
  3. a.slice(0) // ["a", "b", "c"]
  4. a.slice(1) // ["b", "c"]
  5. a.slice(1, 2) // ["b"]
  6. a.slice(2, 6) // ["c"]
  7. a.slice() // ["a", "b", "c"]

3.4.10 splice()

splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

  1. arr.splice(start, count, addElement1, addElement2, ...);

splice的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

  1. var a = ['a', 'b', 'c', 'd', 'e', 'f'];
  2. a.splice(4, 2) // ["e", "f"]
  3. a // ["a", "b", "c", "d"]

上面代码从原数组4号位置，删除了两个数组成员。

  1. var a = ['a', 'b', 'c', 'd', 'e', 'f'];
  2. a.splice(4, 2, 1, 2) // ["e", "f"]
  3. a // ["a", "b", "c", "d", 1, 2]

上面代码除了删除成员，还插入了两个新成员。

3.4.11 sort()

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

  1. ['d', 'c', 'b', 'a'].sort()
  2. // ['a', 'b', 'c', 'd']
  4. [4, 3, 2, 1].sort()
  5. // [1, 2, 3, 4]
  7. [11, 101].sort()
  8. // [101, 11]
  10. [10111, 1101, 111].sort()
  11. // [10111, 1101, 111]

上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。

3.4.12 indexOf()

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1

  1. var a = ['a', 'b', 'c'];
  3. a.indexOf('b') // 1
  4. a.indexOf('y') // -1

indexOf方法还可以接受第二个参数，表示搜索的开始位置。

  1. ['a', 'b', 'c'].indexOf('a', 1) // -1