js+es6的数组方法总结

js的数组方法

1.toString()将数组转为字符串

var arr = ["小红", "小王", "小明"]
var str = arr.toString()
console.log('str: ', str)  // str:  小红,小王,小明

2.join()以特定字符把数组转为字符串

var arr = ["小红", "小王", "小明"]
var str1 = arr.join('|')
var str2 = arr.join()
console.log('str1: ', str1)  // str1:  小红|小王|小明 
console.log('str2: ', str2)  // str2:  小红,小王,小明

3.push()向数组尾部追加元素

var arr = ["小红", "小王", "小明"]
arr.push('李白')
console.log('arr: ', arr) // ["小红", "小王", "小明", "李白"]

4.unshift()向数组头部追加

 var arr = ["小红", "小王", "小明"]
 arr.unshift('李白')
 console.log('arr: ', arr) // ["李白", "小红", "小王", "小明"]

5.pop()删除并返回数组的最后一个元素

var arr = ["小红", "小王", "小明"]
var delArr = arr.pop()
console.log('arr: ', arr) // ["小红", "小王"]
console.log('delArr: ', delArr) // 小明

6.shift()删除并返回数组的第一个元素

var arr = ["小红", "小王", "小明"]
var delArr = arr.shift()
console.log('arr: ', arr) //  ["小王", "小明"]
console.log('delArr: ', delArr) // 小红

7. concat()用于连接数组

    var arr = ["小红", "小王", "小明"]
    var arr1 = ['1','2']
    var arr2 = ['3','4']
    var newArr = arr.concat(arr1).concat(arr2).concat('text')
    console.log('arr: ', arr) // ["小红", "小王", "小明"]
    console.log('newArr: ', newArr) //   ["小红", "小王", "小明", "1", "2", "3", "4", "text"]

8. splice()向数组添加或者删除元素

    var arr = ["小红", "小王", "小明"]
    // 一个参数代表，从index=1的位置开始删除元素，一直删到最后一个
    var arr1 = arr.splice(1)
    console.log('arr: ', arr)   // ["小红"]
    console.log('arr1: ', arr1) // ["小王", "小明"]

    // 一个参数代表，从index=1的位置开始删除元素，第二个参数代表要删除的元素个数
    var arr2 = arr.splice(1, 2)
    console.log('arr: ', arr)   // ["小红"]
    console.log('arr2: ', arr2) // ["小王", "小明"]

    var arr = ["小红", "小王", "小明"]
    // 从index=1的位置开始,替换2个元素，用3（第三个参数）替换
    var arr2 = arr.splice(1, 2, 3)
    console.log('arr: ', arr)   // ["小红", 3]
    console.log('arr2: ', arr2) // ["小王", "小明"]

9. slice()用于从数组选择元素

    var arr = ["小红", "小王", "小明"]
    // 该方法两个参数，第一个参数代表选择的元素起始位置坐标，第二个代表结束位置坐标
    // 返回的新数组不包含结束位置的元素
    // 该方法返回一个新数组，不会改变原有数组
    var arr2 = arr.slice(1, 3)
    console.log('arr: ', arr)   // ["小红", "小王", "小明"]
    console.log('arr2: ', arr2) // ["小王", "小明"]

10. reverse()用于颠倒数组中元素的顺序

    var arr = ["小红", "小王", "小明"]
    var arr2 = arr.reverse()
    // 该方法会改变原数组
    console.log('arr: ', arr)   // ["小明", "小王", "小红"]
    console.log('arr2: ', arr2) // ["小明", "小王", "小红"]

11. sort()方法用于数组排序

    var arr = [33,1,34,35,8,9]
    var arr2 = arr.sort()
    console.log('arr: ', arr)   // [1, 33, 34, 35, 8, 9]
    console.log('arr2: ', arr2) // [1, 33, 34, 35, 8, 9]

    var arr = [33,1,34,35,8,9]
    var arr2 = arr.sort(function (a, b) {
      return a - b
    })
    console.log('arr: ', arr)   //  [1, 8, 9, 33, 34, 35]
    console.log('arr2: ', arr2) //  [1, 8, 9, 33, 34, 35]

    // sort会改变原有数组
    var arr = [33,1,34,35,8,9]
    var arr2 = arr.sort(function (a, b) {
      return b - a
    })
    console.log('arr: ', arr)   //  [35, 34, 33, 9, 8, 1]
    console.log('arr2: ', arr2) //  [35, 34, 33, 9, 8, 1]

ES6中数组的新方法

1. 扩展运算符（...）

    var arr = [33,1,34,35,8,9]
    console.log('arr: ', ...arr)   //  33 1 34 35 8 9

