javascript数组常用方法整理

最新推荐文章于 2023-02-12 13:45:30 发布

梅花十三儿

最新推荐文章于 2023-02-12 13:45:30 发布

阅读量212

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/Android062005/article/details/125042040

版权

数组是在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

删除并返回数组的最后一个元素

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)
})

方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法:

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)

梅花十三儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript数组常用方法整理

数组是在JS中是很常用的一种数据类型，下面就对数组常用的方法进行介绍和总结大致分为以下几类：访问方法，即不改变原数组的方法，修改器方法，改变原数组的方法，以及迭代方法，迭代器又分为：可以跳出循环的方法，和不可以跳出循环的方法将类数组转化真实数组一、访问方法 (不改变原数组)toString把数组转换为字符串，并返回结果。let arr = [1, 2, 3]arr.toString()console.log(arr) // 3,2,1 concat.
复制链接

扫一扫