月份：2018年1月

JS监听document是否加载完成

跨浏览器且纯JavaScript检测document是否加载完成的方法是使用readyState.

1
2
3
if (document.readyState === 'complete') {
  // 页面已完全加载
}

这样可以在document完全加载时监测到…

1
2
3
4
5
6
let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
clearInterval(stateCheck);
// document ready
  }
}, 100);

或者使用onreadystatechange

1
2
3
4
5
document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
// document ready
  }
};

使用document.readyState === 'interactive'监听DOM是否加载完成。

JavaScript标准库之数组

学习任何编程语言，数组都是绕不过去的坎，每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下，内容较多，而且会继续补充，希望这一篇文章可以把数组的知识一网打尽。

1. 数组的简单概念

1.1 数组是什么呢？

编程总要和数据打交道，常见的普通的数据由基本数据类型可以定义，一些具有多重属性、内容的数据就需要复杂的数据类型去定义，也就是对象来定义，数组也是对象的一种。

  • 为了方便理解，我们可以认为数组是具有一定顺序的复杂数据的组合(与对象的无序区别)，每个位置对应一个索引，索引从0开始，具有length属性，而且length属性是可变的。

1.2 数组如何定义

  • 第一种方法是通过Array构造函数来定义(该方法并不常用)

1
2
3
4
5
6
7
var arr1 = new Array(3)
undefined
arr1
(3) [empty × 3]
    length: 3
    __proto__: Array(0)
 

以上是控制台打印结果，构造了一个长度为3的、每个元素为空的数组。

以上的写法有个小bug 虽然元素为空，但是正常来说，索引应该存在的，但是事实是 索引竟然不存在

1
2
3
4
5
6
7
8
9
10
11
12
arr1[0]
undefined
arr1[1]
undefined
arr1[2]
undefined
0 <span class="hljs-keyword">in</span> arr1
<span class="hljs-literal">false</span>
1 <span class="hljs-keyword">in</span> arr1
<span class="hljs-literal">false</span>
2 <span class="hljs-keyword">in</span> arr1
 

索引0、1、2处是undefined，完全合理，但是索引不存在，很奇怪

而且new不写也是一样的结果。

1
2
3
4
5
6
7
var arr2 = Array(3)
undefined
arr2
(3) [empty × 3]
    length: 3
    __proto__: Array(0)
 

  • 但是采用构造函数的这种方法容易产生一些歧义，不同的参数个数，会产生如下五种不同的结果。
1.2.1 构造函数不写参数

1
2
3
4
5
6
7
var arr3 = new Array
undefined
arr3
[]
    length:0
    __proto__:Array(0
 

此时构造出空的数组，而且发现构造函数的()写不写都可以

1.2.2 构造函数写1个正整数参数

那这个正整数参数就是构造出来的数组的长度。

1.2.3 构造函数参数是一个非正整数(字符串、boolean、对象等其他值)

1
2
3
4
5
6
7
8
var arr = new Array(<span class="hljs-string">'jjj'</span>)
undefined
arr
[<span class="hljs-string">"jjj"</span>]
    0: <span class="hljs-string">"jjj"</span>
    length: 1
    __proto__: Array(0)
 

1
2
3
4
5
6
7
8
var arr = new Array(<span class="hljs-literal">false</span>)
undefined
arr
[<span class="hljs-literal">false</span>]
    0: <span class="hljs-literal">false</span>
    length: 1
    __proto__: Array(0)
 

1
2
3
4
5
6
7
8
var arr = new Array({0: <span class="hljs-string">'我是一个对象'</span>})
undefined
arr
[{…}]
    0: {0: <span class="hljs-string">"我是一个对象"</span>}
    length: 1
    __proto__: Array(0)
 

这个非正整数就是数组的内容

1.2.4 构造函数写多个参数

1
2
3
4
5
6
7
8
9
var arr4 = new Array(1, 2)
undefined
arr4
(2) [1, 2]
    0: 1
    1: 2
    length: 2
    __proto__: Array(0)
 

此时直接构造出0索引是元素1、1索引是元素2的数组对象。

1
2
3
4
5
6
7
8
9
10
11
var arr4 = new Array(<span class="hljs-string">'aa'</span>, <span class="hljs-string">'ff'</span>, 10, 0)
undefined
arr4
(4) [<span class="hljs-string">"aa"</span>, <span class="hljs-string">"ff"</span>, 10, 0]
    0: <span class="hljs-string">"aa"</span>
    1: <span class="hljs-string">"ff"</span>
    2: 10
    3: 0
    length: 4
    __proto__:Array(0)
 

即多参数时，所有参数都是返回的新数组的成员

1.2.5 构造函数参数是非正整数，报错

1
2
3
4
5
6
7
8
9
new Array(-1)
VM376:1 Uncaught RangeError: Invalid array length
    at &lt;anonymous&gt;:1:1
(anonymous) @ VM376:1
new Array(3.2)
VM377:1 Uncaught RangeError: Invalid array length
    at &lt;anonymous&gt;:1:1
(anonymous) @ VM377:1
 

1.2.6 数组定义的正确方法

为了避免上述的各种奇怪理解，实际中直接用字面量定义数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [<span class="hljs-string">'这样子'</span>, <span class="hljs-string">'定义'</span>, <span class="hljs-string">'is'</span>, <span class="hljs-literal">true</span>, 1, {<span class="hljs-string">'good'</span>: <span class="hljs-string">'我是数组索引为5的元素的值'</span>}]
undefined
arr
(6) [<span class="hljs-string">"这样子"</span>, <span class="hljs-string">"定义"</span>, <span class="hljs-string">"is"</span>, <span class="hljs-literal">true</span>, 1, {…}]
    0: <span class="hljs-string">"这样子"</span>
    1: <span class="hljs-string">"定义"</span>
    2: <span class="hljs-string">"is"</span>
    3: <span class="hljs-literal">true</span>
    4: 1
    5: {good: <span class="hljs-string">"我是数组索引为5的元素的值"</span>}
    length: 6
    __proto__:Array(0)
 
 

2. 数组的length属性解疑

如果你是初学者，一定要记住数组的length属性和这个数组的元素个数无关，爱几个元素几个元素，length并不是计数的作用。这是我自学时对数组长度最大的误解。 正确的理解是：数组的length属性等于最大正整数索引 + 1 而且数组的索引可以改变，那么length属性也是一个动态的值，可以变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = []
undefined
arr
[]
    length:0
    __proto__:Array(0)
arr[10] = <span class="hljs-string">'我是第10个元素，我前面没有元素，但是数组的长度绝对是11，你信不信'</span>
<span class="hljs-string">"我是第10个元素，我前面没有元素，但是数组的长度绝对是11，你信不信"</span>
arr
(11) [empty × 10, <span class="hljs-string">"我是第10个元素，我前面没有元素，但是数组的长度绝对是11，你信不信"</span>]
    10:<span class="hljs-string">"我是第10个元素，我前面没有元素，但是数组的长度绝对是11，你信不信"</span>
    length:11
    __proto__:Array(0)
 

这个例子一开始是个空数组，长度是0，直接给他一个索引10，可以发现长度立马变为11。

1
2
3
4
5
arr[100] = <span class="hljs-string">'这次数组长度绝对是101'</span>
<span class="hljs-string">"这次数组长度绝对是101"</span>
arr.length
101
 

通过以上的例子，我们反向推理，可以明白数组长度根本不连续，是动态变化的，即数组长度是可写的。唯一的不变真理是，它的长度永远等于最大正整数索引+1。

2.1 把数组清空的方法

由以上知识可以知道数组长度可以人为改变，进而大胆的猜想，改变长度会不会把数组清空呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var arrDemo = [<span class="hljs-string">'this'</span>, <span class="hljs-string">'is'</span>, <span class="hljs-string">'test'</span>]
undefined
arrDemo
(3) [<span class="hljs-string">"this"</span>, <span class="hljs-string">"is"</span>, <span class="hljs-string">"test"</span>]
    0: <span class="hljs-string">"this"</span>
    1: <span class="hljs-string">"is"</span>
    2: <span class="hljs-string">"test"</span>
    length: 3
    __proto__: Array(0)
arrDemo[<span class="hljs-string">'length'</span>] = 2
2
arrDemo
(2) [<span class="hljs-string">"this"</span>, <span class="hljs-string">"is"</span>]
    0: <span class="hljs-string">"this"</span>
    1: <span class="hljs-string">"is"</span>
    length: 2
    __proto__: Array(0)
arrDemo[<span class="hljs-string">'length'</span>] = 1
1
arrDemo
[<span class="hljs-string">"this"</span>]
    0: <span class="hljs-string">"this"</span>
    length: 1
    __proto__: Array(0)
arrDemo[<span class="hljs-string">'length'</span>] = 0
0
arrDemo
[]
    length: 0
    __proto__: Array(0)
 

把数组length设为0，证明可以清空数组。

2.2 有趣的一点

由于数组本质上是对象的一种，所以我们可以为数组添加属性，但是这不影响length属性的值。 一定不要有思维定式，以为添加几个新元素，长度就会加几个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var arr = []
undefined
arr
[]
    length:0
    __proto__:Array(0)
arr[<span class="hljs-string">'add'</span>] = <span class="hljs-string">'我加一个新元素，长度绝对还是0'</span>
<span class="hljs-string">"我加一个新元素，长度绝对还是0"</span>
arr
[add: <span class="hljs-string">"我加一个新元素，长度绝对还是0"</span>]
    add: <span class="hljs-string">"我加一个新元素，长度绝对还是0"</span>
    length:0
    __proto__:Array(0)
arr[<span class="hljs-string">'add1'</span>] = <span class="hljs-string">'我又加一个新元素，长度绝对还是0'</span>
<span class="hljs-string">"我又加一个新元素，长度绝对还是0"</span>
arr
[add: <span class="hljs-string">"我加一个新元素，长度绝对还是0"</span>, add1: <span class="hljs-string">"我又加一个新元素，长度绝对还是0"</span>]
    add: <span class="hljs-string">"我加一个新元素，长度绝对还是0"</span>
    add1: <span class="hljs-string">"我又加一个新元素，长度绝对还是0"</span>
    length: 0
    __proto__:Array(0)
 

通过这个例子，一开始元素长度为0，只要你没添加一个正整数的索引，无论你添加多少其他元素，长度永远不会变化。

  • 注意：方括号运算符里面一定要用引号，我总是手抖忘了加。

3. 伪数组(array-like object)

如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，语法上称为“类似数组的对象”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {
0: <span class="hljs-string">'a'</span>,
1: <span class="hljs-string">'b'</span>,
2: <span class="hljs-string">'c'</span>,
length: 3,
}
undefined
obj
{0: <span class="hljs-string">"a"</span>, 1: <span class="hljs-string">"b"</span>, 2: <span class="hljs-string">"c"</span>, length: 3}
    0: <span class="hljs-string">"a"</span>
    1: <span class="hljs-string">"b"</span>
    2: <span class="hljs-string">"c"</span>
    length: 3
    __proto__: Object
 
obj[0]
<span class="hljs-string">"a"</span>
obj[2]
<span class="hljs-string">"c"</span>
 

上面的对象，看着结构特别像数组，但是绝对不是数组。 因为__proto__指向的就不是Array的prototype，没有指向Array的共有属性，再怎么像也只是模仿，本质不同。不具备数组的其他方法（第四部分将要列举的方法）。

3.1 数组的本质

由伪数组的问题引出真正的数组应该具备什么特点

数组.png

__proto__必须指向数组的公有属性才是真正的数组对象。

4. 数组实例的常见简单的方法(可以无参或者参数很简单)

4.1 判断数组还是对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [<span class="hljs-string">'a'</span>]
undefined
Array.isArray(arr)
<span class="hljs-literal">true</span>
var obj = {
0: <span class="hljs-string">'a'</span>,
1: <span class="hljs-string">'b'</span>,
2: <span class="hljs-string">'c'</span>,
length: 3,
}
undefined
Array.isArray(obj)
<span class="hljs-literal">false</span>
 

Array.isArray()方法可以判断是不是数组对象，以前学过的instanceOf也可以判断。

1
2
3
4
5
arr instanceof Array
<span class="hljs-literal">true</span>
obj instanceof Array
<span class="hljs-literal">false</span>
 

所以现在有两个方法可以区分是数组还是对象了。

4.2 valueOf()，toString()

  • valueOf()返回数组本身

1
2
3
4
5
6
7
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>]
undefined
arr.valueOf()
(2) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"b"</span>]
arr.toString()
<span class="hljs-string">"a,b"</span>
 

  • toString()返回数组的字符串形式

