menu 梦想吧 - 梦想一旦被付诸行动就会变得神圣
通过事例重温一下 JS 中 常见的15 种数组操作(转载)
371 浏览 | 2019-11-26 | 阅读时间: 约 2 分钟 | 分类: WEB前端 | 标签: JS,JavaScript
请注意,本文编写于 219 天前,最后修改于 219 天前,其中某些信息可能已经过时。

作者:Dmitri Pavlutin
译者:前端小智
原文地址:https://dmitripavlutin.com/operations-on-arrays-javascript/
译文地址:https://juejin.im/post/5ddc6ad8518825731161fa75

数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()、array.map()等来操作数组。
在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知所措,所以本文就列出 15 种常用数据方法,让咱们重温加强记忆一下。

1. 数组的遍历

1.1 for..of 循环

for(const item of items)循环遍历数组项,如下所示遍历colors列表:

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

提示:
咱们可以随时使用break语句停止遍历。

1.2 for 循环

for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。
for通常需要在每个循环中递增index变量

const colors = ['blue', 'green', 'white'];

for (let index = 0; index < colors.length; index++) {
  const color = colors[index];
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

index变量从0递增到colors.length-1。此变量用于按以下索引访问项:colors[index]
提示:
咱们可以随时使用break语句停止遍历。

1.3 array.forEach() 方法

array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。
在每次遍历中,都使用以下参数调用callback(item [, index [, array]]):当前遍历项,当前遍历索引和数组本身。

const colors = ['blue', 'green', 'white'];

colors.forEach(function callback(value, index) {
  console.log(value, index);
});
// 'blue', 0
// 'green', 1
// 'white', 2

提示:
咱们不能中断array.forEach()迭代。

2. 数组的映射

2.1 Array.map()方法

array.map(callback)方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身,并应该返回新项。
如下所示咱们对每个数组元素都递增1

const numbers = [0, 2, 4];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [1, 3, 5]

提示:
array.map()创建一个新的映射数组,而不改变原始数组。

2.2 Array.from()方法

Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。
如下所示咱们对每个数组元素都递增1

const numbers = [0, 2, 4];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [1, 3, 5]

提示:

  • Array.from()创建一个新的映射数组,而不改变原始数组。
  • Array.from()更适合从类似数组的对象进行映射。
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表评论

email
web

全部评论 (暂无评论)

info 还没有任何评论,你来说两句呐!