【干货】js 数组操作合集（前端自我修养）

前言

前端的童鞋们都知道，关于js的数据操作方法有许多，最近有时间于是整理了一下，与诸位分享。有不对的地方还请大家不吝赐教（allan_liu986@163.com）。下面开始正文：
复制代码

按照功能划分：

• 普通方法：直接操作数组元素（增、删、替换、转字符串）
• 遍历方法：对数组的遍历（for循环等）

---

普通方法：

1. Array.push(item, item1, item2...)

参数：item可以是多个参数，也可以是数组变量
新数组：只返回新数组的长度
旧数组：返回push后的包含所有的元素的数组
注意：
    1.将push的参数放在数组的最后一位
    2.如果push一个数组变量时，新数组的数组长度只会+1；
        旧数组会根据增加的数据变为多维数组。
复制代码

 eg:
  //原数组：
  const arr = [1, 2];
  const item = [3, '4']
  //新数组：只返回新数组的长度
  const newPush = arr.push(item);
  console.log(arr)      //[1, 2, [3, '4']] 
  console.log(newPush)  //3
复制代码

2. Array.pop()

参数：该方法不接收任何参数
新数组：返回删除的元素
原数组：删除原数组的最后一个元素
注意：
    该方法删除的是原数组的最后一个元素
复制代码

 eg:
    //原数组
    const arr = [1, 2, 3];
    //新数组
    const newPop = arr.pop();
    console.log(arr);   //[1,2]
    console.log(newPop);//3
复制代码

3. Array.unshift()

注意：unshift()方法和push()的用法基本一致，不过是将添加的参数放在了数组的第一位。
复制代码

 eg:
  //原数组：
  const arr = [1, 2];
  const item = [3, '4']
  //新数组：只返回新数组的长度
  const newUnshift = arr.unshift(item);
  console.log(arr)      //[ [3, '4'], 1, 2]
  console.log(newUnshift)  //3
复制代码

4. Array.shift()

shift()方法的介绍请参考pop()方法，但是删除的数组第一个元素。
复制代码

 eg:
    //原数组
    const arr = [1, 2, 3];
    //新数组
    const newPop = arr.shift();
    console.log(arr);   //[2, 3]
    console.log(newPop);//1
复制代码

5. Array.splice()

  用法：splice(删除原/添加新 元素的起始下标，删除的长度， 要添加的元素1，元素2， 元素3)
  新数组：返回删除元素
  旧数组：删除元素以后的新数组 (splice添加的元素，会插入删除的元素的位置)
  注意：
    1. 当splice的第一个参数为负数时，-1为最后一个元素，-2为倒数第二个参数，-3 以此类推。。
    2. 当splice的第二个参数为0时，该方法只向旧数组添加元素
复制代码

 eg:
    //原数组
    const arr = [4, 5, 6, 7, 1, 7];
    //新数组
    const arrSplice = arr.splice(-2, 2, 9, 8)
    console.log(arrSplice)  //[1,7]
    console.log(arr)        //[4, 5, 6, 7, 9, 8]
复制代码

6. Array.sort()

sort()
  作用：默认升序显示（按值升序、字母升序排序）
  注意：
    1. 是直接作用在原数组上的方法，不会有返回值。
    2. 如果是两位数字，只会比较第一位
    3. 自定义用法: a -b (升序)
        b -a (降序)
  补充：a, b为默认参数，代表每次参与对比的两个元素。
复制代码

 eg1:
    const arrSort = [4, 5, 6, 7, 1, 7].sort()
    console.log(arrSort)  //[1, 4, 5, 6, 7, 7]
 eg2:
    const newSort = [4, 1, 12, 25, 113, 7].sort( 
        (a, b) => { 
            return b - a;
        }
    )
    console.log(newSort)//[113, 25, 12, 7, 4, 1]
复制代码

7. Array.reverse()

reverse()
   作用：返回反转元素后的数组。
   注意：是直接作用在原数组上的方法，不会有返回值。
复制代码

 eg:
    const arr = [4, 5, 6, 7, 1, 7];
    const arrReverse = arr.reverse()
    console.log(arrReverse)//[7, 1, 7, 6, 5, 4]
复制代码

8. Array.slice()

ES5: 
1.slice(要拷贝的开始下标，结束下标) 不包括结束； 浅拷贝数组元素
新数组：返回拷贝的数组
旧数组：视拷贝的情况决定会不会改变原数组
注意：如果只写一个参数（ 默认为起始下标 ），后面的所有元素都会拷贝
  简单数据类型：如果数组的元素是number类型，或者str类型，新数组会浅拷贝原来的数组。改变之后互不影响。
  复杂数据类型：如果元素被改变，原数组和新数组都会变
          （拷贝的只是指向原数组的指针，所以无论改变原数组，还是浅拷贝的数组，都是改变原数组的数据）
