js的数组方法整理

slice

从已有的数组中返回选定的元素。该方法不会修改数组，而是返回一个子数组。

语法：arr.slice([start[,end]])

     start: 可选，规定从何处开始选取。如果是负数，就是从尾部开始算起的位置（-1指最后一个元素，-2指倒数第二个元素）；如果没有指定，则从0开始

     end:   可选，规定从何处结束选取。如果没有指定，则切分的数组包含从start到数组结束的所有元素。

示例：

　　var arr = [0, 4, 5, 4, 7, 6, 9];
　　arr.slice(2, 4);    //[5,4]
　　arr.slice(-3, 6);  //[7,6]
　　arr.slice(5);  //[6,9]

可以使用slice快速将伪数组转为数组：

function f() {
    var arr = Array.prototype.slice.call(arguments);
}

splice

向数组中添加或删除项目，并返回被删除的项目。该方法会改变原来的数组。

语法：arr.splice(index,howmany,item1,item2,...,itemX)

　　index: 必需。规定添加或删除的位置，使用负数可从数组结尾处规定位置；

　　howmany: 必需。要删除的数量。如果设置为0，则不会删除项目。

　　itemX： 可选。向数组添加的新项目。

示例：

    var arr = [0, 4, 5, 4, 7, 6, 9];
    console.log(arr.splice(2, 2));    //[5,4]
    console.log(arr);   //[0, 4, 7, 6, 9]
    console.log(arr.splice(2, 0, 8, 10));   //[]
    console.log(arr);   //[0, 4, 8, 10, 7, 6, 9]

join

将所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。返回字符串。该方法不会修改原数组。

语法：arr.join(separator)

　　separator: 可选，指定要使用的分隔符。如果省略，则使用逗号作为分隔符。

示例：

    var arr = [0, 1, 2, 3];
    console.log(arr.join());    //'0,1,2,3'
    console.log(arr.join('.')); //'0.1.2.3'

push

向数组的末尾添加或删除一个或多个元素，并返回数组的新长度。该方法会改变原数组。

语法：arr.push(newelement1,newelement2,...,newelementX)

　　newelement1: 必需。要添加到数组的第一个元素。

　　newelementX: 可选，可添加多个元素。

示例：

    var arr = [0, 1, 2, 3];
    console.log(arr.push(1));   //5
    console.log(arr);   //[0, 1, 2, 3, 1]

pop

删除数组的最后一个元素，并返回它删除的元素的值。如果数组已经是空，则不改变数组，并返回undefined。该方法会改变原数组。

语法：arr.pop()

示例：

    var arr = [0, 1, 2, 3];
    console.log(arr.pop()); //3
    console.log(arr);   //[0, 1, 2]

shift

删除数组的第一个元素，并返回它删除元素的值。如果数组已经是空，则不改变数组，并返回undefined。该方法会改变原数组。

语法：arr.shift()

示例：

    var arr1 = [0, 1, 2, 3];
    console.log(arr1.shift()); //0
    console.log(arr1);   //[1, 2, 3]

    var arr2 = [];
    console.log(arr2.shift());   //undefined
    console.log(arr2);   //[]

unshift

向数组的开头添加或删除一个或多个元素，并返回数组的新长度。该方法会改变原数组。

语法：arr.unshift(newelement1,newelement2,...,newelementX)

　　newelement1: 必需。要添加到数组的第一个元素。

　　newelementX: 可选，可添加多个元素。

示例：

    var arr = [0, 1, 2, 3];
    console.log(arr.unshift(4, 5));  //6
    console.log(arr);   //[4, 5, 0, 1, 2, 3]

reverse

颠倒数组中元素的顺序。该方法会改变原来数组。

语法：arr.reverse()

示例：

    var arr = [0, 1, 2, 3];
    console.log(arr.reverse()); //[3, 2, 1, 0]
    console.log(arr);   //[3, 2, 1, 0]

sort

对数组的元素进行排序。该方法会改变原数组。

语法：arr.sort(sortby)

