JavaScript-集合引用类型（Array）

一、创建数组

1.1 使用 Array 构造函数

let colors = new Array();

给构造函数传入一个数值，然后 length 属性就会被自动创建并设置为这个值

let colors = new Array(20); // (20) [empty × 20]

也可以给 Array 构造函数传入要保存的元素

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

在使用 Array 构造函数时，也可以省略 new 操作符

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

1.2 使用数组字面量（array literal）表示法

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

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

1.3 ES6 新增的用于创建数组的静态方法（from()、 of()）

• from() 用于将类数组结构转换为数组实例
• of() 用于将一组参数转换为数组实例

1.3.1 Array.from()

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.from() 对现有数组执行浅复制

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]

• Array.from() 还接收第二个可选的映射函数参数

这个函数可以直接增强新数组的值，而无须像调用 Array.from().map() 那样先创建一个中间数组

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x ** 2);
console.log(a2); // [1, 4, 9, 16]

• 还可以接收第三个可选参数，用于指定映射函数中 this 的值

这个重写的 this 值在箭头函数中不适用

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

1.3.2 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]

二、数组空位

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

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

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

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

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

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

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

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

• map() 会跳过空位置

const options = [1,,,,5];
console.log(options.map(() => 6)); 
// [6, undefined, undefined, undefined, 6]

• join() 视空位置为空字符串

const options = [1,,,,5];
console.log(options.join('-')); // "1----5"

三、数组索引

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

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

• 数组中元素的数量保存在 length 属性中，这个属性始终返回 0 或大于 0 的值

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

通过修改 length 属性，可以从数组末尾删除或添加元素

删除

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

添加

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

使用 length 属性可以方便地向数组末尾添加元素

let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[colors.length] = "black"; // 添加一种颜色（位置 3）
colors[colors.length] = "brown"; // 再添加一种颜色（位置 4）

let colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[99] = "black"; // 添加一种颜色（位置 99）
alert(colors.length); // 100

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

四、检测数组

• instanceof

在只有一个网页（因而只有一个全局作用域）的情况下，使用 instanceof 操作符就足矣

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

• Array.isArray()

确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的

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

五、迭代器方法

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

• 因为这些方法都返回迭代器，所以可以将它们的内容通过 Array.from() 直接转换为数组实例

5.1 keys()

keys() 返回数组索引的迭代器

const a = ["foo", "bar", "baz", "qux"];
const aKeys = Array.from(a.keys());
console.log(aKeys); // [0, 1, 2, 3]

5.2 values()

values() 返回数组元素的迭代器

const a = ["foo", "bar", "baz", "qux"];
const aValues = Array.from(a.values());
console.log(aValues); // ["foo", "bar", "baz", "qux"]

5.3 entries()

entries() 返回索引/值对的迭代器

const a = ["foo", "bar", "baz", "qux"];
const aEntries = Array.from(a.entries());
console.log(aEntries); 
// [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

5.4 使用 ES6 的解构

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

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

六、复制和填充方法（ES6新增）

ES6 新增了两个方法：批量复制方法 copyWithin()，以及填充数组方法 fill()

• 都需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引
• 不会改变数组的大小

6.1 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];

• 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(zeroes); // [0, 0, 0, 0, 0] 

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

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

6.2 copyWithin

copyWithin() 会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置

• 开始索引和结束索引则与 fill() 使用同样的计算方法

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

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

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

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

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

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

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

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

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

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

七、转换方法（不会改变原数组）

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

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

7.1 toString()

toString() 返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串

null 和 undefined 值没有 toString() 方法

let colors = ["red", "blue", "green"];
console.log(colors.toString()) // red,blue,green

7.2 valueOf()

valueOf() 返回的还是数组本身

let colors = ["red", "blue", "green"];
console.log(colors.valueOf()); // ['red', 'blue', 'green']

7.3 toLocaleString()

toLocaleString() 方法也可能返回跟 toString() 和 valueOf() 相同的结果，但也不一定

• 在调用数组的 toLocaleString() 方法时，会得到一个逗号分隔的数组值的字符串
• 它与另外两个方法唯一的区别是，为了得到最终的字符串，会调用数组每个值的 toLocaleString() 方法，而不是 toString() 方法

let person1 = { 
 	toLocaleString() { 
 		return "Nikolaos"; 
 }, 
 toString() { 
 	return "Nicholas"; 
 } 
}; 
let person2 = { 
 toLocaleString() { 
	 return "Grigorios"; 
 }, 
 toString() { 
 	return "Greg"; 
 } 
}; 
let people = [person1, person2]; 
console.log(people.toString()); // Nicholas,Greg 
console.log(people.toLocaleString()); // Nikolaos,Grigorios

7.4 join()

如果想使用不同的分隔符，则可以使用 join() 方法

• join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串
• 如果不给 join() 传入任何参数，或者传入 undefined，则仍然使用逗号作为分隔符

