跳到主要内容

js array数组方法整理总结

· 阅读需 11 分钟

之前学习使用了[].reduce()方法，觉得非常好用。也知道数组有很多方法，比如数组迭代遍历，可以实现的方式太多太多了。 而且有的又是返回新数组，而有的却是操作原数组，所以在此总结下。

本文注意：

  • 如果使用ES6的箭头函数写法，函数内 this 永远指代函数上一级的环境上下文。
  • 本文在 js 非严格模式下执行。严格模式下，部分的 this 为 undifined。

数组迭代​

数组遍历方法均支持2个参数，第一个为迭代方法，第二个为 this 指向。不指定 this 的话，默认为 window 。

Array.prototype.forEach()​

  • 数组遍历
  • 遍历每一个值
  • 遍历迭代函数无返回值
  • 无返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.forEach(function (value, index, _this) {
  // 此时 this === window
  console.log(value, index, _this);
  // aab 0 ["aab", "aac", "aad", "bbc", "bbd"]
  // aac 1 ["aab", "aac", "aad", "bbc", "bbd"]
  // aad 2 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbc 3 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbd 4 ["aab", "aac", "aad", "bbc", "bbd"]
});
console.log(result);
// undefined

Array.prototype.every()​

  • 数组遍历
  • 至少遍历一个值
  • 遍历迭代函数须有返回值
  • 检查每一个值是否能通过函数，如果有一个不符合，则立刻停止遍历，返回 false，如果所有数值均符合，则返回 true
  • 有返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.every(function (value, index, _this) {
  // 此时 this === 'for this'
  console.log(value, index, _this);
  // aab 0 ["aab", "aac", "aad", "bbc", "bbd"]
  // aac 1 ["aab", "aac", "aad", "bbc", "bbd"]
  // aad 2 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbc 3 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbd 4 ["aab", "aac", "aad", "bbc", "bbd"]
  return 'string' === typeof value;
}, 'for this');
console.log(result);
// true

Array.prototype.some()​

  • 数组遍历
  • 至少遍历一个值
  • 遍历迭代函数须有返回值
  • 检查每一个值是否能通过函数，如果有一个符合，则立刻停止遍历，返回 true，如果所有数值均不符合，则返回 false
  • 有返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.some(function (value, index, _this) {
  // 此时 this === 'for this'
  console.log(value, index, _this);
  // aab 0 ["aab", "aac", "aad", "bbc", "bbd"]
  // 由于第一轮符合要求，则不进行后续遍历
  return 'string' === typeof value;
}, 'for this');
console.log(result);
// true

Array.prototype.map()​

  • 数组遍历
  • 遍历每一个值
  • 遍历迭代函数须有返回值
  • 遍历数组每一个值，并将迭代函数返回值放入新数组
  • 有返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];

var result = arr.map(function (value, index, _this) {
  console.log(value, index, _this);
  // aab 0 ["aab", "aac", "aad", "bbc", "bbd"]
  // aac 1 ["aab", "aac", "aad", "bbc", "bbd"]
  // aad 2 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbc 3 ["aab", "aac", "aad", "bbc", "bbd"]
  // bbd 4 ["aab", "aac", "aad", "bbc", "bbd"]
  return value + value;
});
console.log(result);
// ["aabaab", "aacaac", "aadaad", "bbcbbc", "bbdbbd"]
console.log(arr);
// ["aab", "aac", "aad", "bbc", "bbd"]

Array.prototype.filter()​

  • 数组遍历
  • 遍历每一个值
  • 遍历迭代函数须有返回值
  • 遍历数组每一个值，并根据迭代函数返回值放入新数组
  • 有返回值
var arr = [2, 4, 6, 8, 10];
var result = arr.filter(function (value, index, _this) {
  console.log(value, index, _this);
  // 2 0 [2, 4, 6, 8, 10]
  // ...
  return value > 5;
});
console.log(result);
// [6, 8, 10]
console.log(arr);
// [2, 4, 6, 8, 10]

Array.prototype.reduce() / Array.prototype.reduceRight()​

  • 数组遍历
  • 遍历每一个值
  • 遍历迭代函数须有返回值
  • 有返回值

这个我自己太熟了。真的熟的都不想写了~

最常见的应用就是数字叠加求和。

var arr = [2, 5, 8, 9];
var result = arr.reduce(function (cur, next, index, _this) {
  // this === window
  console.log(cur, next, index, _this);
  // 4  2 0 [2, 5, 8, 9]
  // 6  5 1 [2, 5, 8, 9]
  // 11 8 2 [2, 5, 8, 9]
  // 19 9 3 [2, 5, 8, 9]
  return cur + next; // 将本轮初始值加上本轮遍历值 本轮迭代后的返回值，将作为下轮迭代的初始值
}, 4); // 初始值为4 
console.log(result);
// 28 (4+2+5+8+9)

数组编辑​

Array.prototype.unshift()​

  • 数组开头插入
  • 有返回值（数组长度）
  • 改变原数组
var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.unshift(11, 12);
console.log(arr, result);
// [11, 12, "aa", "bb", "cc", "dd"] 6

Array.prototype.shift()​

  • 数组开头删除
  • 有返回值（数组的第一个值）
  • 改变原数组
var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.shift();
console.log(arr, result);
// ["bb", "cc", "dd"] "aa"

Array.prototype.push()​

  • 数组结尾插入
  • 有返回值（数组长度）
  • 改变原数组
