js中的数组方法

164 阅读5分钟

1、map

数组格式化。数组中的每个元素调用传参的函数,将结果作为新的数组返回,不改变原数组

    let arr = [1, 2, 3, 4, 5]
    let newarr = arr.map((item, index, array) => {
      //参数 1 - item  数组里每个元素
      //参数 2 - index 每个元素对应的下标
      //参数 3 - array 数组本身
      return item * 2
    });
    console.log(arr)     // [1, 2, 3, 4, 5]
    console.log(newarr)  // [2, 4, 6, 8, 10]

注意:如果return后面是条件表达式,则会返回布尔值 比如:

    let arr = [1, 2, 3, 4, 5]
    let newarr = arr.map((item, index) => {
      return index > 2
    });
    console.log(newarr) // [false, false, false, true, true]

2、forEach

数组遍历。数组中的每个元素调用传参的函数,没有返回值,直接改变原数组

    let arr = [1, 2, 3, 4]
    arr.forEach((item, index, array) => {
      item ++
    });
    console.log(arr) // [1, 2, 3, 4]

奇怪的是原数组没有发生改变,没有达到预期的效果 这里要注意的是:如果数组元素是数字、字符串、布尔值、null和undefined,原数组不会发生改变,但我们可以这样:

    let arr = [1, 2, 3, 4]
    arr.forEach((item, index, array) => {
      array[index] ++
    });
    console.log(arr) // [2, 3, 4, 5]

假如数组元素是对象(键值对形式),则不需要考虑这种情况

     let arr = [
        { num: 1, age: 18 },
        { num: 1, age: 19 },
        { num: 1, age: 20 }
      ];
      arr.forEach(item => {
        item.num++;
        item.age = 30;
      });
      console.log(arr);
      // [{ num: 2, age: 30 },{ num: 2, age: 30 },{ num: 2, age: 30}]

3、filter

数组过滤。对数组中所有元素进行判断,将符合条件的元素作为一个新数组返回

    let arr = [1, 2, 3, 4, 5]
    let newarr = arr.filter((item, index, array) => {
      return item > 2
    });
    console.log(newarr) // [3, 4, 5]

4、push

数组后增。在数组末尾添加一个或者多个元素,同时改变数组的长度

    let arr = [1, 2, 3, 4]
    arr.push(5)
    console.log(arr) // [1, 2, 3, 4, 5]
    
    let arr2 = [1, 2, 3, 4]
    arr2.push(5, 6)
    console.log(arr2) // [1, 2, 3, 4, 5, 6]

5、pop

数组后删。删除并返回数组最后一个元素,同时改变数组的长度

    let arr = [1, 2, 3, 4]
    let arrLast = arr.pop()
    console.log(arrLast) // 4
    console.log(arr)     // [1, 2, 3]

6、shift

数组前删。删除并返回数组的第一个元素,同时改变数组的长度

    let arr = [1, 2, 3, 4]
    let arrFirst = arr.shift()
    console.log(arrFirst) // 1
    console.log(arr)     // [2, 3, 4]

7、unshift

数组前增。在数组开头添加一个或者多个元素,同时改变数组的长度

    let arr = [1, 2, 3, 4]
    arr.unshift(6)
    console.log(arr)  // [6, 1, 2, 3, 4]
    
    let arr2 = [1, 2, 3, 4]
    arr2.unshift(6, 7)
    console.log(arr2)  // [6, 7, 1, 2, 3, 4]

8、splice

数组的万能方法,可以实现增删改,不仅会改变原数组,而且将删除的元素作为一个新数组返回 splice(开始的位置, 删除的个数, 添加或替换的元素)

    let arr1 = [1, 2, 3, 4]
    // 删除 3
    let delarr1 = arr1.splice(2, 1)
    console.log(delarr1) // [3]
    console.log(arr1)    // [1, 2, 4]

    let arr2 = [1, 2, 3, 4]
    // 将 2,3 替换成 “666”
    let delarr2 = arr2.splice(1, 2, "666")
    console.log(delarr2)  // [2, 3]
    console.log(arr2)     // [1, "666", 4]

    let arr3 = [1, 2, 3, 4]
    // 在 2 前面新增 "666",“777”
    let delarr3 = arr3.splice(1, 0, "666", "777")
    console.log(delarr3)  // []
    console.log(arr3)     // [1, "666", "777", 2, 3, 4]

9、sort

数组排序。对数组中的元素进行排序,直接改变原数组,参数必须是规定元素排序顺序的函数

    let arr1 = [4, 65, 3, 48, 29]
    // 升序
    const rule = (a, b) => a - b
    arr1.sort(rule)
    console.log(arr1)  // [3, 4, 29, 48, 65]
    
    let arr2 = [4, 65, 3, 48, 29]
    // 降序
    arr2.sort((a, b) => {
      return b - a
    })
    console.log(arr2) // [65, 48, 29, 4, 3]

10、concat

