javascript Array 方法总结(搬运的)

完整的原文地址请点击：地址

数组原型提供的方法主要分为三种，会改变自身值的，不会改变自身值的，遍历方法。

• 改变自身值的方法(9个)

  基于ES6，改变自身值的方法一共有9个，分别为pop、push、reverse、shift、sort、splice、unshift，
  以及两个ES6新增的方法copyWithin 和fill。

  • pop
    pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。如果是栈的话，这个过程就是栈顶弹出。
    语法：arr.pop()
  • push
    push()方法添加一个或者多个元素到数组末尾，并且返回数组新的长度。如果是栈的话，这个过程就是栈顶压入。
    语法：arr.push(element1, ..., elementN)
  • reverse
    reverse()方法颠倒数组中元素的位置，第一个会成为最后一个，最后一个会成为第一个，该方法返回对数组的引用。
    语法：arr.reverse()
  • shift
    shift()方法删除数组的第一个元素，并返回这个元素。
    语法：arr.shift()
  • sort
    sort()方法对数组元素进行排序，并返回这个数组。
    语法：arr.sort()
    console.log(array === array.sort()) // true
  • splice
    splice()方法用新元素替换旧元素的方式来修改数组。
    splice是一个常用的方法，复杂的数组操作的场景通常都会有它的身影特别是需要维持原数组引用时，就地删除或者新增元素，splice是最适合的。
    语法：arr.splice(start,deleteCount[, item1[, item2[, …]]])
    • start 指定从哪一位开始修改内容。如果超过了数组长度，则从数组末尾开始添加内容；如果是负值，则其指定的索引位置等同于 length+start (length为数组的长度)，表示从数组末尾开始的第 -start 位。
    • deleteCount 指定要删除的元素个数，若等于0，则不删除。这种情况下，至少应该添加一位新元素，若大于start之后的元素总和，则start及之后的元素都将被删除。
    • itemN 指定新增的元素，如果缺省，则该方法只删除数组元素。
    • 返回值 由原数组中被删除元素组成的数组，如果没有删除，则返回一个空数组。
  • unshift
    unshift() 方法用于在数组开始处插入一些元素(就像是栈底插入)，并返回数组新的长度。
    语法：arr.unshift(element1, ..., elementN)
  • copyWithin
    copyWithin() 方法用于数组内的元素替换，即替换元素和被替换元素均是数组内的元素。
    语法：arr.copyWithin(target, start[, end = this.length])
    taget 指定被替换元素的索引，start 指定替换元素起始的索引，end 可选，指的是替换元素结束位置的索引。
如果start为负，则其指定的索引位置等同于length+start，length为数组的长度。end也是如此。
注：目前只有Firefox（版本32及其以上版本）实现了该方法。

    var array = [1,2,3,4,5]; 
    var array2 = array.copyWithin(0,3);
    console.log(array===array2,array2); // true [4, 5, 3, 4, 5]
    
    var array = [1,2,3,4,5]; 
    console.log(array.copyWithin(0,3,4)); // [4, 2, 3, 4, 5]
    
    var array = [1,2,3,4,5]; 
    console.log(array.copyWithin(0,-2,-1)); // [4, 2, 3, 4, 5] 
    

  • fill
    fill() 方法同样用于数组元素替换，它可将数组指定区间内的元素替换为某个值。
    语法：arr.fill(value, start[, end = this.length])
    value 指定被替换的值，start 指定替换元素起始的索引，end 可选，指的是替换元素结束位置的索引。
如果start为负，则其指定的索引位置等同于length+start，length为数组的长度。end也是如此。

    var array = [1,2,3,4,5];
    var array2 = array.fill(10,0,3);
    console.log(array===array2,array2); // true [10, 10, 10, 4, 5], 可见数组区间[0,3]的元素全部替换为10
    

• 不会改变自身的方法(9个)

  基于ES7，不会改变自身的方法一共有9个，分别为 concat、join、slice、toString、toLocateString、 indexOf、lastIndexOf、未标准的toSource 以及ES7新增的方法 includes。

  • concat
    concat() 方法将传入的数组或者元素与原数组合并，组成一个新的数组并返回。
    语法：arr.concat(value1, value2, ..., valueN)

    var array = [1, 2, 3];
    var array2 = array.concat(4,[5,6],[7,8,9]);
    console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(array); // [1, 2, 3], 可见原数组并未被修改
    

  • join
    join() 方法将数组中的所有元素连接成一个字符串。
    语法：arr.join([separator = ',']) separator可选，缺省默认为逗号。

  • slice
    slice() 方法将数组中一部分元素浅复制存入新的数组对象，并且返回这个数组对象。
    语法：arr.slice(start[, end])
    参数 start 指定复制开始位置的索引，end如果有值则表示复制结束位置的索引（不包括此位置）。
