Object，Array

更新时间: 2021-03-26 15:37:42

# Object

显式的创建有两种方式：

使用new操作符和Object构造函数。

let person = new Object()
person.name = "Nicholas"
person.age = 29

1
2
3

使用对象字面量表示法。对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建

let person = {
  name:"Nicholas",
  age:29
}

1
2
3
4

注意

在使用对象字面量表示法定义对象时，并不会实际调用Object构造函数

# Array

ECMAScript数组跟其他编程语言的数组有很大区别。跟其他语言中的数组一样，ECMAScript数组也是一组有序的数据，但跟其他语言不同的是，数组中每个槽位可以存储任意类型的数。这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。ECMAScript数组也是动态大小的，会随着数据添加而自动增长。

# 创建数组

使用Array构造函数

let colors = new Array()

如果知道数组中元素的数量，那么可以给构造函数传入一个数值，然后length属性就会被自动创建并设置为这个值。比如，下面的代码会创建一个初始length为20的数组：

let colors = new Array(20)

也可以给Array构造函数传入要保存的元素。比如，下面的代码会创建一个包含3个字符串值的数组：

let colors = new Array("red","blue","green")

创建数组时可以给构造函数传一个值。这个时候就有点问题了，因为如果这个值是一个数值，则会创建一个长度为指定数值的数组；而如果这个值是其他类型的，则会创建一个只包含该特定值的数组：

let colors = new Array(3); //创建一个包含3个元素的数组
let names = new Array("Greg"); //创建一个只包含一个元素，即字符串"Greg"的数组

1
2

在使用Array构造函数时，也可以省略new操作符。结果是一样的。

let colors = Array(3) //创建一个包含3个元素的数组
let names = Array("Greg") //创建一个只包含一个元素，即字符串"Greg"的数组

1
2

另一种创建数组的方式是使用数组字面量表示法。

let colors = ["red","blue","green"] //创建一个包含3个元素的数组
let names = [] //创建一个空数组
let values = [1,2,] //创建一个包含2个元素的数组

1
2
3

注意

与对象一样，在使用数组字面量表示法创建数组不会调用 Array 构造函数

# Array.from() Array.of()

Array构造函数还有两个ES6新增的用于创建数组的静态方法：from()和of()。from()用于将类数组结构转换为数组实例。而of()用于将一组参数转换成数组实例。 Array.from()的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个length属性和可索引元素的结构。这种方式可以用于很多场合：

//字符串会被拆分成单字符数组
console.log(Array.from("Matt")); //["M","a","t","t"]

//可以使用from()将集合和映射转换为一个新数组
const m = new Map().set(1,2)
                   .set(3,4)
const s = new Set().add(1)
                   .add(2)
                   .add(3)
                   .add(4)
console.log(Array.from(m)) // [[1,2],[3,4]]
console.log(Array.from(s)) //[1,2,3,4]     

//Array.form()对现有数组执行浅复制
const a1 = [1,2,3,4]
const a2 = Array.from(a1)

console.log(a1) //[1,2,3,4]
alert(a1 === a2) //false

//可以使用任何可迭代对象
const iter = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
  }
}

console.log(Array.from(iter)) // [1,2,3,4]

//arguments对象可以被轻松地转换为数组
function getArgsArray(){
  return Array.from(arguments)
}
console.log(getArgsArray(1,2,3,4)) //[1,2,3,4]

//from()也能转换带有必要属性的自定义对象
const arrayLikeObject = {
  0:1,
  1:2,
  2:3,
  3:4,
  length:4
}
console.log(Array.from(arrayLikeObject)) //[1,2,3,4]

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值，而无须像调用Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数，用于指定映射函数中的this值。但这个重写的this值在箭头函数中不适用。

const a1 = [1,2,3,4];
const a2 = Array.from(a1,x => x**2);
const a3 = Array.from(a1,function(x){return x**this.exponent},{exponent:2});
console.log(a2); //[1,4,9,16]
console.log(a3); //[1,4,9,16]

