ES6——数组（方法总结）

最新推荐文章于 2025-03-14 10:47:13 发布

web小奶精

最新推荐文章于 2025-03-14 10:47:13 发布

阅读量5.3k

点赞数 4

分类专栏： ES6

本文链接：https://blog.youkuaiyun.com/fenger_c/article/details/107898336

版权

ES6 专栏收录该内容

3 篇文章

订阅专栏

1.Array.of()——将参数中的所有值作为元素形成数组

2.Array.from()——从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

3.find() ——【查找】查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

4.findIndex()——【查找】查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

5.fill()—— 【填充】将一定范围索引的数组元素内容填充为单个指定的值。

6.copyWithin()——【填充】将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

7.entries()——【遍历】遍历键值对

8.keys()——【遍历】遍历键名

9.values()——【遍历】遍历键值

10.includes()——数组是否包含指定值

11.flat()——嵌套数组转一维数组

12.flatMap()——先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

13.扩展运算符

14.filter()——创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

15.Array.isArray()—— 用于确定传递的值是否是一个 Array。

16. forEach()——对数组的每个元素执行一次给定的函数。

17.reduce() —计算数组元素相加后的总和

18.concat() —方法用于合并两个或多个数组。

19.every() —判断数组内的所有元素是否符合判断条件，返回一个布尔值。

20.indexOf()—在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

21. lastIndexOf() 方法返回指定元素在数组中的最后一个的索引。

22.join()——将一个数组（或一个类数组对象）的所有元素连接成一个字符串。

23.map()—创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

24.pop()—从数组中删除最后一个元素，并返回该元素的值。

25.push() —将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

26.reduceRight()—接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

27.reverse() —方法将数组中元素的位置颠倒，并返回该数组。

28.shift() —从数组中删除第一个元素，并返回该元素的值。

29. slice() —返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。

30.some() —测试数组中是不是至少有1个元素通过了被提供的函数测试，返回Boolean类型。

31. sort() 方法用原地算法对数组的元素进行排序，并返回数组。

32. splice() —通过删除或替换现有元素或者原地添加新的元素来修改数组。

33.toLocaleString()——返回一个字符串表示数组中的元素。

34.toString() —返回一个字符串，表示指定的数组及其元素。

35.unshift() —方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。

注意事项

1.Array.of()——将参数中的所有值作为元素形成数组

Array.of(1,2,3,4); //[1, 2, 3, 4] 
Array.of(1,"2",false); //[1, "2", false] 
Array.of(3) //[3]
Array.of(3).length //1
Array.of() //[]
Array.of(null) //[null]
Array.of(undefined) //[undefined]

不同类型也可以形成数组
没有参数则为空数组
与对比Array()，Array()当参数只有一个时，是指定数组的长度。

Array(3).length //3

2.Array.from()——从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

Array.from([1,2]) //[1, 2]
Array.from([1,,2]) //[1, undefined, 2]
Array.from([1]) //[1]
Array.from([null]) //[null]
Array.from(8) //[] 
Array.from(null) //TypeError: Array.from requires an array-like object - not null or undefined
Array.from(undefined) //TypeError: Array.from requires an array-like object - not null or undefined
Array.from() //TypeError: Array.from requires an array-like object - not null or undefined
Array.from('mandy') //["m","a","n","d","Y"]
Array.from([1, 2, 3], x => x * x) //[1,4,9]

从 set 生成数组

const set = new Set(['mandy', 'sky', 'hans', 'mandy']);
Array.from(set) //["mandy","sky","hans"]

从map生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values(); // ['a', 'b'];
Array.from(mapper.keys()) // ['1', '2'];

转换可迭代对象

转换为map

let map=new Map();
map.set(1,"mandy");
map.set(2,"chen");
Array.from(map)； //[[1,"mandy"],[2,"mandy"]]

转换为set

let array=["mandy","chen","mandy"];
let set=new Set(array);
Array.from(set)； //["mandy","chen"]

