数组方法总结

添加/移除首端或尾端数组元素

从数组的首端或尾端添加和删除元素的方法:

  • arr.push(...items) —— 从尾端添加元素,
  • arr.pop() —— 从尾端提取元素,
  • arr.shift() —— 从首端提取元素,
  • arr.unshift(...items) —— 从首端添加元素。

从数组中删除元素

因为数组是对象,所以可以使用 delete

let arr = ["I", "go", "home"];
delete arr[1]; // remove "go"
alert( arr[1] ); // undefined
// now arr = ["I",  , "home"];
alert( arr.length ); // 3

元素被删除了,但数组仍然有 3 个元素,因为 delete obj.key 是通过 key 来移除对应的值,被释放的位置没有被占据,如果想让数组空位置被占据,就要使用数组的方法。

splice(添加,删除和插入)

arr.splice(str)可以添加,删除和插入元素

语法:

arr.splice(index[, deleteCount, elem1, ..., elemN])

index 开始:删除 deleteCount 个元素并在当前位置插入 elem1, ..., elemN。最后返回已删除元素的数组。

只有index时会删除从当前索引开始的所有元素

例子:

  1. 从索引 1 开始删除 1 个元素
let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 从索引 1 开始删除 1 个元素
alert( arr ); // ["I", "JavaScript"]
  1. 从头删除三个元素并替换
let arr = ["I", "study", "JavaScript", "right", "now"];
// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]
  1. 返回已删除元素的数组
let arr = ["I", "study", "JavaScript", "right", "now"];
// 删除前两个元素
let removed = arr.splice(0, 2);
alert( removed ); // "I", "study" <-- 被从数组中删除了的元素
  1. deleteCount 设置为 0splice 方法就能够插入元素而不用删除任何元素:
let arr = ["I", "study", "JavaScript"];
// 从索引 2 开始
// 删除 0 个元素
// 然后插入 "complex" 和 "language"
arr.splice(2, 0, "complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"
---------------------------------------------------------------------
// 也可以使用负向索引
arr.splice(-1, 0,"complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"

slice(返回新数组)

arr.slice 方法比 arr.splice 简单得多,就是根据两个(开始、结束)索引返回新数组。

语法:

arr.slice([start], [end])

它会返回一个新数组,将所有从索引 startend不包括 end)的数组项复制到一个新的数组。startend 都可以是负数,在这种情况下,从末尾计算索引。

只有start时,返回从位置start 到尾端的的数组

例子:

let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s(复制从位置 1 到位置 3 的元素)
alert( arr.slice(-2) ); // s,t(复制从位置 -2 到尾端的元素)
alert( arr.slice() ); //

当不带参数地调用时:arr.slice() 会创建一个 arr 的副本。其通常用于获取副本,以进行不影响原始数组的进一步转换。

concat(数组拼接数组/值)

arr.concat 创建一个新数组,其中包含来自于其他数组和其他项的值。

语法:

arr.concat(arg1, arg2...)

它接受任意数量的参数 —— 数组都可以。

返回一个包含来自于 arr,然后是 arg1arg2 的元素的新数组。

如果参数 argN 是一个数组,那么其中的所有元素都会被复制。否则,将复制参数本身

例子:

let arr = [1, 2];
// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4
// create an array from: arr and [3,4] and [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// create an array from: arr and [3,4], then add values 5 and 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

拼接对象时,对象会作为一个整体添加

let arr = [1, 2];
let obj = {
  aaa: "something",
};
console.log( arr.concat(obj) ); // [1, 2, {…}]

即使该对象看起来像数组一样,但仍然会被作为一个整体添加

let arr = [1, 2];
let arrayLike = {
  0: "something",
  length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]
console.log(arr.concat(arrayLike) ) // [1, 2, {…}]

但是,如果类似数组的对象具有 Symbol.isConcatSpreadable 属性,那么它就会被 concat 当作一个数组来处理:此对象中的元素将被添加:

let arr = [1, 2];

let arrayLike = {
  aaa: "something",
  bbb: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

遍历:forEach

arr.forEach 方法对数组的每个元素执行一次给定的函数

语法:

arr.forEach(function(item[, index [, array]]) {
  // ... do something with item
})[, thisArg]);// thisArg为可选参数,当执行回调函数时,用作 this 的值。
  • item是数组中正在处理的当前元素
  • index是数组中正在处理的当前元素的索引
  • array是正在操作的数组

例子:

对每个元素调用 alert

["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

这段代码更详细地介绍了它们在目标数组中的位置

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {  
    alert(`${item} is at index ${index} in ${array}`); 
});

该方法没有返回值(undefined)。

注意:如果使用箭头函数表达式来传入函数参数, thisArg 参数会被忽略,因为箭头函数在词法上绑定了 this 值。

在数组中搜索

indexOf

arr.indexOf(searchElement[, fromIndex])

searchElement:要查找的元素

从索引fromIndex开始查找,返回在数组中要查找的元素searchElement的第一个索引,如果不存在,则返回-1。

  • 如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。
  • 如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。
  • 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

例子:

let arr = [1, 0, false];
alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1
alert( arr.includes(1) ); // true

lastIndexOf

arr.lastIndexOf(searchElement[, fromIndex])

从索引fromIndex从右向左开始查找,返回在数组中要查找的元素searchElement的最后一个索引,如果不存在,则返回-1。

  • 如果索引值大于或等于数组的长度,则整个数组会被查找。
  • 如果索引值为负值,数组仍然会被从后向前查找。
  • 如果索引值为负值,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找
  • 索引值默认为数组的长度减 1(arr.length - 1),即整个数组都被查找。

includes

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

arr.includes(item[, from])

从索引 from 开始搜索 item,如果找到则返回 true,如果没找到,则返回 false

如果我们想检查是否包含某个元素,并且不想知道确切的索引,那么 arr.includes 是首选。

此外,includes 的一个非常小的差别是它能正确处理NaN,而不像 indexOf/lastIndexOf

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1(应该为 0,但是严格相等 === equality 对 NaN 无效)
alert( arr.includes(NaN) );// true(这个结果是对的)

找到具有特定条件的对象

findfindindex

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法:

let result = arr.find(function(item, index, array) {
  // 如果返回 true,则返回 item 并停止迭代
  // 对于 falsy 则返回 undefined
});
  • item 是当前元素。
  • index 是当前元素的索引。
  • array 是数组本身。

依次对数组中的每个元素调用该函数:

如果它返回 true,则搜索停止,并返回 item。如果没有搜索到,则返回 undefined

例子:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
alert(user.name); // John

arr.findIndex 方法(与 arr.find 方法)基本上是一样的,但它返回找到元素的索引,而不是元素本身。并且在未找到任何内容时返回 -1

filter

如果需要匹配的有很多,我们可以使用 arr.filter(fn)

语法与 find 大致相同,但是 filter 返回的是所有匹配元素组成的数组:

let results = arr.filter(function(item, index, array) {
  // 如果 true item 被 push 到 results,迭代继续
  // 如果什么都没找到,则返回空数组
});

例子:

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 返回前两个用户的数组
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

转换数组(遍历)

map(返回数组)

arr.map 方法是最有用和经常使用的方法之一。

它对数组的每个元素都调用函数,并返回结果数组。

语法:

let result = arr.map(function(item, index, array) {
  // 返回新值而不是当前元素
})

例子:

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort(fn)

arr.sort 方法对数组进行 原位(in-place) 排序,更改元素的顺序。(原位是指在此数组内,而非生成一个新数组。)

它还返回排序后的数组,但是返回值通常会被忽略,因为修改了 arr 本身。

语法:

arr.sort([compareFunction])

compareFunction 可选

用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

  • firstEl

    第一个用于比较的元素。

  • secondEl

    第二个用于比较的元素。

例子:

let arr = [ 1, 2, 15 ];
// 该方法重新排列 arr 的内容
arr.sort();
alert( arr );  // 1, 15, 2

如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;

  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);

  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。

  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。

function compareNumeric(a, b) {
  // if (a > b) return 1;
  // if (a == b) return 0;
  // if (a < b) return -1;
  return a - b; 
}

let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr);  // 1, 2, 15
// 上面简写arr.sort( (a, b) => a - b );

reverse反转数组

arr.reverse 方法用于颠倒 arr 中元素的顺序。

例如:

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

它也会返回颠倒后的数组 arr

split (分割字符串为数组)

str.split(delim) 可以通过给定的分隔符 delim 将字符串分割成一个数组。

使用"逗号后跟着一个空格"作为分隔符

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `A message to ${name}.` ); // A message to Bilbo(和其他名字)
}

split 方法有一个可选的第二个数字参数 —— 对数组长度的限制。如果提供了,那么额外的元素会被忽略。但实际上它很少使用:

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

拆分为字母

调用带有空参数 ssplit(s),会将字符串拆分为字母数组:

let str = "test";

alert( str.split('') ); // t,e,s,t

join(拼接字符串为数组)

arr.join(glue)split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。

例子:

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight(根据数组计算单个值)

当我们需要遍历一个数组时 —— 我们可以使用 forEachforfor..of

当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 map

arr.reduce 方法和 arr.reduceRight 方法和上面的种类差不多,但稍微复杂一点。它们用于根据数组计算单个值

语法是:

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

该函数一个接一个地应用于所有数组元素,并将其结果“搬运(carry on)”到下一个调用。

参数:

  • accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)。
  • item —— 当前的数组元素。
  • index —— 当前索引。
  • arr —— 数组本身。

应用函数时,上一个函数调用的结果将作为第一个参数传递给下一个函数

