JavaScript中數(shù)組的常見操作方法

這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中數(shù)組的常見操作方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

數(shù)組就是一組數(shù)組的集合，在內(nèi)存中（堆內(nèi)存）表現(xiàn)為一段連續(xù)的內(nèi)存地址。創(chuàng)建數(shù)組最根本目的：就是為了保存更多的數(shù)據(jù)。

在Javascript中，數(shù)組一共有兩種定義方式：

① 隱式創(chuàng)建

var 數(shù)組名稱 = [數(shù)組元素1，數(shù)組元素2，數(shù)組元素3…];

② 直接實(shí)例化

var 數(shù)組名稱 = new Array(數(shù)組元素1，數(shù)組元素2，數(shù)組元素3…);

var 數(shù)組名稱 = new Array(3); 這個(gè)定義方式不推薦使用

數(shù)組名稱[0] = 數(shù)組元素1;

數(shù)組名稱[1] = 數(shù)組元素2;

數(shù)組名稱[2] = 數(shù)組元素3;

1. 數(shù)組的遍歷

1.1  for..of 循環(huán)

for(const item of items)循環(huán)遍歷數(shù)組項(xiàng)，如下所示遍歷colors列表：

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

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

提示：

咱們可以隨時(shí)使用break語句停止遍歷。

1.2 for 循環(huán)

for(let i; i < array.length; i++)循環(huán)使用遞增的索引變量遍歷數(shù)組項(xiàng)。

for通常需要在每個(gè)循環(huán)中遞增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。此變量用于按以下索引訪問項(xiàng)：colors [index]。

提示

咱們可以隨時(shí)使用break語句停止遍歷。

1.3 array.forEach() 方法

array.forEach(callback)方法通過在每個(gè)數(shù)組項(xiàng)上調(diào)用callback函數(shù)來遍歷數(shù)組項(xiàng)。

在每次遍歷中，都使用以下參數(shù)調(diào)用callback(item [, index [, array]])：當(dāng)前遍歷項(xiàng)，當(dāng)前遍歷索引和數(shù)組本身。

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

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

提示：

咱們不能中斷array.forEach()迭代。

2. 數(shù)據(jù)的簡(jiǎn)化

2.1 Array.reduce() 方法

array.reduce(callback[, initialValue])通過調(diào)用callback 函數(shù)來將數(shù)組簡(jiǎn)化為一個(gè)值。

在每次遍歷中的callback(accumulator, item[, index[, array]])使用用參數(shù)調(diào)用的:累加器，當(dāng)前項(xiàng)，索引和數(shù)組本身且應(yīng)該返回累加器。

經(jīng)典示例是對(duì)數(shù)字?jǐn)?shù)組求和：

const numbers = [2, 0, 4];

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

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

sum; // => 6

第一步，將accumulator 初始化為0。然后，對(duì)每個(gè)累加數(shù)字和的數(shù)組項(xiàng)調(diào)用summary函數(shù)。

提示：

如果沒有使用 initialValue 來設(shè)置初始值，則默認(rèn)使用數(shù)組的第一個(gè)元素作為初始值。

3. 數(shù)組的映射

3.1 Array.map()方法

array.map(callback) 方法通過在每個(gè)數(shù)組項(xiàng)上使用callback調(diào)用結(jié)果來創(chuàng)建一個(gè)新數(shù)組。

在每個(gè)遍歷中的callback(item[, index[, array]])使用參數(shù)調(diào)用:當(dāng)前項(xiàng)、索引和數(shù)組本身，并應(yīng)該返回新項(xiàng)。

如下所示咱們對(duì)每個(gè)數(shù)組元素都遞增 1：

const numbers = [0, 2, 4];

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

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

提示：

array.map()創(chuàng)建一個(gè)新的映射數(shù)組，而不改變?cè)紨?shù)組。

3.2 Array.from()方法

Array.from(arrayLike[, callback])方法通過在每個(gè)數(shù)組項(xiàng)上使用callback 調(diào)用結(jié)果來創(chuàng)建一個(gè)新數(shù)組。

在每個(gè)遍歷中callback(item[, index[, array]])使用參數(shù)調(diào)用:當(dāng)前項(xiàng)、索引和數(shù)組本身并且應(yīng)該返回新項(xiàng)。

如下所示咱們對(duì)每個(gè)數(shù)組元素都遞增 1：

const numbers = [0, 2, 4];

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

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

提示：

• Array.from()創(chuàng)建一個(gè)新的映射數(shù)組，而不改變?cè)紨?shù)組。
• Array.from()更適合從類似數(shù)組的對(duì)象進(jìn)行映射。

4. 數(shù)據(jù)的連接

4.1 array.concat() 方法

array.concat(array1[, array2, ...])將一個(gè)或多個(gè)數(shù)組連接到原始數(shù)組。如下所示，連接兩個(gè)數(shù)組：

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

const everyone = heroes.concat(villains);

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

提示：

