当前位置: 主页>网站教程>JS教程> JavaScript开发中 15 种常见的数组操纵

分享文章到：

JavaScript开发中 15 种常见的数组操纵

发布时间：09/01 来源：未知浏览：关键词：

作者：Dmitri Pavlutin
译者：前端小智
来源：dmitripavlutin.com

点赞再看，养成习惯
本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了许多我的文档，和教程材料。欢迎Star和完美，大家面试可以参照考点复习，但愿我们一起有点东西。

数组是 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()更适合从相似数组的对象停止映射。

3. 数据的简化

3.1 `Array.reduce()` 办法

array.reduce(callback[, initialValue])通过调取callback 函数来将数组简化为一个值。

在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调取的:累加器，当前项，索引和数组本身且应当返回累加器。

经典示例是对数字数组求和：

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

sum; // => 6

第一步，将accumulator 初始化为0。然后，对每个累加数字和的数组项调取summary函数。

提醒：

假如没有使用 initialValue 来设定初始值，则默许使用数组的第一个元素作为初始值。

4. 数据的连接

4.1 `array.concat()` 办法

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示，连接两个数组：

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const everyone = heroes.concat(villains);

everyone // ["小智", "前端小智", "老王", "小三"]

提醒：

concat()创立一个新的数组，而不改动本来的数组
array.concat(array1 [，array2，...]) 接受多个要连接的数组。

4.2 展开操纵符号

咱们将展开操纵符与数组字面量一起使用来连接数组:[...array1, ...array2]。

const heroes = ['小智', '前端小智'];
const villains = ['老王', '小三'];

const names = [...heroes, ...villains];

names; // ["小智", "前端小智", "老王", "小三"]

提醒：

[...arr1, ...arr2, ...arrN]：咱们可以使用展开运算符连接所需数目的数组。

猎取数组的片段

5.1 `array.slice()` 办法

array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开端，以toIndex结尾（不包罗toIndex本身）。fromIndex可选参数默许为0，toIndex可选参数默许为array.length。

const names = ["小智", "前端小智", "老王", "小三"]

const heroes = names.slice(0, 2)
const villains = names.splice(2)

heroes // ["小智", "前端小智"]
villains // ["老王", "小三"]

提醒：

array.slice() 创立一个新数组，而不改动原始数组。

6. 数组的拷贝

6.1 展开操纵符

拷贝数组的一种简便办法是使用展开运算符：const clone = [... array]，如下所示，拷贝 colors 数组：

const colors = ['white', 'black', 'gray'];

const clone = [...colors];

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提醒：

[...array] 创立一个浅拷贝。

6.2 `array.concat()`办法

[].concat(array)是另一种拷贝数组的办法。

const colors = ['white', 'black', 'gray'];

const clone = [].concat(colors);

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提醒：

[].concat(array) 创立一个浅拷贝。

6.3 `array.slice()` 办法

array.slice())是另一种拷贝数组的办法。

const colors = ['white', 'black', 'gray'];

const clone = colors.slice();

clone; // => ['white', 'black', 'gray']
colors === clone; // => false

提醒：

colors.slice() 创立一个浅拷贝。

7. 查寻数组

7.1 `array.includes()` 办法

array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 可否包括itemToSearch。可选参数fromIndex，默许为0，表示开端搜索的索引。如下所示：推断2和99可否存在于一组数字中：

const numbers = [1, 2, 3, 4, 5];

numbers.includes(2);  // => true
numbers.includes(99); // => false

7.2 `array.find()` 办法

array.find(predicate) 办法返回数组中知足供给的测试函数的第一个元素的值。不然返回 undefined。

如下所示，寻到数组中的第一个偶数：

const numbers = [1, 2, 3, 4, 5];

function isEven(number) {
  return number % 2 === 0;
}

const evenNumber = numbers.find(isEven);

evenNumber; // => 2

7.3 `array.indexOf()` 办法

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个显现的itemToSearch的索引。默许为0的可选参数fromIndex表示开端搜索的索引。

如下所示，寻到前端小智的索引：

const names = ["小智", "前端小智", "老王", "小三"]

const index = names.indexOf('前端小智')

index // 1

提醒：

假如寻不到该项，则array.indexOf(itemToSearch)返回-1
array.findIndex(predicate)是使用predicate函数查寻索引的替换办法。

8. 查询数组

8.1 `array.every()` 办法

假如每个项都通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调取predicate 函数:当前遍历项、索引和数组本身。

如下所示，肯定数组可否只包括偶数：

const evens = [0, 2, 4, 6];
const numbers = [0, 1, 4, 6];

function isEven(number) {
  return number % 2 === 0;
}

evens.every(isEven); // => true
numbers.every(isEven); // => false

8.2 `array.some()` 办法

假如每个项只要一下通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调取predicate 函数:当前遍历项、索引和数组本身。