// 该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

    var arr = [33,1,34,35,8,9]
    console.log(Math.max(arr)) // NaN
    // ES6
    console.log(Math.max(...arr)) // 35
    // ES5
    console.log(Math.max.apply(null, arr)) // 35

2. 扩展运算符来复制数组

数组是复合的数据类型，直接复制的话，复制的是指向底层数据结构的指针，而不是数组。

    const a1 = [1, 2];
    const a2 = a1;
    a2[0] = 2;
    console.log('a2: ', a2) // [2, 2]

ES5的解决办法

    const a1 = [1, 2];
    const a2 = a1.concat();
    a2[0] = 2;
    console.log('a1: ', a1) // [1, 2]

ES6的写法

    const a1 = [1, 2];
    const a2 = [...a1]
    a2[0] = 2;
    console.log('a1: ', a1) // [1, 2]
    console.log('a2: ', a2) // [2, 2]

    const a1 = [1, 2];
    const [...a2] = a1
    a2[0] = 2
    console.log('a1: ', a1) // [1, 2]
    console.log('a2: ', a2) // [2, 2]

3. 合并数组

    const a1 = [1, 2];
    const a2 = ['aa', 'bb', 'cc']
    const a3 = ['张三', '李四']
    // ES5
    const new1 = a1.concat(a2).concat(a3)
    // ES6
    const new2 = [...a1, ...a2, ...a3]
    console.log('new1: ', new1) // [1, 2, "aa", "bb", "cc", "张三", "李四"]
    console.log('new2: ', new2) // [1, 2, "aa", "bb", "cc", "张三", "李四"]

4. 将字符串转为数组

    var str = 'hello'
    var arr = [...str]
    console.log('arr: ', arr) // ["h", "e", "l", "l", "o"]

5. 类数组对象转为数组

    var obj = {
      '0':'cx',
      '1': 18,
      '2': '160cm',
      length: 3  // 必须要有这，否则打印出来是：[]
    }
    var toArrObj = [...obj]
    console.log('toArrObj: ', toArrObj) //  ["cx", 18, "160cm"]

    var obj = {
      name:'cx',
      age: 18,
      height: '160cm',
      length: 3
    }
    var toArrObj = [...obj]
    console.log('toArrObj: ', toArrObj) // [undefined, undefined, undefined]

6. Array.from() 将类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）转为真正的数组。

    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    // ES5
    var arr1 = [].slice.call(arrayLike)
    // ES6
    var arr2 = Array.from(arrayLike)
    console.log('arr1: ', arr1) // ["a", "b", "c"]
    console.log('arr2: ', arr2) // ["a", "b", "c"]

    // 利用Array.from()方法对数组进行处理
    var arr = [1,2,4]
    var newArr = Array.from(arr, x => x * x)
    console.log('newArr===', newArr) //newArr=== (3) [1, 4, 16]

    // 函数参数转为数组
    // arguments对象
    function foo() {
      var args = Array.from(arguments);
      // ...
    }

    // 利用Array.from()方法对数组进行复制
    var arr = [1, 2, 4]
    var newArr = Array.from(arr)
    newArr[0] = 'tezt'
    console.log('newArr===', newArr) // ["tezt", 2, 4]
    console.log('arr===', arr) //[1, 2, 4]

    // Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度
    var str = 'hello world'
    var arr = Array.from(str)
    var len = Array.from(str).length
    console.log('arr:', arr) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
    console.log('len:', len) // 11

7. Array.of()将一组值转为数组

   // Array.of方法用于将一组值，转换为数组。
    var arr = Array.of(1,2,3)
    console.log('arr: ', arr)    // [1, 2, 3]
    var arr1 = Array.of(1)
    console.log('arr1: ', arr1)  // [1]
    var arr2 = Array.of()
    console.log('arr2: ', arr2)  // []
    // 之前的Array()构造函数
    var arr3 = new Array(1,2,3) 
    console.log('arr3: ', arr3)  // [1, 2, 3]
    var arr4 = new Array(1)
    console.log('arr4: ', arr4)  // []
    var arr5 = new Array(3)
    console.log('arr5: ', arr5)  // [,,]

    // Array.of方法可以用下面的代码模拟实现。

    function ArrayOf(){
      return [].slice.call(arguments);
    }

