1.扩展运算符
说明:rest参数的逆运算,将数组转换为用逗号隔开的参数序列
javascript">function fun(a) {
console.log(...a); //1 2 3
}
fun([1, 2, 3])
2.扩展运算符的应用
2.1例子1
javascript">const arr2 = [1, 2, 3]
const arr3 = arr2
arr2[0] = 10
console.log(arr3); //[10,2,3]
说明:当两个引用变量指向同一个对象,如果一个变量,指向另一个变量,那么修改对象里面的值,其他所有的变量看到的是修改后的值
2.2复制数组
javascript"> const arr = [1, 2, 3]
const arr1 = [...arr]
arr[0] = 10
console.log(arr1); //[1,2,3]
2.3合并数组
javascript"> const arr4 = [1, 2]
const arr5 = [3, 4]
const arr6 = [8, 9]
const arr7 = [...arr4, ...arr5, ...arr6]
const arr8 = arr4.concat(arr5, arr6)
console.log(arr8); //[1, 2, 3, 4, 8, 9]
console.log(arr7); // [1, 2, 3, 4, 8, 9]
说明:上面合并方法都是浅拷贝
2.4与解构赋值解构
javascript"> const [first, ...rest] = [1, 2, 3, 4, 5]
console.log(first); //1
console.log(rest);[2, 3, 4, 5]
2.5解构字符串
javascript"> const value = [...'hello']
console.log(value);['h', 'e', 'l', 'l', 'o']
2.6Map和Set结构,Generator函数
说明: 扩展运算符内部调用的是数据结构的Iterator接口
javascript"> let map = new Map([[1, "张三"], [2, "李四"], [3, "王二"]])
let arr9 = [...map.keys()]
let arr10 = [...map.values()]
let arr11 = [...map.entries()]
console.log(arr9); //[1, 2, 3]
console.log(arr10); //['张三', '李四', '王二']
console.log(arr11); //[Array(2), Array(2), Array(2)]
Generator函数运行后,返回一个遍历器对象
javascript"> const arr12 = function* () {
yield 1;
yield 2;
yield 3;
}
console.log(...arr12()); //1 2 3
3. Array.of()
解释:将一组值转换为数组
javascript"> let arr17=Array.of(1,2,3,4,5)
console.log(arr17); //[1, 2, 3, 4, 5]
说明:Array.of()总是返回参数值组成的数组。如果没有参数,就返回一个空数组。
4.Array.from()
解释: 类似数组的对象和可遍历的对象转变成数组
javascript"> let likeArray = {
0: "张三",
1: "李四",
2: "王二",
length: 3
}
ES6之前
注意:JavaScript中的原型链是通过原型对象来实现的
javascript"> const arr14 = [].slice.call(likeArray)
console.log(arr14); // ['张三', '李四', '王二']
ES6之后
javascript"> let arr13 = Array.from(likeArray)
console.log(arr13); //['张三', '李四', '王二']
4.1Array.from()第一个参数
说明:如果参数为数组,也要返回一摸一样的数组
javascript"> let arr15=[1,2]
console.log(Array.from(arr15)); //[1, 2]
4.2Array.from()第二个参数
说明:Array.from()还可以接受一个函数作为第二个参数,类似与数组的map()方法
javascript"> let arr16=Array.from([1,2],(a)=>a*3)
console.log(arr16); //[3,6]
4.3Array.from()第三个参数
说明:Array.from()还可以接受this作为它的第三个参数
5.find()
说明:用于找出第一个符合条件的数组成员。它的参数是一个回调函数,没有找到就返回undefined;回调函数有三个参数,第一个是当前值,第二个是当前值的索引,第三个值原数组。
javascript"> let num=[1,2,3].find(a=>a>2)
console.log(num); //3
6.findIndex()
说明:类似于find方法,只是数组成员都不符合条件,那么返回-1
7.findLast()和findLastIndex()
说明:从数组的最后一个成员开始,依次向前检查,其他保持不变
8.fill()
说明:使用给定值,填充一个数组,还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
javascript"> const arr18=["a","b","c"].fill(5)
console.log(arr18); //[5, 5, 5]
const arr19=["1","2","3"].fill("李四",2,3)
console.log(arr19); //['1', '2', '李四']
9. includes()
说明:判断某个数组中是否包含指定值
javascript"> const arr20=["a","b"]
console.log(arr20.includes("a")); //true
没有这个方法之前用
javascript"> if(arr20.indexOf("a")==-1){
}
10.flat()
说明:数组成员有时候还是数组,那么可以使用flat()用于将嵌套数组提取出来,变成一维数组
javascript"> const arr21=[1,23,4,[12,12]]
console.log(arr21.flat());//[1, 23, 4, 12, 12]
注意:float默认参数为1,如果想要提取多个层,那么写上整数就好了,不管写多少层,在flat参数中写上infinity就可以无论多少层
11.flatMap()
说明:对原数组每一个成员执行一个函数,相当于Array.prototype.map()
javascript"> const arr22=[1,2,4]
// 当然参数是函数和this,函数可以接受三个值,当前值,当前的索引,原数组
console.log(arr22.flatMap((a)=>a*10)); //[10, 20, 40] 只能展开一层数组。
12at()
说明:检索指定索引对应的值,可以为负。
javascript"> const arr23=[5,12,25,14]
console.log(arr23.at(1)); // 12
console.log(arr23.at(-1)); //14