Array 构造函数

  1. Array.isArray(obj)

    function validate (a){
        Array.isArray(arguments);  //返回:false
        Array.isArray(a);  //返回true
    }
    var arr = [1, 2, 3];
    validate(arr);

Array Prototype Methods

添加或者移除元素(破坏性)

  1. Array.prototype.shift()[ECMAScript 3]

    var arr = ['a', 'b'];
    arr.shift(); // arr:['b'],返回'a'
  2. Array.prototype.unshift(elem1?, elem2?, ...)[ECMAScript 3]

    var arr = ['a', 'b'];
    arr.unshift('c',['d', 'e', 'f']); // arr:["c", ["d", "e", "f"], "a", "b"], 返回:4
  3. Array.prototype.pop()[ECMAScript 3]

    var arr = ['a', 'b'];
    arr.pop(); // arr:['a'],返回'b'
  4. Array.prototype.push([elem1, elem2, ...])[ECMAScript 3]

    var arr = ['a', 'b'];
    arr.push('c',['d', 'e', 'f']); // arr:["a", "b", "c", ["d", "e", "f"]], 返回:4
  5. Array.prototype.splice(start[, deleteCount, elem1, elem2, ...])[ECMAScript 3]

    var arr = ['a', 'b', 'c', 'd', 'e'];
    arr.splice(3);   //从第三位开始,不指定第二个参数。 arr:['a', 'b', 'c'], 返回:["d", "e"]
    // arr:['a', 'b', 'c']
    arr.splice(1, 1, 'f', 'g', 'h'); //从第一位开始,删除一个元素,插入三个元素。 arr:["a", "f", "g", "h", "c"], 返回['b']
    // arr:["a", "f", "g", "h", "c"]
    arr.splice(0, 0, 'x', 'y', 'z');  // arr:["x", "y", "z", "a", "b", "c", "d", "e"], 返回:[]

排序与反转(破坏性)

  1. Array.prototype.reverse()[ECMAScript 3]

    var arr = ['a', 'b', 'c'];
    arr.reverse(); //arr:['c', 'b', 'd'],返回['c', 'b', 'd']
  2. Array.prototype.sort([compareFunction])[ECMAScript 3]

    // 不传递比较函数
    var arr = ['apple', 'banana', 'pear', 'orange'];
    arr.sort(); //arr:["apple", "banana", "orange", "pear"],返回:["apple", "banana", "orange", "pear"]
    // 不传递比较函数:数字
    var arr = [-1, -20, 50, 7];
    arr.sort();  //arr:[-1, -20, 50, 7],返回:[-1, -20, 50, 7]
    // 传递比较函数

链接与分割(非破坏性)

  1. Array.prototype.concat([arr1, arr2, ...])[ECMAScript 3]

    var arr = ['a', 'b'];
    arr.concat('c',['d', 'e']); // arr:["a", "b"],返回:["a", "b", "c", "d", "e"]
  2. Array.prototype.slice([begin, end])[ECMAScript 3]

    var arr = ['a', 'b', 'c', 'd'];
    arr.slice(1, 3); // 返回["b", "c"]
    // 省略结束位置
    arr.slice(1);  // 返回["b", "c", "d"]
    // 没有传递参数:实现copy
    arr.slice();  // 返回:['a', 'b', 'c', 'd']
    // 只使用一个负数(-2+4=2),从index为2开始截取
    arr.slice(-2); // 返回:["c", "d"]
    arr.slice(1, -1); // 返回:["b", "c"]
  3. Array.prototype.join([separator])[ECMAScript 3]

    var arr = [3, 4, 5];
    arr.join();      // 返回:3,4,5
    arr.join('-');  // 返回:3-4-5
    arr.join('');  //返回:345
    // 包含undefined和null
    var arr = [3, undefined, 5, null, 7];
    arr.join('-'); // 返回:3--5--7
    // 包含hole
    var arr = [3,, 5];
    arr.join('-'); // 返回:3--5

元素查找(非破坏性)

  1. Array.prototype.indexOf(searchValue[, startIndex])[ECMAScript 5]

    var arr = ['a', 'b', 'c', 'd', 'a'];
    arr.indexOf('a',0); //返回:0
    arr.indexOf('a',1); //返回:4
    arr.indexOf('a',-1); //返回:4
    arr.indexOf('b',-1); // 返回:-1
    // true:'1' == 1; false: '1' === 1
    var arr = ['1', 1, '2'];
    arr.indexOf(1); //返回:1
  2. Array.prototype.lastIndexOf(searchElement[, startIndex])[ECMAScript 5]

    var arr = ['b', 'a', 'c', 'd', 'a'];
    arr.lastIndexOf('a',0); //返回:-1
    arr.lastIndexOf('a',1); //返回:1
    arr.lastIndexOf('a',-1); //返回:4
    arr.lastIndexOf('c',-3); // 返回:2

