首頁 > 文章 > web前端 > JavaScript開發中 15 種常見的陣列操作

JavaScript開發中 15 種常見的陣列操作

hzc轉載: 2020-06-23 09:52:291606瀏覽

作者：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 = [&#39;blue&#39;, &#39;green&#39;, &#39;white&#39;];

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

index變數從0遞增到colors.length-1。此變數用於按以下索引存取項目：colors [index]。

提示

咱們可以隨時使用

break語句停止遍歷。

1.3

array.forEach() `方法`

#array.forEach(callback)方法透過在每個陣列項目上呼叫callback 函數來遍歷陣列項。

在每次遍歷中，都使用以下參數呼叫

callback(item [, index [, array]])：目前遍歷項，目前遍歷索引和陣列本身。

const colors = [&#39;blue&#39;, &#39;green&#39;, &#39;white&#39;];

colors.forEach(function callback(value, index) {
  console.log(value, index);
});
// &#39;blue&#39;, 0
// &#39;green&#39;, 1
// &#39;white&#39;, 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]</p>
<p>#提示：<strong></strong></p>
<p>array .map()<code>建立一個新的映射數組，而不改變原始數組。 </code></p>2.2 <h4>Array.from()<code>方法</code>
</h4>
<p>#Array.from(arrayLike[, callback])<code>方法透過在每個陣列項目上使用</code>callback<code> 呼叫結果來建立一個新陣列。 </code></p>在每個遍歷中<p>callback(item[, index[, array]])<code>使用參數呼叫:當前項目、索引和陣列本身並且應該傳回新項目。 </code></p>如下咱們對每個陣列元素都遞增<p>1<code>：</code></p>
<pre class="brush:php;toolbar:false">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 種常見的陣列操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript開發中常用的方法集下一篇：JavaScript開發中常用的方法集

看更多

JavaScript開發中 15 種常見的陣列操作

1. 陣列的遍歷

for..of 循環

for 循環

array.forEach() 方法

Array.map()方法

Array.reduce() 方法

array.concat() 方法

获取数组的片段

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() 方法

相關文章

for..of `循環`

for `循環`

array.forEach() `方法`

Array.map()`方法`

Array.reduce() `方法`

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()` 方法