4.3 push()

1
2
3
4
5
6
7
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>]
undefined
arr.push(<span class="hljs-string">'f'</span>)
3
arr
(3) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"b"</span>, <span class="hljs-string">"f"</span>]
 

向数组的末尾添加元素，返回添加成功后的数组的长度 会改变原数组

4.4 pop()

1
2
3
4
5
6
arr.pop()
<span class="hljs-string">"f"</span>
arr
(2) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"b"</span>]
 
 

删除数组的最后一个元素，并返回删除的这个元素。

1
2
[].pop() // undefined
 

  • 注意：对空数组使用pop方法，不会报错，而是返回undefined。 这个方法会改变原数组

push() 和pop()方法一起使用可以模拟栈的数据结构

4.5 join()

以某种形式把数组的所有成员以字符串的形式返回

1
2
3
4
5
arr
(2) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"b"</span>]
arr.join(<span class="hljs-string">'-'</span>)
<span class="hljs-string">"a-b"</span>
 

以上是以中划线的形式连接起来

1
2
3
arr.join()
<span class="hljs-string">"a,b"</span>
 

如果没有规定格式，则以逗号分隔

1
2
3
4
5
6
7
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'rr'</span>, null, undefined]
undefined
arr
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"rr"</span>, null, undefined]
arr.join()
<span class="hljs-string">"a,rr,,"</span>
 

  • 注意：如果字符串中有null和undefined的，会被转成空字符串。 该方法不会改变原数组

4.6 concat()

是一个专业合并数组的方法。

1
2
3
4
5
6
7
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'rr'</span>, null, undefined]
undefined
arr.concat([<span class="hljs-string">'rrr'</span>])
(5) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"rr"</span>, null, undefined, <span class="hljs-string">"rrr"</span>]
arr
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"rr"</span>, null, undefined]
 

把一个新数组添加到旧数组的后面，返回生成的新数组。 不会改变原数组

4.7 shift()

删除数组的第一个元素,并返回删除的那个元素

1
2
3
4
5
6
7
arr
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"rr"</span>, null, undefined]
arr.shift()
<span class="hljs-string">"a"</span>
arr
(3) [<span class="hljs-string">"rr"</span>, null, undefined]
 

会改变原数组

push()与shift()方法结合，可以模拟队列的数据结构

4.8 unshift()

在数组的第一个位置添加元素，并返回添加新元素后的数组长度

1
2
3
4
5
6
7
arr
(3) [<span class="hljs-string">"rr"</span>, null, undefined]
arr.unshift(<span class="hljs-string">'ffff'</span>)
4
arr
(4) [<span class="hljs-string">"ffff"</span>, <span class="hljs-string">"rr"</span>, null, undefined]
 

和shift()方法的作用正好相反。 一定会改变原数组

4.9 reverse()

反转数组，返回反转后的数组

1
2
3
4
5
6
7
arr
(4) [<span class="hljs-string">"ffff"</span>, <span class="hljs-string">"rr"</span>, null, undefined]
arr.reverse()
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
 

