第6章-集合引用类型-红宝书笔记

Object

---

显式创建实例的两种方式

第一种 new操作符

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

第二种 对象字面量

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

属性名可以是字符串或数值，但是数值属性会自动转换为字符串
所以可以认为所有属性名都是字符串形式的
引用object的属性有两种方式

person.name//带点方式
person["name"]//带括号方式，括号内是字符串

只有默认属性和方法的对象

let person = {}; // 与 new Object()相同
person.name = "Nicholas"; 
person.age = 29;

对象字面量已经成为给函数传递大量可选参数的主要方式

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" 
});

Array

---

创建数组

基本方式

let colors = new Array();
let colors = new Array(20);//初始化一个长度为20的数组
let colors = new Array("red", "blue", "green");

如果初始值是一个数值，则会创建这个数值的长度的数组，如果是其他类型，则会创建一个只包含该特定值的数组

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

也可以省略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()方法

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()也能转换带有必要属性(length)的自定义对象

const arrayLikeObject = { 
 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]

Array.from()还接收第二个可选的映射函数参数
还可以接收第三个可选参数，用于指定映射函数中 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()

可以把一组参数转换为数组
用于替代Array.prototype. slice.call(arguments)

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

数组空位

空位的值为undefined

• 创建包含 5 个元素的数组

const options = [,,,,,]; 
console.log(options.length); // 5 
console.log(options); // [,,,,,]

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

console.log(options.join('-')); // "1----5"

数组索引

正常情况访问

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

注意：如果访问的下标超过最大索引，数组长度则会自动扩展到该索引值+1

		let a=[1,5,2,3,4];
        console.log(a.length)//5
        a[7]=9
        console.log(a.length)//8

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

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

检测数组

只有一个网页的情况，使用 instanceof 操作符就足矣

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

一般使用Array.isArray()方法，避免各种各样的问题

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

迭代器方法

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 的解构可以非常容易地在循环中拆分键/值对：

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

复制和填充方法

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]

copyWithin()
会按照指定范围浅复制数组中的部分内容

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

转换方法

toString()方法
会得到一个以逗号分隔的字符串
内部是对数组中的每一个元素进行toString方法

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

join()方法
仍然是将数组转换为字符串，但是可以接收一个参数作为分隔符

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

栈方法和队列方法

栈：

数组内置了两个方法，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()方法

• 删除头部，在尾部添加
• 使用 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

unshift()方法
删除尾部，在头部添加
使用 unshift()和 pop()

let colors = new Array(); // 创建一个数组
let count = colors.unshift("red", "green"); // 从数组开头推入两项
alert(count); // 2 
count = colors.unshift("black"); // 再推入一项
alert(count); // 3 
let item = colors.pop(); // 取得最后一项
alert(item); // green 
alert(colors.length); // 2

排序方法

reverse()和 sort()

reverse()方法

将数组反转

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

sort()方法

默认是升序（从小到大）
内部过程：先把数组的每一项都转换为字符串（即调用String()函数），然后再比较字符串来决定顺序。

比较函数
定义排序规则

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

操作方法

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.isConcat-Spreadable能够阻止打平数组
为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"]

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()方法

返回删除的元素数组，对原数组进行操作

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，只有一个元素的数组

迭代方法

every()方法和some()方法

下面意思是，数组中每一项都大于2时，every()方法返回true
数组中只要有一项大于2，some()方法返回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()方法

返回一个经过筛选的数组

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

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()方法

相当于for循环遍历数组

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

归并方法

reduce（）方法

两个参数

• 第一个参数：必需。用于执行每个数组元素的函数。
  函数接收4个参数:上一个归并值（必须）、当前项（必须）、当前项的索引（可选）和数组本身（可选）。
• 第二个参数：initialValue， 可选。传递给函数的初始值

执行累加数组中所有数值的操作

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

reduceRight（）方法

和reduce（）方法一样，只是反方向操作

---