迭代(非破坏性)

  1. Array.prototype.forEach(callback[, thisValue])[ECMAScript 5]

    var arr = [1, 2, 3, 4];
    var sum = 0;
    arr.forEach(function(elem){
        sum += elem;
    });
    sum; //10
  2. Array.prototype.every(callback[, thisValue])[ECMAScript 5]

    function isEven(x){
       return x % 2 === 0;
    }
    var arr = [1, 3, 4];
    arr.every(isEven); //返回:false
    var evenArr = [2, 4, 6];
    evenArr.every(isEven); //返回:true
    var arr = [];
    arr.every(isEven); //返回:true
  3. Array.prototype.some(callback[, thisValue])[ECMAScript 5]

    function isEven(x){
        return x % 2 === 0;
    }
    var arr = [1, 3, 4];
    arr.some(isEven); //返回:true
    var arr = [];
    arr.some(isEven); //返回:false
  4. Array.prototype.map(callback[, thisValue])[ECMAScript 5]

    var arr = [1, 2, 3, 4];
    arr.map(function(elem){
        return 2*elem;
    }); //返回:[2, 4, 6, 8]
  5. Array.prototype.filter(callback[, thisValue])[ECMAScript 5]

    // 压缩稀疏数组(arr)的空缺
    var arr = ['a', ,'c', 'd']  // ["a", 2: "c", 3: "d"]
    arr.filter(function(){
       return true;
    }); // 返回:['a', 'c', 'd']
    // 压缩或者删除undefined和null元素
    var arr = ['a', 'b', undefined, null];
    arr.filter(function(elem){
       return elem !== undefined && elem != null;
    });  // 返回:['a', 'b']

缩减

  1. Array.prototype.reduce(callback[, initialValue])[ECMAScript 5]

    function add(prev, cur){
        return prev + cur;
    }
    var arr = [10, 3, -1];
    arr.reduce(add); //返回:12
    var arr = [1];
    arr.reduce(add); // 返回:1
    var arr = [];
    arr.reduce(add, 1); // 返回:1
  2. Array.prototype.reduceRight(callback[, initialValue])[ECMAScript 5]

    function pow(pre, cur){
        return Math.pow(pre, cur);
    }
    var arr = [1, 2, 3];
    arr.reduce(pow); //返回:1((1^2)^3)
    arr.reduceRight(pow); //返回:9((3^2)^1)

转换(非破坏性)

  1. Array.prototype.toString()[ECMAScript 3]

    var arr = ['a', 'b', 'c', 'd'];
    arr.toString(); //返回:a,b,c,d
  2. Array.prototype.toLocaleString()[ECMAScript 3]

ECMAScript 6

兼容性

static方法

  1. Array.from(arrayLike[, mapFunc, thisArg])

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            var liEle = document.getElementsByTagName('li');
            Array.from(liEle).forEach(function(item, index){
                item.innerHTML = 'array-' + (index + 1);
            });
        </script>
    </body>
  2. Array.of(item0, item1, ...)

    Array.of();  // []
    Array.of(3);  // [3]
    Array.of(3, 11, 8);  // [3, 11, 8]

prototype方法

迭代(非破坏性)

  1. 定义:三个方法都是用于遍历数组,返回一个遍历器对象(可以使用for..of进行遍历,也可以使用next()方法遍历)
  2. 区别
  3. 用法

    "use strict";
    
    var indexArr = ['a', 'b'].keys();  // 迭代对象
    indexArr.next().value;  // 0
    indexArr.next().value;   // 1
    let letter = ['a', 'b', 'c'];
    let entries = letter.entries();
    entries.next().value; // [0, 'a']
    entries.next().value; // [1, 'b']
    entries.next().value; // [2, 'c']

查询(非破坏性)

  1. Array.prototype.find(predicate[, thisArg])

    var arr = [6, -5, 8];
    arr.find(function(value){
        return value < 0;
    }); //返回-5
    arr.find(function(value){
     return value > 10;
    }); //返回undefined
    var arr = [6, -5, 8, NaN];
    arr.find(function(value){
        return Object.is(NaN, value);
    }); //返回NaN
  2. Array.prototype.findIndex(predicate[, thisArg])

    var arr = [6, -5, 8, NaN];
    arr.findIndex(function(value){
        return  Object.is(NaN, value);
    }); //返回3
    arr.findIndex(function(value){
        return  value > 10;
    }); //返回-1
  3. Array.prototype.includes(value, start)

    [1, 2, 3].includes(3,-3);     // 返回:true
    [1, 2, 3].includes(3,-5);     //返回:true
    [1, 2, 3].includes(4);     // 返回:false
    [1, 2, NaN].includes(NaN); // 返回:true

其它(破坏性)

  1. Array.prototype.copyWithin(target, start, end)

    var arr = [1, 2, 3, 4, 5];
    // 从index=3开始查找元素,到index=4.则查找元素为4,5.从index为0开始替换
    arr.copyWithin(0, 3, 5);  //返回:[4, 5, 3, 4, 5];arr:[4, 5, 3, 4, 5]
  2. Array.prototype.fill(value, start, end)

    var arr = [1, 2, 3, 4, 5];
    arr.fill('*', 1, 2); //返回:[1, "*", 3, 4, 5],arr:[1, "*", 3, 4, 5]
    arr.fill(); //返回:[undefined, undefined, undefined, undefined, undefined],arr一样

参考资料

  1. javascript权威指南(犀牛书)
  2. speaking javascript
  3. 阮一峰:ECMAScript6入门
  4. ECMAScript6数组新特性
  5. MDN