第 6 章 集合引用类型

6.1 Object

6.1.1 创建对象

显式地创建 Object 的实例有两种方式：构造函数和字面量

方式一：使用 new 操作符和 Object 构造函数

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

方式二：对象字面量表示法

这种方式是对象定义的简写形式，目的是简化对象的创建，当包含大量属性的时候。

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

另：可以用对象字面量表示法来定义一个只有默认属性和方法的对象。即下面两种方式等价：

let person = {}; // 与 new Object(); 相同

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

实践开发：对象字面量已经成为给函数传递大量可选参数的主要形式。

function displayInfo(args) { 
 let output = ""; 
 if (typeof args.name == "string") { // 测试每个属性是否存在 
 output += "Name: " + args.name + "\n"; 
 } 
 if (typeof args.age == "number") { 
 output += "Age: " + args.age + "\n"; 
 } 
 alert(output); 
}

displayInfo({ 
 name: "Nicholas", 
 age: 29 
});

displayInfo({ 
 name: "Greg" 
});

可以看到，displayInfo() 接收一个名为 args 的参数。这个参数可能有属性 name 或 age，也可能两个属性都有或者都没有。

6.1.2 存取属性

存取对象的属性，有两种方式：点语法和中括号。

console.log(person["name"]); // "Nicholas"
console.log(person.name); // "Nicholas"

从功能上讲，这两种存取属性的方式没有区别。使用中括号的优势有两个：

优势一：可以通过变量访问属性，

let propertyName = "name";
console.log(person[propertyName]); // "Nicholas"

优势二：如果属性名中包含可能会导致语法错误的字符，或者包含关键字/保留字时，也可以使用中括号语法。比如：

person["first name"] = "Nicholas";

因为first name中包含一个空格，所以不能使用点语法来访问。不过，属性名中是可以包含非 字母数字字符的，这时候只要用中括号语法存取它们就行了。

6.2 Array

ECMAScript 数组跟其他编程语言的数组

相同点：都是一组有序的数据。

不同点：ECMAScript 数组中每个槽位可以存储任意类型的数据。这意味着可以创建一个数组，它的第一个元素是字符串，第二个元素是数值，第三个是对象。ECMAScript 数组是动态大小的，会随着数据添加而自动增长。

6.2.1 创建数组

创建数组有四种方式：构造函数，字面量，Array.from()，Array.of()

方式一：构造函数

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

// 在使用 Array 构造函数时，也可以省略 new 操作符，结果是一样的。
let colors = Array(3); // 创建一个包含 3 个元素的数组
let names = Array("Greg"); // 创建一个只包含一个元素，即字符串"Greg"的数组

方式二：使用数组字面量表示法

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

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

方式三：from() 用于将类数组结构转换为数组实例（ES6 新增）

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

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

// 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);

Array.from() 还可以接收第三个可选参数，用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

方法四：of() 用于将一组参数转换为数组实例（ES6 新增）

Array.of() 可以把一组参数转换为数组。这个方法用于替代在 ES6之前常用的 Array.prototype.slice.call(arguments)

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

6.2.2 数组空位

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

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

// ES6 处理方式：将这些空位当成存在的元素，只不过值为 undefined：
const options = [1,,,,5]; 
for (const option of options) { 
 console.log(option === undefined); 
} 
// false 
// true 
// true 
// true 
// false

ES6 之前的方法则会忽略这个空位，但具体的行为也会因方法而异：
const options = [1,,,,5];
// join() 视空位置为空字符串
console.log(options.join('-')); // "1----5"

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

6.2.3 数组索引

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

注意：如果把一个值设置给超过数组最大索引的索引，就像示例中的 colors[3]，则数组长度会自动扩展到该索引值加 1（示例中设置的索引 3，所以数组长度变成了 4）。

length：数组 length 属性的独特之处在于，它不是只读的。通过修改 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）

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

6.2.4 检测数组

一个经典的 ECMAScript 问题是判断一个对象是不是数组。有两种方式，instanceof 和 Array.isArray()

方式一：使用 instanceof 的问题是假定只有一个全局执行上下文。如果网页里有多个框架，则可能涉及两个不同的全局执行上下文，此时将不再适用。

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

方式二：这个方法的目的就是确定一个值是否为数组，而不用管它是在哪个全局执行上下文中创建的。

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

推荐：使用 Array.isArray(value) 可免去一切烦恼。

6.2.5 迭代器方法

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

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

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

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

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

console.log(aKeys); // [0, 1, 2, 3]
console.log(aValues); // ["foo", "bar", "baz", "qux"]
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

// 使用 ES6 结构
const a = ["foo", "bar", "baz", "qux"];
for (const [idx, element] of a.entries()) {
  alert(idx);
  alert(element);
}

// 0
// foo
// 1
// bar
// 2
// baz
// 3
// qux

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

6.2.6 复制和填充方法

批量复制方法 copyWithin()，以及填充数组方法 fill()。使用这个方法不会改变数组的大小。

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

// copyWithin
let ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
// 从 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]

6.2.7 转换方法

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

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

6.2.8 栈方法

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

栈是一种后进先出（LIFO，Last-In-First-Out）的结构。

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

6.2.9 队列方法

正方向队列

队列只能在队尾插入元素，在队首删除元素，就像我们平时排队买票一样~

// 向队列末尾添加一个元素，直接调用 push 方法即可
function enqueue ( element ) { 
  this.dataStore.push( element ); 
}

//删除队列首部的元素，可以利用 shift 方法
function dequeue () {
    if( this.empty() ) {
      return 'This queue is empty';
    } else {
      this.dataStore.shift();
    }
}

参考：js算法结构-队列

反方向队列

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

6.2.10 排序方法

数组有两个方法可以用来对元素重新排序：reverse()和 sort()。顾名思义，reverse()方法就是将数组元素反向排列。

// 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

// 此外，这个比较函数还可简写为一个箭头函数：
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

数组的元素是数值

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

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

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

6.2.11 操作方法

对于数组中的元素，我们有很多操作方法。比如，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"]

方法 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()的主要目的是在数组中间插入元素，但有 3 种不同的方式使用这个方法。

删除：需要给 splice()传 2 个参数：要删除的第一个元素的位置和要删除的元素数量。

插入：需要给 splice()传 3 个参数：开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。

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

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"); // 在位置 1 插入两个元素
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，只有一个元素的数组

6.2.12 搜索和位置方法

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

按严格相等搜索

ECMAScript 提供了 3 个严格相等的搜索方法：indexOf()、lastIndexOf()和 includes()。其中，前两个方法在所有版本中都可用，而第三个方法是 ECMAScript 7 新增的。这些方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。

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

按断言函数搜索

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

断言函数接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。

find() 和 findIndex() 方法使用了断言函数。

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

6.2.13 迭代方法

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

every()：对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true。

some()：对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true。

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

filter()：对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回。

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

// 这里，调用 filter() 返回的数组包含 3、4、5、4、3，因为只有对这些项传入的函数才返回 true。
// 这个方法非常适合从数组中筛选满足给定条件的元素。

map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

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

forEach()：对数组每一项都运行传入的函数，没有返回值。

本质上，forEach()方法相当于使用 for 循环遍历数组。比如：
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
numbers.forEach((item, index, array) => { 
 // 执行某些操作 
}); 

注意：这些方法都不改变调用它们的数组。

6.2.14 归并方法

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

// 可以使用 reduce()函数执行累加数组中所有数值的操作，比如：
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
alert(sum); // 15

注意：究竟是使用 reduce() 还是 reduceRight()，只取决于遍历数组元素的方向。除此之外，这两个方法没什么区别。