如下所示：肯定数组可否至少包括一个偶数：

const numbers = [1, 5, 7, 10];
const odds = [1, 3, 3, 3];

function isEven(number) {
  return number % 2 === 0;
}

numbers.some(isEven); // => true
odds.some(isEven);   // => false

9. 数组的过滤

9.1 `array.filter()` 办法

array.filter(predicate)办法创立一个新数组, 其包括通过所供给函数实现的测试的所有元素。

在每个遍历predicate(item[, index[, array]])上，用参数调取predicate 函数:当前遍历项、索引和数组本身。

如下所示：将一个数组过滤为仅包括偶数：

const numbers = [1, 5, 7, 10];

function isEven(number) {
  return number % 2 === 0;
}

const evens = numbers.filter(isEven);

evens; // => [10]

提醒：

array.filter() 创立一个新数组，而不改动原始数组。

10. 数组的插入

10.1 `array.push()` 办法

array.push(item1 [...，itemN]) 办法将一个或多个项追加到数组的末尾，并返回新的长度。

如下所示，在names 数组的末尾增加 '小智'

const names = ['小智']

names.push('前端小智')

names // ["小智", "前端小智"]

提醒：

array.push() 会改动原数组
array.push(item1, item2, ..., itemN) 可以增加多个元素。

10.2 `array.unshift()` 办法

array.unshift(item1[..., itemN])办法将一个或多个项追加到数组的开头，返回数组的新长度

const names = ['小智']

names.unshift('前端小智')

names // ["前端小智", "小智"]

提醒：

array.unshift() 会改动原数组
array.unshift(item1, item2, ..., itemN) 可以增加多个元素。

10.3 展开操纵符

可以通过组合展开操纵符和数组字面量以不成变的方式在数组中插入项。

在数组末尾追加一个项:

const names = ['小智', '大治']

const names2 = [...names, '王大冶']

names2 // ["小智", "大治", "王大冶"]

在数组的开头追加一个项:

const names = ['小智', '大治']

const names2 = [
  '王大冶',
  ...names
]

names2 // ["王大冶", "小智", "大治"]

在任何索引处插入元素：

const names = ['小智', '大治']
const indexToInsert = 1

const names2 = [
  ...names.slice(0, indexToInsert),
  '前端小智',
  ...names.slice(indexToInsert)
]

names2  // ["小智", "前端小智", "大治"]

11. 删除数组元素

11.1 `array.pop()` 办法

array.pop()办法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：

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

const lastColor = colors.pop();

lastColor; // => 'black'
colors; // => ['blue', 'green']

提醒：

array.pop() 会改动原数组。

11.2 `array.shift()` 办法

array.shift()办法从数组中删除第一个元素，然后返回该元素。

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

const firstColor = colors.shift();

firstColor; // => 'blue'
colors; // => ['green', 'black']

提醒：

array.shift() 会改动原数组。
array.shift() 具有O(n)复杂度。

11.3 `array.splice()` 办法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

例如，咱们从索引1处删除2个元素：

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2)

names // => ["张三", "赵六"]

names.splice(1，2)删除元素'张三'和'赵六'。

names.splice() 可以插入新元素，而不是插入已删除的元素。咱们可以更换索引1处开端的的2个元素，然后插入一个新的元素 '小智'：

const names = ['张三', '李四', '王五', '赵六']

names.splice(1, 2, '小智')

names //  ["张三", "小智", "赵六"]

提醒：

array.splice() 会改动原数组。

11.4 展开操纵符号

可以通过组合展开操纵符和数据字面量以不成变的方式从数组中删除项。

const names = ['张三', '李四', '王五', '赵六']
const fromIndex = 1
const removeCount = 2

const newNames = [
   ...names.slice(0, fromIndex),
   ...names.slice(fromIndex + removeCount)
]

newNames // ["张三", "赵六"]

12. 清空数组

12.1 `array.length`属性

array.length是留存数组长度的属性。除此之外，array.length是可写的。

假如咱们写一个小于当前长度的array.length = newLength，余外的元素从数组中移除。

如下所示：使用array.length = 0删除数组中的所有项目：

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

colors.length = 0;

colors; // []

12.2 `array.splice()` 办法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

假如removeCount参数被省略，那么array.splice()将删除从fromIndex开端的数组的所有元素。咱们使用它来删除数组中的所有元素：

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

colors.splice(0);

colors; // []

13. 填凑数组

13.1 `array.fill()` 办法

array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填凑数组(不包罗toIndex本身)。fromIndex可选参数默许为0,toIndex可选参数默许为array.length。

例如，使用用零值填凑数组：

const numbers = [1, 2, 3, 4];

numbers.fill(0);

numbers; // => [0, 0, 0, 0]

不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

const length = 3;
const zeros = Array(length).fill(0);