会改变原数组

4.10 slice()

提取原数组的一部分，返回一个新的数组

1
2
3
4
5
6
7
8
9
10
11
arr
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr.slice(1,3)
(2) [null, <span class="hljs-string">"rr"</span>]
arr.slice()
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr.slice(1)
(3) [null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
 

arr.slice(1,3)从索引为1的位置开始截取，到索引3停止，但是不包括索引3。 arr.slice()无参是原数组的拷贝 arr.slice(1)从索引为1的位置开始截取，到末尾。

1
2
3
4
var a = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>];
a.slice(-2) // [<span class="hljs-string">"b"</span>, <span class="hljs-string">"c"</span>]
a.slice(-2, -1) // [<span class="hljs-string">"b"</span>]
 

如果slice方法的参数是负数，则表示倒数计算的位置。 上面代码中，-2表示倒数计算的第二个位置，-1表示倒数计算的第一个位置。

slice()方法可以把伪数组变成真的数组

不会改变原数组

4.11 splice()

删除原数组的一部分成员，返回被删的元素。

1
2
3
4
5
6
7
arr
(4) [undefined, null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr.splice(1, 3)
(3) [null, <span class="hljs-string">"rr"</span>, <span class="hljs-string">"ffff"</span>]
arr
[undefined]
 

arr.splice(1,3)，从索引1开始删除，删3个元素！！！ 一定要注意和slice区分：splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

1
2
3
4
5
6
7
var arr = [<span class="hljs-string">'1'</span>, <span class="hljs-string">'aaa'</span>, <span class="hljs-string">'ff'</span>, <span class="hljs-string">'aff'</span>, 1]
undefined
arr.splice(1, 3, <span class="hljs-string">'wu'</span>, 999)
(3) [<span class="hljs-string">"aaa"</span>, <span class="hljs-string">"ff"</span>, <span class="hljs-string">"aff"</span>]
arr
(4) [<span class="hljs-string">"1"</span>, <span class="hljs-string">"wu"</span>, 999, 1]
 

arr.splice(1, 3, ‘wu’, 999)，从索引1开始删了3个元素，然后加上两个元素，’wu’和999。 负数参数同样表示数组倒数第几个位置 会改变原数组
splice()有两个变式

  • 变式1:我只是想单纯的插入一个元素

1
2
3
4
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
 

把第二个参数设为0,就可以在第2个位置插入一个元素了

  • 变式2:我只给一个参数，就是拆分数组，变为两个新数组

1
2
3
4
5
6
7
a
(5) [1, 1, 1111, 1, 10]
a.splice(2)
(3) [1111, 1, 10]
a
(2) [1, 1]
 

a.splice(2)从第三个索引处拆分这个数组。

4.12 indexOf()，lastIndexOf()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'f'</span>, <span class="hljs-string">'f'</span>, 1]
undefined
arr
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"f"</span>, <span class="hljs-string">"f"</span>, 1]
    0: <span class="hljs-string">"a"</span>
    1: <span class="hljs-string">"f"</span>
    2: <span class="hljs-string">"f"</span>
    3: 1
    length: 4
    __proto__: Array(0)
arr.indexOf(1)
3
arr.indexOf(<span class="hljs-string">'f'</span>, 3)
-1
arr.lastIndexOf(<span class="hljs-string">'f'</span>)
2
 

indexOf()，返回括号里面 的元素第一次出现的位置。 如果有两个参数则是表示搜索的位置从第二个参数开始。 如果找不到该元素，则返回-1。 lastIndexOf()返回括号里面的元素最后一次出现的位置。

  • 一个MDN的实战例子：获得数组里面某个元素出现的所有位置(利用循环和返回值-1的特点)

1
2
3
4
5
6
7
8
9
10
11
var arr = [<span class="hljs-string">'a'</span>, 0, <span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'a'</span>];
var arrTemp = []; //空数组用来存储目标元素出现的所有索引
var element = <span class="hljs-string">'a'</span>;
var index = arr.indexOf(element);
<span class="hljs-keyword">while</span>(index != -1){
arrTemp.push(index);
index = arr.indexOf(element, index + 1);
}
console.log(arrTemp);
(3) [0, 2, 4] //<span class="hljs-string">'a'</span>出现在0、2、4索引位置处
 

注意：这里有个例外 数组里面包含NaN时无法判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [<span class="hljs-string">'a'</span>, <span class="hljs-string">'f'</span>, <span class="hljs-string">'f'</span>, NaN]
undefined
arr
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"f"</span>, <span class="hljs-string">"f"</span>, NaN]
    0: <span class="hljs-string">"a"</span>
    1: <span class="hljs-string">"f"</span>
    2: <span class="hljs-string">"f"</span>
    3: NaN
    length: 4
    __proto__: Array(0)
arr.indexOf(NaN)
-1
arr.lastIndexOf(<span class="hljs-string">'NaN'</span>)
-1
 

arr数组的第四个位置是NaN,但是无法获得索引。 因为indexOf()，lastIndexOf()是严格按照===操作符来检测的，而NaN是唯一的不与自身相等的值。

1
2
3
4
5
6
7
NaN === NaN
<span class="hljs-literal">false</span>
1 === 1
<span class="hljs-literal">true</span>
<span class="hljs-string">'a'</span> === <span class="hljs-string">'a'</span>
<span class="hljs-literal">true</span>
 

奇葩啊，NaN与自己都不相等

5. 数组实例的常见复杂的方法(参数是另一个函数)

5.1 sort()

下面MDN的解释非常棒

sort() 方法在适当的位置对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var fruit = [<span class="hljs-string">'cherries'</span>, <span class="hljs-string">'apples'</span>, <span class="hljs-string">'bananas'</span>];
fruit.sort();
// [<span class="hljs-string">'apples'</span>, <span class="hljs-string">'bananas'</span>, <span class="hljs-string">'cherries'</span>]
 
var scores = [1, 10, 21, 2];
scores.sort();
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中<span class="hljs-string">"10"</span>在<span class="hljs-string">"2"</span>之前
 
var things = [<span class="hljs-string">'word'</span>, <span class="hljs-string">'Word'</span>, <span class="hljs-string">'1 Word'</span>, <span class="hljs-string">'2 Words'</span>];
things.sort();
// [<span class="hljs-string">'1 Word'</span>, <span class="hljs-string">'2 Words'</span>, <span class="hljs-string">'Word'</span>, <span class="hljs-string">'word'</span>]
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.
 

上述代码两点注意

  • 第一点是 上述代码中的第二部分的[1, 10, 2, 21]是因为 10的Unicode编码是\u0031\u0030，2的Unicode编码是\u0032，所以10排在2的前面
  • 第二点是上述代码中的第三部分的['1 Word', '2 Words', 'Word', 'word']是因为
    'Word'的Unicode编码是

1
2
\u0026\u0023\u0033\u0039\u003b\u0057\u006f\u0072\u0064\u0026\u0023\u0033\u0039\u003b
 

'word'的Unicode编码是

1
2
\u0026\u0023\u0033\u0039\u003b\u0077\u006f\u0072\u0064\u0026\u0023\u0033\u0039\u003b
 

所以 'Word'排在'word'前面。 各种编码查询站长工具
sort方法明显的会改变原数组啊

  • 我们通常不想使用默认的升序排列，sort方法可以传入函数来改变顺序。 MDN的语法是arr.sort(compareFunction) compareFunction这个函数用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。 compareFunction这个函数基本的规则是传入两个参数

1
2
3
4
<span class="hljs-keyword">function</span> compareNumbers(a, b) {
  <span class="hljs-built_in">return</span> a - b;
}
 

a,b参数比较代表的意思
compareFunction(a, b) < 0a在b之前
compareFunction(a, b) > 0b在a之前

