红宝书——06.集合引用类型（重点Array）

目录

1.Object

2.Array

1.用于创建数组的静态方法： from() 和 of()

2.数组空位

3.检测数组

4.迭代器方法

5.复制和填充方法

6.转换方法

7.栈方法、队列方法

8.排序方法

9.操作

10.搜索和位置方法

11.迭代方法

12.归并方法

---

1.Object

显式地创建 Object 的实例有两种方式。第一种是使用 new 操作符和 Object 构造函数，如下所示：
let person = new Object();
person.name = "Nicholas";
person.age = 29;
另一种方式是使用对象字面量（object literal）表示法。对象字面量是对象定义的简写形式，目的是为了简化包含大量属性的对象的创建。比如，下面的代码定义了与前面示例相同的 person 对象，但使用的是对象字面量表示法：
let person = {
name: "Nicholas",
age: 29
};

2.Array

有几种基本的方式可以创建数组。一种是使用 Array 构造函数，比如：
let colors = new Array();
如果知道数组中元素的数量，那么可以给构造函数传入一个数值，然后 length 属性就会被自动创建并设置为这个值。比如，下面的代码会创建一个初始 length 为 20 的数组：
let colors = new Array(20);

1.用于创建数组的静态方法： from() 和 of()

Array.from() 的第一个参数是一个类数组对象，即任何可迭代的结构，或者有一个 length 属性
和可索引元素的结构。

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]

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]

2.数组空位

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

3.检测数组

在只有一个网页（因而只有一个全局作
用域）的情况下，使用 instanceof 操作符就足矣：
if (value instanceof Array){
// 操作数组
}

使用 instanceof 的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，因此就会有两个不同版本的 Array 构造函数。

为解决这个问题，ECMAScript 提供了 Array.isArray() 方法。这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。来看下面的例子：
if (Array.isArray(value)){
// 操作数组
}

4.迭代器方法

 keys() 、 values() 和entries() 。 keys() 返回数组索引的迭代器， values() 返回数组元素的迭器，而 entries() 返回索引/值对的迭代器。

5.复制和填充方法

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

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

let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

ints.copyWithin(4, 0, 3);

alert(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]

6.转换方法

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

在调用数组的 toLocaleString() 方法时，会得到一个逗号分隔的数组值的字符串。

7.栈方法、队列方法

ECMAScript 数组提供了 push() 和 pop() 方法，以实现类似栈的行为。

push()返回最新的数字长度，pop()放回弹出的值。

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

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

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

8.排序方法

reverse() 和 sort() 。 reverse() 方法就是将数组元素反向排列（大到小）字典序

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

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

不按照字典序，自己写一个比较函数作为参数

function compare(value1, value2) {
if (value1 < value2) {
return -1;        //负值不交换
} else if (value1 > value2) {
return 1;        //正值交换
} else {
return 0;
}
}
这个比较函数可以适用于大多数数据类型，可以把它当作参数传给 sort() 方法，如下所示：
let values = [0, 1, 5, 10, 7];
values.sort(compare);
alert(values); // 0,1,5,7,10

9.操作

 concat() 方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组。原来的数组不变。

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

 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

最强大的数组方法splice()：

splice(开始位置, 删除个数（可以为0）, 加入的元素)

可以删除、插入、替换

10.搜索和位置方法

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

严格相等

在比较第一个参数跟数组每一项时，会使用全等（ === ）比较，也就是说两项必须严格相等。

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

接收两个参数：要查找的元素和一个可选的起始搜索位置。 indexOf() 和 includes() 方法从数组前头（第一项）开始向后搜索，而 lastIndexOf() 从数组末尾（最后一项）开始向前搜索。

indexOf() 和 lastIndexOf() 都返回要查找的元素在数组中的位置，如果没找到则返回-1。
includes() 返回布尔值，表示是否至少找到一个与指定元素匹配的项。

断言函数

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

find() 和 findIndex() 方法使用了断言函数。这两个方法都从数组的最小索引开始。 find() 返回第一个匹配的元素， findIndex() 返回第一个匹配元素的索引。找到匹配项后，这两个方法都不再继续搜索。

11.迭代方法

ECMAScript 为数组定义了 5 个迭代方法。每个方法接收两个参数：以每一项为参数运行的函数，
以及可选的作为函数运行上下文的作用域对象（影响函数中 this 的值）。传给每个方法的函数接收 3个参数：数组元素、元素索引和数组本身。

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

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

12.归并方法

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

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

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