本文详细介绍了ES6中数组的扩展功能，如Array.from、Array.of、copyWithin、fill、find、findIndex等，展示了如何方便地操作和处理数组，以及遍历、排序和删除数组元素的方法。
目录
将伪数组(类数组对象或可迭代对象)转换为真正的数组，即只打印出数组的内容，不打印下标.
与Array构造函数的行为不同，Array.of()不会把一个参数作为数组的长度，而是把参数本身作为数组的元素,也就是作为数组内容.
① target （必须）：从该位置开始替换数据，如果为负值，表示倒数.即第一个数，表示从哪个数从头开始复制直到数组长度.
② start（可选）：从该位置开始读取数据，默认为0，如果值为负值，表示从末尾开始计算.即两个参数，第一个是开始放复制内容的下标，第二个是从哪里开始复制往后直到数组长度
④ 会修改原始数组，并返回修改后的数组。它不会改变原始数组的长度。
① 如果只有一个参数是数组全部填充为参数值，个数与数组个数一样
② 如果有三个参数，第一个是添加内容，二、三个参数表示开始填充和到结束填充参数的位置（不包括到的位置）
用于查找数组中满足条件的第一个元素的索引，返回该索引。如果找不到符合条件的元素，则返回-1
与 findLastIndex() 用法和 find() 、findIndex() 一样
将数组中的每个成员都运行一个函数 ，即所有数组的值分别进行函数运算
后面跟的是一个函数，函数可以写成普通函数或者箭头函数，也可以进行简写
可以使用负数，从后往前查找，从元素开始；正数是前往后，从下标开始
前两个删除内容开始和结束下标，后两个添加的新内容，对应 splice()方法
第二个参数是到结束删除的元素的下标（不包括它本身，eg:2，到下标为2的地方，2不删除）
这些是ES6中关于数组的一些扩展功能，可以让我们更方便地处理和操作数组.
数组扩展会使块添加更加方便，那么数组的扩展有：
一、Array.from()
将伪数组(类数组对象或可迭代对象)转换为真正的数组，即只打印出数组的内容，不打印下标.
Eg:
//定义一个数组
const arr={
"0":"内容",
"1":"内容2",
"2":"内容3",
length: 3
}
//打印数组
console.log(arr);//{0: '内容', 1: '内容2', 2: '内容3', length: 3} ----下标加值
//定义数组的内容
console.log(Array.from(arr));//[ "内容", "内容2", "内容3" ] ---只显示值
二、Array.of()
用于将一组值转换为数组
与Array构造函数的行为不同，Array.of()不会把一个参数作为数组的长度，而是把参数本身作为数组的元素,也就是作为数组内容.
Eg：
console.log(Array.of(1,2,"内容"))// [1, 2, '内容']
三、copyWithin()
用于赋值替换数组内容，即用于复制粘贴内容，默认全部复制
① target （必须）：从该位置开始替换数据，如果为负值，表示倒数.即第一个数，表示从哪个数从头开始复制直到数组长度.
② start（可选）：从该位置开始读取数据，默认为0，如果值为负值，表示从末尾开始计算.即两个参数，第一个是开始放复制内容的下标，第二个是从哪里开始复制往后直到数组长度
③ end（可选）：到该位置前停止读取数据，默认等于数组长度，如果为负值，表示从末尾开始计算.即给三个参数，第一个是开始放复制内容的下标，第二个是从哪里开始复制，第三个是到参数时结束复制的下标位置（不包括它到的位置）
④ 会修改原始数组，并返回修改后的数组。它不会改变原始数组的长度。
Eg：
const arr=[1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arr.copyWithin(2));// [1, 2, 1, 2, 3] --------由[1, 2, 3, 4, 5]决定
console.log(arr.copyWithin(2,1));// [1, 2, 2, 1, 2] ------由[1, 2, 1, 2, 3] 决定
console.log(arr.copyWithin(2,1,3))//[1, 2, 2, 2, 2] ---------由[1, 2, 2, 1, 2] 决定 1为开始复制下标 ，3为结束复制下标
四、 fill()
用于填充数组
① 如果只有一个参数是数组全部填充为参数值，个数与数组个数一样
Eg:
const arr=[1,2,3,4,5];
//如果只有一个参数是数组全部填充为参数值，个数与数组个数一样
console.log(arr.fill("a"));//['a', 'a', 'a', 'a', 'a']
② 如果有三个参数，第一个是添加内容，二、三个参数表示开始填充和到结束填充参数的位置（不包括到的位置）
Eg:
const arr=[1,2,3,4,5];
// 三个参数，一为内容，二、三个参数表示开始填充和到结束填充参数的位置（不包括到的位置）
console.log(arr.fill("a",0,1));//['a', 2, 3, 4, 5]
五、find()
用于查找返回满足条件的第一个元素
如果找不到符合条件的元素，则返回undefined
Eg:
const arr=[1,2,3,4,5];
//普通函数的写法
console.log(arr.find(function(a){
return a>2;
})); //3
//箭头函数
console.log(arr.find(a=>a>2));//3
六、findIndex()
用于查找返回满足元素的第一个元素下标
用于查找数组中满足条件的第一个元素的索引，返回该索引。如果找不到符合条件的元素，则返回-1
const arr=[1,2,3,4,5];
//普通函数的写法
onsole.log(arr.findIndex(function(a){
return a>2;
})); //2 --元素的下标
//箭头函数
console.log(arr.findIndex(a=>a>2));//2
七、findLast()
与 findLastIndex() 用法和 find() 、findIndex() 一样
八、includes()
用于判断某个元素是否在数组中，返回布尔类型
是字符串要加双引号
const arr=[1,2,3,4,5];
console.log(arr.includes(7)); //false
console.log(arr.includes(3)); //true
console.log(arr.includes("a"));//false
九、flat()
可以将多维数组转换为一维数组
如果没有参数，默认只能转一层
传参数，是多少，就可以转几层
const arr=[1,2,3,4,5]; //一维数组
const arr1=[1,[2,3,4],5]; //二维数组
const arr2=[1,[2,[3],4],5]; //三维数组
console.log(arr2);// [1, Array(3), 5]
//如果没有参数，默认只能转一层
console.log(arr2.flat()); //[1, 2, Array(1), 4, 5]
//传参，是多少，就可以转几层
console.log(arr2.flat(2));//[1, 2, 3, 4, 5]
十、flatMap()
将数组中的每个成员都运行一个函数 ，即所有数组的值分别进行函数运算
后面跟的是一个函数，函数可以写成普通函数或者箭头函数，也可以进行简写
字符串进行运算会显示为 NaN
const arr=[1,2,"zbc",4,5]; //有字符串返回 Nan
console.log(arr.flatMap(a=>a-2)); //[-1, 0, NAn, 2, 3] ---分别 -2
console.log(arr.flatMap(a=>a*2)); // [2, 4, NaN, 8, 10]
十一、遍历数组
1、keys()
遍历数组的下标
用 for 循环进行遍历
const arr=[1,2,"zbc",4,5];
for(let i of arr.keys()) {
console.log(i); // 0 1 2 3 4 5
}
2、values()
遍历数组的值
const arr=[1,2,"zbc",4,5];
for(let i of arr.values()) {
console.log(i); // 1 2 zbc 4 5
}
3、entries()
遍历数组的下标和值
给一个值得到键值组，给两个值得到键值对
const arr=[1,2,"zbc",4,5];
for(let i of arr.entries()) {
console.log(i); // [0, 1] [1, 2] [2, zbc] [3, 4] [4, 5]
}
for(let [a,b] of arr.entries()) {
console.log(a,b); // 0 1 1 2 2 zbc 3 4 4 5
}
十二、at()
用于数组中使用下标查找元素
可以使用负数，从后往前查找，从元素开始；正数是前往后，从下标开始
const arr=[1,2,"zbc",4,5];
console.log(arr.at(-3));//zbc
console.log(arr.at(2))//zbc
十三、toReversed()
用于颠倒数组成员 （反向输出）
对应 reverse()方法
reverse()会修改原数组
toReverse() 不会修改原数组，会返回一个新数组
const arr=[1,2,"zbc",4,5];
console.log(arr.toReversed());//[5, 4, 'zbc', 2, 1]
十四、toSorted()
用于给数组排序，对应 sort()方法
数字排序，字符串最后
const arr=[1,3,"zbc",5,4];
console.log(arr.toSorted());//[1, 3, 4, 5, 'zbc']
十五、toSpliced()
用来指定位置，删除指定数量的成员，并插入新成员
前两个删除内容开始和结束下标，后两个添加的新内容，对应 splice()方法
第一个参数是开始删除的元素下标
第二个参数是到结束删除的元素的下标（不包括它本身，eg:2，到下标为2的地方，2不删除）
第二个以后的参数是要添加的内容
const arr=[1,3,"zbc",5,4];
console.log(arr.toSpliced(0,2,"内容",100));//['内容', 100, 'zbc', 5, 4]
十六、with()
用来将指定位置的成员替换为新的值
替换对应下标的元素内容，对应splice()方法
const arr=[1,3,"zbc",5,4];
console.log(arr.toSpliced(0,2,"内容",100));//['内容', 100, 'zbc', 5, 4]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
