数组相关方法汇总

408 阅读11分钟

写在前面

数组是我们在编程的时候经常需要操作的数据,对于数组的方法大家肯定也都了解,不过总结起来数组的方法还是挺多的,像本可爱这样的熬夜族记忆力衰退,经常写着写着就忘了这个方法怎么用了,比如说参数是什么,需不需要回调函数,返回的结果是什么······唉,一把辛酸泪!所以,今天特意总结了数组的相关方法,方便以后查找!


1、concat()把元素连接到数组中

语法:array.concat(value,···)

示例:

 let arr=[0,1,2,3];
 newArr=arr.concat(4,5,6);
 console.log(arr);   //[0,1,2,3,]
 console.log(newArr);//[0,1,2,3,4,5,6]

作用:将参数连接到数组上,并返回一个新数组,不会改变原数组。

2、every()判断数组中是否所有元素都满足判定条件

语法:array.every(function(currentValue,index,arr){}, thisValue)


示例:

let arr=[0,1,2,3];
res1=arr.every(function(value){
     return value<4
})
res2=arr.every(function(value){
     return value<3
})
console.log(res1);   //true
console.log(res2);   //false

作用:判断数组里面的所有元素是否满组传入的函数中的判定条件,当全部满足时返回true,否则返回false。不会改变原数组。

注:在空数组上调用every()返回true

3、filter()返回满足条件的所有元素

语法:array.filter(function(currentValue,index,arr){}, thisValue)


示例:

let arr=[0,1,2,3];
result=arr.filter(function(value){
      return value<3
   })
console.log(arr); //[0, 1, 2, 3]
console.log(result);//[0, 1, 2]

作用:ilter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。该方法不改变原数组。

4、forEach()为每个元素调用一次函数

语法:array.forEach(function(currentValue, index, arr){}, thisValue)


示例:

let sum = 0;
let arr = [65, 44, 12, 4];
arr.forEach(function(item) {
    sum += item;
})
console.log(sum); //65+44+12+4=125

作用:forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。该方法无返回值

注意:(1)forEach() 对于空数组是不会执行回调函数的。

注意:(2)如果调用函数把新的元素追加到array中,则这些新添加的元素不会被遍历到。如果调用的函数修改了未被遍历到的已存在元素,则调用时会传递修改后的值。

5、indexOf()返回数组中某个指定元素第一次出现位置

语法:array.indexOf(item,start)


示例:

let arr = [0,1,2,1,3];
let index1=arr.indexOf(1);   //从头查找
let index2=arr.indexOf(1,2); //从索引为2的位置开始查找
console.log(index1); // 1
console.log(index2); // 3

作用:该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。若没有找到则返回-1。

6、lastIndexOf()返回数组中某个指定元素最后一次出现的位置

语法:array.lastIndexOf(item,start)


示例:

 let arr = [0,1,2,1,3];
 let lastIndex1=arr.lastIndexOf(1);   //从最后一个元素开始往前查找
 let lastIndex2=arr.lastIndexOf(1,2); //从索引为2的位置开始往前查找
 console.log(lastIndex1); // 3
 console.log(lastIndex2); // 1

作用:该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。如果在数组中没找到指定元素则返回 -1。

7、join()将数组元素衔接为字符串

语法:array.join(separator)


示例:

let arr = [0,1,2,3];
let result=arr.join("_")
console.log(result); //0_1_2_3
console.log(arr);    //[0,1,2,3]

作用:join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。该方法不会改变原数组。

8、length获取数组元素个数

语法:array.length

示例:

let arr = [0,1,2,3];
let length=arr.length;
console.log(length);  //4

作用:获取数组的元素个数,可以通过设置array.length来改变数组的大小,如果设置的length小于原值,会裁减数组,末尾处的元素会丢失。如果设置的length小于原值,数组会变大,新添加到末尾处的元素的值为undefined。

9、map()按照原始数组元素顺序依次处理元素

语法:array.map(function(currentValue,index,arr){}, thisValue)


示例:

let arr = [0,1,2,3];
let result=arr.map(function(val){
    return val*val;
});
console.log(result);  //[0,1,4,9]
console.log(arr);  //[0,1,2,3]

作用:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。该方法不改变原数组,不会对空数组进行检测。

10、pop()移除并返回数组的最后一个元素

语法:array.pop()

示例:

let arr = [0,1,2,3];
let result=arr.pop();
console.log(result); //3
console.log(arr);  //[0,1,2]

作用:pop()方法可以移除并返回数组的最后一个元素,该方法会改变原数组。如果数组已经为空,pop()不会操作该空数组,返回undefined。

11、push()在数组末尾追加元素并返回新长度

语法:array.push(value,···)

示例:

let arr = [0,1,2,3];
let result=arr.push(4,5,6);
console.log(result); //7
console.log(arr);  //[0,1,2,3,4,5,6]

作用:push()方法将指定的值追加到数组末尾,并返回数组的新长度。该方法会改变原数组。

12、reduce()每个元素执行函数(升序执行)并将结果汇总返回

语法:array.reduce(function(total, currentValue, currentIndex, arr){}, initialValue)


示例:

let arr = [0,1,2,3];
let result=arr.reduce(function(total,currentValue){
    return total+currentValue;
},0)
console.log(result);  //0+1+2+3=6
console.log(arr);  //[0,1,2,3]

作用:reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 对于空数组是不会执行回调函数的。该方法不会改变原数组。

13、reduceRight()每个元素执行函数(降序执行)并将结果汇总返回

reduceRight() 方法的功能和 reduce()功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

14、reverse()颠倒数组中的元素顺序

语法:array.reverse()

示例:

let arr = [0,1,2,3];
let result=arr.reverse();
console.log(arr);  //[3,2,1,0]
console.log(result);//[3,2,1,0]

作用:颠倒数组中元素的顺序,并返回颠倒后的数组,该方法会改变原数组。

15、shift()移除并返回数组的第一个元素

语法:array.shift()

示例:

let arr = [0,1,2,3];
let result=arr.shift();
console.log(arr);  //[1,2,3]
console.log(result);// 0

作用:shift()方法会移除并返回数组的第一个元素,并将后续元素前移一位,如果数组为空,则shift()什么都不做,直接返回undefined。该方法会修改原数组。

16、unshift()在数组头部插入元素并返回新长度

语法:array.unshift(value,···)

示例:

let arr = [0,1,2,3];
let result=arr.unshift(-2,-1);
console.log(arr);  //[-2,-1,0,1,2,3]
console.log(result);// 6

作用:在数组的头部插入指定的元素,并返回新的数组长度。该方法会改变原数组。

17、slice()返回数组指定起止位置之间的子数组

语法:array.slice(start,end)


示例:

let arr = [0,1,2,3];
let result=arr.slice(1,3);
console.log(arr);  //[0,1,2,3]
console.log(result);//[1,2]

作用:slice()返回指定起止位置之间的子数组。该方法不改变原数组。

18、splice()插入、删除或替换数组元素

语法:array.splice(index,howmany,item1,.....,itemX)


示例:

let arr = [0,1,2,3];
let result=arr.splice(1);//删除从索引1开始的所有元素
console.log(arr);   //[0]
console.log(result);//[1,2,3]

let arr1 = [0,1,2,3];
let result1=arr1.splice(1,1);//删除从索引1开始的一个元素
console.log(arr1); //[0,2,3]
console.log(result1);//[1]

let arr2=[0,1,2,3];
let result2=arr2.splice(1,1,"haha");//删除从索引1开始的一个元素,并插入新元素"haha"
console.log(arr2); //[0,"haha",2,3]
console.log(result2);//[1]

作用:splice()将从指定的index开始删除指定个数的元素,并且用参数列表中指定的值来替换删除的那些元素,返回一个新数组,新数组中的元素为被删除的元素。此方法会改变原数组。

19、some()判断数组中是否有满足判定条件的元素

语法:array.some(function(currentValue,index,arr){},thisValue)


示例:

let arr=[0,1,2,3];
res1=arr.some(function(value){
     return value<1
})
res2=arr.some(function(value){
     return value>3
})
console.log(res1);   //true
console.log(res2);   //false

作用:some()方法用来测试数组中是否有元素满足某些条件,若有则返回true,否则返回false。该方法不会改变原数组。

注:在空数组上调用some()返回false。

20、sort()对数组元素进行排序

语法:array.sort(sortfunction)


示例:

let arr=[0,3,1,2];
result1=arr.sort();//按字母顺序排序
console.log(result1);   //[0,1,2,3]
console.log(arr);   //[0,1,2,3]