　　sortby: 可选。规定排序顺序。必须是比较函数，有两个参数a和b，如果a小于b，在排序后a应该出现在b之前（从小到大排），则返回一个小于0的值。如果没有参数，则按照字符编码顺序对数组中的元素进行排序。

示例：

    var arr1 = ['a', 'b', 'z', 'A', 'Z'];
    console.log(arr1.sort());    //["A", "Z", "a", "b", "z"]
    console.log(arr1);  // ["A", "Z", "a", "b", "z"]

    var arr2 = [1, 5, 10, 1000];
    console.log(arr2.sort());   //[1, 10, 1000, 5]

    function sortNumber1(a, b) {
        return a - b;
    }
    function sortNumber2(a, b) {
        return b - a;
    }
    console.log(arr2.sort(sortNumber1));    //[1, 5, 10, 1000]
    console.log(arr2.sort(sortNumber2));    //[1000, 10, 5, 1]

concat

连接两个或多个数组。返回被连接数组的一个副本。该方法不会修改原来的数组。

语法：arr.concat(arrX,arrX,...,arrX)

　　arrX: 必需。可以是具体的值，也可以是数组对象，可以是任意多个。

示例：

    var arr1 = [1, 2, 3];
    console.log(arr1.concat(4, 5));  //[1, 2, 3, 4, 5]
    console.log(arr1);   //[1, 2, 3]

    var arr2 = [4, 5];
    console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5]

    var arr3 = [6, [7, 8]];
    console.log(arr1.concat(arr2, arr3));   // [1, 2, 3, 4, 5, 6, [7, 8]]
    console.log(arr1.concat(arr2, 6, [7, 8]));  //[1, 2, 3, 4, 5, 6, 7, 8]

toString

将数组转换为字符串并返回结果。返回值与没有参数参与的join()方法返回的字符串相同。

语法：arr.toString()

示例：

1     var arr=[1,2,3];
2     console.log(arr.toString());    //'1,2,3'

valueOf

返回数组对象的原始值。

语法：arr.valueOf()

示例：

1     var arr=[1,2,3];
2     console.log(arr.valueOf());    //[1, 2, 3]

some

测试数组中的某些元素是否通过回调函数实现的测试。数组中的每个元素执行一次回调函数，如果找到一个使得回调函数返回真值的值，some将会立即返回true，否则返回false。

语法：arr.some(function(item,index,arr),thisArg)

参数：item：当前元素的值。必需

　　　index：当前元素的索引值。可选

　　　arr：当前数组对象。可选

　　　thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数，因为箭头函数在词法上绑定了this值）。可选

示例：

测试数组中是否有元素大于10

//测试数组中是否有元素大于10
console.log([2, 5, 8, 1, 4].some(item => item > 10))    //false
console.log([2, 5, 8, 11, 4].some(item => item > 10))   //true

map（以下都是ES6方法）

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

语法：arr.map(function(item, index, arr), thisArg)

参数：item：当前元素的值。必需。

　　　index：当前元素的索引值。可选。

　　　arr：当前元素属于的数组对象。也就是数组本身。可选。

　　　thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数，因为箭头函数在词法上绑定了this值）。可选

示例：

求数组中每个元素的平方根。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(roots); //[1, 2, 3]

 反转字符串

var str = '12345';
console.log(Array.prototype.map.call(str, x => x).reverse().join('')); //'54321'

通常情况下，map方法中回调函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着只给回调函数传了一个参数。例如：

console.log(['1', '2', '3'].map(parseInt)); //[1, NaN, NaN]
//上面的语句并没有返回所期望的[1, 2, 3]，

//通常使用parseInt时只需要传递一个参数，但实际上可以有两个参数，第二个参数是进制数。
//map方法在调用回调函数时，会给它传递三个参数：当前正在遍历的元素，元素索引和原数组。
//parseInt会把第三个参数忽视，但第二个参数会被当成进制数，从而返回了NaN

//如果想得到所期望的结果，可以这样写
function returnInt(ele) {
    return parseInt(ele, 10);
}
['1', '2', '3'].map(returnInt);    //[1, 2, 3]

//也可以使用简单的箭头函数
['1', '2', '3'].map(str=>parseInt(str));    //[1, 2, 3]

