数组方法大全(持续总结...)

持续更新…

join()

作用

join(separator): 将数组的元素组成一个字符串并返回，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

不改变原数组

用法

let arr1 = [2, 3, 5, 8, 4, 10]

console.log(arr1.join('-'));

拓展用法

//实现相同字符重复的操作
function repeatString(str, n) {
  return new Array(n + 1).join(str)
}
console.log(repeatString('ljw', 5));

push()和pop()

作用

push()：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

改变原数组

用法

let arr2 = [2, 3, 5, 8, 4, 10]
console.log(arr2.push(function() {
    console.log(1)
}));
console.log(arr2.pop())

shift() 和 unshift()

作用

shift()：删除原数组第一项， 并返回删除元素的值； 如果数组为空则返回undefined。

unshift()： 将参数添加到原数组开头， 并返回数组的长度。

这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

改变原数组

用法

let arr3 = [2, 3, 5, 8, 4, 10]
console.log(arr3.shift())
console.log(arr3.unshift('unshift'))

sort()

作用

sort()： 按升序排列数组项—— 即最小的值位于最前面， 最大的值排在最后面。

在排序时， sort() 方法会调用每个数组项的 toString() 转型方法， 然后比较得到的字符串， 以确定如何排序， 即使数组中的每一项都是数值。

改变原数组

用法

因为是对比字符串因此可以出现以下问题

let arr4 = [23, 54, 7, 32, 41] //这里是比较第一位数的大小
console.log(arr4.sort());

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(v1, v2) {
    return v1 - v2
}
console.log(arr4.sort(compare));

reverse()

作用

reverse()：反转数组项的顺序。

改变原数组

用法

let arr5 = [2, 3, 5, 8, 4, 10]
arr5.reverse()
console.log(arr5);

concat()

作用

concat()：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。

在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

不改变原数组

用法

let arr6 = [2, 3, 5, 8, 4, 10]
console.log(arr6.concat(33));
console.log(arr6);
console.log(arr6.concat());
console.log(arr6);
//同时concat()传入的是一个数，如果传入的是一个数组，则把数组里面的项传入数组，如果数组项里还有数组，则把数组当作一个项传入
console.log(arr6.concat(10, [33, 10]));
console.log(arr6.concat(10, [33, [10, 10]]));

面试题：

传递两个参数m， n， 返回长度为m， 所有元素都为n的数组， 要求不能用循环。

function fn(m, n) {
    return m ? fn(m - 1, n).concat(n) : [];
}

slice()

作用

slice()： 返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

slice() 方法可以接受一或两个参数， 即要返回项的起始和结束位置。 在只有一个参数的情况下， slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。

如果有两个参数， 该方法返回起始和结束位置之间的项，但不包括结束位置的项。

参数可以传入负数，表示从某尾开始

不改变原数组

用法

let arr7 = [2, 3, 5, 8, 4, 10]
console.log(arr7.slice(2, 4)); //[5, 8]
console.log(arr7);

splice()

作用

splice()： 很强大的数组方法， 它有很多种用法， 可以实现删除、 插入和替换。

删除： 可以删除任意数量的项， 只需指定 2 个参数： 要删除的第一项的位置和要删除的项数。 例如， splice(0, 2) 会删除数组中的前两项。

插入： 可以向指定位置插入任意数量的项， 只需提供 3 个参数： 起始位置、 0（ 要删除的项数） 和要插入的项。 例如， splice(2, 0, 4, 6) 会从当前数组的位置 2 开始插入4和6。

替换： 可以向指定位置插入任意数量的项， 且同时删除任意数量的项， 只需指定 3 个参数： 起始位置、 要删除的项数和要插入的任意数量的项。

插入的项数不必与删除的项数相等。 例如， splice(2, 1, 4, 6) 会删除当前数组位置 2 的项， 然后再从位置 2 开始插入4和6。

splice() 方法始终都会返回一个数组， 该数组中包含从原始数组中删除的项， 如果没有删除任何项， 则返回一个空数组。

改变原数组

用法

let arr8 = [2, 3, 5, 8, 4, 10]
console.log(arr8.splice(1, 4)); //[3, 5, 8,4] 删除从第一项开始到第4项，包括第4项
console.log(arr8);
console.log(arr8.splice(1, 0, 6, 7, 4)); // 在第一项后面删除0项，插入6,7,4   返回[]
console.log(arr8);
console.log(arr8.splice(1, 3, 6, 3, 8)); // 在第一项后面删除3项，插入6,7,4
console.log(arr8);

indexOf()和 lastIndexOf()（ES5新增）

作用

indexOf()： 接收两个参数： 要查找的项和（ 可选的） 表示查找起点位置的索引。 其中， indexOf：从数组的开头（ 位置 0） 开始向后查找。

lastIndexOf： 接收两个参数： 要查找的项和（ 可选的） 表示查找起点位置的索引。 其中，lastIndexOf：从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置， 或者在没找到的情况下返回-1。 在比较第一个参数与数组中的每一项时， 会使用全等操作符。

