js数组常用方法复习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

js有很多数组方法 本篇文章稍微总结了一些数组方法
以便于个人复习

---

一.用于增删数组元素的方法

1.push() 添加元素到数组尾部

   //push() 将参数添加到数组尾部 改变原数组 返回添加后数组的长度

    var arrPush = [1, 2, 3, 4, 5]
    var newArrPush = arrPush.push(7, 8, 9)
    console.log(arrPush); //(8) [1, 2, 3, 4, 5, 7, 8, 9]
    console.log(newArrPush); //8

2.pop() 删除数组末尾的第一个元素

 //pop() 删除数组最后一个数 和传入的参数无关 改变原数组 返回删除的元素

    var arrPop = [1,2,3,4,5]
    var newArrPop = arrPop.pop()
    console.log(arrPop); // (4) [1, 2, 3, 4]
    console.log(newArrPop); // 5

3.unshift() 添加元素到数组的头部

    //unshift() 添加参数到数组的头部 可以传入多个参数 改变原数组 返回添加后的数组长度

    var arrUnshift = [1,2,3,4,5]
    var newArrUnshift = arrUnshift.unshift([1,2,3],5)
    console.log(arrUnshift);  // (7) [Array(3), 5, 1, 2, 3, 4, 5]
    console.log(newArrUnshift); // 7

4.shift() 删除数组头部的第一个元素

    //shift() 删除数组头部的一个元素 和传入的参数无关 改变原数组 返回删除的元素

    var arrShift = [1,2,3,4,5]
    var newArrShift = arrShift.shift()
    console.log(arrShift);  // (4) [2, 3, 4, 5]
    console.log(newArrShift); // 1

二.用于截取数组的方法

1.slice() 截取数组

 //slice() 截取数组 接受两个索引参数 截取两个索引之间的数组 截取的数组不包括第二个索引参数上的元素 如果只传入一个参数，则从这个参数截取到数组末尾
    //原数组不改变 返回截取出来的数组

    var arrSlice = [1,2,3,4,5]
    var newArrSlice = arrSlice.slice(1,3)
    console.log(arrSlice); // (5) [1, 2, 3, 4, 5]
    console.log(newArrSlice); // (2) [2, 3]

2.splice() 截取或者插入数组元素

 //splice() 截取或者插入数组元素 可以传入三个参数 按顺序分别是 开始截取的数组 截取的数组长度 从截取数组的位置开始插入的元素
    //原数组改变 返回截取出的数组

    var arrSplice = [1,2,3,4,5]
    var newArrSplice = arrSplice.splice(1,2,3)
    console.log(arrSplice); // (4) [1, 3, 4, 5]
    console.log(newArrSplice); // (2) [2, 3]

三.改变数组排序的方法

1.reverse() 翻转数组

   //reverse() 翻转数组 接收参数无效 不接受参数 改变原数组 返回新得到的数组

    var arrReverse = [1,2,3,4,5]
    var newArrReverse = arrReverse.reverse()
    console.log(arrReverse); // (5) [5, 4, 3, 2, 1]
    console.log(newArrReverse); // (5) [5, 4, 3, 2, 1]

2.sort() 数组排序

    //sort() 排序 改变原数组 返回新数组

    //不传参数的时候 默认从小到大排序
    var arrSort = [2,3,0,1,6,8,1]
    var newArrSort = arrSort.sort()
    console.log(arrSort); [0, 1, 1, 2, 3, 6, 8]
    console.log(newArrSort); [0, 1, 1, 2, 3, 6, 8]

    // 可以传入一个函数 用来规定排序的顺序
    //当 a-b 的时候 从小到大
    var arrSort1 = [2,3,0,1,6,8,1]
    var newArrSort1 = arrSort1.sort(function(a,b){
        return a-b
    })
    console.log(newArrSort1); // (7) [0, 1, 1, 2, 3, 6, 8]
    //当b-a 的时候 从大到小
    var arrSort2 = [2,3,0,1,6,8,1]
    var newArrSort2 = arrSort2.sort(function(a,b){
        return b-a
    })
    console.log(newArrSort2); // (7) [8, 6, 3, 2, 1, 1, 0]
    //也可以用箭头函数写法
    var arrSort1 = [2,3,0,1,6,8,1]
    var newArrSort1 = arrSort1.sort((a,b) => b-a)
    console.log(newArrSort1); // (7) [8, 6, 3, 2, 1, 1, 0]

四.查找数组元素位置的方法

1.indexOf() 查找数组中元素位置

  //indexOf() 从前往后遍历一个数组查找传入的参数位置 不改变原数组 如果找到则返回找到的第一个元素位置 未找到则返回 -1
    //如果传入两个参数 则第二个参数是 从第二个参数的索引数 开始查找
    
    var arrIndexOf = [12,24,35,46,78,24]
    var newArrIndexOf1 = arrIndexOf.indexOf(1)
    console.log(arrIndexOf); // (6) [12, 24, 35, 46, 78, 24]
    console.log(newArrIndexOf1); // -1
    var newArrIndexOf2 = arrIndexOf.indexOf(24)
    console.log(newArrIndexOf2); // 1
    var newArrIndexOf3 = arrIndexOf.indexOf(24,3)
    console.log(newArrIndexOf3); // 5