1
2
3
4
5
6
7
var a = [1, 20, 30, -7]
undefined
a
(4) [1, 20, 30, -7]
a.sort(<span class="hljs-keyword">function</span>(a,b){<span class="hljs-built_in">return</span> b<span class="hljs-_">-a</span>})
(4) [30, 20, 1, -7]
 

降序排列。

  • 也可以根据具体需求来根据属性来排列

1
2
3
4
5
6
7
var students = [<span class="hljs-string">'小明'</span>,<span class="hljs-string">'小红'</span>,<span class="hljs-string">'小花'</span>];
var scores = { 小明: 59, 小红: 99, 小花: 80 };
students.sort(<span class="hljs-keyword">function</span>(a, b){
    <span class="hljs-built_in">return</span> scores[b] - scores[a]
});
(3) [<span class="hljs-string">"小红"</span>, <span class="hljs-string">"小花"</span>, <span class="hljs-string">"小明"</span>]
 

以上是把三个学生根据成绩从大到小排列的

5.2 map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 不影响原数组。

1
2
3
4
5
6
7
8
var arr = [<span class="hljs-string">'aa'</span>, <span class="hljs-string">'bb'</span>, <span class="hljs-string">'cc'</span>]
arr.map(<span class="hljs-keyword">function</span>(value){
<span class="hljs-built_in">return</span> value = value + <span class="hljs-string">"f"</span>
})
(3) [<span class="hljs-string">"aaf"</span>, <span class="hljs-string">"bbf"</span>, <span class="hljs-string">"ccf"</span>]
arr
(3) [<span class="hljs-string">"aa"</span>, <span class="hljs-string">"bb"</span>, <span class="hljs-string">"cc"</span>]
 

以上代码中map()方法里面传入的函数是一个把数组每个值都加上一个’f’。 每个元素末尾都加上一个’f’，然后返回这个新的数组，原数组没有任何变化的。 我初学的时候，看到上述代码反正很懵逼，这玩意咋出来的这个结果呢。琢磨了很久，还是觉得MDN的解释明白，只不过需要看个3、4遍就能明白了。 语法规范是:

1
2
3
4
<span class="hljs-built_in">let</span> new_array = arr.map(<span class="hljs-keyword">function</span> callback(currentValue, index, array) {
    // Return element <span class="hljs-keyword">for</span> new_array
}[, thisArg])
 

callback 生成新数组元素的函数，使用三个参数： currentValue callback 的第一个参数，数组中正在处理的当前元素。 index callback 的第二个参数，数组中正在处理的当前元素的索引。 array callback 的第三个参数，map 方法被调用的数组。 thisArg 可选的。执行 callback 函数时 使用的this 值。 返回值 一个新数组，每个元素都是回调函数的结果。

1
2
3
4
5
[1, 2, 3].map(<span class="hljs-keyword">function</span>(currentValue, index, arr){
<span class="hljs-built_in">return</span> currentValue*index
})
(3) [0, 2, 6]
 

其实callback 的第三个参数可以不写，也知道调用的到底是哪个Array。

1
2
3
4
5
[1, 2, 3].map(<span class="hljs-keyword">function</span>(currentValue, index){
<span class="hljs-built_in">return</span> currentValue*index
})
(3) [0, 2, 6]
 

当你用map()方法的时候，callback 函数会被自动传入三个参数：数组的每一个元素，元素索引，原数组本身。既然原数组本身可以省略，那么由剩下的两个特点我们发散一下，会想到前面我们讲过，伪数组(比如字符串)也具备这两个特点会不会也能用map()方法呢，接下来做个实验。
哈哈哈哈，愚蠢的人类，你想的美，怎么可能直接使用呢，必须把伪数组转换一下的。

  • 第一种转换方法

1
2
3
4
5
6
var upper = <span class="hljs-keyword">function</span> (str){
<span class="hljs-built_in">return</span> str.toUpperCase();
};
[].map.call(<span class="hljs-string">'abc'</span>, upper)
(3) [<span class="hljs-string">"A"</span>, <span class="hljs-string">"B"</span>, <span class="hljs-string">"C"</span>]
 

以上是通过map函数的call方法间接使用

  • 第二种转换方法

1
2
3
<span class="hljs-string">'abc'</span>.split(<span class="hljs-string">''</span>).map(upper)
(3) [<span class="hljs-string">"A"</span>, <span class="hljs-string">"B"</span>, <span class="hljs-string">"C"</span>]
 

'abc'.split('')把字符串转成数组["a", "b", "c"]

至此，字符串和数组相互转化的方法，都学到了,总结如下。

  • 数组转字符串 三种方法

1
2
3
4
5
6
7
[1, 3, 4].toString()
<span class="hljs-string">"1,3,4"</span>
[1, 3, 4] + <span class="hljs-string">''</span>
<span class="hljs-string">"1,3,4"</span>
[1, 3, 4].join()
<span class="hljs-string">"1,3,4"</span>
 

  • 字符串转数组 一种方法

1
2
3
<span class="hljs-string">'abxc'</span>.split(<span class="hljs-string">''</span>)
(4) [<span class="hljs-string">"a"</span>, <span class="hljs-string">"b"</span>, <span class="hljs-string">"x"</span>, <span class="hljs-string">"c"</span>]
 

在map()的最后，要注意数组的空位问题。 我们先看一个map()处理含有空位的数组的奇怪现象

1
2
3
4
5
6
7
8
9
var f = <span class="hljs-keyword">function</span>(n){ <span class="hljs-built_in">return</span> n + 1 };
undefined
[1, , 2].map(f)
(3) [2, empty, 3]
[1, undefined, 2].map(f)
(3) [2, NaN, 3]
[1, null, 2].map(f)
(3) [2, 1, 3]
 

可以发现[1, , 2].map(f)空位未执行map()。map方法不会跳过undefined和null，但是会跳过空位。

1
2
3
4
5
null + 1 = 1
<span class="hljs-literal">true</span> + 1 = 2
<span class="hljs-literal">false</span> + 1 = 1
//好奇怪
 

  • 用一个更直观的例子来证明map方法会跳过空位

1
2
3
4
5
6
7
8
Array(2).map(<span class="hljs-function"><span class="hljs-title">function</span></span> (){
  console.log(<span class="hljs-string">'enter...'</span>);
  <span class="hljs-built_in">return</span> 1;
})
(2) [empty × 2]
    length: 2
    __proto__: Array(0)
 

本文一开始就讲了Array[2]始构造了长度为2的空数组，没有打印出enter，说明未执行map()方法。

使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中：原数组中新增加的元素将不会被 callback 访问到；若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。

以上引入了数组的空位（hole）概念，那什么才是数组的空位呢 var a= [1, , 2] 中间就是一个空位

1
2
3
4
5
6
7
8
9
10
11
var a= [1, , 2]
undefined
a
(3) [1, empty, 2]
    0: 1
    2: 2
    length: 3
    __proto__: Array(0)
a[1]
undefined
 

可以看到，空位计入数组长度,空位可读取，但是这个空位的值是undefined。 delete命令可以删除数组内的一个元素

1
2
3
4
5
6
7
8
9
10
a
(3) [1, empty, 2]
delete a[0]
<span class="hljs-literal">true</span>
a
(3) [empty × 2, 2]
    2: 2
    length: 3
    __proto__: Array(0)
 

delete命令删除成功，返回true,但是length不变，说明空位可以被读取到，所以用delete命令无法清空数组。目前把数组清空的唯一方法就是把length属性改为0。 换句话说length属性不能过滤空位。 当使用length属性进行数组遍历时，一定要非常小心。

数组的某个位置是空位，与某个位置是undefined，是不一样的。 为什么不一样呢。

  • 如果是空位，使用数组的forEach方法(接下来重点研究)、for…in结构、以及Object.keys方法进行遍历，空位都会被跳过。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var a = [1, , , 5]
undefined
a
(4) [1, empty × 2, 5]
    0: 1
    3: 5
    length: 4
    __proto__: Array(0)
