javascript 常用数组方法

javascript 常用数组方法

常用方法

序号	方法名	方法功能	返回值	是否改变原数组
1	push()	将一个或多个元素添加到数组末尾	新数组的长度	Y
2	pop()	从数组中删除数组的最后一位	被删除的元素	Y
3	shift()	从数组中删除第一个元素	被删除的元素	Y
4	unshift()	将一个或多个元素添加到数组开头	新数组的长度	Y
5	sort()	对数组进行排序	有序新数组	Y
6	slice()	根据指定位置切割数组	切割后的新数组	N
7	concat()	合并两个或多个数组	合并后的新数组	N
8	indexOf()	查询给定元素在数组中的第一个索引	若存在该元素，返回下标；不存在，返回-1	N
9	lastIndexOf()	返回给定元素在数组中的最后一个索引	若存在该元素，返回下标；不存在，返回-1	N
10	reverse()	将数组中元素位置颠倒	返回反转后的原数组	Y
11	forEach()	遍历数组，对每个元素执行一次回调函数	undefined	N
12	map()	遍历数组，对每个元素执行一次回调函数，根据执行后的的返回值，形成一个新数组	由原数组每个元素执行回调函数的结果组成的新数组	N
13	filter()	遍历数组，通过回调函数进行元素筛选，将满足条件的数组元素，组成一个新数组并返回	满足条件的元素组成的新数组	N
14	reduce()	遍历数组，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值	函数累计处理的结果	N
15	splice()	删除或替换现有元素或原地添加新的元素来修改数组，并以数组形式返回被修改的内容	被删除元素组成的新数组，若没有删除返回空数组	Y
16	includes()	判断数组是否包含指定值	包含返回true，不包含返回false	N
17	flat()	按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回	一个包含数组和子数组中所有元素的新数组	N

方法详解

1、push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度

let arr=[1,2,3];
let count=arr.push(4);

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

• 参数
  elementN 可选多个参数，参数会添加到数组末尾

• 返回值
  返回新数组的 length

2、pop()

从数组中删除最后一个元素，并返回该元素的值。

let arr=[1,2,3];
let ele=arr.pop();

console.log(ele);  //3
console.log(arr);  //[1,2]

• 参数
  无

• 返回值
  从数组中删除的元素 （当数组为空时返回值为undefined）。

3、shift()

从数组中删除第一个元素，并返回该元素的值。

let arr=[1,2,3];
let ele=arr.shift();

console.log(ele);   //1
console.log(arr);   //[2,3]

• 参数
  无

• 返回值
  返回从数组中删除的元素；如果数组为空，则返回undefined。

4、unshift()

将一个或多个元素添加到数组的前面，并返回该数组的新长度

let arr=[1,2,3];
let count=arr.unshift(-1,0);

console.log(count);  //5
console.log(arr);   //[-1,0,1,2,3]

• 参数
  elementN 可选多个参数

• 返回值
  新数组的length

5、sort()

就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

let arr=[1,3,56,23,2];

let arr1=arr.sort();
 console.log(arr1);  //[1,2,23,3,56] 

 let arr2=arr.sort(function(a,b){
     return a-b;
 });
 console.log(arr2);  //[1,2,3,23,56]

 let arr3=arr.sort(function (a, b) {
         return b - a;
 });
 console.log(arr3);  //[56,23,3,2,1]

• 参数
  arr.sort([,compareFunction(firstEl,secondEl)])
compareFunction 可选
  用来指定按某种顺序进行排列的函数，如果省略，元素会按照转为字符串的各个字符的Unicode位点进行排序。
  firstEl
  第一个用于比较的元素
  secondEl
  第二个用于比较的元素

• 返回值
  对原数组就地排序后的数组

6、slice()

切割返回一个新的数组对象，这个对象是一个由begin和end 决定的数组的浅拷贝（包括begin起始下标，但不包括end结束下标）

let arr=['a','b','c','d','f'];
let newArr1=arr.slice(1,3);
let newArr2=arr.slice();

console.log(newArr1);  //['b','c']
console.log(newArr2);    //['a','b','c','d','f']
console.log(arr);  //['a','b','c','d','f']

• 参数
  arr.slice([begin[,end]])
  如果不传参数，默认切割整个数组
  begin 可选参数，开始下标
  end 可选参数，结束下标

• 返回值
  一个含有被提取元素的新数组

7、concat()

用于合并两个或多个数组，返回一个新数组

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

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