2.includes() 查找数组中是否有该元素

  //includes() 遍历检查数组中是否有传入的参数 不改变原数组 与 indexOf 的区别在于 includes 返回的是一个布尔值

    var arrIncludes =  [12,24,35,46,78,24]
    var newArrIncludes = arrIncludes.includes(12)
    var newArrIncludes1 = arrIncludes.includes(13)
    console.log(arrIncludes); // (6) [12, 24, 35, 46, 78, 24]
    console.log(newArrIncludes); // true
    console.log(newArrIncludes1); // false

五.遍历数组的方法

1.forEach() 遍历数组

   //forEach() 遍历数组
    // 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组
    //其中只有第一个值是必须传的 剩下两个值可传可不传
    //不改变原数组 会将遍历后的元素传给回调函数 可以通过 push 等数组方法 将遍历后的数组输出

    var arrForEach = [1,2,3,4,5]
    var newArrForEach = []
    arrForEach.forEach(function(item,index,arr){
        let newItem = item + 1
        newArrForEach.push(newItem)
    })
    console.log(arrForEach); // (5) [1, 2, 3, 4, 5]
    console.log(newArrForEach); // (5) [2, 3, 4, 5, 6]

2.some() 遍历数组

    //some() 遍历数组
    // 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组
    //其中只有第一个值是必须传的 剩下两个值可传可不传

    //给数组中的每一项都运行传入的函数 如果存在至少一项符合函数 则返回 true
    var arrSome = [1,2,3,4,5]
    var newArrSome1 = arrSome.some(function(item,index,arr){
        return item >1
    })
    console.log(newArrSome1); // true

    //否则返回 false
    var newArrSome1 = arrSome.some((item,index,arr) =>{
       return item >6
    })
    console.log(newArrSome1); // false

3.every() 遍历数组

   //every() 遍历数组
    // 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组
    //其中只有第一个值是必须传的 剩下两个值可传可不传

    //给数组中每一项都运行传入的函数，如果每一项都返回 true 则返回 true
    var arrEvery = [1,2,3,4,5]
    var newArrEvery = arrEvery.every((item,index,arr)=>{
       return item <10
    })
    console.log(newArrEvery); //true

    //否则返回 false
    var newArrEvery = arrEvery.every((item)=>{
       return item <4
    })
    console.log(newArrEvery); //false

4.map() 遍历数组

   //map() 格式化遍历数组
    //根据传入的函数 格式化遍历的每个值 返回格式化的数组 不改变原数组

    var arrMap = [1,2,3,4,5]
    var newArrMap = arrMap.map((item,index,arr) =>{
        return item + 5
    })
    console.log(arrMap); //(5) [1, 2, 3, 4, 5]
    console.log(newArrMap); //(5) [6, 7, 8, 9, 10]

5.filter() 数组过滤器

    //filter 数组过滤器
    //返回数组中满足过滤要求的数组 原数组不改变

    var arrFilter = [1,2,3,4,5,7,8]
    var newArrFilter = arrFilter.filter((item,index,arr) =>{
        return item >4
    })
    console.log(arrFilter); // (7) [1, 2, 3, 4, 5, 7, 8]
    console.log(newArrFilter); // (3) [5, 7, 8] 

六.其他我不知道咋分类的数组方法

1.Array.isArray() 判断是否是一个数组

    //Array.isArray() 判断是否是一个数组

    var thisArray = [1,3,1,4]
    var noArray = 'az'

    newThisArray = Array.isArray(thisArray)
    console.log(newThisArray);  // true
    newNoArray = Array.isArray(noArray)
    console.log(newNoArray); // false

2.join() 数组转换成字符串

   // join() 用于将数组转换成字符串 传入一个分隔符参数 如果不传则默认传入一个逗号 修改原数组 返回新数组

    var arrJoin = [1,2,3,4,5]
    var newArrJoin = arrJoin.join('|')
    console.log(arrJoin); // (5) [1, 2, 3, 4, 5]
    console.log(newArrJoin); // 1|2|3|4|5

3.toString() 数组之间转换成字符串

    //toString() 将数组转换成字符串 不改变原数组 返回转换成的字符串

    var arrToSting = [1,2,3,4,5]
    var newArrToSting = arrToSting.toString()
    console.log(arrToSting); // (5) [1, 2, 3, 4, 5]
    console.log(newArrToSting); //1,2,3,4,5

5.concat() 连接数组

    //concat() 用于连接两个数组或者多个数组 返回连接后的新数组

    var 数组一 = [1,2,3,4,5]
    var 数组二 = [6,7,8,9,0,['s','p']]
    var 新数组 = 数组一.concat(数组二) 
    console.log(新数组); // (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, Array(2)]

---

总结

大概就这么多吧，少了的有缘再补