数组是在JS中是很常用的一种数据类型,下面就对数组常用的方法进行介绍和总结
大致分为以下几类:
- 访问方法,即不改变原数组的方法,
- 修改器方法,改变原数组的方法,
- 以及迭代方法,迭代器又分为:
- 可以 跳出循环的方法,
- 和不可以跳出循环的方法
- 将类数组转化真实数组
一、访问方法 (不改变原数组)
- toString
把数组转换为字符串,并返回结果。
let arr = [1, 2, 3]
arr.toString()
console.log(arr) // 3,2,1
- concat
连接两个或更多的数组,并返回结果。
let arr1 = [1, 2, 3]
let arr2 = [4]
let result = arr1.concat(arr2)
console.log(result) // 1 2 3 4
- join
连接所有数组元素组成一个字符串。
let arr = [1, 2, 3]
let result = arr.join()
console.log(result) // 1,2,3
- indexOf
返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。
let arr = [1, 2, 3]
let index = arr.indexOf(2)
console.log(index) // 1
- lastIndexOf
返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。
let arr = [1, 2, 3, 2]
let index = arr.lastIndexOf(2)
console.log(index) // 3
- slice
从某个已有的数组返回选定的元素。
语法:
arrayObject.slice(start, end)
参数 | 描述 |
---|---|
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
注意
1、可使用负值从数组的尾部选取元素。
2、如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
let arr = [1, 2, 3]
arr.slice(0) // [1, 2, 3]
arr.slice(1) // [2, 3]
arr.slice(-1) // [3]
arr.slice(-2) // [2, 3]
arr.slice(1, 2) // [2]
arr.slice(-2, -1) // [2]
- includes
判断当前数组是否包含某指定的值,如果是返回 true,否则返回 false。
let arr = [1, 2, 3]
let result = arr.includes(2)
console.log(result) // true
二、修改器方法 (改变原数组)
- push
向数组的末尾添加一个或更多元素,并返回新的长度。
let arr = [1, 2, 3]
arr.push(4)
console.log(arr) // 1 2 3 4
- unshift
向数组的开头添加一个或更多元素,并返回新的长度。
let arr = [1, 2, 3]
arr.unshift(4)
console.log(arr) // 4 1 2 3
- pop
删除并返回数组的最后一个元素
let arr = [1, 2, 3, 4]
arr.pop() // 4
console.log(arr) // 1 2 3
- shift
删除并返回数组的第一个元素
let arr = [4, 1, 2, 3]
arr.shift() // 4
console.log(arr) // 1 2 3
- reverse
颠倒数组中元素的顺序。改变原数组。
let arr = [1, 2, 3]
arr.reverse()
console.log(arr) // 3 2 1
- splice
方法向/从数组中添加/删除项目,然后返回被删除的项目。 改变原数组
语法:
arrayObject.splice(index, howmany, item1 , ....., itemX)
参数 | 描述 |
---|---|
index | 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, …, itemX | 可选。向数组添加的新项目。 |
示例:
let arr = [1, 2, 3]
操作 | 返回值 | 原数组 |
---|---|---|
arr.splice(0) | [1, 2, 3] | [] |
arr.splice(1) | [2, 3] | [1] |
arr.splice(0, 1) | [1] | [2, 3] |
arr.splice(1, 2) | [2] | [1, 3] |
arr.splice(0,0,4) | [] | [4, 1, 2, 3] |
arr.splice(0, 2, 4) | [1, 2] | [4, 3] |
arr.splice(-1, 1, 4) | [3] | [1, 2, 4] |
arr.splice(-2, 1, 4) | [2] | 1, 4, 3] |
- sort
对数组的元素进行排序。改变原数组
let arr = [4, 1, 2, 3]
arr.sout()
console.log(arr) // [1, 2, 3, 4]
- fill
将数组中指定区间的所有元素的值,都替换成某个固定的值。
语法:
arrayObject.fill(value, start, end)
示例:
let arr = [1, 2, 3]
操作 | 返回值 | 原数组 |
---|---|---|
arr.fill(6) | [6, 6, 6, 6] | [6, 6, 6, 6] |
arr.fill(6, 1, 2) | [1, 6, 3] | [1, 6, 3] |
arr.fill(6, -2) | [1, 6, 6] | [1, 6, 6] |
arr.fill(6, -3, -2) | [6, 2, 3] | [6, 2, 3] |
arr.fill(6, NaN, NaN) | [1, 2, 3] | [1, 2, 3] |
- copyWithin
方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
语法:
arrayObject.copyWithin(target, start, end)
参数 | 描述 |
---|---|
target | 复制序列到该位置。如果是负数,target将从末尾开始计算。如果target大于等于arr.length,将会不发生拷贝。如果target在start之后,复制的序列将被修改以符合arr.length。 |
start | 开始复制元素的起始位置。如果是负数,start将从末尾开始计算。如果start被忽略,copyWithin将会从0开始复制。 |
end | 开始复制元素的结束位置。copyWithin将会拷贝到该位置,但不包括end这个位置的元素。如果是负数,end将从末尾开始计算。 |
示例:
let arr = [1, 2, 3, 4, 5]
操作 | 返回值 | 原数组 |
---|---|---|
arr.copyWithin(-2) | [1, 2, 3, 1, 2] | [1, 2, 3, 1, 2] |
arr.copyWithin(0, 3) | [4, 5, 3, 4, 5] | [4, 5, 3, 4, 5] |
arr.copyWithin(0, 3, 4) | [4, 2, 3, 4, 5] | [4, 2, 3, 4, 5] |
arr.copyWithin(-2, -3, -1) | [1, 2, 3, 3, 4] | [1, 2, 3, 3, 4] |
三、迭代方法
1.迭代方法特点
迭代器 | 迭代对象 | break | return | continu |
---|---|---|---|---|
forEach | Array | 报错 | 跳过本次循环,执行下一次循环 | 报错 |
for | Array | 跳出循环 | 报错 | 跳过本次循环,执行下一次循环 |
for…of… | Array | 跳出循环 | 报错 | 跳过本次循环,执行下一次循环 |
for…in… | Object | 跳出循环 | 报错 | 跳过本次循环,执行下一次循环 |
注意: for…in… 非数组方法,但是属于迭代器的一种,此处为了对比说明
//以下是满足条件后自动跳出循环
every
some
find
findIndex
2.迭代方法详述
- forEach
对数组的元素进行排序为数组中的每个元素执行一次回调函数。
如果条件允许,也可以使用 filter() 提前过滤出需要遍历的部分,再用 forEach() 处理。
语法 | 参数 | 返回值 |
---|---|---|
arr.forEach(callback[, thisArg]) | (currentValue, index, array) | undefined |
let arr = [1, 2, 3, 4, 5]
arr.forEach((currentVaule, index, arr)=>{
console.log(currentVaule, index, arr)
})
- map
方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法:
arr.map((item, index, arr) => {
console.log(item, index, arr)
})
let arr = [1, 2, 3, 4, 5]
let tempArr1 = arr.map(item => {
if(item > 2) { return item}
})
console.log(tempArr1) // [undefined, undefined, 3, 4, 5]
let tempArr2 = arr.map(item => item > 2)
console.log(tempArr2) // [false, false, true, true, true]
- every
如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false。
注意: 若收到一个空数组,此方法在一切情况下都会返回 true。
let arr = [1, 2, 3, 4, 5]
let returnTrueFn = (item) => item > 0
let returnFalseFn = (item) => item > 2
let trueValue = arr.every(returnTrueFn)
let falseValue = arr.every(returnFalseFn)
console.log(trueValue) // true
console.log(falseValue) // false
- some
如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。
注意: 如果用一个空数组进行测试,在任何情况下它返回的都是false。
let arr = [1, 2, 3, 4, 5]
let returnTrueFn = (item) => item > 2
let returnFalseFn = (item) => item > 6
let trueValue = arr.some(returnTrueFn)
let falseValue = arr.some(returnFalseFn)
console.log(trueValue) // true
console.log(falseValue) // false
- filter
将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。
语法:
arr.map((item, index, arr) => {
console.log(item, index, arr)
})
例1: 简单过滤
let arr = [1, 2, 3, 4, 5]
let result = arr.filter(item => item > 2)
console.log(result) // [3, 4, 5]
例2: 模糊搜索功能
let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']
let filterItems = (key) => {
return fruits .filter(item => {
return item.toLowerCase().indexOf(key.toLowerCase()) !== -1
})
}
console.log(filterItems('ap')) // ["apple", "grapes"]
console.log(filterItems('an')) // ["banana", "mango", "orange"]
- reduce
对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
语法:
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
例1:数组里所有值求和
let initialValue = 0
let arr = [1, 2, 3, 4, 5]
let result = arr.reduce((sumValue, currentValue, index, arr) => sumValue + currentValue, initialValue)
console.log(result) // 15
例2:累加对象数组的值
let initialValue = 0
let obj = [{x: 1}, {x:2}, {x:3}]
let sum = obj.reduce((accumulator, currentValue) => {
return accumulator + currentValue.x
}, initialValue)
console.log(sum) // 6
例3:二维数组转化成一维数组
let initialValue = []
let arr = [[0, 1], [2, 3], [4, 5]]
let result = arr.reduce((accumulator, currentValue) => {
return accumulator.concat(currentValue)
}, initialValue)
console.log(result) // [0, 1, 2, 3, 4, 5]
例4:按属性对object分类
let initialValue = {}
let arr = [
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 },
{ name: 'Alice', age: 21 }
]
let groupBy = (arr, property) => {
return arr.reduce((accumulator, currentValue) => {
let key = currentValue[property];
if (!accumulator[key]) {
accumulator[key] = []
}
accumulator[key].push(currentValue)
return accumulator
}, initialValue)
}
console.log(groupBy(arr, 'age'))
// {
"20":
[
{"name":"Max","age":20},
{"name":"Jane","age":20}
],
"21":[
{"name":"Alice","age":21}
]
}
- reduceRight
方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。
reduce 与 reduceRight之间的区别
let arr = ['1', '2', '3', '4', '5'];
var left = arr.reduce(function(prev, cur) { return prev + cur; })
var right = arr.reduceRight(function(prev, cur) { return prev + cur; })
console.log(left); // "12345"
console.log(right); // "54321"
- find
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
let arr = ['a', 'b', 'c'];
let value1 = arr.find(item => item === 'a')
let value2 = arr.find(item => item === 'e')
console.log(value1) // 'a'
console.log(value2) // undefined
- findIndex
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
let arr = ['a', 'b', 'c'];
let value1 = arr.findIndex(item => item === 'b')
let value2 = arr.findIndex(item => item === 'e')
console.log(value1) // 1
console.log(value2) // -1
- keys
返回一个数组迭代器对象,该迭代器会包含所有数组元素的键。
let arr = ['a', 'b', 'c'];
let result = arr.keys()
for (let item of result) {
console.log(item) // 0, 1, 2
}
- values
返回一个数组迭代器对象,该迭代器会包含所有数组元素的值。
let arr = ['a', 'b', 'c'];
let result = arr.values()
for (let item of result) {
console.log(item) // a, b, c
}
- entries
返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。
let arr = ['a', 'b', 'c'];
let result = arr.entries()
for (let item of result) {
console.log(item)
}
// [0, "a"]
// [1, "b"]
// [2, "c"]
四、类数组转化为真实数组
- from
let ele = document.querySelectorAll('*')
Array.form(ele)