let colors = ["red", "green", "blue"]; 
console.log(colors6.join()); // red,green,blue
console.log(colors6.join("")); // redgreenblue
console.log(colors6.join(" ")); // red green blue
console.log(colors6.join(",")); // red,green,blue
console.log(colors6.join("||")); // red||green||blue

八、栈方法（会改变原数组）

• 数组对象可以像栈一样，也就是一种限制插入和删除项的数据结构
• 栈是一种后进先出（LIFO，Last-In-First-Out）的结构，也就是最近添加的项先被删除
• 数据项的插入（称为推入，push）和删除（称为弹出，pop）只在栈的一个地方发生，即栈顶
• ECMAScript 数组提供了 push() 和 pop() 方法，以实现类似栈的行为

8.1 push - 末尾添加

push() 方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
console.log(count); // 2

8.2 pop - 末尾删除

pop() 方法则用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项

let colors = ["red", "green", "blue"];
let item = colors.pop(); // 取得最后一项
console.log(item); // blue
console.log(colors.length); // 2
console.log(colors); // ['red', 'green']

九、队列方法（会改变原数组）

• 就像栈是以 LIFO 形式限制访问的数据结构一样，队列以先进先出（FIFO，First-In-First-Out）形式限制访问
• 队列在列表末尾添加数据，但从列表开头获取数据
• 使用 shift() 和 push()，可以把数组当成队列来使用

9.1 shift() - 开头删除

删除数组的第一项并返回它，然后数组长度减 1

let colors = ["red", "green", "blue"];
let item = colors.shift(); // 取得第一项
console.log(item); // red 
console.log(colors.length); // 2

9.2 unshift() - 开头添加

在数组开头添加任意多个值，然后返回新的数组长度

• 通过使用 unshift() 和 pop()，可以在相反方向上模拟队列，即在数组开头添加新数据，在数组末尾取得数据

let colors = ["red", "green", "blue"];
let item = colors.unshift("black","pink"); 
console.log(item); // 5
console.log(colors)
//['black', 'pink', 'red', 'green', 'blue']

十、排序方法（会改变原数组）

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

10.1 reverse()

数组元素反向排列

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

let colors = ["red", "green", "blue"];
console.log(colors.reverse()); 
//['blue', 'green', 'red']

10.2 sort()

sort() 会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面

• reverse() 这个方法很直观，但不够灵活，所以才有了 sort() 方法
• sort() 会在每一项上调用 String() 转型函数，然后比较字符串来决定顺序
• 即使数组的元素都是数值，也会先把数组转换为字符串再比较、排序
• sort() 方法是对数组中的值进行冒泡排序

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

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

// 比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值
// 如果两个参数相等，就返回 0
// 如果第一个参数应该排在第二个参数后面，就返回正值
// value1 代表相邻两元素中后面一个，value2 代表前面一个！！！
function compare(value1, value2) { 
 	if (value1 < value2) { 
	 return -1; //可以将其看作 false
 } else if (value1 > value2) { 
	 return 1; //可以将其看作 true
 } else { 
	 return 0; // 可以将其看作函数失效
 } 
}

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

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

比较函数也可以产生降序效果

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); 
console.log(values); // [15,10,5,1,0]

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

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

倒序

// 比较函数就是要返回小于 0、0 和大于 0 的数值，因此减法操作完全可以满足要求
function compare(value1, value2){ 
 	return value2 - value1; 
}

正序

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

十一、操作方法

11.1 concat() - 合并（不会改变原数组）

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"]

打平数组参数的行为可以重写，方法是在参数数组上指定一个特殊的符号：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"]

11.2 slice() - 截取（不会改变原数组）

slice() 用于创建一个包含原有数组中一个或多个元素的新数组

• slice() 方法可以接收一个或两个参数：返回元素的开始索引和结束索引
• 如果只有一个参数，则 slice() 会返回该索引到数组末尾的所有元素
• 如果有两个参数，则 slice() 返回从开始索引到结束索引对应的所有元素，其中不包含结束索引对应的元素
• 如果结束位置小于开始位置，则返回空数组

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

注意：如果 slice() 的参数有负值，那么就以数值长度加上这个负值的结果确定位置。比如，在包含 5 个元素的数组上调用 slice(-2,-1)，就相当于调用 slice(3,4)。

11.3 splice() - 删除/插入/替换（会改变原数组）

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

11.3.1 删除

需要给 splice() 传 2 个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素。返回被删除元素的新数组

let colors = ["red", "green", "blue"];
console.log(colors.splice(0, 1)); // ['red']
console.log(colors); // ['green', 'blue']

11.3.2 插入

需要给 splice() 传 3 个参数，开始位置、0（要删除的元素数量）、要插入的元素

• 在数组中指定的位置插入元素
• 第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素

let colors = ["red", "green", "blue"];
console.log(colors.splice(2, 0, "yellow", "purple")); // []
console.log(colors);
// ['red', 'green', 'yellow', 'purple', 'blue']

11.3.3 替换