• concat()創(chuàng)建一個(gè)新的數(shù)組，而不改變?cè)瓉淼臄?shù)組
• array.concat(array1 [，array2，...]) 接受多個(gè)要連接的數(shù)組。

4.2 展開操作符號(hào)

咱們將展開操作符與數(shù)組字面量一起使用來連接數(shù)組:[...array1, ...array2]。

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

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

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

提示：

[...arr1, ...arr2, ...arrN]：咱們可以使用展開運(yùn)算符連接所需數(shù)量的數(shù)組。

5. 數(shù)組的拷貝

5.1 展開操作符

拷貝數(shù)組的一種簡(jiǎn)單方法是使用展開運(yùn)算符：const clone = [... array]，如下所示，拷貝 colors 數(shù)組：

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

const clone = [...colors];

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

提示：

[...array] 創(chuàng)建一個(gè)淺拷貝。

5.2 array.concat()方法

[].concat(array)是另一種拷貝數(shù)組的方法。

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

const clone = [].concat(colors);

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

提示：

[].concat(array) 創(chuàng)建一個(gè)淺拷貝。

5.3 array.slice() 方法

array.slice())是另一種拷貝數(shù)組的方法。

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

const clone = colors.slice();

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

提示：

colors.slice() 創(chuàng)建一個(gè)淺拷貝。

6. 獲取數(shù)組的片段

6.1 array.slice()  方法

array.slice([fromIndex [，toIndex]])返回?cái)?shù)組的一個(gè)片段，該片段從fromIndex開始，以toIndex結(jié)尾（不包括toIndex本身）。fromIndex可選參數(shù)默認(rèn)為0，toIndex可選參數(shù)默認(rèn)為array.length。

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

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

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

提示：

array.slice() 創(chuàng)建一個(gè)新數(shù)組，而不改變?cè)紨?shù)組。

7. 查找數(shù)組

7.1 array.includes() 方法

array.includes(itemToSearch [，fromIndex])返回一個(gè)布爾值，array 是否包含itemToSearch。 可選參數(shù)fromIndex，默認(rèn)為0，表示開始搜索的索引。如下所示：判斷2和99是否存在于一組數(shù)字中：

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

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

7.2  array.find() 方法

array.find(predicate) 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。

如下所示，找到數(shù)組中的第一個(gè)偶數(shù)：

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中第一個(gè)出現(xiàn)的itemToSearch的索引。默認(rèn)為0的可選參數(shù)fromIndex表示開始搜索的索引。

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

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

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

index // 1

提示：

• 如果找不到該項(xiàng)，則array.indexOf(itemToSearch)返回-1
• array.findIndex(predicate)是使用predicate函數(shù)查找索引的替代方法。

8. 查詢數(shù)組

8.1 array.every() 方法

如果每個(gè)項(xiàng)都通過predicate 檢查，則array.every(predicate)返回true。

在每個(gè)遍歷predicate(item[, index[, array]])上，用參數(shù)調(diào)用predicate 函數(shù):當(dāng)前遍歷項(xiàng)、索引和數(shù)組本身。

如下所示，確定數(shù)組是否只包含偶數(shù)：

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

如果每個(gè)項(xiàng)只要一下通過predicate 檢查，則array.every(predicate)返回true。

在每個(gè)遍歷predicate(item[, index[, array]])上，用參數(shù)調(diào)用predicate 函數(shù):當(dāng)前遍歷項(xiàng)、索引和數(shù)組本身。

如下所示：確定數(shù)組是否至少包含一個(gè)偶數(shù)：

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. 數(shù)組的過濾

9.1 array.filter() 方法

array.filter(predicate)方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

在每個(gè)遍歷predicate(item[, index[, array]])上，用參數(shù)調(diào)用predicate 函數(shù):當(dāng)前遍歷項(xiàng)、索引和數(shù)組本身。

如下所示：將一個(gè)數(shù)組過濾為僅包含偶數(shù)：

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

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

const evens = numbers.filter(isEven);

evens; // => [10]

提示：

array.filter() 創(chuàng)建一個(gè)新數(shù)組，而不改變?cè)紨?shù)組。

10. 數(shù)組的插入

10.1 array.push() 方法

array.push(item1 [...，itemN]) 方法將一個(gè)或多個(gè)項(xiàng)追加到數(shù)組的末尾，并返回新的長(zhǎng)度。

如下所示，在names 數(shù)組的末尾添加 '小智'

const names = ['小智']

names.push('前端小智')

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

提示：

• array.push() 會(huì)改變?cè)瓟?shù)組
• array.push(item1, item2, ..., itemN) 可以添加多個(gè)元素。

10.2 array.unshift() 方法

array.unshift(item1[..., itemN])方法將一個(gè)或多個(gè)項(xiàng)追加到數(shù)組的開頭，返回?cái)?shù)組的新長(zhǎng)度

const names = ['小智']

names.unshift('前端小智')

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

提示：

• array.unshift() 會(huì)改變?cè)瓟?shù)組
• array.unshift(item1, item2, ..., itemN) 可以添加多個(gè)元素。

10.3 展開操作符