使用箭头函数（自动生成自增数字的数组）

Array.from({length:4},(length,i)=>i)； //[0, 1, 2, 3]

类数组对象：必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。
从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

3.find() ——【查找】查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

let array=Array.of(1,2,3,4,5,6);
(array.find(item=>(item>4))；

4.findIndex()——【查找】查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

let array=Array.of(1,3,2,4);
array.findIndex(item=>item==3)； //1

5.fill()—— 【填充】将一定范围索引的数组元素内容填充为单个指定的值。

let array=Array.of(1,2,3,4,5,6,7);
array.fill(0,1,4)；//[1, 0, 0, 0, 5, 6, 7]

参数1：用来填充的值
参数2：被填充的起始索引
参数3(可选)：被填充的结束索引，默认为数组末尾

6.copyWithin()——【填充】将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。

let array =Array.of(1,2,3,4);
array.copyWithin(0,2,4); // [3, 4, 3, 4]

let array1 =Array.of(1,2,3,4,5);
console.log(array1.copyWithin(0,2)); //[3, 4, 5, 4, 5]

let array2=Array.of(1,2,3,4,5,6);
array2.copyWithin(-3,0); //[1,2,3,1,2,3]

参数1：被修改的起始索引
参数2：被用来覆盖的数据的起始索引
参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾

7.entries()——【遍历】遍历键值对


for(let [key,value] of ["mandy","chen"].entries()){
    console.log(key,value);
}
//0 "mandy"
//1 "chen"
let entries=["mandy","chen"].entries();
console.log(entries.next().value); //[0, "mandy"]
console.log(entries.next().value); //[1, "chen"]

console.log([...["mandy","chen"].entries()]); //[[0, "mandy"],[1,"chen"]]

8.keys()——【遍历】遍历键名

for(let [key] of ["mandy","chen"].entries()){
    console.log(key);
}
//0
//1
console.log([...["mandy","chen"].keys()]); //[0,1]

9.values()——【遍历】遍历键值

for(let value of ["mandy","chen"].values()){
    console.log(value);
}
//mandy
//chen

console.log([...["mandy","chen"].values()]); //["mandy","chen"]

10.includes()——数组是否包含指定值

let array=[1,2,3,4,NaN];
console.log(array.includes(4)); //true
console.log(array.includes(2,2));  //false
console.log(array.includes(NaN));  //true

11.flat()——嵌套数组转一维数组

console.log([1,[2,3],[4,5]].flat()); //[1, 2, 3, 4, 5]
console.log([1,[2,[3,4]]].flat(1)); //[1, 2, [3,4]]
console.log([1,[2,3,[4,[5,6]]]].flat(Infinity)); //[1, 2, 3, 4, 5, 6]
console.log([1,,[2,,3]].flat()); //[1, 2, 3]

如果有参数，则指定转换的嵌套层数
参数Infinity ：不管嵌套多少层，都是转为一维数组
可以自动跳过空格

12.flatMap()——先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

console.log([1,2,,3].flatMap(i=>i*i)); //[1，4，9]

13.扩展运算符

复制数组

let array=["mandy","chen"]
console.log([...array]);

合并数组

console.log([...[1,2],...[3,4]]);

14.filter()——创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

let array=Array.of("mandy","chen",18);
console.log(array.filter(item=>item.length>3)); //["mandy", "chen"]
console.log(array); //["mandy", "chen", 18]

filter 不会改变原数组，它返回过滤后的新数组。

15.Array.isArray()—— 用于确定传递的值是否是一个 `Array`。

console.log(Array.isArray([1,2,3])); //true
console.log(Array.isArray({"mandy":"chen"}));  //false
console.log(Array.isArray(12));  //false

16. forEach()——对数组的每个元素执行一次给定的函数。

let array=["mandy","chen",18,9999999];
array.forEach(item =>console.log(item));
//mandy
//chen
//18
//9999999
array.forEach((item,index)=>console.log(index+" "+item))
//0 mandy
//1 chen
//2 18
//3 9999999

let sum = 0;
let array = [1, 2, 3, 4];
getSum = (item) => {
    sum += item;
}
array.forEach(getSum); //foreach里面的方法不用加括号
console.log(sum);  //10

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

若需要提前终止循环，可以使用

for...of / for...in
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()

17.reduce() —计算数组元素相加后的总和

let array = [1, 2, 3, 4]
getSum = (total, item) => {
    return total + item;
}
console.log(array.reduce(getSum)); //10
console.log(array.reduce(getSum,10)); //20

18.`concat()` —方法用于合并两个或多个数组。

let array1=["I","am"];
let array2=["mandy","chen"];
console.log(array1.concat(array2)); //["I", "am", "mandy", "chen"]
console.log(array1); //["I", "am"]
console.log(array2); //["mandy", "chen"]

此方法不会更改现有数组，而是返回一个新数组。
不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝

19.`every()` —判断数组内的所有元素是否符合判断条件，返回一个布尔值。

let array=[1,2,3,4,5,10];
console.log(array.every(item=>item>0)); //true
console.log(array.every(item=>item>3));  //false


let array2=[];
console.log(array2.every(item=>item>0)); //true

注意：若收到一个空数组，不管如何，都会返回 true! ！！！
every 不会改变原数组。

20.`indexOf()`—在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

let array = [1, 4, 3, 5, 4];
console.log(array.indexOf(4)); //1
console.log(array.indexOf(4,2)); //4
console.log(array.indexOf(4,-4)); //1
console.log(array.indexOf(4,-3)); //4

如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.
indexOf() 方法对大小写敏感！

21. `lastIndexOf()` 方法返回指定元素在数组中的最后一个的索引。

let array = [1, 3, 2, 3, 2, 1];
console.log(array.lastIndexOf(2));  //4
console.log(array.lastIndexOf(3, 9));  //3
console.log(array.lastIndexOf(3, 1));  //1

从数组的后面向前查找，从 fromIndex 处开始。
如果该值大于或等于数组的长度，则整个数组会被查找。
如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。
如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

22.`join()——`将一个数组（或一个类数组对象）的所有元素连接成一个字符串。

let array=["mandy","chen","age"]
console.log(array.join()); //mandy,chen,age
console.log(array.join("")); //mandychenage
console.log(array.join("-"));  //mandy-chen-age
console.log(array.join("+"));  //mandy+chen+age

如果数组只有一个项目，那么将返回该项目而不使用分隔符。
如果缺省该值，数组元素用逗号（,）分隔。
如果separator是空字符串("")，则所有元素之间都没有任何字符。

23.map()—创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

let array=[1,2,3];
console.log(array.map(item=>item*2));  //[2,4,6]
console.log(array); //[1,2,3]

原数组不会被修改。

24.`pop()`—从数组中删除最后一个元素，并返回该元素的值。

let array=["mandy","chen","age"];
console.log(array.pop());  //age
console.log(array); //["mandy", "chen"]

此方法更改数组的长度。
空数组上调用 pop()，它返回 undefined

25.`push()` —将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

let array=["mandy","chen"];
console.log(array.push("age"));  //3
console.log(array);  //["mandy", "chen", "age"]

当调用该方法时，返回值为新的 length 属性值。

26.reduceRight()—接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

let array=[[1,2],[3,4],[5,6]];
console.log(array.reduceRight((sum,current)=>sum.concat(current))); 
// [5, 6, 3, 4, 1, 2]
let array1=[1,2,3,4];
console.log(array1.reduceRight((sum,current)=>sum+=current));  //10
let array2=['1','2','3','4']
console.log(array2.reduceRight((sum,current)=>sum.concat(current))); //4321

27.`reverse()` —方法将数组中元素的位置颠倒，并返回该数组。

let array = ["mandy","chen","age"];
console.log(array.reverse()); //["age","chen","mandy"]
console.log(array); //["age","chen","mandy"]

会改变原数组
返回一个颠倒后的类数组对象的引用。

28.`shift()` —从数组中删除第一个元素，并返回该元素的值。

let array=[1,2,3,4]
console.log(array.shift()); //1
console.log(array);  //[2,3,4]

如果数组为空则返回undefined 。

29. `slice()` —返回一个新的数组对象，这一对象是一个由 `begin` 和 `end` 决定的原数组的浅拷贝。

let array = [1, 2, 3, 4, 5];
console.log(array.slice(1)); //[2, 3, 4, 5]
console.log(array.slice(2,4));  //[3, 4]
console.log(array.slice(-3,-1)); //[3, 4]
console.log(array);  //[1, 2, 3, 4, 5]

原始数组不会被改变。
包括 begin，不包括end
如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

30.`some()` —测试数组中是不是至少有1个元素通过了被提供的函数测试，返回Boolean类型。

let array = [1, 2, 3, 4];
console.log(array.some(item => item > 2));  //true
console.log(array);  //[1, 2, 3, 4]

如果用一个空数组进行测试，在任何情况下它返回的都是false。
不会改变数组

31. `sort()` 方法用原地算法对数组的元素进行排序，并返回数组。

let array = ["mandy", "chen", "age"];
console.log(array.sort()); //["age", "chen", "mandy"]
console.log(array); //["age", "chen", "mandy"]
let array1 = [1, 2, 10000, 90];
console.log(array1.sort());  //[1, 10000, 2, 90]
console.log(array1.sort((a,b)=>a-b)); //[1, 2, 90, 10000]
console.log(array1);  //[1, 2, 90, 10000]

默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的
于它取决于具体实现，因此无法保证排序的时间和空间复杂性。
会改变原数组。
如上述例子，比较数字时，并没有按照数字大小排序，如果要按照数字大小排序，则要指定一个比较函数。

32. `splice()` —通过删除或替换现有元素或者原地添加新的元素来修改数组。

let array = ["mandy", "chen", "age", "num"];
console.log(array.splice(1,0,"add")); //[]
console.log(array); //["mandy", "add", "chen", "age", "num"]
console.log(array.splice(1,1,"delete")); //["add"]
console.log(array); //["mandy", "delete", "chen", "age", "num"]
console.log(array.splice(3)); // ["age", "num"]
console.log(array); // ["mandy", "delete", "chen"]

此方法会改变原数组。
start

指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount 可选

整数，表示要移除的数组元素的个数。

如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。

如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, ... 可选

要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

33.`toLocaleString()——`返回一个字符串表示数组中的元素。

var prices = ['￥7', 500, 8123, 12];
console.log(prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }));
//￥7,￥500,￥8,123,￥12
console.log(prices); //["￥7", 500, 8123, 12]

数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

34.`toString()` —返回一个字符串，表示指定的数组及其元素。

let array = [1, 2, "mandy", "chen", 6];
console.log(array.toString()); //1,2,mandy,chen,6
console.log(array);//[1, 2, "mandy", "chen", 6]

35.`unshift()` —方法将一个或多个元素添加到数组的开头,并返回该数组的新长度。

let array = [1, 2, 3];
console.log(array.unshift(3, 4, 5)); //6
console.log(array); //[3, 4, 5, 1, 2, 3]
console.log(array.unshift("mandy")); //7
console.log(array); //["mandy", 3, 4, 5, 1, 2, 3]

该方法修改原有数组。

注意事项

1.判断数组相等不能用==或===

let array1=[1,2,3,4];
let array2=[1,2,3,4]
console.log(array1==array2); //false
console.log(array1===array2); //false

因为JavaScript里面Array是对象，==或===操作符只能比较两个对象是否是同一个实例，也就是是否是同一个对象引用。

2.Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

let set=new Set(["mandy","chen"])
console.log(set.has("mandy")); //true
let map=new Map();
map.set("mandy","chen")
console.log(map.has("mandy"));  //true