浅复制 是指当对象的被复制时，只是复制了对象的引用，指向的依然是同一个对象。

  • toString
    toString() 方法返回数组的字符串形式，该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接（由逗号隔开）组成。
    语法： arr.toString()

  • toLocaleString
    toLocaleString() 类似toString()的变型，该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。
    语法：arr.toLocaleString()
    数组中的元素将调用各自的 toLocaleString 方法：

    • Object：Object.prototype.toLocaleString()
    • Number：Number.prototype.toLocaleString()
    • Date：Date.prototype.toLocaleString()

  • indexOf
    indexOf() 方法用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。
    语法：arr.indexOf(element, fromIndex=0)
    element 为需要查找的元素。
fromIndex 为开始查找的位置，缺省默认为0。如果超出数组长度，则返回-1。
indexOf 使用严格相等（即使用 === 去匹配数组中的元素）。

  • lastIndexOf
    lastIndexOf() 方法用于查找元素在数组中最后一次出现时的索引，如果没有，则返回-1。并且它是indexOf的逆向查找，即从数组最后一个往前查找。
    语法：arr.lastIndexOf(element, fromIndex=length-1)
    element 为需要查找的元素。
fromIndex 为开始查找的位置，缺省默认为数组长度length-1。如果超出数组长度，由于是逆向查找，则查找整个数组。
同 indexOf 一样，lastIndexOf 也是严格匹配数组元素。

  • includes
    includes() 方法基于ECMAScript 2016（ES7）规范，它用来判断当前数组是否包含某个指定的值，如果是，则返回 true，否则返回 false。
    语法：arr.includes(element, fromIndex=0)
    element 为需要查找的元素。
fromIndex 表示从该索引位置开始查找 element，缺省为0，它是正向查找，即从索引处往数组末尾查找。

    var array = [1, 2, NaN];
    console.log(array.includes(1)); // true
    console.log(array.includes(NaN)); // true
    console.log(array.includes(2,-4)); // true
    

  • toSource
    toSource() 方法是非标准的，该方法返回数组的源代码，目前只有 Firefox 实现了它。
    语法：arr.toSource()

