JavaScript中常用数组方法总结

工作中发现掌握好数组和对象中所有方法，并灵活运用，绝对能大大提高你的编程效率，那还想什么呢，总结起来~

push()后增方法

pop()后删方法

shift()前删方法

unshift()前增方法

concat()拼接方法

reverse()反转方法

sort()排序方法

join()方法

slice()剪切方法

splice()修改删除方法

forEach()方法

indexOf()方法和lastIndexOf()方法

filter()过滤方法

every()方法

some()方法

Array.isArray()方法

includes()方法

find()方法

findIndex()方法

fill()方法

map()方法

push()后增方法

在数组后面添加元素（一个或多个），返回值是新数组的长度；

 const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']console.log(array1.push('都是水果呢')) // 6console.log(array1) //  ['苹果', '香蕉', '桃子', '草莓', '火龙果', '都是水果呢']const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']console.log(array1.push('都是水果呢', '最爱的')) // 7console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '都是水果呢', '最爱的']

pop()后删方法

删除数组最后一个元素，并且将删除的元素返回；

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.pop()) // 火龙果
console.log(array1) // ['苹果', '香蕉', '桃子', '草莓']

shift()前删方法

删除数组中第一个元素，返回值为删除的该元素；

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.shift()) // 苹果
console.log(array1) // ['香蕉', '桃子', '草莓', '火龙果']

unshift()前增方法

在数组开头添加一个或多个元素，返回值为新数组的长度；

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.unshift('橙子', '丑橘')) // 7
console.log(array1) // ['橙子', '丑橘', '苹果', '香蕉', '桃子', '草莓', '火龙果']

concat()拼接方法

该方法可连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响；

 const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']const array2 = ['橙子', '丑橘']console.log(array1.concat(array2)) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '橙子', '丑橘']console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']const array2 = ['橙子', '丑橘']const array3 = ['圣女果', '猕猴桃']console.log(array1.concat(array2, array3)) // ['苹果', '香蕉', '桃子', '草莓', '火龙果', '橙子', '丑橘', '圣女果', '猕猴桃']console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

reverse()反转方法

该方法用来反转数组，会直接修改原数组

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.reverse()) // ['火龙果', '草莓', '桃子', '香蕉', '苹果']
console.log(array1) // ['火龙果', '草莓', '桃子', '香蕉', '苹果'] 原数组也进行了反转

sort()排序方法

对数组中的元素进行排序，默认按照Unicode编码进行排序，该方法也会影响原数组

const array2 = [2, 9, 40, 0]
console.log(array2.sort()) // [0, 2, 40, 9] // 按第一位排序
console.log(array2) // [0, 2, 40, 9]

join()方法

将数组转换成一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可指定一个字符串作为参数，该参数将会成为数组中元素的连接符，若不指定连接符，则默认使用逗号，作为连接符；

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.join()) // 苹果,香蕉,桃子,草莓,火龙果
console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.join('-')) // 苹果-香蕉-桃子-草莓-火龙果
console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

slice()剪切方法

取数组的指定元素，不会影响原数组，将取出来的元素封装到一个新的数组中；

该方法有两个参数，第一个参数是截取开始位置的索引（包含开始位置的索引），第二个参数是截取结束位置的索引（不包含结束的索引），若第二个参数省略不写，则表明会截取从开始索引往后的所有元素；

如果索引值是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推

 const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']console.log(array1.slice(0, 2)) // ['苹果', '香蕉']console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.slice(3)) // ['草莓', '火龙果']
console.log(array1) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

 const array3 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']console.log(array3.slice(-2)) // ['草莓', '火龙果']console.log(array3) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

 const array3 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']console.log(array3.slice(-4, -1)) // ['香蕉', '桃子', '草莓']console.log(array3) // ['苹果', '香蕉', '桃子', '草莓', '火龙果']

splice()修改删除方法

用于删除数组中的指定元素，该方法会影响原数组，返回值为删除的元素；

该方法有三个参数：

第一个参数，表示开始位置的索引（包括开始索引）；

第二个参数，表示要删除的元素数量

第三个参数及以后参数，可传递一些新元素，这些元素将会自动插入到开始位置索引前面；

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.splice(1, 2)) // ['香蕉', '桃子']
console.log(array1) // ['苹果', '草莓', '火龙果']

const array1 = ['苹果', '香蕉', '桃子', '草莓', '火龙果']
console.log(array1.splice(1, 2, '哈密瓜', '水蜜桃', '葡萄')) // ['香蕉', '桃子']
console.log(array1) // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']

forEach()方法

遍历数组的方法，参数为三元函数，该函数的参数：

第一个参数：正在遍历的元素；

第二个参数：当前遍历元素的索引；

第三个参数：正在遍历的数组；

不能ruturn

array1.forEach(function(ele, index, arr) {console.log(ele); // 苹果console.log(index); // 0console.log(arr); // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']
})array1.forEach((ele, index, arr) => {console.log(ele); // 苹果console.log(index); // 0console.log(arr); // ['苹果', '哈密瓜', '水蜜桃', '葡萄', '草莓', '火龙果']
})

indexOf()方法和lastIndexOf()方法

都是用于查找某元素在数组中的位置，若存在，则返回第一个位置的下标，否则返回-1；不会改变原数组；

