JavaScript数组方法分类总结，快速掌握所有数组方法

原创已于 2022-10-22 20:24:37 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-10-22 19:07:23 首次发布

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中数组的实例方法，包括破坏性和非破坏性操作，如push、unshift、pop、shift、splice、sort、reverse等。此外，还涵盖了搜索元素、遍历转换、数据处理和不常用方法等内容，帮助开发者深入理解数组在编程中的应用。

一、数组实例方法

1、破坏性方法

破坏性方法表示方法会改变原数组

push

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

unshift()

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

let arr = ['a', 'b', 'c']
        arr.push('d')
        console.log(arr);
        console.log(arr.push());//['a', 'b', 'c','d']

        arr.unshift('A')
        console.log(arr);
        console.log(arr.unshift());//['A','a', 'b', 'c','d']

pop()

删除数组的最后一个元素，返回值的被删除的元素
shift()

删除数组的第一个元素，返回值的被删除的元素
splice(开始删除的位置，删除的元素个数)

第二个参数不写表示从第一个参数下标开始删除后面的所有元素，返回值是被删除的元素组成的数组

splice 也可以添加元素： splice （起始位置，0 ，添加的元素，添加的元素…），但是添加元素返回的是空数组,只是改变了原数组

sort()

sort( function(a,b){ return a-b})//这是升序 b-a则是降序

reserve()

反转原数组，返回反转后的数组

2、非破坏性方法

非破坏性方法表示方法不会改变原数组

slice （截取的起始位置，截取的结束位置）：前闭后开

截取数组片段，返回一个新截取的数组不改变原数组，第一个参数不写那么则会一直截取到最后，两个参数都省略可以对数组进行浅拷贝，返回一个新数组
concat()

连接数组，返回一个新数组
indexOf（元素，开始查询此元素的位置）

获取数组中元素第一次出现的索引，并返回它的索引，没有返回-1
lastIndexOf

和③ 相同但是是从后往前找
join（分隔符）

将数组的元素连接成一个字符串，默认元素之间用逗号隔开，在小括号里面可以指定元素之间的符号如join（@）：这表示元素之间用@符号隔开，返回一个字符串
map（function（item，index）{}）

map映射，返回一个新的数组，新数组由每个元素调用回调函数的返回值组成，也就是由回调函数的返回值组成，（有几个元素就有几个返回值）
```
const arr = ['张三','李四','王五']
    const res = arr.map(function(item,index){
      return 1
    })
    console.log(res);//res[1,1,1]
```
filter（回调函数作为参数，一般要写返回值，返回true或者false，函数里面传入的是 element，index，array ）

将数组中满足条件的保存到一个新数组中返回，根据回调函数的返回值决定是否将这个元素放入新数组
```
const arr = [10,20,30]
        const  res = arr.filter(function(item,index){
            return item > 10
        })
        console.log(res)
```

reduce（回调函数（pre,cur）{return pre + cur}，第二个参数：初始值）

逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。

		// 语法：arr.reduce(function(){}, initValue)
        // 作用：对数组里面的每个元素都执行一个自定义的reducer函数，将其结果汇总为单个返回值。
        //   参数 ： 
        //       callbackFn : 回调函数   必须 √
        //       initValue  : 初始值 （可选） √
        // callbackFn的参数：   ==> 要写return
        //        previousValue :    上一次调用calbackFn 时的返回值  √
        //        currentValue  :    当前元素  √
        //        currentIndex  :    当前元素的索引  （可选）
        //        array         :     源数组 （可选）  
        //  返回值 ： 使用 “reducer” 回调函数遍历整个数组后的结果。

 const arr = [{
            name: '张三',
            salary: 10000
        }, {
            name: '李四',
            salary: 10000
        }, {
            name: '王五',
            salary: 20000
        }]
        const res = arr.reduce(function (prv, cur) {
            return prv + cur.salary * 0.3//每一次将当前的元素与上一步的计算结果相加
        }, 0)//0时初始值，这里如果不写的话时数组里面的第一个对象
        console.log(res)

find（function（ele，index，当前数组））

搜索查找,返回数组中满足函数return条件的第一个元素，没有返回undefined

const arrTemp = [{name:'小米', price:1999},{name:'华为', price:5999}]
        const res = arrTemp.find(function(item,index){
            return item.name = "小米"
        })
        console.log(res)//{name:'小米', price:1999}