复制代码

 eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arrSlice = arr.slice(2)
    console.log(arrSlice)   //[6, 7, 1, 7]
  eg2:
    let a= ['hello','world'];
    let b=a.slice(0,1);     // ['hello']
    a[0]='改变原数组';
    console.log(a,b);       // a = ['改变原数组','world'] b = ['hello']
    b[0]='改变拷贝的数组';
    console.log(a,b);       // ['改变原数组','world'] ['改变拷贝的数组']
  eg3:
    let c = [{name: 'liu'}] 
    let d = c.slice()
    c[0].name = '改变name'
    console.log(c, d)      //[{name: "改变name"}], [{{name: "改变name"}}]
复制代码

9. Array.join()

ES5:
2.join(参数a) 在数组的每一个元素后面添加参数a；默认是用，做为分隔符
新数组： 返回一个字符串
旧数组：没有改变
注意：join()/toString()方法在数组元素是数组的时候，会将里面的数组也调用join()/toString()；多维数组扁平化最快处理办法
      如果是对象的话，对象会被转为[object Object]字符串。
补充：js的序列化和反序列化
      序列化：对象转字符串
      反序列化： 字符串转对象
复制代码

 //eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arrJoin = arr.join()
    console.log(arr, arrJoin)      //[4, 5, 6, 7, 1, 7]  "4,5,6,7,1,7"
// eg2: 多维数组扁平化（挺好用） 
    let a= [['liu','23', [1,2,['21','13']]],'test'];
    let str1=a.join();  
    console.log(str1)              //liu,23,1,2,21,13,test
// eg3: 为对象数组时
    let b= [{name:'liu',age:'23'}];
    let str2 = b.join(); 
    console.log(JSON.stringify(str2));// [object Object],test
    // 对象转字符串推荐JSON.stringify(obj);只是改变了序列化而已，并不能还原数组

复制代码

10. Array.toLocaleString()

ES5:
3. toLocaleString() 数组转字符串，没有参数
  新数组： 转成字符串
  旧数组： 不变
  作用：数组转字符串
  注意：
    1.toLocaleString()还是调用的join()方法
    2.调用数组的toLocaleString方法，数组中的每个元素都会调用自身的toLocaleString方法，
    3.对象调用对象的toLocaleString,Date调用Date的toLocaleString
复制代码

 //eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arrToLocaleString = arr.toLocaleString()
    const arrJoin = arr.join()//和join的作用一样，都是数组转字符串
    console.log(arr,arrJoin, arrToLocaleString) //[4, 5, 6, 7, 1, 7] "4,5,6,7,1,7" "4,5,6,7,1,7"
//eg2:
    let a=[{name:'OBKoro1'},23,'abcd',new Date()];
    let str=a.toLocaleString(); 
    console.log(str, '--str--')//[object Object],23,abcd,2019/4/11 下午10:01:08
复制代码

11. Array.toString()

ES5:
  4. toString()数组转字符串
  注意：
      1.和join()方法效果一样，但是没有优势。因为不能自定义分割
      2.当数组和字符串操作的时候，js会调用这个方法将数组自动转换成字符串
      3.数组的元素之间依然有逗号分割，最后一个元素会与数组外面所有的字符串连为一体。
复制代码

 //eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arrToString = arr.toString()
    console.log(arr, arrToString)//[4, 5, 6, 7, 1, 7] "4,5,6,7,1,7"
//eg2:
    let a= [ 'toString','演示'].toString(); 
    let b= ['调用toString','123', '连接在我后面']+'啦啦啦' + '12'; 
    console.log(a)              // toString,演示
    console.log(b)              // 调用toString,连接在我后面啦啦啦
复制代码

12. Array.concat()

ES6:
  1. concat(): 将多个数组拼接成一个数组,可以接收多个数组参数(参数也可以是具体的值)
    新数组：按照老数组+参数数组1+参数数组2...的方式进行合并
    老数组：没有发生变化
复制代码

 //eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arr1 = 'e'
    const arr2 = [{name: 'liu'},1]
    const arrConcet = arr.concat(arr2, arr1)
    console.log(arrConcet)    //[4, 5, 6, 7, 1, 7, {name: 'liu'}, 1, "e"]
复制代码

13. ...展开运算符

ES6:
  1. ...Array: 
    作用：常规用法可以展开 数组/对象 元素
    补充：更多关于展开运算符请看这里[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax]()