1
2
3
4
5

Array.of()可以把一组参数转换为数组。这个方法用于替代在ES6之前常用的Array.prototype.slice.call(arguments),一种异常笨拙的将arguments对象转换为数组的写法：

console.log(Array.of(1,2,3,4)); //[1,2,3,4]
console.log(Array.of(undefined)); //[undefined]

1
2

# 数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位。ECMAScript会将逗号之间相应索引位置的值当成空位，ES6规范重新定义了该如何处理这些空位。可以像下面这样创建一个空位数组：

const options = [,,,,,]; //创建包含5个元素的数组
console.log(options.length); //5
console.log(options); //[,,,,,]

1
2
3

ES6新增的方法和迭代器与早期ECMAScript版本中存在的方法行为不同。ES6新增方法普遍将这些空位当成存在的元素，之不过值为undefined:

const options [1,,,,5];
for(const option of options){
  console.log(option === undefined)
}
//false
//true
//true
//true
//false

const a = Array.from([,,,]); //使用ES6的Array.from()创建的包含3个空位的数组
for(const val of a){
  alert(val === undefined);
}
//true
//true
//true

alert(Array.of(...[,,,])); //[undefined, undefined, undefined]
for(const [index,value] of options.entries()) {
  alert(value)
}
//1
//undefined
//undefined
//undefined
//5

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

ES6之前的方法则会忽略这个空位，但具体的行为也因方法而异：

const options = [1,,,,5];
//map()会跳过空位置
console.log(options.map(() => 6)); //[6,undefined,undefined,undefined,6]

//join()视空位置为空字符串
console.log(options.join('-')); // "1----5

1
2
3
4
5
6

注意

由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实需要，则可以显示地用undefined值代替

# 数组索引

要取得或设置数组的值，需要使用中括号并提供相应值的数字索引：

let colors = ["red","blue","green"]; //定义一个字符串数组
alert(colors[0]); //显示第一项
colors[2] = "black"; //修改第三项
colors[3] = "brown"; //添加第四项

1
2
3
4

在中括号中提供的索引表示要访问的值。如果索引小于数组包含的元素，则返回存储在相应位置的元素。设置数组的方法也是一样的，就是替换指定位置的值。如果把一个值设置给超过数组最大索引的索引，就像示例中的colors[3],则数组长度会自动扩展到该索引值加1(示例中设置的索引3，索引数组长度变成了4)。数组中元素的数量保存在length属性中,这个属性始终返回0或者大于0的值：

let colors = ["red","blue","green"];
let names = []

alert(colors.length); //3
alert(colors.length); //0

1
2
3
4
5

数组length属性的独特之处在于，它不是只读的。通过修改length属性，可以从数组末尾删除或添加元素：

let colors = ["red","blue","green"];
colors.length = 2;
alert(colors[2]); //undefined

1
2
3

这里，数组colors一开始有3个值。将length设置为2，就删除了最后一个（位置2的）值，因为colors[2]就没有值了。如果将length设置为大于数组元素的值，则新添加的元素豆浆以undefined填充：

let colors = ["red","blue","green"];
colors.length = 4;
alert(colors[3]); //undefined

1
2
3

这里将数组length属性设置为4，虽数组只包含了3个元素。位置3在数组中不存在，因此访问其值会返回特殊值undefined。使用length属性可以方便地向数组末尾添加元素：

let colors = ["red","blue","green"];
colors[colors.length] = "black"; //添加一种颜色（位置3）
colors[colors.length] = "brown"; //再添加一种颜色（位置4）

1
2
3

let colors = ["red","blue","green"];
colors[99] = "black"; //添加一种颜色（位置99）
alert(colors.length); //100

1
2
3

这里，colors数组有一个值被插入到位置99，结果新length就变成了100(99+1)。这中间的所有元素，即位置3-98，实际并不存在，因此在访问时会返回undefined。

