第六章 集合引用类型
6.1 Object
6.2 Array
6.3 定型数组
6.4 Map
6.5 WeakMap
6.6 Set
6.7 WeakSet
6.8 迭代与扩展操作
6.9 总结
6.1 Object
第一种是使用new操作符和Object构造函数
const person =new Object()
person.name='Nicholas';
person.age=18
//打印属性的两种方式
console.log(person.name)
console.log(person[age)
//typeof操作符检测属性是否存在
console.log(typeof person.age==='number')
第二种是使用对象字面量表示法
const person={
name:'Nicholas',
age:18
}
6.2 Array
使用Array构造函数创建函数
const arr =new Array(1,2,3,4,5)
使用数组字面量表示法
const arr=[1,2,3,4,5]
ES6为Array构造函数新增了两个用于创建数组的静态方法：from()和of()。
from()
const m=new Map().set(1,2).set(3,4).set(5,6)
const s=new Set().add(1).add(2).add(3)
console.log(m.from(m))//[[1,2],[3,4],[5,6]]
console.log(m.from(s))//[1,2,3]
of()
console.log(Array.of(1,2,3,4))//[1,2,3,4]
console.log(Array.of(undefined))//[undefined]
6.2.4 检测数组
Array.isArray()方法
if (Array.isArray(value)){
// 操作数组
}
6.2.5 迭代器方法
keys()返回数组索引的迭代器
const a=["foo","bar","baz"]
const aKeys=Array.from(a.keys())
console.log(akeys)//[0,1,2]
values()返回数组元素的迭代器
const a=["foo","bar","baz"]
const aValues=Array.from(a.values())
console.log(aValues)//["foo","bar","baz"]
entries()返回索引/值对的迭代器
const a=["foo","bar","baz"]
const aEntries=Array,from(a.entries())
console.log(aEntries)//[["0","foo"],["1","bar"],["2","baz"]]
6.2.6 复制和填充方法
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()方法批量复制 浅复制
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]xxxxxxxxxx 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]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(); // 从
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, 0, 1, 2, 3, 4, 5, 8, 9]
reset();
// 支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的
ints.copyWithin(-4, -7, -3);
alert(ints); // [0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围：
let ints,
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引过低，忽略
ints.copyWithin(1, -15, -12);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset()
// 索引过高，忽略
ints.copyWithin(1, 12, 15);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引反向，忽略
ints.copyWithin(2, 4, 2);
alert(ints); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset();
// 索引部分可用，复制、填充可用部分
ints.copyWithin(4, 7, 10)
alert(ints); // [0, 1, 2, 3, 7, 8, 9, 7, 8, 9];ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置ints.copyWithin(0, 5); console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
6.2.7 转换方法
前面提到过，所有对象都有 toLocaleString()、toString()和 valueOf()方法。其中，valueOf()
返回的还是数组本身。而 toString()返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的
字符串。也就是说，对数组的每个值都会调用其 toString()方法，以得到最终的字符串。
如果想使用不同的分隔符，则可以使用 join()方法。join()方法接收一个参数，即字符串分隔符，返回包含所
有项的字符串。
toLocaleString() toString()
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,perosn2]
console.log(people)//Nicholas,Greg
console.log(people.toString())//nicholsa,Greg
console.log(people.toLcaleString())//nikolaos,Grigorios
valueOf()
let num=[8,8,8,8]
console.log(num.valueof())//[8,8,8,8]
join()
let num=['明天','会','更好']
console.log(num.join("&&"))//明天&&会&&更好
6.2.8 栈方法
push()方法接收任意数量的参数
const arr =new Array(1,2,3,4,5)
arr.push(6,7)
console.log(arr)//[1,2,3,4,5,6,7]
pop()方法则用于删除数组的最后一项
const arr =new Array("red","yellow",'bule')
arr.pop()
6.2.9 队列方法
shift()方法会删除数组的第一项并返回它，然后数组长度减 1
let arr=[1,2,3,4,5]
sonsole.log(arr.shift(),arr.length)//[2,3,4,5] , 4
unshift()方法在数组开头添加任意多个值，然后返回数组的新长度
cosnt colors=['red','green']
let count=colors.unshift('yellow','black')
console.log(colors)//['yellow','black','red','green']
6.2.10 排序方法
reverse()方法将数组元素反向排列。
let numbers=[1,2,3,4,5]
console.log(numbers.reverse())//[5,4,3,2,1]
sort()方法默认按照升序重新排列数组元素，为此sort() 方法会在每一项上调用String() 转型函数，然后比较字符串来决定顺序。
let numbers=[5555,555,55,5]
console.log(numbers.sotr())//[5,55,555,5555]
//实现逆序排列
let values=[0,1,5,10,15]
values.sotr((a,b)=>a<b? 1:a>b? -1:0)
console.log(values)//[15,10,5,1,0]
6.2.11 操作方法
concat()方法会在现有数组的基础上创建一个新数组，然后把参数添加到新数组的末尾，最后返回这个新数组。
let colors=["red","green","blue"]
let NewColors=["black","brown"]
let moreNewColors={
[Symbol.isConcatSpeadable]:true,
length:2,
O:"pink",
1:"cyan"
};
newColors[symbol.isConcatSpreadable]=false
//强制不打平:嵌套的数组不打散
let colors=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()方法可以
接收一个或两个参数：返回元素的开始索引和结束索引。如果只有一个参数，则 slice()会返回该索引
到数组末尾的所有元素。如果有两个参数，则 slice()返回从开始索引到结束索引对应的所有元素，其
中不包含结束索引对应的元素。记住，这个操作不影响原始数组。来看下面的例子：`
let arr=["red","green","blue"]
console.log(arr.slice(1))//["red","green","blue"]
console.log(arr,slice(1,2))//["green","blue"]
最强大的数组API :splice()方法返回从数组中被删除的元素。主要目的是在数组中间插入元素，但有 3 种不同的方式使用这个方法。
- 删除。需要给splice() 传 2 个参数：要删除的第一个元素的位置和要删除的元素数量。可以从数组中删除任意多个元素，比如
splice(0, 2)会删除前两个元素。 - 插入。至少需要给splice() 传 3 个参数：开始位置、0（要删除的元素数量）和要插入的元素，可以在数组中指定的位置插入元素。第三个参数之后还可以传第四、第五个参数，乃至任意多个要插入的元素。比如
splice(2, 0, 'red', 'green')会从数组位置 2 开始插入字符串 'red' 和 'green' 。 - 替换。splice() 在删除元素的同时在指定位置插入新元素。比如
splice(2, 1, 'red', 'green')会删除位置 2 的元素，然后从该位置开始向数组中插入 'red' 和 'green' 。
let colors=["red","green","blue"]
let removed=colors.splice(0,1)//删除第一项
console.log(colors)//["green","blue"]
console.log(removed)//["red"]
removed=colors.splice(1,0,"yellow","orange")//在位置1插入两个元素
console.log(colors)//["green","yellow","orange","blue"]
console.log(removed)//空数组 因为没有删除元素
removed=colors.splice(1,1,"red","purple")//插入两个值,删除第一个元素
console.log(colors) //["yellow","red","purple","orange","blue"]
console.log(removed)//yellow
6.2.12 搜索和位置方法
indexOf()、lastIndexOf()和includes()方法都接收两个参数：要查找的元素和一个可选的起始搜索位置。indexOf() 和includes() 方法从数组第一项开始向后搜索，lastIndexOf() 方法从数组最后一项开始向前搜索。indexOf( ) 和lastIndexOf( ) 都返回要查找的元素在数组中的位置，如果没找到则返回 -1。includes() 返回布尔值，表示是否至少找到一个与指定元素匹配的项。这些方法在比较时都会使用全等操作符===比较。
let numbers=[1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4))//3 从开始位置找到4的索引位置
console.log(numbers.lastIndexOf(4))//5 从结束位置开始找到4的索引位置
console.log(numbers.inCludes(4))//ture 从开始位置找 返回的是布尔值
console.log(numbers.indexOf(4,4))// 5 (4:检索值,4:从开始位置4找)
console.log(numbers.lastIndexOF(4,4))// 3 从结束位置找 4
console.log(numbers.inCludes(4,7)) //false
let person={name:"Nicholas"}
let people=[{name:"Nicholas"}]
let morePeople=[person]
console.log(people.indexOf(person))//-1
console.loe(morePeople.indexOf(person))//0
console.log(morePeople.inCludes(person))//true
6.2.12.2 断言函数
`断言函数接收 3 个参数：元素、索引和数组本身。其中元素是数组中当前搜索的元素，索引是当前
元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。`
find()和findIndex()方法都接受断言函数作为参数。find() 返回第一个匹配的元素，findIndex() 返回第一个匹配元素的索引。这两个方法都接收第二个可选的参数，用于指定断言函数内部this的值。
const peopel=[{name:"Matt",age:27},{name:"Nicholas"}]
console.log(people.find((element,index,array)=>element.age<28))//{name:"Matt",age:27} 返回匹配的元素
console.log((people.findIndex((element,index,array)=>element.age<28))//0 返回匹配的元素索引
6.2.13 迭代方法
-
every()：对数组每一项都运行传入的函数，如果每一项的函数都返回true，则该方法返回true，否则返回false。 -
let numbers=[1,2,3,4,5,4,3,2,1] let everyResult=numbers.every((item,index,array)=>item>2) console.log(everyResult)//false -
some()：对数组每一项都运行传入的函数，如果有一项函数返回true，则该方法返回true，否则返回false。 -
let numbers=[1,2,3,4,5,4,3,2,1] let someResult=numbers.some((item,index,array)=>item>2) console.log(someResult)//true -
map()：对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。 -
let numbers=[1,2,3] let mapResult=numbers.map((item,index,array)=>item*2) console.log(mapResult)//[2,4,6] -
filter()：对数组每一项都运行传入的函数，函数返回true的项会组成数组，最后返回该数组。 -
let numbers=[1,2,3,4,5,4,3,2,1] let fillterResult=numbers.fillter((item,index,array)=>item>2) console.log(fillterResult)//[3,4,5,4,3] -
forEach()：对数组每一项都运行传入的函数，没有返回值，相当于for循环遍历了数组。 -
let numbers=[1,2,3,4,5,4,3,2,1] let forEachResult=numbers.forEach((item,index,array)=>{ //执行操作 })6.2.14 归并方法
ECMAScript为数组提供了两个归并方法：
reduce()和reduceRight()。这两个方法都会迭代数组的所有项，并在此基础上构建一个最终返回值。reduce() 方法从数组第一项开始遍历到最后，reduceRight() 从最后一项开始遍历至第一项。这两个方法都接收两个参数：对每一项都会运行的归并函数，以及可选的作为归并起点的初始值。归并函数接收 4 个参数：上一个归并值、当前项、当前项的索引和数组本身。归并函数的返回值会作为下一个归并函数的第一个参数值。如果没有给这两个方法传入可选的第二个参数（归并起始值），则第一次迭代将从数组的第二项开始，因此一开始传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。
reduce()let values=[1,2,3,4,5] let sum=values.reduce((prev,cur,index,array)=>prev+cur) console.log(sum)//15 总和educeRight()方法与之类似，只是方向相反。,reduceRight()let values=[1,2,3,4,5] let sum=values.edceRight(function(prev,cur,index,array){ return prev+cur; }) console.log(sum)//15