复制代码

 //字面量数组构造或字符串：
    const arr = [4, 5, 6, 7, 1, 7];
    const arr1 =  [...arr, 'a']
    console.log(arr1, '---展开运算符---')

  //eg2: 这里提一点：ECMAScript 2018规范新增特性
    const obj = {name: 'liu', sex: '男'}
    const obj1 = {...obj, age: 20}
    console.log(obj1, '---obj1---')
    
 //eg3：
      function myFunction(x, y, z) { 
        console.log(x, y, z, '---xyz---')
      }
      var args = [0, 1, 2];
      myFunction(args)//[0, 1, 2] undefined undefined 
      //apply语法：func.apply(thisArg, [argsArray]);这里thisArg为null， [0,1,2]传值给[argsArray]
      myFunction.apply(null, args); //0,1,2
      myFunction(...args);//0,1,2 可以看出，使用了展开运算符更加简洁
复制代码

14. indexOf()

ES6:
  1. Array.indexOf(): 
    用法：indexOf() 查找数组是否存在某个元素,返回下标；不存在则返回0
    注意：数组的indexOf是严格匹配“ === ” ; 不识别NaN
      字符串类型的indexOf是可以找到的
复制代码

 eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const arr1 = ['aa', 1, 3, NaN, undefined]
    console.log(arr1.indexOf('a'))      //-1
    console.log(arr1.indexOf(NaN))      //-1
    console.log(arr1.indexOf(undefined))//4
 eg2:
    const str = 'qwe'
    console.log(str.indexOf('d'))       //-1
复制代码

15. lastIndexOf()

ES6:
  1. Array.lastIndexOf(): 逆向查找
    用法：接收两个参数：第一个：要查找的元素；第二个：要从下标几向前查找(-1为数组最末位，-2，-3类推。。)
复制代码

 eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    console.log(arr.lastIndexOf(7, -1));  //5
    let a=['a',4,'b',1,2,'b',3,4,5,'b'];  // 数组长度为10
    let b=a.lastIndexOf('b',4);          // 从下标4开始往前找 返回下标2
    let b1=a.lastIndexOf('b',100);      //  大于或数组的长度 查找整个数组 返回9
    let b2=a.lastIndexOf('b',-11);      // -1 数组不会被查找
    let b3=a.lastIndexOf('b',-9);       // 从第二个元素4往前查找，没有找到 返回-1
    console.log(b, b1, b2, b3);//2,9,-1,-1
复制代码

16. includes()

ES6:
  1. Array.includes(): 判断数组是否包含某个值
    用法：接收两个参数：第一个参数是要查找的元素（可以是变量），第二个参数是查找的起始下标
    注意：第二个参数：接受负值。正值超过数组长度，数组不会被搜索，返回false。
     负值绝对值超过长数组度，重置从0开始搜索。
     因为indexOf方法不能识别NaN；indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观
复制代码

 eg1:
    const arr = [4, 5, 6, 7, 1, 7];
    const flag = 4
    const arrIncludes = arr.includes(flag, -6) //true
复制代码

---------------数组的操作方法到此结束了，下面开始数组的遍历方法---------

1. forEach()

ES5:
  1. Array.forEach(): 
    用法：接收三个参数：第一个参数是遍历的当前元素，第二个参数是当前元素的索引，第三个参数：原数组
    注意：1.无法中途退出循环，只能用return退出本次回调，进行下一次回调。
         2.空元素会直接跳过本次回调。
         3. 遍历次数再第一次循环前就会确定，循环过程中添加到数组中的元素不会被遍历。
复制代码

 eg1:
    let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
    let obj = { name: 'liu' };
    let result = a.forEach(function (value, index, array) { 
      a[3] = '改变元素';
      a.push('添加到尾端，不会被遍历')
      console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
      console.log(this.name); // liu 打印三次 this绑定在obj对象上
      // break; // break会报错
      return value; // return只能结束本次回调 会执行下次回调
      console.log('不会执行，因为return 会执行下一次循环回调')
    }, obj);
    console.log(result); // 即使return了一个值,也还是返回undefined
复制代码

2. filter()

ES5:
  1. var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    用法: 创建一个新数组,其包含通过所提供函数实现的测试的所有元素。 
    thisArg： 执行 callback 时，用于 this 的值。
复制代码

 //eg1:
var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
console.log(max);//7
var min = Math.min.apply(null, numbers);
console.log(min);//2

//eg2:
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
复制代码

3. every()

  返回布尔值； 检查数组的每个元素是否满足条件,如果有一项不满足条件则整个表达式返回false
复制代码

 //eg1:
    let arr = [4, 5, 6, 7, 1, 7];
    let value = arr.every( (item, index, arr) => {
      return  item > 1
    })
    console.log(value) //false
复制代码

4. some()

  返回布尔值； 数组中是否有一项满足条件的元素，整个表达式返回true。都不满足才会返回false
复制代码

 //eg1:
    let arr = [4, 5, 6, 7, 1, 7];
    let value1 = arr.some((item) => {
      return item >= 7
    })
    console.log(value1) //true