zeros; // [0, 0, 0]

提醒：

array.splice() 会改动原数组。

13.2 `Array.from()` 函数

Array.from() 有助于初始化带有对象的特定长度的数组：

const length = 4;
const emptyObjects = Array.from(Array(length), function() {
  return {};
});

emptyObjects; // [{}, {}, {}, {}]

14. 数组的扁平化

14.1 `array.flat()`办法

array.flat([depth])办法通过递归扁平属于数组的项直到必然深度来创立新数组。 depth可选参数默许为1：

const arrays = [0, [1, 3, 5], [2, 4, 6]];

const flatArray = arrays.flat();

flatArray; // [0, 1, 3, 5, 2, 4, 6]

arrays 包括数字和数字数组的混合。 arrays.flat()对数组停止扁平，使其仅包括数字。

提醒：

array.flat() 创立一个新数组，而不会改动原始数组。

15. 数组的排序

15.1 `array.sort()` 办法

array.sort([compare])办法对数组的元素停止排序。

可选参数compare(a, b)是一个自定义排序顺的回调函数。假如比力compare(a, b)返回的结果：

假如 a小于b，在排序后的数组中a应当显现在b此前，就返回一个小于0的值。
假如a等于b，就返回0。
假如a大于b，就返回一个大于0的值。

如下所示，对数组 numbers 时行排序

const numbers = [4, 3, 1, 2];

numbers.sort();

numbers; // => [1, 2, 3, 4]

numbers.sort() 以升序对数字停止排序。

使用比力函数，让偶数排在奇数前面：

const numbers = [4, 3, 1, 2];

function compare(n1, n2) {
  if (n1 % 2 === 0 && n2 % 2 !== 0) {
    return -1;
  }
  if (n1 % 2 !== 0 && n2 % 2 === 0) {
    return 1;
  }
  return 0;
}

numbers.sort(compare);

numbers; // => [4, 2, 3, 1]

提醒：

array.sort() 会改动原数组。

引荐教程：《JS教程》

以上就是JavaScript开发中 15 种常见的数组操纵的具体内容，更多请关注百分百源码网其它相关文章！

打赏

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网建议打赏1～10元，土豪随意，感谢您的阅读！

上一篇：JS中行内style如何写？
下一篇：12种JavaScript数组去重办法（总结）

共有150人阅读，期待你的评论！发表评论

本文标签

广告赞助

能出一分力是一分吧！

JavaScript开发中 15 种常见的数组操纵

1. 数组的遍历

1.1 for..of 轮回

1.2 for 轮回

1.3 array.forEach() 办法

2. 数组的映射

2.1 Array.map()办法

2.2 Array.from()办法

3. 数据的简化

3.1 Array.reduce() 办法

4. 数据的连接

4.1 array.concat() 办法

4.2 展开操纵符号

猎取数组的片段

5.1 array.slice() 办法

6. 数组的拷贝

6.1 展开操纵符

6.2 array.concat()办法

6.3 array.slice() 办法

7. 查寻数组

7.1 array.includes() 办法

7.2 array.find() 办法

7.3 array.indexOf() 办法

8. 查询数组

8.1 array.every() 办法

8.2 array.some() 办法

9. 数组的过滤

9.1 array.filter() 办法

10. 数组的插入

10.1 array.push() 办法

10.2 array.unshift() 办法

10.3 展开操纵符

11. 删除数组元素

11.1 array.pop() 办法

11.2 array.shift() 办法

11.3 array.splice() 办法

11.4 展开操纵符号

12. 清空数组

12.1 array.length属性

12.2 array.splice() 办法

13. 填凑数组

13.1 array.fill() 办法

13.2 Array.from() 函数

14. 数组的扁平化

14.1 array.flat()办法

15. 数组的排序

15.1 array.sort() 办法

相关文章

本文标签

广告赞助

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

1.1 `for..of` 轮回

1.2 `for` 轮回

1.3 `array.forEach()` 办法

2.1 `Array.map()`办法

2.2 `Array.from()`办法

3.1 `Array.reduce()` 办法

4.1 `array.concat()` 办法

5.1 `array.slice()` 办法

6.2 `array.concat()`办法

6.3 `array.slice()` 办法

7.1 `array.includes()` 办法

7.2 `array.find()` 办法

7.3 `array.indexOf()` 办法

8.1 `array.every()` 办法

8.2 `array.some()` 办法

9.1 `array.filter()` 办法

10.1 `array.push()` 办法

10.2 `array.unshift()` 办法

11.1 `array.pop()` 办法

11.2 `array.shift()` 办法

11.3 `array.splice()` 办法

12.1 `array.length`属性

12.2 `array.splice()` 办法

13.1 `array.fill()` 办法

13.2 `Array.from()` 函数

14.1 `array.flat()`办法

15.1 `array.sort()` 办法