var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.push(21, 22);
console.log(arr, result);
// ["aa", "bb", "cc", "dd", 21, 22] 6

Array.prototype.pop()​

  • 数组结尾删除
  • 有返回值（数组的最后一个值）
  • 改变原数组
var arr = ['aa', 'bb', 'cc', 'dd'];
var result = arr.pop();
console.log(arr, result);
// ["aa", "bb", "cc"] "dd"

Array.prototype.concat()​

  • 数组合并（不展开数组）
  • 有返回值
var arr1 = [1, 2, 3];
var arr2 = ['a', 'b', ['c1', 'c2']];
var result = arr1.concat(arr2);
console.log(result);
// [1, 2, 3, "a", "b", ["c1", "c2"]]
console.log(arr1);
// [1, 2, 3]
console.log(arr2);
// ["a", "b", ["c1", "c2"]]

Array.prototype.fill()​

  • 数组填充
  • 改变原数组
  • 返回改变后的数组
var arr = [1, 2, 3]
var result = arr.fill('a', 1, 2); // 填充'a'，从1位到2位，不含第2位
console.log(result);
// [1, "a", 3]
console.log(arr);
// [1, "a", 3]

Array.prototype.splice()​

  • 数组删除
  • 数组插入数据
  • 操作原数组
  • 有返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];

var result = arr.splice(2, 1); // 从2号位置，删除1个。
console.log(arr, result);
// ["aab", "aac", "bbc", "bbd"] ["aad"]

var result2 = arr.splice(2, 0, 'test', 'test2'); // 从2号位置，删除0个，并在此位置增加test和test2
console.log(arr, result2);
// ["aab", "aac", "test", "test2", "bbc", "bbd"] []

Array.prototype.slice()​

  • 选取元素
  • 有返回值
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];
var result = arr.slice(2, 4); // 从2号位置，选取到4号位置（不含4号）
console.log(arr, result);
// ["aab", "aac", "aad", "bbc", "bbd"] ["aad", "bbc"]

我觉得最常见的用法是用于数组复制，或者在函数内将 arguments 转为数组：

var arr = [1,2,3,4];
var copies = arr.slice(0);
console.log(copies);

var fn = function(){
    var args = [].slice.call(arguments,0);
    console.log(args);
}
fn(1,2,3,4);

数组查找定位元素​

Array.prototype.find()​

  • 查找符合要求的第一个元素值
  • 传入查找函数
  • 支持传入this指向
var arr = [3, 9, 12, 18];
var result = arr.find((v) => {
  return v > 10;
});
console.log(result);
//12

Array.prototype.findIndex()​

  • 查找符合要求的第一个元素的索引值
  • 传入查找函数
  • 支持传入this指向
var arr = [3, 9, 12, 18];
var result = arr.findIndex((v) => {
  return v > 10;
});
console.log(result);
// 2

Array.prototype.includes()​

  • 查找元素是否存在
var arr = [3, 9, 12, 18, 22, 35];
var result = arr.includes(12, 4);
console.log(result);
// false

Array.prototype.indexOf() / Array.prototype.lastIndexOf()​

  • 查找元素的索引值
var arr = [3, 9, 12, 18, 22, 35];
var result = arr.indexOf(12, 1);
console.log(result);
// 2

数组排序​

Array.prototype.sort()​

  • 正向排序
  • 支持传入排序函数
  • 排序函数必须有返回值
  • 修改原数组
  • 有返回值，为排序后结果
var arr = [{name: 'jason', value: 1}, {name: 'john', value: 0}]
var result = arr.sort(function (a, b) {
  return a.value - b.value;
});
console.log(result);
// [{name:'john',value:0},{name:'jason',value:1}]
console.log(arr);
// [{name:'john',value:0},{name:'jason',value:1}]

Array.prototype.reverse()​

  • 反向排序
  • 不支持传函数
  • 直接修改数组
  • 有返回值（修改后的数组）

其他​

Array.prototype.join()​

  • 数组数据拼合
var arr = ['aa', 'bb', 'cc'];
var result = arr.join('-');
console.log(result);
// aa-bb-cc

Array.prototype.keys() / Array.prototype.values() / Array.prototype.entries()​

  • 获取数组key / value
  • 有返回值（迭代器）
var arr = ['aab', 'aac', 'aad', 'bbc', 'bbd'];

var keys = arr.keys();
for (let k of keys) {
  //迭代器只能用 for of，for in 事遍历不了的
  console.log(k);
  // 0
  // 1
  // 2
  // 3
  // 4
  // 5
}

var entries = arr.entries();
for (let k of entries) {
  console.log(k);
  // [0, "aab"]
  // [1, "aac"]
  // [2, "aad"]
  // [3, "bbc"]
  // [4, "bbd"]
}

小结​

类型方法无返回返回非数组结果返回新数组操作原数组备注
迭代forEachO
迭代everyO
迭代someO
迭代mapO
迭代filterO
迭代reduceO
迭代reduceRightO
编辑unshiftOO修改原数组，返回长度
编辑shiftOO修改原数组，返回其中一个值
编辑pushOO修改原数组，返回长度
编辑popOO修改原数组，返回其中一个值
编辑concatO
编辑fillOO修改原数组，并返回该数组
编辑spliceOO原数组被修剪，返回修剪内容
编辑sliceO
查找find findIndex includes lastIndexOfO
排序sortO
排序reverseO