不改变原数组

用法

let arr9 = [2, 3, 5, 8, 4, 10]
console.log(arr9.indexOf(3));
console.log(arr9.lastIndexOf(11));

forEach() （ES5新增）

作用

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。

参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

改变原数组

基本数据类型不改变，引用数据类型改变

基本类型我们当次循环拿到的ele， 只是forEach给我们在另一个地方复制创建新元素， 是和原数组这个元素没有半毛钱联系的！ 所以， 我们使命给循环拿到的ele赋值都是无用功！

Boolean, null, undefined它们在栈内存中直接存储变量与值。 而Object对象的真正的数据是保存在堆内存， 栈内只保存了对象的变量以及对应的堆的地址， 所以操作Object其实就是直接操作了原数组对象本身。

forEach 的基本原理也是for循环， 使用arr[index] 的形式赋值改变， 无论什么就都可以改变了。

用法

let arr10 = [2, 3, 5, 8, 4, 10, {
    name: '1',
    age: 99
}]
arr10.forEach((item, index, arr) => { //遍历的数组的项、对应下标、原数组
    console.log(item + '|' + index + '|' + arr + '|' + this.value);
    item = 1
    if (item.name) {
        item.age = 100
    }
});
console.log(arr10);

// forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。
// 使用 return 语句实现 continue 关键字的效果：
let arr11 = [1, 2, 3, 4, 5];
arr11.forEach(function(item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});

map() （ES5新增）

作用

map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

不会处理空数组

不改变原数组

用法

let arr12 = [2, 3, 5, 8, 4, 10]
let newArr = arr11.map(item => {
    return item * item
})
console.log(newArr);

filter() （ES5新增）

作用

filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。数组中的每个元素都会执行这个参数

有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

不改变原数组

用法

let arr13 = [2, 3, 5, 8, 4, 10]
newArr = arr13.filter(item => {
    return item > 5
})
console.log(newArr);

特殊用法

// 数组去重
function unique(arr) {
    return arr.filter(function(item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
    });
}
let arsr = [1, 1, 'RUNOOB', 'RUNOOB', true, true, 15];
console.log(unique(arsr))// [1, "RUNOOB", true, 15]


// 遍历所有偶数
let arr = [56, 15, 48, 3, 7];
newArr = arr.filter(function(value, index, array) {
    return value % 2 === 0;
});
console.log(newArr)// [56, 48]

every() （ES5新增）

用作

every() 方法用于检测数组所有元素是否都符合指定条件（ 通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

如果数组中检测到有一个元素不满足， 则整个表达式返回 false， 且剩余的元素不会再进行检测。

如果所有元素都满足条件， 则返回 true。

不改变原数组

用法

let arr14 = [1, 2, 3, 4, 5];
let num = 3;
arr14.every(function(v) {
    if (v == num) {
        return false;
    } else {
        console.log(v);
        return true;
    }
});

some() （ES5新增）

作用

some() 方法用于检测数组中的元素是否满足指定条件（ 函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件， 则表达式返回true, 剩余的元素不会再执行检测。

如果没有满足条件的元素， 则返回false。

不会改变原数组

用法

let arr15 = [1, 2, 3, 4, 5];

console.log(arr15.some(function(item, index) {
    return item > 4
}));

reduce()和 reduceRight() （ES5新增）

作用

这两个方法都会实现迭代数组的所有项， 然后构建一个最终返回的值。 reduce() 方法从数组的第一项开始， 逐个遍历到最后。 而 reduceRight() 则从数组的最后一项开始， 向前遍历到第一项。

这两个方法都接收两个参数： 一个在每一项上调用的函数和（ 可选的） 作为归并基础的初始值。

传给 reduce() 和 reduceRight() 的函数接收 4 个参数： 前一个值、 当前值、 项的索引和数组对象。 这个函数返回的任何值都会作为第一个参数自动传给下一项。 第一次迭代发生在数组的第二项上， 因此第一个参数是数组的第一项， 第二个参数就是数组的第二项。

不改变原数组

用法

下面代码用reduce() 实现数组求和， 数组一开始加了一个初始值10。

let arr16 = [1, 2, 3, 4, 5];
let sum = arr16.reduce(function(prev, cur, index, arr) {
    return prev + cur
}, 10)
console.log(sum);
console.log(arr16 + '--16');

from()

作用

Array.from(object, mapFunction, thisValue)

object为要转为数组的对象， 此对象的必须有length值， 或为set（） 得到的对象, 或字符串(必须参数)

如果object是一个数组， 返回的仍是此数组

不会改变原数据

用法

let arrayLike = {
    0: 'tom',
    1: '65',
    2: '男',
    3: ['jane', 'john', 'Mary'],
    'length': 2
}
let arr17 = Array.from(arrayLike) //["tom", "65"]
console.log(arr17);

高阶用法

let arr = Array.from(new Set([1,1,2,2])) //1, 2