//只打印出了已经存在具体数值的1和5
a.forEach(<span class="hljs-keyword">function</span>(x){console.log(x)})
1
5
undefined
//只有0索引和3索引
<span class="hljs-keyword">for</span> (var i <span class="hljs-keyword">in</span> a) {
  console.log(i);
}
0
3
undefined
//只有0索引和3索引
Object.keys(a)
(2) [<span class="hljs-string">"0"</span>, <span class="hljs-string">"3"</span>]
    0: <span class="hljs-string">"0"</span>
    1: <span class="hljs-string">"3"</span>
    length: 2
    __proto__: Array(0)
 

  • 如果是undefined，使用数组的forEach方法(接下来重点研究)、for…in结构、以及Object.keys方法进行遍历，不会被跳过。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = [undefined, undefined, undefined];
 
a.forEach(<span class="hljs-keyword">function</span> (x, i) {
  console.log(i + <span class="hljs-string">'. '</span> + x);
});
// 0. undefined
// 1. undefined
// 2. undefined
 
<span class="hljs-keyword">for</span> (var i <span class="hljs-keyword">in</span> a) {
  console.log(i);
}
// 0
// 1
// 2
 
Object.keys(a)
// [<span class="hljs-string">'0'</span>, <span class="hljs-string">'1'</span>, <span class="hljs-string">'2'</span>]
 

上面的对比可以知道，空位就是数组没有这个元素，所以不会被遍历到，而undefined则表示数组有这个元素，值是undefined，所以遍历不会跳过。

5.3 forEach()

该方法与map()类似，都是使数组的每个元素执行一个函数。与map()的最大区别是没有返回值，而map()返回一个新的数组。forEach()只关心数据的操作，而不关心返回值。forEach()方法传入的函数，实际上是有3个值。 MDN的语法规范

1
2
3
4
5
6
array.forEach(callback(currentValue, index, array){
    //<span class="hljs-keyword">do</span> something
}, this)
 
array.forEach(callback[, thisArg])
 

参数列表的含义与map()方法的每个参数含义相同。 callback()函数的array参数，通常省略，自己要脑补上。

1
2
3
4
5
6
7
8
//x就是数组的每一个元素，i是每一个元素的索引
arr.forEach(<span class="hljs-keyword">function</span>(x, i){
console.log(i + <span class="hljs-string">': '</span> + x)
})
0: 1
1: 2
2: 3
 

谁去调用的forEach()方法，那么callback()里面的array就会自动传入那个数组，但是是隐藏的。和我一样的初学者，都曾怀疑过，哪里传进来的数组呢，最好的答案都在MDN的callback()函数的语法规则里面，具体的细节分析和map()的分析一样。

  • 注意: 用forEach()方法遍历数组，无法再某个条件时停止遍历，此时应该用普通的for循环

1
2
3
4
5
6
7
8
var arr1 = [1, 2, 3]
undefined
<span class="hljs-keyword">for</span> (<span class="hljs-built_in">let</span> i = 0; i &lt; arr1.length; i++){
<span class="hljs-keyword">if</span>(arr1[i] === 2){<span class="hljs-built_in">break</span>;}
console.log(i)
}
0
 

上面代码中，执行到数组的第二个成员时，就会中断执行。forEach方法做不到这一点。

  • 与map()方法一样，forEach方法会跳过数组的空位。而不会跳过undefined和null。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var <span class="hljs-built_in">log</span> = <span class="hljs-keyword">function</span> (n) {
console.log(n + 1);
};
 
[1, undefined, 2].forEach(<span class="hljs-built_in">log</span>)
// 2
// NaN
// 3
 
[1, null, 2].forEach(<span class="hljs-built_in">log</span>)
// 2
// 1
// 3
 
[1, , 2].forEach(<span class="hljs-built_in">log</span>)
// 2
// 3
 

  • 当然了，forEach方法也可以用于类似数组的对象和字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var obj = {
  0: 1,
  a: <span class="hljs-string">'hello'</span>,
  length: 1
}
 
Array.prototype.forEach.call(obj, <span class="hljs-keyword">function</span> (value, i) {
  console.log( i + <span class="hljs-string">':'</span> + value);
});
// 0:1
 
var str = <span class="hljs-string">'hello'</span>;
Array.prototype.forEach.call(str, <span class="hljs-keyword">function</span> (value, i) {
  console.log( i + <span class="hljs-string">':'</span> + value);
});
// 0:h
// 1:e
// 2:l
// 3:l
// 4:o
 

对象和字符串使用foreach一定要用Array.prototype.forEach.call()的。

forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ，之后的元素将被跳过

ε=(´ο｀*)))唉，上面这段话啊，可以看出forEach()和map()函数如此的相似啊。

  • 举一个MDN上面的例子，一旦数组被修改了，遍历不受修改的影响

1
2
3
4
5
6
7
8
9
10
11
12
var words = [<span class="hljs-string">"one"</span>, <span class="hljs-string">"two"</span>, <span class="hljs-string">"three"</span>, <span class="hljs-string">"four"</span>];
words.forEach(<span class="hljs-keyword">function</span>(word) {
  console.log(word);
  <span class="hljs-keyword">if</span> (word === <span class="hljs-string">"two"</span>) {
    words.push(<span class="hljs-string">'aaa'</span>);
  }
});
one
two
three
four
 

我们发现遍历出了原来的所有元素，在forEach()开始之后的添加的'aaa'并不会遍历到。 不过MDN的原始例子比我的难度大多了啊。

1
2
3
4
5
6
7
8
9
10
11
var words = [<span class="hljs-string">"one"</span>, <span class="hljs-string">"two"</span>, <span class="hljs-string">"three"</span>, <span class="hljs-string">"four"</span>];
words.forEach(<span class="hljs-keyword">function</span>(word) {
  console.log(word);
  <span class="hljs-keyword">if</span> (word === <span class="hljs-string">"two"</span>) {
    words.shift();
  }
});
// one
// two
// four
 

当到达包含值”two”的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 “four”现在在原数组的第三个位置，three跑到了第二个位置，而此时要去遍历第三个位置，所以不会打印three。

5.4 filter()

filter方法的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。 通俗的理解就是过滤器。callback()函数与以上两个一样，也是传入三个参数。 第一个参数是当前数组成员的值，这个是必须的。

1
2
3
4
5
6
7
var arr = [1, 3, 5, 7]
undefined
arr.filter(<span class="hljs-keyword">function</span>(value){<span class="hljs-built_in">return</span> value&gt;5})
[7]
arr.filter(<span class="hljs-keyword">function</span>(value){<span class="hljs-built_in">return</span> value&gt;1})
(3) [3, 5, 7]
 

可以理解为给filter()传入的函数一个规则，满足规则的才能返回。

5.5 reduce()

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

以上是MDN的解释，挺难理解字面意思的。直接用实例来理解吧。

  • 累加求和

1
2
3
4
5
6
7
var arr = [1, 3, 10, 6]
undefined
arr.reduce(<span class="hljs-keyword">function</span>(preSum, ele){
<span class="hljs-built_in">return</span> preSum + ele;
})
20
 

reduce()函数传入一个函数作为参数，函数里面传入两个参数，preSum默认是数组的第一个元素，每次都把数组的两个元素相加并返回，ele就是每个数组元素。 你也快成规定起始的累加值

1
2
3
4
5
arr.reduce(<span class="hljs-keyword">function</span>(preSum, ele){
<span class="hljs-built_in">return</span> preSum + ele;
}, 10)
30
 

起始的累加值是10，那么加上数组的20就是30。

  • 用reduce表示map()

1
2
3
4
5
6
7
8
var arr = [1, 3, 4]
undefined
arr.reduce(<span class="hljs-keyword">function</span>(arr, n){
arr.push(n*2)
<span class="hljs-built_in">return</span> arr
}, [])//[]空数组作为一个初始值
(3) [2, 6, 8]
 