注意

数组最多可以包含4294967295个元素，这对于大多数编程任务应该都足够了。如果尝试添加更多项，则会导致抛出错误。以这个最大值作为初始值创建数组，可能导致脚本运行时间过长的错误。

# 检测数组

一个经典的ECMAScript问题是判断一个对象是不是数组。在只有一个网页（因而只有一个全局作用域）的情况下，使用instanceof操作符就足矣：

if(value instanceof Array){
  //操作数组
}

1
2
3

使用instanceof的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传给另一个框架，则这个数组的构造函数将有别于在第二个框架内本地创建的数组。为解决这个问题，ECMAScript提供了Array.isArray()方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的：

if(Array.isArray(value)){
  //操作数组
}

1
2
3

# 迭代器方法

在ES6中，Array的原型上暴露了3个用于检索数组内容的方法：keys(),values()和entries()。

keys()返回数组索引的迭代器
values()返回数组元素的迭代器
entried()返回索引/值对的迭代器

const a = ["foo","bar","baz","qux"];

//因为这些方法都返回迭代器，所以可以将他们的内容通过Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys()); //[0,1,2,3]
const aValues = Array.from(a.values()); //["foo","bar","baz","qux"]
const aEntries = Array.from(a.entries()); //[[0,"foo"],[1,"bar"],[2,"baz"],[3,"qux"]]

1
2
3
4
5
6

使用ES6的解构可以非常容易地在循环中拆分键/值对:

for(const [idx,element] of a.entries()){
  alert(idx);
  alert(element);
}
//0
//foo
//1
//bar
//2
//baz
//3
//qux

1
2
3
4
5
6
7
8
9
10
11
12

注意

虽然这些方法是ES6规范定义的，但在2017年底的时候仍有浏览器没有实现它们。

# 复制和填充方法

ES6新增了两个方法：批量复制方法copyWithin()，以及填充数组方法fill()。这两个方法的函数签名类似，都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引。使用这个方法不会改变数组的大小。

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置，它是可选的。如果不提供结束索引，则一直填充到数组末尾。负值索引从数组末尾开始计算。也可以将负索引想象成数组加上它得到的一个正索引：

const zeroes = [0,0,0,0,0];

//用5填充整个数组
zeroes.fill(5);
console.log(zeroes); //[5,5,5,5,5]
zeroes.fill(0); //重置

//用6填充索引大于等于3的元素
zeroes.fill(6,3); 
console.log(zeroes); //[0,0,0,6,6]
zeroes.fill(0); //重置

//用7填充索引大于等于1且小于3的元素
zeroes.fill(7,1,3);
console.log(zeroes); //[0,7,7,0,0]
zeroes.fill(0); //重置

//用8填充索引大于等于1且小于4的元素
//（-4 + zeroes.length = 1)
//(-1 + zeroes.length = 4)
zeroes.fill(8, -4, -1);
console.log(zeroes); //[0,8,8,8,0]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

fill()静默忽略超出数组边界、零长度及方向相反的索引范围:

const zeroes = [0,0,0,0,0];
//索引过低，忽略
zeroes.fill(1,-10,-6);
console.log(zeroes); //[0,0,0,0,0]

//索引过高，忽略
zeroes.fill(1,10,15);
console.log(zereos); //[0,0,0,0,0]

//索引反向，忽略
zereos.fill(2,4,2);
console.log(zereos); //[0,0,0,0,0]

//索引部分可用，填充可用部分
zereos.fill(4,3,10);
console.log(zeroes); //[0,0,0,4,4]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

与fill()不同，copyWithin()会按照指定范围浅复制数组中的部分内容，然后将她们插入到指定索引开始的位置。开始索引和结束索引则与fill()使用同样的计算方法：

let ints,
    reset = () => ints = [0,1,2,3,4,5,6,7,8,9];
reset()