复制代码

5. filter()

  返回满足条件的新数组
复制代码

 //eg1:
    let arr = [4, 5, 6, 7, 1, 7];
    let value2 = arr.filter((item) => {
      return item >= 6
    })
    console.log(value2) //[6,7,7]
复制代码

6. map()

  返回一个做完逻辑运算的新数组
复制代码

 //eg1:
    let arr = [4, 5, 6, 7, 1, 7];
    let value3 = arr.map((item) => {
      return item + '5'
    })
    console.log(value3)  //["45", "55", "65", "75", "15", "75"]
复制代码

7. reduce()

   reduce()： 可以做一个多维数组转一维数组，比较简便，有效
   补充：1.a,b 是数组的第一个、二个元素；之后是两个元素运算的结果，继续去和第3个元素作运算
   2.eg中的 -1 设置了箭头函数以外的参数，会把该参数值作为数组的第一个元素去做运算
复制代码

 //eg1:
   let arr2 = [1,2, 3, 4]
    let arrReduce = arr2.reduce((a, b) => {
      return a * b
    }, -1)
    console.log(arrReduce)          //-24
//eg2：
    let arr3 = [[3,4], [-1, 1], ['qwe', {name: 'liu'}]]
    let arrConcat = arr3.reduce((a, b) => {
      return a.concat(b)
    })
    console.log(arrConcat)          //[3, 4, -1, 1, "qwe", {name: 'liu'}]
复制代码

8. reduceRight()

reduceRight() 从右往左累加;除了和reduce的方向相反，其他用法一样
复制代码

    let arr4 = [[3,4], [-1, 1], ['qwe', {name: 'liu'}]]
    let arrReduceRight = arr4.reduceRight((a, b) => {
      return a.concat(b)
    })
    console.log(arrReduceRight) //["qwe", {name: 'liu'}, -1, 1, 3, 4]
复制代码

9. find()

find() 返回数组中第一个满足条件的元素，没有则返回undefined
复制代码

//eg1:
    let arr = [4, 5, 6, 7, 1, 7]
    let arrFind = arr.find((item) => {
       return item > 16
    })
    console.log(arrFind) //undefined
复制代码

10. findIndex()

findIndex() 返回数组元素第一个满足条件的元素下标，没有则返回-1
这两个方法都识别NaN
复制代码

//eg1:
    let arr = [4, 5, 6, 7, 1, 7]
    let arrFindIndex = arr.findIndex((item) => {
      return item > 16
    })
    console.log(arr, arrFindIndex)  //-1
复制代码

12. ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

findIndex() 返回数组元素第一个满足条件的元素下标，没有则返回-1
这两个方法都识别NaN
复制代码

//eg1:
   for(let item of ['a', 'b'].keys()) {
      console.log(item, '--index---')        //1,2
    }
//eg2:
    for(let item of ['a', 'b'].values()) {
      console.log(item, '--values---')      //a,b
    }
//eg3:
    for(let [item, index] of ['a', 'b'].entries()) {
      console.log(item, index, '--index---') //0 'a', 1 'b'
    }
复制代码

13. flat()

flat()：返回一个新数组默认拉伸一维数组；
 新数组：拉伸后的新数组
 旧数组：没有发生改变
 注意：如果有空位，会直接跳过
  参数有两种形式：1.直接用Infinity关键字即可（建议） 
               2. 多维数组时拉伸的维数-1是接收参数值。
复制代码

//eg1:
   let arrFlat = [1,[2,3, [4, , ['q','w']]],6].flat(Infinity)
    console.log(arrFlat, '---flat---')//[1, 2, 3, 4, "q", "w", 6]
复制代码

14. flatMap()

flatMap():接收3个参数：当前元素，当前元素索引，原数组
 作用：只能将二维数组拉伸为一维数组，三维数组拉伸为二维数组。。。。（还是一个用来遍历的方法，但是参照返回值，并不好用。。。）
 旧数组： 没有影响
 新数组： 返回拉伸一个维度后的新数组， 不满足条件的元素会显示undefined
复制代码

//eg1:
    let array = [1,[2,3, [7, 8]],[4,5],6]
    let arrFlatMap = array.flatMap((item, index) => {
      if(item > 5) return index
    })
    console.log(array, arrFlatMap, '---flatMap---') // [undefined, undefined, undefined, 6]

复制代码

结语：

到这里就结束了，大概写了两天多，自己总结一番，巩固记忆，也方便大家查阅。文章如有不正确的地方欢迎各位大佬鞭策！希望大家看完可以有所收获，喜欢的话，赶紧点波关注/喜欢。
复制代码

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。
微信：

邮箱：allan_liu986@163.com