利用reduce()完成了map()一样的功能

  • 用reduce表示filter()

1
2
3
4
5
6
7
8
9
10
var arr = [1, 3, 4, 10, 30]
undefined
arr.reduce(<span class="hljs-keyword">function</span>(arr, n){
<span class="hljs-keyword">if</span>(n&gt;3){
arr.push(n)
}
<span class="hljs-built_in">return</span> arr
}, [])
(3) [4, 10, 30]
 

如果原数组里面的值大于3,就放到新的数组里面。和filter()道理一样。

  • 计算数组里面技术的和 var a = [1,2,3,4,5,6,7,8,9] 计算所有奇数的和

1
2
3
4
5
6
7
8
9
10
var a = [1,2,3,4,5,6,7,8,9]
a.reduce(<span class="hljs-keyword">function</span>(sum, n){
<span class="hljs-keyword">if</span>(n % 2 === 0){
<span class="hljs-built_in">return</span> sum
    } <span class="hljs-keyword">else</span>{
<span class="hljs-built_in">return</span> sum + n
}
})
25
 

先判断一下，再把奇数相加

5.6 几个方法组合使用

  • 计算数组的偶数和 给定一个 数组 var a = [1,2,3,4,5,6,7,8,9]
  1. 获取所有偶数
  2. 得到所有偶数的平方

1
2
3
4
5
6
7
8
a.filter(<span class="hljs-keyword">function</span>(n){
  <span class="hljs-keyword">if</span> (n %2 ===0){
    <span class="hljs-built_in">return</span> n
  }
}).map(<span class="hljs-keyword">function</span>(n){
  <span class="hljs-built_in">return</span> n*n
})//[4,16,36,64]
 

先调用filter()获得所有偶数，再调用map()获得所有偶数平方和

5.7 some()，every()

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。 传入的参数也是一个callback()函数，callback 被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。其实一般只要发现时传入callback()函数，基本都是这些参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
arr
(5) [1, 3, 4, 10, 30, notNumber: <span class="hljs-string">"not a number"</span>]
    0: 1
    1: 3
    2: 4
    3: 10
    4: 30
    notNumber: <span class="hljs-string">"not a number"</span>
    length: 5
    __proto__: Array(0)
arr.some(<span class="hljs-keyword">function</span>(value, index){
<span class="hljs-built_in">return</span> index &gt; 5
})
<span class="hljs-literal">false</span>
arr.some(<span class="hljs-keyword">function</span>(value, index){
<span class="hljs-built_in">return</span> index &gt; 3
})
<span class="hljs-literal">true</span>
 

some()方法的作用是只要数组中的某个元素满足传入的函数的要求就返回true。

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

1
2
3
4
5
6
var arr = [1, 2, 3, 4, 5];
arr.every(<span class="hljs-keyword">function</span> (elem, index, arr) {
  <span class="hljs-built_in">return</span> elem &gt;= 3;
});
// <span class="hljs-literal">false</span>
 

every()是要求数组的所有元素都满足传入的函数的要求才返回true。

  • 注意：对于空数组，some方法返回false，every方法返回true，回调函数都不会执行。

1
2
3
4
5
6
7
8
9
<span class="hljs-keyword">function</span> isEven(x) { <span class="hljs-built_in">return</span> x % 2 === 0 }
undefined
 
[].every(isEven)
<span class="hljs-literal">true</span>
 
[].some(isEven)
<span class="hljs-literal">false</span>
 

对上面的结果，我又有什么办法呢，只能选择背过呗。 这两个方法都不改变原数组

6. 上述数组的方法的使用总结

数组的上述方法种类繁多，不过有几个特点很明显，一些方法会改变原数组，一些方法不会改变原数组，我以这个细节把上述方法分类如下

6.1 改变原数组的方法

方法名字方法作用
push()在元素末尾添加元素，返回添加新元素后的数组长度
pop()删除数组末尾的元素，返回删除的那个元素。与push()方法一起模拟栈这个数据结构
shift()删除数组的第一个元素，返回删除的那个元素。与push()方法结合，模拟队列这个数据结构
unshift()在数组的起始位置添加新元素，返回添加新元素后的数组长度
reverse()把数组的每一个元素的位置互换，返回翻转后的数组
splice()根据方法传入的参数删除原数组的部分元素，返回被删除的元素。可以用来拆分数组
indexOf()，lastIndexOf()返回括号里面 的元素第一次出现和最后一次出现的位置。NaN元素无法获得位置
sort()默认按照数组元素的Unicode码点排序，可以自己传入函数，规定排序准则

6.2 不改变原数组的方法

方法名字方法作用
join()以某种形式把数组的所有元素以字符串的形式返回，默认以逗号分隔，返回生成的新数组
concat()专业合并数组，把新数组添加到旧数组的后面，返回生成的新数组
slice()根据方法传入的参数提取原数组的部分，返回提取的这个新数组。也可以用来把伪数组变成真数组
map()必须传入一个callback()函数，数组的每一个元素执行这个函数，返回执行回调函数后的新数组。该方法会跳过空位
forEach()必须传入一个callback()函数，数组的每一个元素执行这个函数。没有返回值，无法终止循环
filter()必须传入一个callback()函数，数组的每一个元素执行这个函数，返回结果为true的成员组成一个新数组返回
reduce()对数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。具体理解看例子吧
some()只要数组中的某个元素满足传入的函数的要求就返回true
every()数组的所有元素都满足传入的函数的要求才返回true

正是因为以上的方法对原数组不造成影响，所以我们可以组合使用filter()、map()先过滤再匹配。

6.3 数组的遍历

对于有序、无序的数据，我们有时候会希望获得所有的key或者value，数组对这个需求尤甚。 一般来说，数组的遍历有三种方法

  • for…in循环

1
2
3
4
5
6
7
8
9
10
11
var arr = [1, 3, 4, 10, 30]
undefined
<span class="hljs-keyword">for</span> (var key <span class="hljs-keyword">in</span> arr){
console.log(arr[key])
}
1
3
4
10
30
 

  • 切忌把arr[key]手抖写成了arr.key。因为arr.key等同于arr[‘key’]，很明显数组没有这个名字叫key的键。 for…in循环有个弊端就是它会把非数字的索引也打印出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
arr
(5) [1, 3, 4, 10, 30]
arr.notNumber = <span class="hljs-string">'not a number'</span>
<span class="hljs-string">"not a number"</span>
arr
(5) [1, 3, 4, 10, 30, notNumber: <span class="hljs-string">"not a number"</span>]
 
<span class="hljs-keyword">for</span> (var key <span class="hljs-keyword">in</span> arr){
console.log(key + <span class="hljs-string">':'</span> + arr[key])
}
0: 1
1: 3
2: 4
3: 10
4: 30
notNumber: not a number
 

如果我们只关心数组的数字索引，用传统的下面的传统for循环

  • 传统for循环

1
2
3
4
5
6
7
8
9
10
11
arr
(5) [1, 3, 4, 10, 30, notNumber: <span class="hljs-string">"not a number"</span>]
<span class="hljs-keyword">for</span> (<span class="hljs-built_in">let</span> i = 0; i &lt; arr.length; i++){
console.log(i + <span class="hljs-string">':'</span> + arr[i])
}
0:1
1:3
2:4
3:10
4:30
 