• 遍历方法(12个)

  基于ES6，遍历方法一共有12个，分别为forEach、every、some、filter、 map、reduce、reduceRight,
  以及ES6新增的方法entries、find、findIndex、keys、values。

  • forEach
    forEach() 方法指定数组的每项元素都执行一次传入的函数，返回值为undefined。
    语法：arr.forEach(fn, thisArg)
    fn 表示在数组每一项上执行的函数，接受三个参数：
    - value 当前正在被处理的元素的值
    - index 当前元素的数组索引
    - array 数组本身
    thisArg 可选，用来当做 fn 函数内的 this 对象。

    ---

    forEach 将为数组中每一项执行一次 fn 函数，那些 已删除，新增或者从未赋值的项将被跳过（但不包括值为 undefined 的项）。

    ---

    遍历过程中，fn会被传入上述三个参数。

    var array = [1, 3, 5];
    var obj = {name:'cc'};
    var sReturn = array.forEach(function(value, index, array){
      array[index] = value * value;
      console.log(this.name); // cc被打印了三次
    },obj);
    console.log(array); // [1, 9, 25], 可见原数组改变了
    console.log(sReturn); // undefined, 可见返回值为undefined
    

  • every
    every() 方法使用传入的函数测试所有元素，只要其中有一个函数返回值为 false，那么该方法的结果为 false；如果全部返回 true，那么该方法的结果才为 true。

     var array = [18, 9, 10, 35, 80];
     var array2 = array.every(function(value, index, array){
       return value > 20;
     });
     console.log(array2); //false
    

  • some
    some() 方法刚好同 every() 方法相反，some 测试数组元素时，只要有一个函数返回值为 true，则该方法返回 true，若全部返回 false，则该方法返回 false。

  • filter
    filter() 方法使用传入的函数测试所有元素，并返回所有通过测试的元素组成的新数组。它就好比一个过滤器，筛掉不符合条件的元素。
    语法：arr.filter(fn, thisArg)

     var array = [18, 9, 10, 35, 80];
     var array2 = array.filter(function(value, index, array){
       return value > 20;
     });
     console.log(array2); // [35, 80]
    

  • map
    map() 方法遍历数组，使用传入函数处理每个元素，并返回函数的返回值组成的新数组。
    语法：arr.map(fn, thisArg)

     var str = '12345';
     var output = Array.prototype.map.call(str, function(x) {
       return x;
     }).reverse().join(' ');
     console.log(output);//5 4 3 2 1
    

  • reduce
    reduce() 方法接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。
    语法：arr.reduce(fn, initialValue)
    fn 表示在数组每一项上执行的函数，接受四个参数：

    • previousValue 上一次调用回调返回的值，或者是提供的初始值
    • value 数组中当前被处理元素的值
    • index 当前元素在数组中的索引
    • array 数组自身

    initialValue 指定第一次调用 fn 的第一个参数。

     var array = [1, 2, 3, 4];
     var s = array.reduce((p, v) => p * v,3); 
     console.log(s); //72
    

  • reduceRight
    reduceRight() 方法接收一个方法作为累加器，数组中的每个值（从右至左）开始合并，最终为一个值。除了与reduce执行方向相反外，其他完全与其一致，请参考上述 reduce 方法介绍。

  • entries
    entries() 方法基于ECMAScript 2015（ES6）规范，返回一个数组迭代器对象，该对象包含数组中每个索引的键值对。
    语法：arr.entries()

    var array = ["a", "b", "c"];
    var iterator = array.entries();
    console.log(iterator.next().value); // [0, "a"]
    console.log(iterator.next().value); // [1, "b"]
    console.log(iterator.next().value); // [2, "c"]
    console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined
    

  • find&findIndex
    find() 方法基于ECMAScript 2015（ES6）规范，返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。
    findIndex() 方法则返回数组中第一个满足条件的元素的索引（如果有的话）否则返回-1。
    语法：arr.find(fn, thisArg)，arr.findIndex(fn, thisArg)

     var array = [1, 3, 5, 7, 8, 9, 10];
     function f(value, index, array){
       return value%2==0; // 返回偶数
     }
     function f2(value, index, array){
       return value > 20; // 返回大于20的数
     }
     console.log(array.find(f)); // 8
     console.log(array.find(f2)); // undefined
     console.log(array.findIndex(f)); // 4
     console.log(array.findIndex(f2)); // -1
    

  • keys
    keys() 方法基于ECMAScript 2015（ES6）规范，返回一个数组索引的迭代器。（浏览器实际实现可能会有调整）
    语法：arr.keys()

    var array = ["abc", "xyz"];
    var iterator = array.keys();
    console.log(iterator.next()); // Object {value: 0, done: false}
    console.log(iterator.next()); // Object {value: 1, done: false}
    console.log(iterator.next()); // Object {value: undefined, done: true}
    

    索引迭代器会包含那些没有对应元素的索引，如下：

    var array = ["abc", , "xyz"];
    var sparseKeys = Object.keys(array);
    var denseKeys = [...array.keys()];
    console.log(sparseKeys); // ["0", "2"]
    console.log(denseKeys);  // [0, 1, 2]
    

    利用keys实现，生成一个从0到指定数字的新数组

    [...Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    [...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    

  • values
    values() 方法基于ECMAScript 2015（ES6）规范，返回一个数组迭代器对象，该对象包含数组中每个索引的值。其用法基本与上述 entries 方法一致。
    语法：arr.values()

    var array = ["abc", "xyz"];
    var iterator = array.values();//Array Iterator {}
    console.log(iterator.next().value); // abc
    console.log(iterator.next().value); // xyz
    

  • Symbol.iterator
    该方法基于ECMAScript 2015（ES6）规范，同 values 方法功能相同。
    语法：arr[Symbol.iterator] ()

    var array = ["abc", "xyz"];
    var iterator = array[Symbol.iterator]();
    console.log(iterator.next().value); // abc
    console.log(iterator.next().value); // xyz
    

• ES6专门扩展了数组构造器Array ，新增2个方法：Array.of、Array.from

  • Array.of
    Array.of用于将参数依次转化为数组中的一项，然后返回这个新数组，而不管这个参数是数字还是其它。它基本上与Array构造器功能一致，唯一的区别就在单个数字参数的处理上。如下：

    Array.of(8.0); // [8]
    Array(8.0); // [undefined × 8]
    

    参数为多个，或单个参数不是数字时，Array.of 与 Array构造器等同。

    Array.of(8.0, 5); // [8, 5]
    Array(8.0, 5); // [8, 5]
    
    Array.of('8'); // ["8"]
    Array('8'); // ["8"]
    

    若是需要使用数组包裹元素，推荐优先使用Array.of方法。

  • Array.from
    Array.from的设计初衷是快速便捷的基于其他对象创建新数组，准确来说就是从一个类似数组的可迭代对象创建一个新的数组实例，说人话就是，只要一个对象有迭代器，Array.from就能把它变成一个数组（当然，是返回新的数组，不改变原对象）。
    语法：Array.from(arrayLike[, processingFn[, thisArg]])
    从语法上看，Array.from拥有3个形参，第一个为类似数组的对象，必选。第二个为加工函数，新生成的数组会经过该函数的加工再返回。第三个为this作用域，表示加工函数执行时this的值。后两个参数都是可选的。
    我们来看看用法。

    var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
    let array = Array.from(obj, (value) => value.repeat(3));
    console.log(array)  //["aaa", "bbb", "ccc"]
    

    利用Array.from实现，生成一个从0到指定数字的新数组

    Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    

  • Array.isArray

    Array.isArray([]); // true
    Array.isArray({0: 'a', length: 1}); // false
    

    通过Object.prototype.toString去判断一个值的类型，也是各大主流库的标准。