result2=arr.sort(function(a,b){
      return a-b; //升序排列
})
console.log(result2);   //[0,1,2,3]
console.log(arr);   //[0,1,2,3]

result3=arr.sort(function(a,b){
       return b-a; //降序排列
})
console.log(result3);   //[3, 2, 1, 0]
console.log(arr);   //[3, 2, 1, 0]

作用:sort()方法会对数组元素进行排序,如果在调用sort()方法时不带参数,将按字母顺序(更精确的说,是字符编码顺序)对数组元素进行排序,这时候要先把元素转化成字符串才好进行比较。如果想按照其他方式进行排序则需要提供比较函数。该方法会改变原数组。

21、toLocaleString()将数组转化为本地化字符串

语法:array.toLocaleString()

示例:

let arr=[0,1,2,3];
let result=arr.toLocaleString();
console.log(result); //0,1,2,3
console.log(arr);    //[0, 1, 2, 3]

作用:调用每个数组元素的 toLocaleString() 方法,然后使用地区特定的分隔符把生成的字符串连接起来,形成一个字符串并返回。该方法不改变原数组。

22、toString()将数组转化成字符串

语法:array.toString()

示例:

let arr=[0,1,2,3];
let result=arr.toString();
console.log(result); //0,1,2,3
console.log(arr);    //[0, 1, 2, 3]

作用:toString()方法把数组转化成字符串,并返回该字符串。该方法不改变原数组。

23、from()将类数组对象转为真正的数组

语法:Array.from(arrayLike, mapFn, thisArg)


示例:

let arrayLike = {
            "0": "a",
            "1": "b",
            "2": "c",
            length: 3
    };
let arr=Array.from(arrayLike);
console.log(arr); //["a", "b", "c"]

let arr2=Array.from(arrayLike,function (value) {
      return value+value;
  });
console.log(arr2);//["aa", "bb", "cc"]

作用:Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map。

24、Array.of()将一组值,转换为数组

语法:Array.of(value,···)

示例:

let arr=Array.of(0,1,2,3)
console.log(arr);//[0,1,2,3]

作用:Array.of()方法用于将一组值,转换为数组。

25、find()找到第一个符合条件的成员

语法:arr.find(function(currentValue,index,arr){}, thisValue)


示例:

let arr=[0,1,2,3]
let result=arr.find(function(val){
    return val>1;
})
console.log(result);//2

作用:find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。该方法不改变原数组。

26、findIndex()找到第一个符合条件的成员的索引

和findIndex()方法一样,只不过返回的是索引。这里不再赘述。

27、fill()使用给定值填充数组中起止索引内的全部元素

语法:arr.fill(value, start, end)


示例:

let arr=[0,1,2,3]
let result=arr.fill(1,1,3)
console.log(result);//[0,1,1,3]
console.log(arr);//[0,1,1,3]

作用:fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。该方法会改变原数组。

28、keys()、values()、entries()用for···of遍历数组的键、值、键值对

语法:arr.keys()、arr.values()、arr.values()

示例:

let arr=["a","b","c"]
for(let result1 of arr.keys()){
    console.log(result1);
};
//0 
//1
//2
 for(let result2 of arr.values()){
     console.log(result2);
};
//a 
//b
//c
for(let result3 of arr.entries()){
    console.log(result3);
};
// 0 "a"
// 1 "b"
// 2 "c"

作用:创建一个数组迭代对象,用于遍历数组,可以用 for...of 循环进行遍历,唯一的区别是 keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

29、includes()判断数组是否包含指定的值

语法:arr.includes(searchElement, fromIndex)


示例:

let arr=[0,1,2,3]
let result1=arr.includes(1);
let result2=arr.includes(1,2);
console.log(result1); //true
console.log(result2); //false

作用:从指定位置或从头(如果没有指定开始位置的索引)开始查找数组中是否包含指定值,若有则返回true,否则返回false。该方法不改变原数组。

30、flat()按照指定深度扁平化数组

语法:arr.flat(depth)

示例:

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

作用:flat()用于将嵌套的数组“拉平”,变成一维的数组,如果不传参数depth默认为1。该方法返回一个新数组,不会改变原数组。

31、flatMap()执行函数后进行一层扁平化的操作

语法:arr.flatMap(function(currentValue,index,arr){}, thisValue)


示例:

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只扁平化一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

作用:flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 效果几乎相同。