兼容性：IE9以下不支持。

兼容性解决代码：

if (!Array.prototype.map) {
    Array.prototype.map = function (callback, thisArg) {
        //判断callback是否为函数类型
        if (Object.prototype.toString.call(callback) != '[object Function]') {
            throw new TypeError(callback + 'is not a function');
        } else {
            if (this == null) {   //判断map方法的调用者是否存在
                throw new TypeError('this is null or not defined')
            } else {
                var arr = Object(this); //调用map方法的数组
                var len = arr.length >>> 0; //数组长度
                var k = 0;
                var mappedArr = new Array(len); //map方法新产生的数组
                while (k < len) {   //遍历原数组，调用回调函数
                    if (k in arr) {
                        mappedArr[k] = callback.call(thisArg, arr[k], k, arr);
                    }
                    k++;
                }
                return mappedArr;
            }
        }
    }
}

fill

用一个固定值从起始索引到终止索引填充数组，不包括终止索引。返回修改后的数组

语法：arr.fill(value [,start [,end]])

　　value：用来填充数组的值。不填时为undefined

　　start：起始索引，默认为0。如果是负数，则会计算为arr.length+start

　　end：终止索引，默认值为arr.length。如果是负数，则会计算为arr.length+end

[1, 2, 3].fill()   //[undefined, undefined, undefined]
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行同一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

　　

reduce

数组中的每个元素（从左到右）应用一个函数，将其简化为单个值。

语法：arr.reduce(function(tmp, item, index,Array) {}, initialValue )

　　　tmp：中间结果（index为1时，tmp为arr[0]）

　　　item：当前值

　　　index：当前索引。 可选

　　　Array：源数组 。可选

　　　initialValue：第一次调用callback函数时的第一个参数的值。初始值

如果没有initialValue，回调函数第一次执行，tmp为arr[0]，item为arr[1]，index为1

如果有initialValue，回调函数第一次执行，tmp为initialValue，item为arr[0]，index为0

如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

举例：对一个数组求和

const arr = [1, 2, 3, 4]
//未加初始值
const result1 = arr.reduce((tmp, item) => tmp + item)
//添加初始值
const result2 = arr.reduce((tmp, item) => tmp + item, 10)
console.log(result1);    //10
console.log(result2);    //20

 filter

创建一个新数组，包含通过回调函数（返回结果为true）的所有元素。

语法：arr.filter(function(item, index, arr){}, thisArg)

参数：item：当前元素

　　　index：当前索引。可选

　　　arr：调用filter的数组arr。可选

　　　thisArg：执行回调函数时的用于this的值（使用时不能用箭头函数）。可选

举例：获取数组中能被3整除的数字

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const result = arr.filter(item => item % 3 == 0)
console.log(result)     //[3, 6, 9]

find

找出第一个符合条件的数组成员。

语法：arr.find(function(item, index, arr), thisArg)

举例：

console.log([1, 4, -5, 10, -2].find(n => n < 0))

findIndex

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

forEach

循环数组，对数组的每个元素执行一次回调函数

语法、参数与map和filter一样。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
arr.forEach(item => {
    console.log(item)
})
//等同于
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

from

从一个类似数组或者可迭代对象创建一个新的浅拷贝数组实例

语法：arr.from(arrLike[,mapFun])

举例：

console.log(Array.from('foo'))  //["f", "o", "o"]

 

console.log(Array.from({ 0: 'ab', 1: 'cd', length: 2 }))  //["ab", "cd"]

 

console.log(Array.from([1, 2, 3], x => x + 1))  //[2, 3, 4]

includes

判断数组中是否包含一个指定的值，返回结果为布尔值

语法：arr.includes(valueToFind,[,fromIndex]

参数：valueToFind：需要查找的元素值

　　　fromIndex：可选，从fromIndex索引出开始查找。如果为负值，则按升序从arr.length+fromIndex的索引开始查找，如果计算出的索引小于0，则对整个数组进行搜索。如果大于等于数组长度，则会返回false，且该数组不会被搜索。默认为0。

举例：

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