findIndex（function（ele，index， array）{return 。。。}）

返回满足return条件的数组元素的下标，没有返回 -1
arr.every(cbfn)

cbfn是回调函数，检测数组内元素是否都满足return指定条件，如果都满足，返回true，否则返回false
arr.some(cbfn)

检测数组内元素至少有一个元素满足return指定条件，如果满足，返回true，否则返回false

⚠注：map 、filter 、forEach、find、findIndex、every、some等传入回调函数的参数都是三个分别为：element（当前元素）、index（当前元素索引）、array（被遍历的数组）且这些都能迭代数组

二、数组实例方法总结

1、添加/删除元素

push(...items) —— 向尾端添加元素，
pop() —— 从尾端提取一个元素，
shift() —— 从首端提取一个元素，
unshift(...items) —— 向首端添加元素，
splice(pos, deleteCount, ...items) —— 从 pos 开始删除 deleteCount 个元素，并插入 items到原数组中，（删除和添加同时进行）
slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去。
concat(...items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。

2、搜索元素

indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1。
includes(value) —— 如果数组有 value，则返回 true，否则返回 false。
find/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。
findIndex 和 find 类似，但返回索引而不是值。

3、遍历元素

forEach(func) —— 对每个元素都调用 func，不返回任何内容。

4、转换数组

map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
sort(func) —— 对数组进行原位排序，然后返回它。
reverse() —— 原位反转数组，然后返回它。
split/join —— 将字符串转换为数组并返回。
reduce/reduceRight(func, 初始值) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。

5、其他

Array.from(): 将伪数组转化为真数组
Array.isArray(value) 检查 value 是否是一个数组，如果是则返回 true，否则返回 false。
请注意，sort，reverse 和 splice 方法修改的是数组本身。
arr.flat(depth)从多维数组指定深度创建一个新的扁平数组。返回一个新数组

6、不常用方法

[arr.some(fn)]/[arr.every(fn)检查数组。

与 map 类似，对数组的每个元素调用函数 fn。如果任何/所有结果为 true，则返回 true，否则返回 false。

这两个方法的行为类似于 || 和 && 运算符：如果 fn 返回一个真值，arr.some() 立即返回 true 并停止迭代其余数组项；如果 fn 返回一个假值，arr.every() 立即返回 false 并停止对其余数组项的迭代。

我们可以使用 every 来比较数组：
```
function arraysEqual(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

alert( arraysEqual([1, 2], [1, 2])); // true
```
arr.fill(value, start, end) —— 从索引 start 到 end，用重复的 value 填充数组。
arr.copyWithin(target, start, end)—— 将从位置 start 到 end 的所有元素复制到自身的 target 位置（覆盖现有元素）。
Array.of(element0[, element1[, …[, elementN\]]]) 基于可变数量的参数创建一个新的 Array 实例，而不需要考虑参数的数量或类型。

三、字符方法

str.split(分隔符)

使用指定的分隔符，将字符串分割，转化为一个字符串数组，跟数组的join（）方法反过来
```
 const str ='sun-zigayue'
        console.log(str.split('-'))
```
str.subString(开始截取的位置（startIndex），结束位置(endIndex) )

结束位置的索引省略则截取到最后，得到[start ,end):前闭后开

str.startsWith(searchString,[,position])

判断是否以某个字符串开头

const str = "sun zi ga yue"
        console.log(str.startsWith('sun'))//false
        console.log(str.startsWith('sun',5))//false
        console.log(str.startsWith('zi',4))//true

str.includes(字符，[位置])

判断一个数组是否包含另一个字符

 const str = 'sunzigayue'
        console.log(str.includes('ga'),5)//false

四、数字方法

num.fixed(保留小数位数)

保留小数，返回一个字符串类型

五、对象方法

Objeect.values(obj)

返回传入对象属性值组成的数组

Object.keys(obj)

返回传入对象的属性名组成的字符串数组

Object.assign（目标对象，...源对象）

对象的浅拷贝

拷贝对象：将源对象复制给目标对象，返回拷贝完成后的目标对象

注：如果源对象里面有和目标对象相同的属性，拷贝后源对象属性会覆盖掉目标对象的属性

for...in...

遍历对象的属性

获取属性值用obj[key]