这种方法其实是我们人为规定了只遍历数字索引，O(∩_∩)O哈哈~

  • forEach(）循环

1
2
3
4
5
6
7
8
9
10
11
arr
(5) [1, 3, 4, 10, 30, notNumber: <span class="hljs-string">"not a number"</span>]
arr.forEach(<span class="hljs-keyword">function</span>(value, index){
console.log(index + <span class="hljs-string">':'</span> + value)
})
0:1
1:3
2:4
3:10
4:30
 

这种方法也不会遍历非数字的索引。

作者：codevvvv9
链接：https://juejin.im/post/5a4db0ef5188257d692a00b4
来源：掘金

19 个 JavaScript 有用的简写技术

1.三元操作符

当想写if…else语句时，使用三元操作符来代替。

1
2
3
4
5
6
7
<span class="hljs-attribute">const</span> x = <span class="hljs-number">20</span>;
<span class="hljs-attribute">let</span> answer;
<span class="hljs-attribute">if</span> (x &gt; <span class="hljs-number">10</span>) {
    <span class="hljs-attribute">answer</span> = <span class="hljs-string">'is greater'</span>;
} <span class="hljs-section">else</span> {
    <span class="hljs-attribute">answer</span> = <span class="hljs-string">'is lesser'</span>;
}

简写：
const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if语句：
const big = x > 10 ? " greater 10" : x

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

1
2
3
<span class="hljs-keyword">if</span> (variable1 !== <span class="hljs-literal">null</span> || variable1 !== <span class="hljs-literal">undefined</span> || variable1 !== <span class="hljs-string">''</span>) {
     <span class="hljs-keyword">let</span> variable2 = variable1;
}

或者可以使用短路求值方法：
const variable2 = variable1 || 'new';

3.声明变量简写方法

1
2
3
<span class="hljs-built_in">let</span> x;
<span class="hljs-built_in">let</span> y;
<span class="hljs-built_in">let</span> z = 3;

简写方法：
let x, y, z=3;

4.if存在条件简写方法

if (likeJavaScript === true)

简写：
if (likeJavaScript)

只有likeJavaScript是真值时，二者语句才相等

如果判断值不是真值，则可以这样：

1
2
3
4
<span class="hljs-built_in">let</span> a;
<span class="hljs-keyword">if</span> ( a !== <span class="hljs-literal">true</span> ) {
// <span class="hljs-keyword">do</span> something...
}

简写：

1
2
3
4
<span class="hljs-built_in">let</span> a;
<span class="hljs-keyword">if</span> ( !a ) {
// <span class="hljs-keyword">do</span> something...
}

5.JavaScript循环简写方法

for (let i = 0; i < allImgs.length; i++)

简写：
for (let index in allImgs)
也可以使用Array.forEach：

1
2
3
4
5
6
7
8
<span class="hljs-selector-tag">function</span> <span class="hljs-selector-tag">logArrayElements</span>(element, index, array) {
  console<span class="hljs-selector-class">.log</span>(<span class="hljs-string">"a["</span> + index + <span class="hljs-string">"] = "</span> + element);
}
<span class="hljs-selector-attr">[2, 5, 9]</span><span class="hljs-selector-class">.forEach</span>(logArrayElements);
<span class="hljs-comment">// logs:</span>
<span class="hljs-comment">// a[0] = 2</span>
<span class="hljs-comment">// a[1] = 5</span>
<span class="hljs-comment">// a[2] = 9</span>

6.短路评价

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

1
2
3
4
5
6
<span class="hljs-attribute">let</span> dbHost;
<span class="hljs-attribute">if</span> (process.env.DB_HOST) {
  <span class="hljs-attribute">dbHost</span> = process.env.DB_HOST;
} <span class="hljs-section">else</span> {
  <span class="hljs-attribute">dbHost</span> = <span class="hljs-string">'localhost'</span>;
}

简写：
const dbHost = process.env.DB_HOST || 'localhost';

7.十进制指数

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
for (let i = 0; i < 10000; i++) {}
简写：

1
2
3
4
5
6
7
8
9
for (let i = 0; i <span class="hljs-tag">&lt; <span class="hljs-attr">1e7</span>; <span class="hljs-attr">i</span>++) {}
 
// 下面都是返回<span class="hljs-attr">true</span>
<span class="hljs-attr">1e0</span> === <span class="hljs-string">1;</span>
<span class="hljs-attr">1e1</span> === <span class="hljs-string">10;</span>
<span class="hljs-attr">1e2</span> === <span class="hljs-string">100;</span>
<span class="hljs-attr">1e3</span> === <span class="hljs-string">1000;</span>
<span class="hljs-attr">1e4</span> === <span class="hljs-string">10000;</span>
<span class="hljs-attr">1e5</span> === <span class="hljs-string">100000;</span></span>

8.对象属性简写

如果属性名与key名相同，则可以采用ES6的方法：
const obj = { x:x, y:y };

简写：
const obj = { x, y };

9.箭头函数简写

传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。

1
2
3
4
5
6
7
8
9
10
11
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params">name</span>) </span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Hello'</span>, name);
}
 
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Loaded'</span>)
}, <span class="hljs-number">2000</span>);
 
list.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item</span>) </span>{
  <span class="hljs-built_in">console</span>.log(item);
});

简写：

1
2
3
4
5
sayHello = name =&gt; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Hello'</span>, name);
 
setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Loaded'</span>), <span class="hljs-number">2000</span>);
 
list.forEach(item =&gt; <span class="hljs-built_in">console</span>.log(item));

10.隐式返回值简写

经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字）

为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

1
2
3
4
5
6
7
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">calcCircumference</span>(<span class="hljs-params">diameter</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">Math</span>.PI * diameter
}
 
<span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>() </span>{
  <span class="hljs-keyword">return</span> { foo: <span class="hljs-number">1</span> };
};

简写：

1
2
3
4
5
calcCircumference = diameter =&gt; (
  Math.PI * diameter;
)
 
<span class="hljs-keyword">var</span> <span class="hljs-function"><span class="hljs-keyword">func</span> = <span class="hljs-params">()</span> =&gt; <span class="hljs-params">({ foo: 1 })</span>;</span>

11.默认参数值

为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：

1
2
3
4
5
6
7
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">volume</span>(<span class="hljs-params">l, w, h</span>) </span>{
  <span class="hljs-keyword">if</span> (w === <span class="hljs-literal">undefined</span>)
    w = <span class="hljs-number">3</span>;
  <span class="hljs-keyword">if</span> (h === <span class="hljs-literal">undefined</span>)
    h = <span class="hljs-number">4</span>;
  <span class="hljs-keyword">return</span> l * w * h;
}

简写：

1
2
3
<span class="hljs-function"><span class="hljs-title">volume</span> = <span class="hljs-params">(l, w = <span class="hljs-number">3</span>, h = <span class="hljs-number">4</span> )</span> =&gt;</span> (l * w * h);
 
volume(<span class="hljs-number">2</span>) <span class="hljs-regexp">//</span>output: <span class="hljs-number">24</span>

12.模板字符串

传统的JavaScript语言，输出模板通常是这样写的。

1
2
3
<span class="hljs-keyword">const</span> welcome = <span class="hljs-string">'You have logged in as '</span> + first + <span class="hljs-string">' '</span> + last + <span class="hljs-string">'.'</span>
 
<span class="hljs-keyword">const</span> db = <span class="hljs-string">'http://'</span> + host + <span class="hljs-string">':'</span> + port + <span class="hljs-string">'/'</span> + database;

ES6可以使用反引号和${}简写：

1
2
3
<span class="hljs-keyword">const</span> welcome = <span class="hljs-string">`You have logged in as <span class="hljs-subst">${first}</span> <span class="hljs-subst">${last}</span>`</span>;
 
<span class="hljs-keyword">const</span> db = <span class="hljs-string">`http://<span class="hljs-subst">${host}</span>:<span class="hljs-subst">${port}</span>/<span class="hljs-subst">${database}</span>`</span>;

13.解构赋值简写方法

在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它

1
2
3
4
5
6
7
8
9
<span class="hljs-keyword">const</span> observable = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mobx/observable'</span>);
<span class="hljs-keyword">const</span> action = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mobx/action'</span>);
<span class="hljs-keyword">const</span> runInAction = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mobx/runInAction'</span>);
 
