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

一、数组实例方法

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]

​