//从ints中复制索引0开始的内容，插入到索引5开始的位置
//在源索引或目标索引到达数组边界时停止
ints.copyWithin(5);
console.log(ints); //[0,1,2,3,4,0,1,2,3,4]
reset();

//从ints中复制索引5开始的内容，插入到索引0开始的位置
ints.copyWithin(0,5);
console.log(ints); //[5,6,7,8,9,5,6,7,8,9]
reset();

//从ints中复制索引0开始到索引3结束的内容
//插入到索引4开始的位置
ints.copyWithin(4,0,3);
alert(ints); //[0,1,2,3,0,1,2,7,8,9]
reset();

//JavaScript引擎在插值前会完整复制范围内的值
//因此复制期间不存在重写的风险
ints.copyWithin(2,0,6);
alert(ints); //[0,1,2,0,1,2,3,4,5,8,9]
reset()

//支持负索引，与fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4,-7,-3);
//ints.copyWithin(6,3,7)
alert(ints); // [0,1,2,3,4,5,3,4,5,6]
reset();

//索引过低，忽略
ints.copyWithin(1,-15,-12);
alerts(ints); //[0,1,2,3,4,5,6,7,8,9]
reset()

//索引过高，忽略
ints.copyWithin(1,12,15);
alerts(ints); //[0,1,2,3,4,5,6,7,8,9]
reset()

//索引反向，忽略
ints.copyWithin(2,4,2);
alerts(ints); //[0,1,2,3,4,5,6,7,8,9]
reset()

//索引部分可用，复制填充可用部分
ints.copyWithin(4,7,10);
alerts(ints); //[0,1,2,3,7,8,9,7,8,9]

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 转换方法

前面提到过，所有对象都有toLocalString()、toString()和valueOf()方法。

valueOf()返回的还是数组本身。
toString()返回数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。也就是说，对数组的每个值都会调用其toSring()方法，以得到最终的字符串。来看下面的例子：

let colors = ["red","blue","green"]; //创建一个包含3个字符串的数组
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors); //red,blue,green

1
2
3
4

首先是被显示调用的toSring()和valueOf()方法，他们分别返回了数组的字符串表示，即将所有字符串串联起来，以逗号分隔。最后一行代码直接用alert()显示数组，因为alert()期待字符串，所以会在后台调用数组的toString()方法，从而得到跟前面一样的结果。

toLocaleString()方法也可能返回跟toString()和valueOf()相同的结果，但也不一定。在调用数组的toLocaleString()方法时，会得到一个逗号的数组值的字符串。它与另外两个方法唯一的区别是，为了得到最终的字符串，会调用数组的每个值的toLocaleString()方法，而不是toString()方法：

let person1 = {
  toLocaleString() {
    return "Nicholaos";
  },
  toString(){
    return "Nicholas";
  }
}

let person2 = {
  toLocaleString() {
    return "Griorios";
  },
  toString() {
    return "Greg";
  }
}

let prople = [person1, person2];
alert(people) // Nicholas,Greg
alert(people.toString()) // Nicholas,Greg
alert(prople.toLocaleString()) // Nicholaos,Griorios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

如果想使用不同的分隔符，则可以使用join()方法。join()方法接受一个参数，即字符串分隔符，返回包含所有项的字符串：