splice() 在删除元素的同时可以在指定位置插入新元素，同样要传入 3 个参数：开始位置、要删除元素的数量、要插入的任意多个元素

let colors = ["red", "green", "blue"];
console.log(colors.splice(1, 1, "yellow", "purple")); // ['green']
console.log(colors); // ['red', 'yellow', 'purple', 'blue']

十二、搜索和位置方法

12.1 严格相等

ECMAScript 提供了 3 个严格相等的搜索方法：indexOf()、lastIndexOf() 和 includes()

• 这些方法都接收两个参数：要查找的元素、一个可选的起始搜索位置
• 在比较第一个参数跟数组每一项时，会使用全等（===）比较，也就是说两项必须严格相等

12.1.1 indexOf()

indexOf() 方法从数组前头（第一项）开始向后搜索

• 返回要查找的元素在数组中的位置，如果没找到则返回 -1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
console.log(numbers.indexOf(4)); // 3
console.log(numbers.indexOf(4,4)); // 5

let person = { name: "Nicholas" }; 
let people = [{ name: "Nicholas" }]; 
let morePeople = [person];
console.log(people.indexOf(person)); // -1
console.log(morePeople.indexOf(person)); // 0

12.1.2 lastIndexOf()

lastIndexOf() 从数组末尾（最后一项）开始向前搜索

• 返回要查找的元素在数组中的位置，如果没找到则返回 -1

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.lastIndexOf(4)); // 5
console.log(numbers.lastIndexOf(4, 4)); // 3

12.1.3 includes() - ES7新增

includes() 方法从数组前头（第一项）开始向后搜索

• 返回布尔值，表示是否至少找到一个与指定元素匹配的项

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
console.log(numbers.includes(4)); // true
console.log(numbers.includes(4, 7)); // false

let person = { name: "Nicholas" }; 
let people = [{ name: "Nicholas" }]; 
let morePeople = [person];
console.log(people.includes(person)); // false 
console.log(morePeople.includes(person)); // true

12.2 断言函数

ECMAScript 也允许按照定义的断言函数搜索数组，每个索引都会调用这个函数

• 断言函数的返回值决定了相应索引的元素是否被认为匹配
• 断言函数接收 3 个参数：元素、索引、数组本身，其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组
• 断言函数返回真值，表示是否匹配
• find() 和 findIndex() 方法使用了断言函数
• 这两个方法都从数组的最小索引开始
• 这两个方法也都接收第二个可选的参数，用于指定断言函数内部 this 的值

12.2.1 find()

find() 返回第一个匹配的元素

const people = [ 
 { 
 	name: "Matt", 
	age: 27 
 }, 
 { 
	 name: "Nicholas", 
	 age: 29 
 } 
];
console.log(people.find((element, index, array) => element.age < 28)); 
// {name: "Matt", age: 27} 

12.2.2 findIndex()

findIndex() 返回第一个匹配元素的索引

const people = [ 
 { 
 	name: "Matt", 
	age: 27 
 }, 
 { 
	 name: "Nicholas", 
	 age: 29 
 } 
];
console.log(people.findIndex((element, index, array) => element.age < 28)); 
// 0

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

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]

evens.findIndex((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]

十三、迭代方法

ECMAScript 为数组定义了 5 个迭代方法。每个方法接收两个参数：以每一项为参数运行的函数、可选的作为函数运行上下文的作用域对象（影响函数中 this 的值）

13.1 every() - 判断

判断数组中的元素是否都符合条件，返回值为布尔值

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

13.2 some() - 判断

查找数组中是否有满足条件的元素，返回值为布尔值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2); 
console.log(someResult); // true

13.3 filter() - 过滤（不会改变原数组）

创建并返回一个符合条件的新数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2); 
console.log(filterResult); // [3,4,5,4,3]

13.4 map() - 遍历（不会改变原数组）

逐个改变数组元素，创建并返回一个新数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2); 
console.log(mapResult); // [2,4,6,8,10,8,6,4,2]

13.5 forEach() - 遍历（会改变原数组）

遍历数组，会修改原来的数组，没有返回值

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
numbers.forEach((item, index, array) => { 
 // 执行某些操作
});

十四、归并方法

ECMAScript 为数组提供了两个归并方法：reduce() 和 reduceRight()

• 这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值
• 这两个方法都接收两个参数：对每一项都会运行的归并函数、可选的以之为归并起点的初始值
• 归并函数接收 4 个参数：上一个归并值、当前项、当前项的索引、数组本身
• 这个函数返回的任何值都会作为下一次调用同一个函数的第一个参数
• 如果没有传入可选的第二个参数（作为归并起点值），则第一次迭代将从数组的第二项开始，因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项

14.1 reduce()

reduce() 方法从数组第一项开始遍历到最后一项

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

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

14.2 reduceRight()

reduceRight() 从最后一项开始遍历至第一项

• 第一次调用归并函数时 prev 是 5，cur 是 4

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