其中，indexOf('查找的元素', startIndex)表示从startIndex开始，从头到尾查询；包含开始索引

lastIndexOf参数一样，区别在于从尾到头查询；

const array1 = ['苹果', '葡萄', '桃子', '苹果', '火龙果', '苹果']
console.log(array1.indexOf('苹果', 0)) // 0
console.log(array1.lastIndexOf('苹果', 0)) // 0
console.log(array1.indexOf('苹果', 1)) // 3
console.log(array1.indexOf('猕猴桃', 1)) // -1

filter()过滤方法

filter()方法返回数组中满足条件的元素组成的新数组，不改变原数组；

该方法的参数也是个三元函数，

第一个参数：正在遍历的元素；

第二个参数：当前遍历元素的索引；

第三个参数：正在遍历的数组；

const array2 = [1,2,3,4,5]
console.log(array2.filter(item => item >= 4 )); // [4, 5] const array2 = [1,2,3,4,5]const array3 = array2.filter(item => { return item >= 4 }); // [4, 5]console.log(array2); // [1,2,3,4,5]console.log(array3);  // [4, 5]

every()方法

用于检测数组中的所有元素是否都符合指定条件，若每一项都返回true，则返回true，反之若检测到有一项不满足条件，则返回false，并且剩下的元素不会再进行检测；

该方法不会对空数组进行检测；并且不会改变原始数组；

参数也是一个三元函数（与上相同）：

 const array2 = [1,2,3,4,5]console.log(array2.every((item, index, arr) => item >= 5 )); // falseconsole.log(array2.every(item => item >= 0)); // trueconsole.log(array2.every(item => { return item >= 0 })); // true

some()方法

用于检测数组中的元素是否满足指定条件，若有一个元素满足条件，则返回true，并且不再检测剩余的元素；若没有满足条件的元素，则返回false；

该方法不会对空数组进行检测；并且不会改变原始数组；

参数也是一个三元函数（与上相同）：

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

Array.isArray()方法

判断是否是数组，参数是要判断的数组；

const array2 = [1,2,3,4,5]
console.log(Array.isArray(array2)); // true

includes()方法

用于判断一个数组是否包含一个指定的值，如果包含，则返回true，反之返回false；

参数有两个：

第一个元素：要查找的元素值；

第二个元素：开始查找的索引值，默认是0，即从头开始查找；

 const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']console.log(array1.includes('苹果')); // trueconsole.log(array1.includes('苹果', 3)); // falseconsole.log(array1.includes('葡萄', -3)); // false

对于复杂数组，可用some()方法替代includes()方法；

find()方法

返回数组中满足条件的第一个元素的元素值；当有一个元素满足条件时，之后的值不会再被遍历到；若没有符合条件的元素，则返回undefined

该方法不会改变原始数组；

参数为三元函数（与上相同）；

  const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']console.log(array1.find(item => item === '葡萄')); // 葡萄console.log(array1.find(item => item === '西瓜')); // undefinedconsole.log(array1.find(item => {return item === '葡萄'}));  // 葡萄

该方法和filter()方法的区别在于： filter返回值是由所有满足条件的元素组成的数组；

findIndex()方法

findIndex()的作用同IndexOf()，返回第一个满足条件的元素位置；当有一个满足条件时，不再执行下一个；若都不满足，则返回-1；

参数为一个三元函数（与上相同）：

const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']
console.log(array1.findIndex(item => item === '葡萄')); // 1
console.log(array1.findIndex(item => item === '西瓜')); // -1
console.log(array1.findIndex(item => { return item === '葡萄'
}));

fill()方法

该方法用于将一个固定值替换某个数组的元素；

参数有三个：

第一个参数：要填充的值；

第二个参数：可选，表示开始填充的位置；

第三个参数：可选，表示停止填充的位置，默认为array.length

 const array1 = ['苹果', '葡萄', '苹果', '桃子', '火龙果']console.log(array1.fill('西瓜', 1, 3)); // ['苹果', '西瓜', '西瓜', '桃子', '火龙果']

map()方法

该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；

map()方法按照原始数组元素顺序依次处理元素；

参数为三元函数（与上相同）；

const array2 = [1, 2, 3, 4, 5]
const array3 = array2.map(function(item, index, arr) { item = item + 1; return item
})
console.log(array3); // [2, 3, 4, 5, 6]
console.log(array2); // [1, 2, 3, 4, 5]const array4 = array2.map(item => item = item + 2);
console.log(array4); // [3, 4, 5, 6, 7]

总结

会改变原数组的方法 (push、pop、shift、unshift、reverse、sort、splice)

不会改变原数组的方法（indexOf 、lastIndexOf 、every 、some 、filter 、map 、concat 、slice ）

欢迎补充~

补充：

copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，数组长度不变，返回改变后的数组

array.copyWithin(target, start, end)
// target是复制到指定目标索引位置，必填
// start 元素复制的起始位置。默认为 0 ，若为负值，则表示从后面开始复制
// end 停止复制的索引位置。默认为array.length, 不包含end的索引，若为负值，则表示从后面开始复制
// 停止复制索引位置后面的元素保持不变

const arry1 = [1,2,3,4,5]
console.log(arry1.copyWithin(0,2,4)); // [3,4,3,4,5]
console.log(arry1.copyWithin(0,1,4)); // [4,3,4,4,5]