数组拼接。将两个或多个数组拼接成一个数组,不会改变现有数组,只会返回一个拼接后的新数组

    let arr0 = [0, 0, 0]
    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]

    let arr3 = arr0.concat()
    console.log(arr3)  //  [0, 0, 0]

    let arr4 = arr1.concat(arr2)
    console.log(arr4)  // [1, 2, 3, 4, 5, 6]

    let arr5 = arr0.concat(arr1, arr2)
    console.log(arr5)  // [0, 0, 0, 1, 2, 3, 4, 5, 6]

11、toString

将数组转化为字符串,且元素之间通过逗号分隔

    let arr = [1,2,"hello",4]
    let str = arr.toString()
    console.log(str)  // 1,2,hello,4

12、join

将数组转化为字符串,且元素通过指定的分隔符分隔,默认使用逗号分隔

    let arr = [1, 2, "hello", 3]
    console.log(arr.join())    // 1,2,hello,3
    console.log(arr.join(""))  // 12hello3
    console.log(arr.join("-")) // 1-2-hello-3
    console.log(arr.join(99))  // 199299hello993

13、reverse

反转数组。颠倒数组中元素的顺序

    let arr = ["h","e","l","l","0"]
    console.log(arr.reverse())  // ["0", "l", "l", "e", "h"]

14、indexOf

返回指定元素在数组中第一次出现的位置,从前往后找,假如指定元素没有出现,则返回 -1

    let arr = ["h","e","l","l","0"]
    console.log(arr.indexOf("l"))  // 2
    console.log(arr.indexOf("q"))  // -1

15、lastIndexOf

用法和indexOf一样,不同点:lastIndexOf是从后往前找

    let arr = ["h","e","l","l","0"]
    console.log(arr.lastIndexOf("l"))  // 3
    console.log(arr.lastIndexOf("q"))  // -1

16、every

对数组中所有元素进行判断并返回一个布尔值,假如所有元素都符合判断条件,则返回true,否则为false

    let arr = [12, 12, 13, 18]
    
    let arrflag1 = arr.every((item, index, array) => {
      return item < 20
    })
    console.log(arrflag1)  // true

    let arrflag2 = arr.every(item => {
      return item < 15
    })
    console.log(arrflag2)  // false

17、some

对数组中所有元素进行判断并返回一个布尔值,假如存在元素符合判断条件,则返回true,假如都不符合则为false。注意和every区分

    let arr = [12, 12, 13, 18]

    let arrflag1 = arr.some((item, index, array) => {
      return item < 10
    })
    console.log(arrflag1)  // flase

    let arrflag2 = arr.some(item => {
      return item < 15
    })
    console.log(arrflag2)  // true

18、reduce

数组中所有元素调用传参函数,返回值为最后的结果,传入的参数必须是函数

    let arr = [1, 2, 3, 4, 5, 6]
    const add = (a, b) => a + b
    let sum = arr.reduce(add)
    console.log(sum)  // 21    

es6新增

19、copyWithin

将数组中指定位置的元素复制到另一个指定位置中,直接改变原数组 copyWithin(指定目标位置, 元素复制开始位置, 元素复制结束位置 )

    let arr = [1, 2, 3, 4, 5, 6]
    arr.copyWithin(1, 3, 4)
    console.log(arr) // [1, 4, 3, 4, 5, 6]

20、fill

将固定的值替换数组中指定位置的元素,直接改变原数组 fill(替换的值, 元素替换开始位置, 元素替换结束位置)

    let arr = [1, 2, 3, 4, 5, 6]
    arr.fill(0, 2, 4)
    console.log(arr) // [1, 2, 0, 0, 5, 6]

21、find

对数组中所有元素进行判断,返回第一个符合条件的元素,不会改变原数组

    let arr = [1, 2, 3, 4, 5, 6]
    let arrFind = arr.find((item, index, array) => {
      return item > 2
    })
    console.log(arrFind) // 3

22、findIndex

用法和find一样,不同点:findIndex返回的是元素下标

    let arr = [1, 2, 3, 4, 5, 6]
    let arrFindIndex = arr.findIndex((item, index, array) => {
      return item > 2
    })
    console.log(arrFindIndex) // 2

23、includes

判断一个指定的值是否在数组中,假如是返回 true,否则false

    let arr = [1, 2, 3, 4, 5, 6]
    console.log(arr.includes(4)) // true

24、keys

返回一个包含数组键(元素下标)的可迭代对象

    let arr = ["h", "e", "l", "l", "o"]
    console.log(arr.keys()) // Array Iterator {}
    for (let i of arr.keys()) {
      console.log(i)    // 0 1 2 3 4
    }

25、values

返回一个包含数组值(元素)的可迭代对象

    let arr = ["h", "e", "l", "l", "o"]
    console.log(arr.values()) // Array Iterator {}
    for (let i of arr.values()) {
      console.log(i)         // h e l l o
    }

26、entries

返回一个数组的可迭代对象,该对象包含数组的键值对

    let arr = ["h", "e", "l", "l", "o"]
    console.log(arr.entries()) // Array Iterator {}
    for (let i of arr.entries()) {
      console.log(i)   // [0, "h"]  [1, "e"]  [2, "l"]  [3, "l"]  [4, "o"]
    }