因此,第一个参数本质上是累加器,用于存储所有先前执行的组合结果。最后,它成为 reduce 的结果。

在这里,我们通过一行代码得到一个数组的总和:

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

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

传递给 reduce 的函数仅使用了 2 个参数,通常这就足够了

让我们看看细节,到底发生了什么。

  1. 在第一次运行时,sum 的值为初始值 initialreduce 的最后一个参数),等于 0,current 是第一个数组元素,等于 1。所以函数运行的结果是 1
  2. 在第二次运行时,sum = 1,我们将第二个数组元素(2)与其相加并返回。
  3. 在第三次运行中,sum = 3,我们继续把下一个元素与其相加,以此类推……

计算流程:

计算流程

或者以表格的形式表示,每一行代表的是对下一个数组元素的函数调用:

current result sum
第 1 次调用 0 1 1
第 2 次调用 1 2 3
第 3 次调用 3 3 6
第 4 次调用 6 4 10
第 5 次调用 10 5 15

在这里,我们可以清楚地看到上一个调用的结果如何成为下一个调用的第一个参数。

我们也可以省略初始值:

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

// 删除 reduce 的初始值(没有 0)
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

结果是一样的。这是因为如果没有初始值,那么 reduce 会将数组的第一个元素作为初始值,并从第二个元素开始迭代。

计算表与上面相同,只是去掉第一行。

但是这种使用需要非常小心。如果数组为空,那么在没有初始值的情况下调用 reduce 会导致错误。

例子:

let arr = [];

// Error: Reduce of empty array with no initial value
// 如果初始值存在,则 reduce 将为空 arr 返回它(即这个初始值)。
arr.reduce((sum, current) => sum + current);

所以建议始终指定初始值。

arr.reduceRightarr.reduce 方法的功能一样,只是遍历为从右到左。

Array.isArray(判断是否为数组)

数组是基于对象的,不构成单独的语言类型。

所以 typeof 不能帮助从数组中区分出普通对象:

alert(typeof {}); // object
alert(typeof []); // object

Array.isArray(value)可以对此进行判断,如果 value 是一个数组,则返回 true;否则返回 false

alert(Array.isArray({})); // false
alert(Array.isArray([])); // true

thisArg(附加参数)

几乎所有调用函数的数组方法 —— 比如 findfiltermap,除了 sort 是一个特例,都接受一个可选的附加参数 thisArg

上面的部分中没有解释该参数,因为该参数很少使用以下是这些方法的完整语法:

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg 是可选的最后一个参数

thisArg 参数的值在 func 中变为 this

例如,在这里我们使用 army 对象方法作为过滤器,thisArg 用于传递上下文(passes the context):

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// 找到 army.canJoin 返回 true 的 user
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

如果在上面的示例中我们使用了 users.filter(army.canJoin),那么 army.canJoin 将被作为独立函数调用,并且这时 this=undefined,从而会导致即时错误。

可以用 users.filter(user => army.canJoin(user)) 替换对 users.filter(army.canJoin, army) 的调用。前者的使用频率更高,因为对于大多数人来说,它更容易理解。

总结

数组方法备忘单:

  • 添加/删除元素:
    • push(...items) —— 向尾端添加元素,
    • pop() —— 从尾端提取一个元素,
    • shift() —— 从首端提取一个元素,
    • unshift(...items) —— 向首端添加元素,
    • splice(pos, deleteCount, ...items) —— 从 index 开始删除 deleteCount 个元素,并在当前位置插入 items
    • slice(start, end) —— 创建一个新数组,将从位置 start 到位置 end(但不包括 end)的元素复制进去。
    • concat(...items) —— 返回一个新数组:复制当前数组的所有元素,并向其中添加 items。如果 items 中的任意一项是一个数组,那么就取其元素。
  • 搜索元素:
    • indexOf/lastIndexOf(item, pos) —— 从位置 pos 开始搜索 item,搜索到则返回该项的索引,否则返回 -1
    • includes(value) —— 如果数组有 value,则返回 true,否则返回 false
    • find/filter(func) —— 通过 func 过滤元素,返回使 func 返回 true 的第一个值/所有值。
    • findIndexfind 类似,但返回索引而不是值。
  • 遍历元素:
    • forEach(func) —— 对每个元素都调用 func,不返回任何内容。
  • 转换数组:
    • map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
    • sort(func) —— 对数组进行原位(in-place)排序,然后返回它。
    • reverse() —— 原位(in-place)反转数组,然后返回它。
    • split/join —— 将字符串转换为数组并返回。
    • reduce(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值,并在调用之间传递中间结果。
  • 其他:
    • Array.isArray(arr) 检查 arr 是否是一个数组。

请注意,sortreversesplice 方法修改的是数组本身。

这些是最常用的方法,它们覆盖 99% 的用例。但是还有其他几个:

有关完整列表,请参阅 手册

参考

1.现代javascript教程

2.mdn

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容