8. 数组的copyWithin方法，将数组的某个位置的元素替换到数组的另外一个位置。

    var arr = [1,2,3,4,5]
    arr.copyWithin(0,2)
    console.log('arr: ', arr) // [3,4,5,4,5]

    // // 它接受三个参数。
    // target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
    // start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
    // end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
    var arr = [1,2,3,4,5]
    arr.copyWithin(0)
    console.log('arr: ', arr) // [1,2,3,4,5]

    var arr = [1,2,3,4,5]
    arr.copyWithin(2)
    console.log('arr: ', arr) // [1,2,1,2,3]

    var arr = [1,2,3,4,5]
    arr.copyWithin(3)
    console.log('arr: ', arr) // [1,2,3,1,2]

    var arr = [1,2,3,4,5]
    arr.copyWithin(-3)
    console.log('arr: ', arr) // [1,2,1,2,3]

    var arr = [1,2,3,4,5]
    arr.copyWithin(-1,-2)
    console.log('arr: ', arr) // [1,2,3,4,4]

    var arr = [1,2,3,4,5]
    arr.copyWithin(-1,-4)
    console.log('arr: ', arr) // [1,2,3,4,2]

9. 数组实例的find

    // 数组实例的find方法，用于找出第一个符合条件的数组成员。
    // 它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返 回值为true的成员，然后返回该成 员。
    // 如果没有符合条件的成员，则返回undefined。
    var arr = [1,2,3,4,5]
    var y = arr.find((x) => x>4)
    console.log(y) // 5

    // find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
    var arr = [1,2,3,4,5]
    var y = arr.find(function(x,index,arr){
      return x > 0
    })
    console.log(y) // 1

10. 数组实例的findIndex()方法。

// 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
    var arr = [1,2,3,4,5]
    var y = arr.findIndex(function(x,index,arr){
      return x > 3
    })
    console.log(y) // 3


    var arr = [1,2,3,4,5]
    var y = arr.findIndex(function(x,index,arr){
      return x > 6
    })
    console.log(y) // -1

    // 这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

    function f(v){
      return v > this.age;
    }
    let person = {name: 'John', age: 20};
    [10, 12, 26, 15].find(f, person);    // 26
    // 上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。

10. 数组实例的fill()方法用给定值填充数组

    var arr = [1,2,3,4,5]
    arr.fill('abc')
    console.log('arr: ', arr) // ["abc", "abc", "abc", "abc", "abc"]

    var arr = [1,2,3,4,5]
    arr.fill('abc',1,4)
    console.log('arr: ', arr) // [1, "abc", "abc", "abc", 5]

    // 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
    let arr = new Array(3).fill({name: "Mike"});
    arr[0].name = "Ben";
    console.log('arr: ', arr) // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

11.数组实例的 entries()，keys() 和 values()

// 用于遍历数组。它们都返回一个遍历器对象
    // 可以用for...of循环进行遍历，
    // keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
    let arr = ['小红', '小明', '小芳']
    for (let index of arr.keys() ) {
      console.log('index: ', index)
      /**
       * index:  0
         index:  1
         index:  2
       */
    }
    for (let value of arr.values() ) {
      console.log('value: ', value)
      /**
       * value:  小红
         value:  小明
         value:  小芳
       */
    }
    for(let [index,value] of arr.entries()){
      console.log(index+":"+value)
      /**
       *  0:小红
          1:小明
          2:小芳
       */
    }

    // 如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。
    var arr = ['a','b','c']
    let entries = arr.entries()
    console.log(entries.next().value)
    console.log(entries.next().value)
    console.log(entries.next().value)

12.数组的includes()方法用来判断数组是否包含一个给定的值，返回的是一个布尔值。

    var arr = ['a','b','c']
    console.log(arr.includes('a')) // true
    console.log(arr.includes('1')) // false

    // 用indexOf()
    var arr = ['a','b','c']
    console.log(arr.indexOf('a') != -1) // true
    console.log(arr.indexOf('d') != -1)  // false

[NaN].indexOf(NaN)
// -1
includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN)
// true

13.数组实例的 flat()，flatMap()用于将嵌套的数组拉平。

    console.log([1, 2, [3, 4]].flat()) //  [1, 2, 3, 4]
    // 默认只会拉平一层
    console.log([1, 2, [3, [4, 5]]].flat()) //  [1, 2, 3, [4, 5]]
    // 如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
    console.log([1, 2, [3, [4, 5]]].flat(2)) //  [1, 2, 3, 4, 5]
    // 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
    console.log([1, [2, [3]]].flat(Infinity)) // [1, 2, 3]
    // 如果原数组有空位，flat也会跳过空位
    console.log([1, , [2, [3]]].flat(Infinity)) // [1, 2, 3]

    // flatMap可以把数组压平并且处理,flatMap()只能展开一层数组
    var arr = [1,2,3,[4,5]]
    var newArr = arr.flatMap(x => x * x)
    console.log('arr: ', arr)       // [1,2,3,[4,5]]
    console.log('newArr: ', newArr) // [1, 4, 9, NaN]
    console.log(arr.flatMap(x => [[x*2]])) // [Array(1), Array(1), Array(1), Array(1)]

如有不足欢迎指正！

js+es6的数组方法总结

浏览过的版块