八股:一些JS数组方法整理

25 阅读4分钟

数组遍历方法

1.forEach

提供回调函数的方法,处理数组的每一个元素,对数组中的每个元素执行一次回调函数,遍历索引和数组本身,默认没有返回值。

const arr = ['red', 'blue', 'yellow'];
arr.forEach((item, index) => {
  console.log(item, index)
});
// 输出 
//'red',0 
//'blue',1 
//'yellow',2

2.map

元素数组映射,创建一个新的映射数组(跟forEach的差别),不改变原始数组

const arr = [1,2,3];
const newArr = arr.map((item,index)=>{
 return item+index;
});
console.log(newArr) 
// 输出 [1,3,5]

3.for循环

最简单常用的数组遍历方法之一,按索引顺序遍历数组元素

const arr = [1,2,3];
for(let i = 0;i < arr.length;i++){
 console.log(arr[i])
 }
// 输出 
// 1
// 2
// 3

4.for...of循环

ES6新增的一个循环语法,直接遍历数组中的所有元素,不需要索引

const arr = [1,2,3];
for(let item of arr){
 console.log(item);
}
// 输出
// 1
// 2
// 3

5.for...in循环

一般对对象使用,如果对数组Array使用,则它的元素索引被视为一个属性,此方法遍历出来的是字符串

var arr = ['A','B','C'];
arr.name = 'D';
for(var item in arr){
 console.log(x)
}
// 输出
// '0'
// '1'
// '2'
// 'D'

6.filter

用于筛选数组中满足指定条件的元素,返回一个新的数组(不会修改原始数组),新数组包含符合筛选条件的元素

const arr = [1,2,3];
let newArr = arr.filter((item)=>{
 return item >=2;
});
console.log(newArr);
// 输出
// [2,3]

7.reduce

对数组中元素进行累积操作的方法,一般用于求和,通过提供的回调函数进行累积操作

const arr = [1,2,3];
let sum = arr.reduce((total,item)=>{
 return total + item;
});
console.log(sum);
// 输出
// 6

8.every方法

用于判断数组中的元素是否每一项都满足条件,所有项满足才会返回true,否则返回false

const arr = [1,2,3,4];
const arrBlow = arr.every((item)=>{
 return item > 2
});
console.log(arrBlow);
// 输出
// false

9.some

用于判断数组中是否有某一项满足条件,只要有某一项满足则返回true,全部都不满足则返回false

const arr = [1,2,3,4];
const arrBlow = arr.some((item)=>{
 return item > 2
});
console.log(arrBlow);
// 输出
// true

10.find

遍历数组,找返回满足条件的第一项元素,如果整个数组都没有满足条件的元素,则返回undefined

const arr = [
{ name:'tony', age:18 },
{ name:'mark', age:20 },
{ name:'jane', age:22 },
];
const result = arr.find((item)=>{
 return item.age > 18
});
console.log(result);
// 输出
// { name:'mark', age:20 }

11.findIndex

操作数组方法

遍历数组,找返回满足条件的第一项元素,返回该元素的索引,如果没有满足的则返回-1

const arr = [
{ name:'tony', age:18 },
{ name:'mark', age:20 },
{ name:'jane', age:22 },
];
const result = arr.find((item)=>{
 return item.age > 18
});
console.log(result);
// 输出
// 1

1.push

直接对数组进行操作,将一个或者多个数据添加到数组的尾部;返回添加后的数组的长度

let arr = ['A','B','C'];
let newLength = arr.push('D','E');
console.log(arr);
// 输出
// ['A','B','C','D','E'];
console.log(newLength);
// 输出
// 5

2.unshift

直接对数组进行操作,将一个或者多个数据添加到数组的头部;返回添加后的数组的长度

let arr = ['A','B','C'];
let newLength = arr.unshift('D','E');
console.log(arr);
// 输出
// ['D','E','A','B','C'];
console.log(newLength);
// 输出
// 5

3.pop

直接对数组进行操作,删除数组的最后一个元素;返回被删除的元素

let arr = ['A','B','C'];
let lastData = arr.pop();
console.log(arr);
// 输出
// ['A','B'];
console.log(lastData);
// 输出
// C

4.shift

直接对数组进行操作,删除数组的第一个元素;返回被删除的元素

let arr = ['A','B','C'];
let firstData = arr.shift();
console.log(arr);
// 输出
// ['B','C'];
console.log(firstData);
// 输出
// A

5.slice

选择数组的一部分,返回一个新数组,不改变原数组,从第一个参数对应的索引开始截取,到第二个参数对应的索引结束

let arr = ['A','B','C','D','E'];
let newArr = arr.slice(1,3);
console.log(newArr);
// 输出
// ['B','C']

6.splice

直接修改原数组,通过删除、添加或替换元素直接修改原数组;

// array.splice(index,howmany,item1,...,itemX)
// index: 必需,指定操作的起始位置下标(整数),支持负数(-1表示数组的末尾)
// howmany: 必需,需要删除的元素数量,如果为0或者负数,则直接插入元素
// item1,...,itemX: 可选,需要在删除位置插入的新元素
let arr = ['A','B','C','D','E'];
arr.splice(1,1,'A1','B1');
console .log(arr);
// 输出
// ['A','A1','B1','C','D','E']

7.reverse

直接修改原数组,使数组逆序排列

let arr = ['A','B','C','D'];
arr.reverse();
console.log(arr);
// 输出
// ['D','C','B','A']

8.sort

直接修改原数组,根据传入的函数方法进行排序(默认按字符编码格式升序)

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

9.join

返回一个新字符串(不修改原数组),将数组转换成字符串,根据传入的指定分隔符进行分割(默认是逗号)

let arr = [1,2,3];
let newArr = arr.join('-');
console.log(newArr);
// 输出
// '1-2-3'