JavaScript数组的常用方法

数组基本操作可以归纳为增,删，改和查，不过需要留意的是哪些方法会对原数组产生影响，哪些方法不会。

接下来对数组的常用操作方法归纳总结一下：

一.增

前三种是会对原数组产生影响的增添方法，最后一种不会对原数组产生影响。

（1）push()

 <script>
        //push方法接收任意数量的参数，并将其添加到数组末尾
        //返回数组的最新长度
        let obj = []
        let newObj = obj.push('孙兴慜', 'C罗')
        console.log(newObj);//2
 </script>

(2)unshift()

 <script>
        //unshift()在数组开头添加任意多个值
        //返回数组的最新长度
        let obj = []
        let newObj = obj.unshift('孙兴慜', 'C罗')
        console.log(newObj);//2
 </script>

(3)splice()

  <script>
        //splice()传入三个参数，分别是开始位置,0(要删除的元素数量)，插入的元素
        //返回空数组
        let obj = ['孙兴慜', 'C罗', '本田圭佑']
        let newObj = obj.splice(1, 0, '梅西')
        console.log(obj);//['孙兴慜','梅西', 'C罗','本田圭佑']
        console.log(newObj);//[]
  </script>

(4)concat()

   <script>
        //concat()首先会创建一个当前元素的副本，然后再把它的参数添加到副本末尾
        //最后返回新构建的数组,不会影响原始数组
        let obj = ['孙兴慜', 'C罗', '本田圭佑']
        let newObj = obj.concat('朴智星', ['罗纳尔多', '郑大世'])
        console.log(obj);//['孙兴慜', 'C罗', '本田圭佑']
        console.log(newObj);//['孙兴慜', 'C罗', '本田圭佑','朴智星','罗纳尔多','郑大世']
   </script>

二.删

下面三种都会影响原数组，最后一项不影响原数组。

（1）pop()

  <script>
        //pop()方法用于删除数组的最后一项，同时减少数组的length值
        //返回被删除的项
        let obj = ['德国队', '西班牙队']
        let newObj = obj.pop()
        console.log(newObj);//西班牙队
        console.log(obj.length);//1
  </script>

（2）shift()

   <script>
        //shift()方法用于删除数组的第一项，同时减少数组的length值
        //返回被删除的项
        let obj = ['德国队', '西班牙队']
        let newObj = obj.shift()//取得第一项
        console.log(newObj);//德国队
        console.log(obj.length);//1
   </script>

（3）splice()

 <script>
        //splice()传入两个参数，分别是开始位置及删除的元素数量
        //返回包含删除元素的数组
        let obj = ['德国队', '西班牙队', '葡萄牙队']
        let newObj = obj.splice(0, 1)//删除第一项
        console.log(obj);//西班牙队 ,葡萄牙队
        console.log(newObj);//德国队
 </script>

（4）slice（）

 <script>
        //slice()用于创建一个包含原有数组中的一个或多个元素的数组
        //不会影响原始数组
        let obj1 = ['德国队', '西班牙队', '葡萄牙队', '加纳队', '比利时队']
        let obj2 = obj1.slice(1)
        let obj3 = obj1.slice(1, 4)
        console.log(obj1);//德国队，西班牙队 ,葡萄牙队,加纳队,比利时队
        console.log(obj2);//西班牙队 ,葡萄牙队,加纳队,比利时队
        console.log(obj3);//西班牙队 ,葡萄牙队,加纳队
 </script>

三.改

(1)splice()

  <script>
        //splice()传入三个参数，分别是开始位置,要删除的元素数量 及插入的任意多个元素
        //返回删除元素的数组,对原数组产生影响
        let obj = ['德国队', '西班牙队', '葡萄牙队']
        let newObj = obj.splice(1, 1, '韩国队', '日本队')//插入两个值，删除一个元素
        console.log(obj);//德国队 ,韩国队,日本队,葡萄牙队
        console.log(newObj);//西班牙队,只有一个元素的数组
  </script>

四.查

也就是查找元素，返回元素坐标或者元素值。

（1）indexOf（）

  <script>
        //返回要查找的元素在数组中的位置
        //如果没有找到则返回-1
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 4, 3, 2, 1]
        arr.indexOf(4)//3
        arr.indexOf(9)//-1
  </script>

（2）includes（）

  <script>
        //返回要查找的元素在数组中的位置
        //找到返回true,如果没有找到则返回false
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 4, 3, 2, 1]
        arr.includes(4)//true
        arr.indexOf(9)//false
  </script>

（3）find（）

  <script>
        //find() 返回第一个匹配的元素
        let stars = [
            {
                name: '孙兴慜',
                age: 30
            },
            {
                name: 'C罗',
                age: 37
            },
            {
                name: '朴宝剑',
                age: 30
            },
 
        ]
        let res = stars.find((element, index, array) => element.age < 31)
        console.log(res);//{ name: '孙兴慜',  age: 30}
  </script>

五.排序方法

数组有两个方法可以用来对元素重新排序。

（1）reverse()

 <script>
        let arr = [1, 2, 3, 4, 5]
        let res = arr.reverse()
        console.log(res);//5 4 3 2 1
 </script>

（2）sort()

  <script>
        //sort()方法接收一个比较函数
        //用于判断哪个值应该排在前面
        function compare(a, b) {
            if (a < b) {
                return -1
            } else if (a > b) {
                return 1
            } else {
                return 0
            }
        }
        let arr = [0, 1, 5, 10, 15]
        let res = arr.sort(compare)
        console.log(res);//0, 1, 5, 10, 15
   </script>

六.转换方法

常见的转换方法有：

join（）

  <script>
        let arr = ['苹果', '小米', '三星']
        let res1 = arr.join(',')
        console.log(res1);//苹果,小米,三星
        let res2 = arr.join('||')
        console.log(res2);//苹果||小米||三星
  </script>

七.迭代方法

常用来迭代数组的方法如下（都不改变原数组），接下来一一举例说明：

（1）some()

    <script>
        //some()对数组每一项都运行传入的函数
        //如果有一项返回true,那么这个方法返回true
        let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
        let newArr = arr.some((item, index, arr) => item > 2)
        console.log(newArr);//true
    </script>

(2)every()

 <script>
        //every()对数组每一项都运行传入的函数
        //如果有一项返回false,那么这个方法返回false
        let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
        let newArr = arr.every((item, index, arr) => item > 2)
        console.log(newArr);//false
 </script>

(3)forEach()

   <script>
        //forEach()对数组的每一项都运行传入的函数
        //没有返回值
        let arr = [1, 2, 3, 4, 5]
        arr.forEach((item, index, arr) => {
            console.log(item * 2);//2,4,6,8,10
        })
    </script>

(4)map()

 <script>
        //map()对数组的每一项都运行传入的函数
        //返回由每次函数调用的结果构成的数组
        //也就是每一项执行完回调函数构成的数组
        let arr = [1, 2, 3, 4, 5]
        let res = arr.map((item, index, arr) => item * 2)
        console.log(res);//[2,4,6,8,10]
 </script>

(5)filter()

   <script>
        //filter()对数组的每一项都运行传入的函数
        //函数返回true的项会组成数组之后返回
        let arr = [1, 2, 3, 4, 5]
        let res = arr.filter((item, index, arr) => item > 2)
        console.log(res);//[3, 4, 5]
   </script>