可以通過組合展開操作符和數(shù)組字面量以不可變的方式在數(shù)組中插入項(xiàng)。

在數(shù)組末尾追加一個(gè)項(xiàng):

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

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

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

在數(shù)組的開頭追加一個(gè)項(xiàng):

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

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

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

在任何索引處插入元素：

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

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

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

11. 刪除數(shù)組元素

11.1 array.pop() 方法

array.pop()方法從數(shù)組中刪除最后一個(gè)元素，然后返回該元素。如下所示，刪除colors數(shù)組的最后一個(gè)元素：

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

const lastColor = colors.pop();

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

提示：

array.pop() 會(huì)改變?cè)瓟?shù)組。

11.2 array.shift() 方法

array.shift()方法從數(shù)組中刪除第一個(gè)元素，然后返回該元素。

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

const firstColor = colors.shift();

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

提示：

• array.shift() 會(huì)改變?cè)瓟?shù)組。
• array.shift() 具有O(n)復(fù)雜度。

11.3 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])從數(shù)組中刪除元素，并插入新的元素。

例如，咱們從索引1處刪除2個(gè)元素：

const names = ['張三', '李四', '王五', '趙六']

names.splice(1, 2)

names // => ["張三", "趙六"]

names.splice(1，2)刪除元素'張三'和'趙六'。

names.splice() 可以插入新元素，而不是插入已刪除的元素。 咱們可以替換索引1處開始的的2個(gè)元素，然后插入一個(gè)新的元素 '小智'：

const names = ['張三', '李四', '王五', '趙六']

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

names //  ["張三", "小智", "趙六"]

提示：

• array.splice() 會(huì)改變?cè)瓟?shù)組。

11.4 展開操作符號(hào)

可以通過組合展開操作符和數(shù)據(jù)字面量以不可變的方式從數(shù)組中刪除項(xiàng)。

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

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

newNames // ["張三", "趙六"]

12. 清空數(shù)組

12.1 array.length屬性

array.length是保存數(shù)組長(zhǎng)度的屬性。 除此之外，array.length是可寫的。

如果咱們寫一個(gè)小于當(dāng)前長(zhǎng)度的array.length = newLength，多余的元素從數(shù)組中移除。

如下所示：使用array.length = 0刪除數(shù)組中的所有項(xiàng)目：

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

colors.length = 0;

colors; // []

12.2 array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])從數(shù)組中刪除元素，并插入新的元素。

如果removeCount參數(shù)被省略，那么array.splice()將刪除從fromIndex開始的數(shù)組的所有元素。咱們使用它來刪除數(shù)組中的所有元素：

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

colors.splice(0);

colors; // []

13. 填充數(shù)組

13.1 array.fill() 方法

array.fill(value[, fromIndex[, toIndex]])用從fromIndex 到toIndex的值填充數(shù)組(不包括toIndex本身)。fromIndex可選參數(shù)默認(rèn)為0,toIndex可選參數(shù)默認(rèn)為array.length。

例如，使用用零值填充數(shù)組：

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

numbers.fill(0);

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

不僅如此，還可以使用Array(length).fill(initial)來初始化特定長(zhǎng)度和初始值的數(shù)組。

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

zeros; // [0, 0, 0]

提示：

• array.splice() 會(huì)改變?cè)瓟?shù)組。

13.2 Array.from() 函數(shù)

Array.from() 有助于初始化帶有對(duì)象的特定長(zhǎng)度的數(shù)組：

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

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

14. 數(shù)組的扁平化

14.1 array.flat()方法

array.flat([depth])方法通過遞歸扁平屬于數(shù)組的項(xiàng)直到一定深度來創(chuàng)建新數(shù)組。 depth可選參數(shù)默認(rèn)為1：

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

const flatArray = arrays.flat();

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

arrays 包含數(shù)字和數(shù)字?jǐn)?shù)組的混合。 arrays.flat()對(duì)數(shù)組進(jìn)行扁平，使其僅包含數(shù)字。

提示：

array.flat() 創(chuàng)建一個(gè)新數(shù)組，而不會(huì)改變?cè)紨?shù)組。

15. 數(shù)組的排序

15.1 array.sort() 方法

array.sort([compare])方法對(duì)數(shù)組的元素進(jìn)行排序。

可選參數(shù)compare(a, b)是一個(gè)自定義排序順的回調(diào)函數(shù)。如果比較compare(a, b)返回的結(jié)果：

• 如果 a小于b，在排序后的數(shù)組中a應(yīng)該出現(xiàn)在b之前，就返回一個(gè)小于0的值。
• 如果a等于b，就返回0。
• 如果a大于b，就返回一個(gè)大于0的值。

如下所示，對(duì)數(shù)組 numbers 時(shí)行排序

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

numbers.sort();

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

numbers.sort() 以升序?qū)?shù)字進(jìn)行排序。

使用比較函數(shù)，讓偶數(shù)排在奇數(shù)前面：

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() 會(huì)改變?cè)瓟?shù)組。

關(guān)于JavaScript中數(shù)組的常見操作方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。