• 参数
  concat(vaule1[,value2[, ...[,valueN]]])
valueN可选参数

• 返回值
  一个合并后的新数组

8、indexOf()

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

let arr=[1,2,3,4];
let result1=arr.indexOf(3);
let result2=ar.indexOf(5);
console.log(result1,result2);  //2  -1

let arr2=['a','b','c','a','b'];
let result3=arr2.indexOf('a',1);
console.log(result3);  //3

• 参数
  indexOf(substring,start)
substring :必选参数，要搜索的字符串
  start ：可选，开始的位置（默认为0）
• 返回值
  若存在该元素，则返回查找到的该元素的第一个索引下标；若不存在，则返回-1

9、lastIndexOf()

返回在数组中可以找到的一个给定元素的最后一个索引，如果存在，返回-1

let arr=[1,2,3,4,2];
let result1=arr.lastIndexOf(2);  
let result2=arr.lastIndexOf(6);    
console.log(result1,result2)   //4 -1

let arr2=['a','b','c','a','b'];
let result3=arr2.lastIndexOf('a',2);
console.log(result3);  //0

• 参数
  lastIndexOf(substring,start)
substring :必选参数，要搜索的字符串
  start ：可选，开始的位置（默认为字符串的长度）
• 返回值
  若存在该元素，则返回查找到的该元素的最后一个索引下标；若不存在，则返回-1

10、reverse()

将原数组中的元素位置反转，并返回被反转后的原数组

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

• 参数
  无
• 返回值
  返回反转后的原数组

11、forEach()

遍历数组，对数组中的每个元素调用回调函数进行处理。

let arr=[1,2,3,4];
arr.forEach((item,idx,arr)=>{
     arr[idx]=item+1;
 });
 console.log(arr);  //[2,3,4,5]

• 参数
  callbackFn(currentValue,index,arr)
currentValue ：必需。当前元素
  index ：可选。当前元素的索引值
  arr ：可选。当前元素所属的数组对象
• 返回值
  undefined

12、map()

返回一个新数组，数组中的元素为原始数据原宿调用函数处理后的值。

let arr=[1,2,3,4];
arr.map((item,idx,arr)=>{
     arr[idx]=Math.pow(item,2);
});
console.log(arr);  //[1,4,9,16]

console.log(arr.map(item => {
    return item*3;
}));  //[3, 12, 27, 48]

• 参数
  callbackFn(currentValue,index,arr)
currentValue ：必需。当前元素
  index ：可选。当前元素的索引值
  arr ：可选。当前元素所属的数组对象
• 返回值
  返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

13、filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr=[1,2,3,4,5,4,3,2,1];
let arr2=arr.filter(item=>{
     return item>3;
});
console.log(arr,arr2);//[1, 2, 3, 4, 5, 4, 3, 2, 1]  [4, 5, 4]

• 参数
  callbackFn(currentValue,index,arr)
currentValue ：必需。当前元素
  index ：可选。当前元素的索引值
  arr ：可选。当前元素所属的数组对象
• 返回值
  返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

14、reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

let arr=[1,2,3,4,5];
let arr2=arr.reduce((acc,curr,idx,arr)=>{
     acc+=curr;
     return acc;
 });
 console.log(arr,arr2);  //[1, 2, 3, 4, 5] 15

• 参数
  callbackFn(total,currentValue,index,arr)
total ：必需。初始值，或者计算结束后的返回值
  currentValue ：必须。当前元素
  index ：可选。当前元素的索引值
  arr ：可选。当前元素所属的数组对象
• 返回值
  返回计算结果

15、splice()

splice() 方法用于添加或删除数组中的元素。会改变原始数组。

let arr=[1,2,3,4,5];
arr.splice(1,3,7,8);
console.log(arr); //[1,7,8,5]

• 参数
  array.splice(index,howmany,item1,.....,itemX)
index ：必需
  howmany ：可选。规定应该删除多少元素。必须是数字，但可以是 “0”。
  如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  item1,...,itemX ：可选。要添加到数组的新元素
• 返回值
  如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

16、includes()

判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

console.log([1, 2, 3].includes(2));  //true
console.log([1, 2, 3].includes(0));  //false

• 参数
  arr.includes(searchElement, fromIndex)
searchElement ：必需。需要查找的元素值。
  fromIndex ：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
• 返回值
  布尔值。如果找到指定值返回 true，否则返回 false。

17、flat()

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

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

• 参数
  无
• 返回值
  返回一个包含将数组与子数组中所有元素的新数组。