<span class="hljs-keyword">const</span> store = <span class="hljs-keyword">this</span>.props.store;
<span class="hljs-keyword">const</span> form = <span class="hljs-keyword">this</span>.props.form;
<span class="hljs-keyword">const</span> loading = <span class="hljs-keyword">this</span>.props.loading;
<span class="hljs-keyword">const</span> errors = <span class="hljs-keyword">this</span>.props.errors;
<span class="hljs-keyword">const</span> entity = <span class="hljs-keyword">this</span>.props.entity;

简写：

1
2
3
<span class="hljs-keyword">import</span> { observable, action, runInAction } <span class="hljs-keyword">from</span> <span class="hljs-string">'mobx'</span>;
 
<span class="hljs-keyword">const</span> { store, form, loading, errors, entity } = <span class="hljs-keyword">this</span>.props;

也可以分配变量名：

1
2
<span class="hljs-keyword">const</span> { store, form, loading, errors, entity:contact } = <span class="hljs-keyword">this</span>.props;
<span class="hljs-comment">//最后一个变量名为contact</span>

14.多行字符串简写

需要输出多行字符串，需要使用+来拼接：

1
2
3
4
5
6
<span class="hljs-keyword">const</span> lorem = <span class="hljs-string">'Lorem ipsum dolor sit amet, consectetur\n\t'</span>
    + <span class="hljs-string">'adipisicing elit, sed do eiusmod tempor incididunt\n\t'</span>
    + <span class="hljs-string">'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'</span>
    + <span class="hljs-string">'veniam, quis nostrud exercitation ullamco laboris\n\t'</span>
    + <span class="hljs-string">'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'</span>
    + <span class="hljs-string">'irure dolor in reprehenderit in voluptate velit esse.\n\t'</span>

使用反引号，则可以达到简写作用：

1
2
3
4
5
6
const lorem = `<span class="javascript">Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed <span class="hljs-keyword">do</span> eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor <span class="hljs-keyword">in</span> reprehenderit <span class="hljs-keyword">in</span> voluptate velit esse.</span>`

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

1
2
3
4
5
6
7
<span class="hljs-comment">// joining arrays</span>
<span class="hljs-keyword">const</span> odd = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span>];
<span class="hljs-keyword">const</span> nums = [<span class="hljs-number">2</span> ,<span class="hljs-number">4</span> , <span class="hljs-number">6</span>].concat(odd);
 
<span class="hljs-comment">// cloning arrays</span>
<span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>];
<span class="hljs-keyword">const</span> arr2 = arr.slice()

简写：

1
2
3
4
5
6
7
8
<span class="hljs-comment">// joining arrays</span>
<span class="hljs-keyword">const</span> odd = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span> ];
<span class="hljs-keyword">const</span> nums = [<span class="hljs-number">2</span> ,<span class="hljs-number">4</span> , <span class="hljs-number">6</span>, ...odd];
console.<span class="hljs-built_in">log</span>(nums); <span class="hljs-comment">// [ 2, 4, 6, 1, 3, 5 ]</span>
 
<span class="hljs-comment">// cloning arrays</span>
<span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>];
<span class="hljs-keyword">const</span> arr2 = [...arr];

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

1
2
<span class="hljs-keyword">const</span> odd = [<span class="hljs-number">1</span>, <span class="hljs-number">3</span>, <span class="hljs-number">5</span> ];
<span class="hljs-keyword">const</span> nums = [<span class="hljs-number">2</span>, ...odd, <span class="hljs-number">4</span> , <span class="hljs-number">6</span>];

也可以使用扩展运算符解构：

1
2
3
4
<span class="hljs-keyword">const</span> { a, b, ...z } = { a: <span class="hljs-number">1</span>, b: <span class="hljs-number">2</span>, c: <span class="hljs-number">3</span>, d: <span class="hljs-number">4</span> };
console.<span class="hljs-built_in">log</span>(a) <span class="hljs-comment">// 1</span>
console.<span class="hljs-built_in">log</span>(b) <span class="hljs-comment">// 2</span>
console.<span class="hljs-built_in">log</span>(z) <span class="hljs-comment">// { c: 3, d: 4 }</span>

16.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

1
2
3
4
5
6
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params">bar</span>) </span>{
  <span class="hljs-keyword">if</span>(bar === <span class="hljs-literal">undefined</span>) {
    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Missing parameter!'</span>);
  }
  <span class="hljs-keyword">return</span> bar;
}

简写：

1
2
3
4
5
6
7
<span class="hljs-function"><span class="hljs-title">mandatory</span> = <span class="hljs-params">()</span> =&gt;</span> {
  <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Error(<span class="hljs-string">'Missing parameter!'</span>);
}
<span class="hljs-function">
<span class="hljs-title">foo</span> = <span class="hljs-params">(bar = mandatory())</span> =&gt;</span> {
  <span class="hljs-keyword">return</span> bar;
}

17.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
const pets = [
  { <span class="hljs-built_in">type</span>: <span class="hljs-string">'Dog'</span>, name: <span class="hljs-string">'Max'</span>},
  { <span class="hljs-built_in">type</span>: <span class="hljs-string">'Cat'</span>, name: <span class="hljs-string">'Karl'</span>},
  { <span class="hljs-built_in">type</span>: <span class="hljs-string">'Dog'</span>, name: <span class="hljs-string">'Tommy'</span>},
]
 
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">findDog</span><span class="hljs-params">(name)</span></span> {
  <span class="hljs-keyword">for</span>(let i = <span class="hljs-number">0</span>; i&lt;pets.length; ++i) {
    <span class="hljs-keyword">if</span>(pets[i].<span class="hljs-built_in">type</span> === <span class="hljs-string">'Dog'</span> &amp;&amp; pets[i].name === name) {
      <span class="hljs-keyword">return</span> pets[i];
    }
  }
}

简写：

1
2
pet = pets.find(pet =&gt; pet.<span class="hljs-built_in">type</span> ===<span class="hljs-string">'Dog'</span> &amp;&amp; pet.name === <span class="hljs-string">'Tommy'</span>);
console.log(pet); // { <span class="hljs-built_in">type</span>: <span class="hljs-string">'Dog'</span>, name: <span class="hljs-string">'Tommy'</span> }

18.Object[key]简写

考虑一个验证函数

1
2
3
4
5
6
7
8
9
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">validate</span>(<span class="hljs-params">values</span>) </span>{
  <span class="hljs-keyword">if</span>(!values.first)
    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
  <span class="hljs-keyword">if</span>(!values.last)
    <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
 
<span class="hljs-built_in">console</span>.log(validate({first:<span class="hljs-string">'Bruce'</span>,last:<span class="hljs-string">'Wayne'</span>})); <span class="hljs-comment">// true</span>

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<span class="hljs-comment">// 对象验证规则</span>
<span class="hljs-keyword">const</span> schema = {
  first: {
    required:<span class="hljs-literal">true</span>
  },
  last: {
    required:<span class="hljs-literal">true</span>
  }
}
 
<span class="hljs-comment">// 通用验证函数</span>
<span class="hljs-keyword">const</span> validate = (schema, values) =&gt; {
  <span class="hljs-keyword">for</span>(field <span class="hljs-keyword">in</span> schema) {
    <span class="hljs-keyword">if</span>(schema[field].required) {
      <span class="hljs-keyword">if</span>(!values[field]) {
        <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
      }
    }
  }
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
}
 
 
<span class="hljs-built_in">console</span>.log(validate(schema, {first:<span class="hljs-string">'Bruce'</span>})); <span class="hljs-comment">// false</span>
<span class="hljs-built_in">console</span>.log(validate(schema, {first:<span class="hljs-string">'Bruce'</span>,last:<span class="hljs-string">'Wayne'</span>})); <span class="hljs-comment">// true</span>

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。
Math.floor(4.9) === 4 //true

简写：
~~4.9 === 4 //true

本文翻译于SitePoint：www.sitepoint.com/sho…