持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情 今天做一下关于Js数组方法的归纳整理，有兴趣的小伙伴可以收藏下来，以便日后查阅

数组方法简述

let arr1 = ['a', 1, 'b', 2, 'c'] // 数组示例

数组检测

1、typeof()检测数组类型为object，因为数组的原形最终指向对象

console.log(typeof (arr1)) // 'object'

增加数组元素

2、arr.push( )从后面增加，返回值为新数组的长度 6

console.log(arr1.push(`d`)) // 6
console.log(arr1)   //['a', 1, 'b', 2, 'c', 'd']

3、arr.unshift( )从前面增加,返回值为新数组的长度 7

console.log(arr1.unshift('2')) // 7
console.log(arr1)  // ['2', 'a', 1, 'b', 2, 'c', 'd']

删除数组元素

4、arr.shift( ),()内不需要填东西,返回值为被删除的数据 2

console.log(arr1.shift()) // 2
console.log(arr1)  //['a', 1, 'b', 2, 'c', 'd']

5、arr.pop( ),()内不需要填东西,返回值为被删除的数据 d

console.log(arr1.shift()) // 2
console.log(arr1)  //['a', 1, 'b', 2, 'c']

修改数组元素

5、arr.splice( ),示例如下

   arr1.splice(2, 0, 666)
   // 从下标2的元素开始,删除后面的0个数据
   // 并添加一个666,不添加也行,可删除数组任意一个数据
   console.log(arr1)  //['a', 1, '666', 'b', 2, 'c']
   

数组排序

6、arr.sort( ),示例如下

      ```
      console.log(arr1.sort())
      // 默认升序,返回升序的数组[1, 2, 666, 'a', 'b', 'c']
      console.log(arr1)
      // 数组已被升序[1, 2, 666, 'a', 'b', 'c']
      console.log(arr1.sort((a, b) => b - a))
      // b-a为降序,返回降序的数组[666, 2, 1, 'a', 'b', 'c']
      // 字符排序一般以ASCII码顺序进行排序
      ```
      

展开运算符

      arr1 = [1, 2, -2, 5, 6, 8, 7]

7、... 示例如下

        console.log(...arr1)// 拆开数组 1 2 -2 5 6 8 7
          console.log(Math.max(...arr1))// 获取数组最大值8
          console.log(Math.min(...arr1))// 获取数组最大值-2
          console.log([...new Set(arr1)])// 数组去重[1, 2, -2, 5, 6, 8, 7]

解构赋值

8、数组解构交换变量

        let a = 0, b = 1;
        [a, b] = [b, a] // 数组结构,开头必须加;
        console.log(a, b)// 1 0

迭代数组

8、map( )方法不会改变原数组,只会返回处理后的新数组

   console.log(arr1.map((item, index) => {
            return item + '老' + index
       }))
       //  ['1老0', '2老1', '-2老2', '5老3', '6老4', '8老5', '7老6']
   console.log(arr1.map((item, index) => item + '老' + index))
   //-1 ['1老0', '2老1', '-2老2', '5老3', '6老4', '8老5', '7老6']
  

9、forEach()可遍历数组,无返回值,相当于for循环

// forEach() 与for循环的区别
// forEach无法return中断循环   for循环可以return中断循环
arr1.forEach((item, index) => {
      
      })

10、filter()可遍历筛选出数组里符合条件的元素,返回新数组,return筛选条件即可

 let arr2 = arr1.filter((item, index) => item < index)
 //-4返回所有值小于下标的元素组成的数组
 console.log(arr2)//-4 [-2]
          

11、reduce( )数组求和累加器,返回函数累计处理的结果,常用于求和(此方法潜力极大，可替代大部分数组方法，但也会有一定的性能问题)

  // arr.reduce((prev(累计值),item(每个元素))=>{prev+item},初始值(数字一般为0,字符串一般为``))
 let Arr = ['大', '家', '好', '我', '是', 'Pillow']
 console.log(Arr.reduce((prev, item) => prev + item, 6666))
 // 6666大家好我是Pillow
 let Arr1 = [1, 2, 3]
 console.log(Arr1.reduce((prev, item) => prev + item, 2))//  8

12、数组拼接concat( )

    console.log(arr1) //8 [1, 2, -2, 5, 6, 8, 7]
    console.log([...arr1, ...[2, 4, 6]])
    // 合并两个数组[1, 2, -2, 5, 6, 8, 7, 2, 4, 6]
    console.log(arr1.concat([2, 4, 6]))
    //9 合并两个数组[1, 2, -2, 5, 6, 8, 7, 2, 4, 6]

13、数组翻转concat( )

   // 翻转数组,无需返回值,调用直接改变数组,翻转数组
   console.log(arr1.reverse())
   // [7, 8, 6, 5, -2, 2, 1] 返回值也是翻转后的数组
   console.log(arr1)
   // 调用直接翻转数组 [7, 8, 6, 5, -2, 2, 1]
   
   //浅拷贝方法 Array.prototype.concat()
   console.log(arr1)// [7, 8, 6, 5, -2, 2, 1]
   let arr3 = Array.prototype.concat(arr1)//-2 [7, 8, 6, 5, -2, 2, 1]
   console.log(arr3)// [7, 8, 6, 5, -2, 2, 1]
   // 浅拷贝方法2  [...arr]
   let arr4 = [...arr1]
   console.log(arr4)//-2 [7, 8, 6, 5, -2, 2, 1]

14、arr.find() 查找元素,返回第一个符合条件的元素值,没有就返回undefined

      console.log(arr1)//-3 [7, 8, 6, 5, -2, 2, 1]
      console.log(arr1.find(item => item > 7))
      //  8 找到数组里第一个大于7的数
      console.log(arr1.find(item => item > 8))
      //  undefined 找到数组里第一个大于8的数,没有就返回undefined
      

15、arr.every() 检查数组里所有元素是否 都 符合条件，返回的是一个布尔值

  console.log(arr1)//-4 [7, 8, 6, 5, -2, 2, 1]
     console.log(arr1.every(item => typeof (item) === `number`))
     //true 检测数组里是否都是数字
     console.log(arr1.every(item => item > 0))
     //false 检测数组里是否都是正数
          

16、arr.some() 检查数组里所有元素是否有符合条件，返回的是一个布尔值

          console.log(arr1)//-5 [7, 8, 6, 5, -2, 2, 1]
          console.log(arr1.some(item => item < 0))
          // true 检测数组里是否有负数
          console.log(arr1.some(item => item === 0))
          // false 检测数组里是否有0
          

17、arr.findIndex() 查找符合条件的元素的索引值,没有符合条件的返回-1

          console.log(arr1)//-6 [7, 8, 6, 5, -2, 2, 1]
          console.log(arr1.findIndex(item => item < 0))
          // 4 检测数组里是第一个负数的下标
          console.log(arr1.findIndex(item => item === 0))
          //  -1 检测数组里0的下标,没有,返回-1
          

18、Array.from(arr) 可将伪数组转化为真数组

       Array.from(伪数组) 

对象方法

   //  for-in和for-of
   //  for-in会遍历下标和元素,会遍历原形中的属性,可以遍历数组和对象
   // for-of只遍历元素,不会遍历原形的属性,只能遍历数组,不能遍历对象
   // 可使用Object.keys(对象名)和Object.values获取对象的属性值或者是属性名
   //  它们会自动返回一个数组,再遍历这个数组即可达到遍历对象的目的

完结!!!! 撒花撒花🌸🌸🌸🌸🌸