let colors = ["red","green","blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue

1
2
3

注意

如果数组中某一项是null或undefined，则在join()、toLocaleString()、toString()和valueOf()返回的结果中会以空字符串表示。

# 栈方法

ECMAScript给数组提供几个方法，让它看起来像是另一种数据结构。数组对象可以像栈一样，也就是一种限制插入和删除项的数据结构。

栈是一种后进先出（LIFO，Last-In-First-Out）的结构，也就是最近添加的项先被删除。数据项的插入（成为推入，push）和删除（成为弹出，pop）只在栈的一个地方发生，即栈顶。 ECMAScript数组提供了push()和pop()方法，以实现类似栈的行为。
push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度。
pop()方法则用于删除数组的最后一项，同时减少数组的length值，返回被删除的项。

let colors = new Array(); 
let count = colors.push("red","green");
alert(count); //2

count = colors.push("black");
alert(count); //3

let item = colors.pop();
alert(item); //black
alert(colors.length); //2

1
2
3
4
5
6
7
8
9
10

栈方法可以与数组的其他任何方法一起使用：

let colors = ["red","blue"];
colors.push("brown");
colors[3] = "black"
alert(colors.length); //4

let item = colors.pop();
alert(item); //black

1
2
3
4
5
6
7

# 队列方法

就像是栈以LIFO形式限制访问的数据结构一样，队列以先进先出（FIFO，Firsht-In-First-Out）形式限制访问。队列在列表末尾添加数据，但从列表开头获取数据。

shift()方法，它会删除数组的第一项并返回它，然后数组长度减1。使用shift()和push()，可以把数组当成队列来使用：

let colors = new Array();
let count = colors.push("red","green");
alert(count); //2

count = colors.push("black");
alert(count); //3

let item = colors.shift();
alert(item); //red
alert(colors.length); //2

1
2
3
4
5
6
7
8
9
10

ECMAScript也为数组提供了unshift()方法。顾名思义，unshift()就是执行跟shift()相反的操作：在数组开头添加任意多个值，然后返回新的数组长度。
通过使用unshift()和pop(),可以在相反方向上模拟队列，即在数组开头添加新数据，在数组末尾取得数据：

let colors = new Array();
let count = colors.unshift("red","green");
alert(count); //2

count = colors.unshift("black"); //["black","red","green"]
alert(count);

let item = colors.pop();
alert(item); //green
alert(colors.length) //2

1
2
3
4
5
6
7
8
9
10

# 排序方法

数组有两个方法可以用来对元素重新排序：reverse()和sort()。

reverse()方法就是将数组元素反向排列:

let values = [1,2,3,4,5];
values.reverse();
alert(values); //5,4,3,2,1

1
2
3

这个方法很直观，但不够灵活，所以才有了sort()方法。

默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序，即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序：

let values = [0,1,5,10,15];
values.sort();
alert(values); // 0,1,10,15,5

1
2
3

因为调用sort()会按照这些数值的字符串形式重新排序。因此，即使5小于10，但字符串“10”在字符串“5”前头，所以10还是会排到5前面。很明显，这在大多数情况下都不是最合适的。

为此，sort()方法可以接收一个比较函数，用于判断哪个值应该排在前面。

此比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回0；如果第一个参数应该排在第二个参数后面，就返回正值：

function compare(value1,value2) {
  if(value1 < value2>){
    return -1;
  }else if(value1 > value2){
    return 1;
  }else{
    return 0;
  }
}

1
2
3
4
5
6
7
8
9

这个比较函数可以适用于大多数数据类型，可以把它当做参数传给sort()方法：

let values = [0,1,5,10,15];
value.sort(compare);
alert(values); //0,1,5,10,15

1
2
3

在给sort()方法传入比较函数后，数组中的数值在排序后保持了正确的顺序。当然，比较函数也可以产生降序效果，只要把返回值交换一下即可：

function compare(value1, value2){
  if(value1 < value2){
    return 1;
  }else if(value1 > value2){
    return -1;
  }else{
    return 0;
  }
}

let values = [0,1,5,10,15];
values.sort(compare);
alert(values); //15,10,5,1,0

1
2
3
4
5
6
7
8
9
10
11
12
13

此外，这个比较函数还可以简写为一个箭头函数:

let values = [0,1,5,10,15];
values.sort((a,b) => a<b?1:a>b?-1:0);
alert(values); //15,10,5,1,0

1
2
3

注意

reverse()和sort()都返回调用它们的数组的引用

如果数组的元素是数值，或者是其valueOf()方法返回数值的对象（如Date对象），这个比较函数还可以写得更简单，因为这时可以直接用第二个值减去第一个值：

function compare(value1,value2){
  return value2 - value1
}

1
2
3

# 操作方法

concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个心构建的数组。如果传入一个或多个数组，则concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组，则直接把它们添加到结果数组末尾。

let colors = ["red","green","blue"];
let colors2 = colors.concat("yellow",["black","brown"]);

console.log(colors); //["red","green","blue"]
console.log(colors2); //["red","green","blue","yellow","black","brown"]

1
2
3
4
5

提示

原数组是没有变的哦！

打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号：Symbol.isConcatSpreadable。这个符号能够阻止concat()打平参数数组。相反，把这个值设置为true可以强制打平参数数组对象。

let colors = ["red","green","blue"];
let newColors = ["black","brown"];
let moreNewColors = {
  [Symbol.isConcatSpreadable]:true,
  length:2,
  0:"pink",
  1:"cyan"
};

newColors[Symbol.isConcatSpreadable] = false;

//强制不打平数组
let colors2 = colors.concat("yellow",newColors)

//强制打平类数组对象
let colors3 = colors.concat(moreNewColors);

console.log(colors); //["red","green","blue"]
console.log(colors2); //["red","green","blue","yellow",["black","brown"]]
console.log(colors3); //["red","green","blue","pink","cyan"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

slice()用户创建一个包含原数组中一个或多个元素的新数组。slice()方法可以接收一个或两个参数：返回元素的开始索引和结束索引。如果只要一个参数，则slice()会返回该索引到数组末尾的所有元素。如果有两个参数，则slice()返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素。记住，这个操作不影响原始数组

let colors = ["red","green","blue","yellow","purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1,4);

alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

1
2
3
4
5
6

注意

如果silce()的参数有负值，那么就以数值长度加上这个负值的结果确定位置。比如，在包含5个元素的数组上调用slice(-2,-1)，就相当于调用slice(3,4)。如果结束位置小于开始位置，则返回空数组。

splice()的主要目的是在数组中插入元素，但有3中不同的方式使用这个方法。

删除。需要给splice()传2个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如splice(0,2)会删除前两个元素。
插入。需要给splice()传入3个参数：开始位置、0(要删除的元素数量)和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素。比如，`splice(2,0,"red","green")会从数组位置2开始插入字符串"red"和"green"。
替换。splice()在删除元素的同时可以在指定位置插入新元素，同样要传入3个参数：开始位置、要删除元素的数量和要插入的任意多个元素。要插入的元素数量不一定跟删除的元素数量一致。比如，splice(2,1,"red","green")会在位置2删除一个元素，然后从该位置开始向数组中插入"red"和"green"。

splice()方法始终返回这样一个数组，它包含从数组中被删除的元素(如果没有删除元素，则返回空数组)。

let colors = ["red","green","blue"];
let removed = colors.splice(0,1); //删除第一项
alert(colors); //green,blue
alert(removed); //red

removed = colors.splice(1,0,"yellow","orange");
alert(colors); //green,yellow,orange,blue
alert(removed); //空数组

removed = colors.splice(1,1,"red","purple");
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow

1
2
3
4
5
6
7
8
9
10
11
12

# 搜索和位置方法

ECMAScript提供两类搜索数组的方法：按严格相等搜索和按断言函数搜索

严格相等 ECMAScript 提供了3个严格相等的搜索方法：indexOf()、lastIndexOf()和includes()。其中，前两个方法在所有版本中都可用，而第三个方法是ECMAScript 7新增的。

这些方法都接收两个参数：

要查找的元素
一个可选的起始搜索位置

indexOf()和includes()方法从数组前头（第一项）开始向后搜索，而lastIndexOf()从数组末尾（最后一项）开始向前搜索。

indexOf()和lastIndexOf()都返回要查找的元素在数组中的位置，如果没找到则返回-1。includes()则返回布尔值，表示是否至少找到一个与指定元素匹配的项。在比较第一个参数跟数组每一项时，会使用全等（===）比较，也就是说两项必须严格相等。

let numbers = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.includes(4)); //true

alert(numbers.indexOf(4,4)); //5
alert(numbers.lastIndexOf(4,4)); //3
alert(numbers.includes(4,7));// false

let person = {name:"Nicholas"};
let people = [{name:"Nicholas"}];
let morePeople = [person];

alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
alert(people.includes(person)); //false
alert(morePeople.includes(person)); //true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

断言函数 ECMAScript也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。

断言函数接收3个参数：

元素：数组中当前搜索的元素
索引：当前元素的索引
数组本身：正在搜索的数组

断言函数返回真值，表示是否匹配。

find()和findIndex()方法使用了断言函数。这两个方法都从数组的最小索引开始。find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引。这两个方法也都接受第二个可选的参数，用于指定断言函数内部的this的值。

const people = [
  {name:"Matt",age:27},
  {name:"Nicholas",age:29}
]

alert(people.find((element,index,array) => element.age < 28>)); //{name:"Matt",age:27}
alert(people.findIndex((element,index,array) => element.age < 28>)) //0

1
2
3
4
5
6
7

找到匹配项后，这两个方法都不能继续搜索

const evens = [2,4,6];

//找到匹配项后，永远不会检查数组的最后一个元素
evens.find((element,index,array) => {
  console.log(element)
  console.log(index)
  console.log(array)
  return element === 4
});

//2
//0
//[2,4,6]
//4
//1
//[2,4,6]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 迭代方法

ECMAScript为数组定义了5个迭代方法。每个方法接收两个参数：

以每一项为参数运行的函数
可选的作为函数运行上下文的作用域对象（影响函数中的this值）

传给每个方法的函数接收3个参数:

数组元素
元素索引
数组本身

因具体方法而异，这个函数的执行结果可能会也可能不会影响方法的返回值。数组的5个迭代方法如下：

every()：对数组每一项都运行传入的函数，如果对每一项都返回true，则这个方法返回true。
filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回。
forEach()：对数组每一项都允许传入的函数，没有返回值。
map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。
some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

这些方法都不改变调用它们的数组

let numbers = [1,2,3,4,5,4,3,2,1];
let everyResult = numbers.evrey((item,index,array) => item > 2);
alert(everyResult); //false

let someResult = numbers.some((item,indexnarray) => item > 2);
alert(someResult); //true

let filterResult = numbers.filter((item,index,array) => item > 2);
alert(filterResult);//3,4,5,4,3

let mapResult = numbers.map((item,index,array) => item * 2);
alert(mapResult); //2,4,6,8,10,8,6,4,2

1
2
3
4
5
6
7
8
9
10
11
12

本质上，forEach()方法相当于使用for循环遍历数组。

let numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach((item,index,array) => {
  //执行某些操作
})

1
2
3
4
5

# 归并方法

ECMAScript为数组提供了两个归并方法：

reduce()
reduceRight()

这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。reduceRight()从最后一项开始遍历至第一项。

这两个方法都接收两个参数：

对每一项都会运行的归并函数
可选的以之为归并起点的初始值

传给reduce()和reduceRight()的函数接收4个参数：

上一个归并值
当前值
当前项的索引
数组本身

这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数。如果没有给这个两个方法传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

可以使用reduce()函数执行累加数组中所有数值的操作，比如:

let values = [1,2,3,4,5];
let sum = values.reduce((prev, cur, index, array) => prev + cur;
alert(sum); //15

1
2
3

第一次执行归并函数时，prev是1。第二次执行时，prev是2（1+2）,cur是3（数组第三项）。如此递进，直到把所有项都遍历一次，最后返回归并结果。

reduceRight()方法与之类似，只是方向相反：

let values = [1,2,3,4,5];
let sum = values.reduceRight(function(prev,cur,index,array){
  return prev + cur;
})
alert(sum); //15

1
2
3
4
5

← 小结期约 →