組是編程中很重要的數據結構。它允許我們以有序的方式存儲和訪問多個值（元素），從而實現更方便和高效的數據存儲和讀取操作。因而數組操作方法在任何語言中都尤為重要。這里總結 JavaScript 中數組的一些常用操作方法。

JavaScript 在 ES5 或者更早的版本中數組的方法相對較少，ES6后逐漸完善，操作方法可選的增多。

ES5 及以下版本

1. concat(): 將兩個或多個數組合并成一個新數組。
2. join(): 將數組中所有元素組合成一個字符串。
3. indexOf(): 返回數組中指定元素的第一個索引（如果存在），如果不存在，則返回-1。
4. lastIndexOf(): 返回數組中指定元素的最后一個索引（如果存在），如果不存在，則返回-1。
5. push(): 將一個元素添加到數組末尾。
6. pop(): 刪除數組中的最后一個元素。
7. shift(): 刪除數組中的第一個元素。
8. unshift(): 將一個元素添加到數組的開頭。
9. slice(): 返回一個包含數組中指定部分的新數組。
10. splice(): 用新元素替換數組中的元素或者移除元素。
11. reverse(): 反轉數組中的元素的順序。
12. sort(): 對數組進行排序。
13. filter(): 返回一個新數組，包含執行指定函數后返回值為 true 的元素。
14. map(): 返回一個新數組，包含對原數組中每個元素執行指定函數后的返回值。
15. forEach(): 對數組中的每個元素執行指定函數，沒有返回值。
16. reduce(): 通過指定函數，從左到右依次執行并將數組簡化為單一的值.
17. every() - 判斷是否所有元素都符合指定的條件
18. some() - 判斷是否至少有一個元素符合指定的條件

這里列舉都是非常常見，使用頻率較高的數組操作方法，它們可以方便地實現數組的增刪改查、排序、過濾、遍歷、映射等操作，非常有用。

ES6 后增加方法

ES6 中新增了一系列的數組操作方法，下面列舉其中一些比較常用的：

1. Array.from(): 可以將一個類數組對象或者可迭代對象轉換成真正的數組。
2. Array.of(): 用于創建一個包含任意數量元素的數組，不管元素的類型和數量。
3. Array.prototype.copyWithin(): 在數組內部，將一段元素序列拷貝到另一段位置，覆蓋原有的值。
4. Array.prototype.fill(): 用一個固定值填充數組中從起始索引到終止索引內的全部元素。
5. Array.prototype.find(): 返回數組中滿足提供的測試函數的第一個元素的值。如果沒有滿足條件的元素，則返回 undefined。
6. Array.prototype.findIndex(): 返回數組中滿足提供的測試函數的第一個元素的索引。如果沒有滿足條件的元素，則返回 -1。
7. Array.prototype.includes(): 判斷數組中是否包含某個元素，返回一個 Boolean 值。
8. Array.prototype.flat(): 將嵌套的數組“扁平化”，變為一維數組。
9. Array.prototype.flatMap(): 類似于 map + flat，可以對數組中的每個元素執行一個回調函數，并將回調函數返回的結果轉換成一維數組。
10. Array.prototype.entries(): 返回一個包含數組中每個索引（以及相應的元素）的迭代器對象。
11. Array.prototype.keys(): 返回一個包含數組中每個索引的迭代器對象。
12. Array.prototype.values(): 返回一個包含數組中每個值的迭代器對象。

用法和概念辨析

includes、some、every區別

這三個方法都是用來判斷數組是否符合指定條件的方法，它們的不同在于返回的結果和判斷條件的方式。

Include 方法用來判斷數組中是否包含指定元素，如果包含則返回 true，否則返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

some 方法用來判斷數組中是否至少有一個元素符合指定的條件，如果符合則返回 true，否則返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
const result=arr.some(item=> item > 3);
console.log(result); // true

every 方法用來判斷數組中是否所有的元素都符合指定的條件，如果都符合則返回 true，否則返回 false。它的使用方式如下：

const arr=[1, 2, 3, 4, 5];
const result=arr.every(item=> item > 0);
console.log(result); // true

再來一個例子：

注意：some() 和 every() 方法的參數是一個判斷條件的函數，該函數會被傳入每個數組元素，返回值為布爾值。some() 和 every() 的區別在于判斷條件的方式，some() 符合任意一個就返回 true，every() 必須符合每一個才返回 true。

find 和 filter

Array.prototype.find() 和 Array.prototype.filter() 它們都是基于一個返回值為布爾類型的回調函數來進行處理。

• find(callback [, thisArg]): 返回數組中滿足指定條件的第一個元素，如果沒有找到，則返回 undefined。該方法通過調用指定的回調函數對數組中的每個元素進行測試，回調函數會接收三個參數：當前元素的值、當前元素的索引和數組本身，回調函數中可以定義任何需要滿足的條件來判斷是否需要返回當前元素。
• filter(callback [, thisArg]): 返回一個新的數組，其中包含原始數組中通過指定回調函數測試的所有元素。該方法通過調用指定的回調函數對數組中的每個元素進行測試，回調函數會接收三個參數：當前元素的值、當前元素的索引和數組本身，回調函數中可以定義任何需要滿足的條件來過濾元素。

find() 和 filter() 方法的區別在于，find() 方法返回數組中滿足條件的第一個元素及其相關信息，而 filter() 方法返回數組中所有滿足條件的元素的集合。例如：

const arr=[1, 2, 3, 4, 5];
const found=arr.find(item=> item > 2); //返回 3
const filtered=arr.filter(item=> item > 2); //返回 [3, 4, 5]

在上述例子中，find() 方法返回第一個滿足條件 item > 2 的元素 3，而 filter() 方法返回值為一個數組，其中包含所有滿足條件 item > 2 的元素，即 [3, 4, 5]。

這兩個方法都非常實用，在實際開發中應用廣泛，可以通過一個簡單的回調函數處理數組并對其進行搜索、過濾和選擇等操作。

map

map 用于對數組中的每個元素執行指定的操作并返回一個新數組。map() 方法接受一個函數作為參數，該函數會被傳入數組中的每個元素作為第一個參數，當前元素在數組中的索引作為第二個參數（可選），它返回的值會成為新數組中對應位置的值。

下面是一個簡單的使用 map() 方法的例子，它將數組中的每個元素都乘以 2：

const arr=[1, 2, 3, 4];
const result=arr.map(item=> item * 2);
console.log(result); // [2, 4, 6, 8]

在這個例子中，我們將數組 [1, 2, 3, 4] 作為 map() 的方法調用者，傳入一個箭頭函數作為參數，箭頭函數的作用是將數組中的每個元素都乘以 2。然后， map() 方法會返回一個新數組 [2, 4, 6, 8]。

map() 方法常用于從一組數據中選擇需要的字段或將一組數據轉換為另一種數據結構。

來一個例子：

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

const objArr=numArr.map(num=> {
  return {
    value: num,
    isEven: num % 2===0
  };
});

console.log(objArr);

在這個例子中，我們將包含一些數字的數組 numArr 作為 map() 方法調用者，傳入一個返回對象的箭頭函數。通過使用 map() 方法和箭頭函數，我們將數字數組轉換為對象數組，并且添加了一個 isEven 屬性，該屬性用于判斷數字是否為偶數。最終輸出的結果如下：

在這個例子中，我們將數字數組轉換為對象數組，我們可以使用 map() 和箭頭函數對任何數據進行轉換，例如字符串數組、日期對象等，只需要根據實際情況編寫對應的轉換邏輯，很好用。請記住這個方法。

entries 、keys 、values

這三個方法都可以用于遍歷數組，它們返回的都是迭代器對象。通過結合使用這三種方法，我們可以很方便地遍歷獲取數組的鍵和值，以及相應的索引。

下面是一個使用 entries(), keys() 和 values() 遍歷打印數組的例子：

const arr=["apple", "banana", "cherry"];
const entries=arr.entries();
const keys=arr.keys();
const values=arr.values();

console.log('entries方法');
for (const [index, value] of entries) {
  console.log(`[${index}]: ${value}`);
}

 console.log('keys方法');
for (const index of keys) {
 
  console.log(`Index: ${index}`);
}

  console.log('values方法');
for (const value of values) {
  console.log(`Value: ${value}`);
}

在這個例子中，我們使用 entries(), keys() 和 values() 方法獲取數組的迭代器對象，并分別使用 for...of 循環遍歷每個鍵值對或鍵或值，并將索引和值打印出來。最終輸出如下：

通過結合使用 entries(), keys() 和 values()，我們可以很方便地遍歷獲取數組的索引、鍵和值，并進行相應的操作。在實際開發中，我們可以根據具體的需求，選擇合適的方法和操作方案。

form 和 of

這兩個都是 ECMAScript 6 新增的數組方法。

• Array.from(arrayLike [, mapFn [, thisArg]]): 該方法通過構建一個新數組來從類似數組或可迭代對象中創建數組。第一個參數接收一個類數組對象或可迭代對象，用來生成新的數組?？蛇x參數mapFn表示對每個數組元素進行的映射操作的回調函數，thisArg用于指定回調函數中 this 關鍵字的取值。如果沒有指定第二個參數，則以原樣復制每個元素。
• Array.of(element0[, element1[, ...[, elementN]]]): 該方法通過將傳入的參數創建并返回一個新的數組。傳入的參數將成為新數組的元素，參數個數可以任意。如果沒有參數，則返回一個空數組。

示例如下：

// Array.from() 例子
const str="Hello world";
const chars=Array.from(str);
// chars=['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

const nums=Array.from([1, 2, 3], num=> num * 2);
// nums=[2, 4, 6]

// Array.of() 例子
const arr1=Array.of();        // []
const arr2=Array.of(1, 2, 3); // [1, 2, 3]
const arr3=Array.of("a", 2);  // ['a', 2]

在上面的例子中，我們使用 Array.from() 將字符串中的單個字符存儲到一個新數組中，同時以不同的方式使用了映射函數。此外，我們使用 Array.of() 創建了三個新數組，并分別使用了零個、三個和兩個參數。

運行效果如下：

總結

JavaScript 數組還支持其他一些操作方法，這里僅僅分享日常應該比較多的。

紹

JavaScript 數組是基本數據結構，在 Web 開發中發揮著關鍵作用。它們允許開發人員有效地組織、操作和存儲數據。在本綜合指南中，我們將深入探討 JavaScript 數組，從基本概念到高級技術。無論您是初學者還是經驗豐富的開發人員，本文都將為您提供有關在 JavaScript 中使用數組的寶貴見解。

目錄

1. 什么是數組？數組基礎知識什么是數組？聲明數組訪問數組元素常見的數組操作添加元素刪除元素修改元素數組屬性和方法lengthpush()和pop()shift()和unshift()
2. 使用多維數組什么是多維數組？創建多維數組訪問多維數組中的元素操作多維數組
3. 迭代數組循環for_方法forEach()_使用map()、filter()、 和reduce()
4. 數組解構解構簡介解構數組
5. 展開和休息運算符價差運算符剩余參數
6. ES6 數組特性find()和findIndex()some()和every()includes()
7. 數組排序和搜索數組排序使用sort()自定義排序compare功能搜索數組indexOf(), lastIndexOf(), 和includes()
8. 經常問的問題數組和對象有什么區別？如何檢查數組中是否存在某個元素？map()使用、filter()、 和的優點是什么reduce()？JavaScript 中可以有不同數據類型的數組嗎？從數組中刪除重復項的最佳方法是什么？
9. 高級數組操作使用集合使用該reduce()方法進行復雜操作數組操作splice()
10. 數組計算對數組元素求和尋找平均值尋找最大值和最小值尋找獨特的元素

1.什么是數組？

數組基礎知識

什么是數組？

數組是一種存儲元素集合的數據結構，每個元素都由索引或鍵標識。在 JavaScript 中，數組可以保存多種數據類型，使其適用于各種用例。

聲明數組

您可以使用方括號在 JavaScript 中聲明數組[]并用元素填充它。例如：

let fruits=['apple', 'banana', 'cherry'];

訪問數組元素

可以使用從 0 開始的索引來訪問數組元素。例如：

console.log(fruits[0]); // Output: 'apple'

常見的數組操作

添加元素

要將元素添加到數組中，可以使用以下push()方法：

fruits.push('orange'); // Adds 'orange' to the end of the array

刪除元素

您可以使用以下方法從數組末尾刪除元素pop()：

fruits.pop(); // Removes 'orange' from the end

修改元素

要修改數組元素，只需為其分配一個新值：

fruits[1]='grape'; // Changes 'banana' to 'grape'

數組屬性和方法

length

該length屬性返回數組中的元素數量：

console.log(fruits.length); // Output: 3

push()和pop()

我們已經了解了如何操作push()以及如何pop()工作。它們通常用于管理數組的末尾。

shift()和unshift()

要從數組開頭添加或刪除元素，可以使用shift()and unshift()：

fruits.shift(); // Removes 'apple' from the beginning
fruits.unshift('kiwi'); // Adds 'kiwi' to the beginning

2. 使用多維數組

什么是多維數組？

多維數組是數組的數組，創建類似網格的結構。您可以將其視為具有行和列的表格。創建方法如下：

let matrix=[
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

訪問多維數組中的元素涉及使用嵌套索引：

console.log(matrix[0][1]); // Output: 2

操作多維數組對于處理數學矩陣或處理復雜數據結構等任務至關重要。

3. 遍歷數組

循環for_

迭代數組的一種經典方法是使用循環for：

for (let i=0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

方法forEach()_

該forEach()方法提供了一種更優雅的方式來迭代數組：

fruits.forEach(function(fruit) {
  console.log(fruit);
});

使用map()、filter()、 和reduce()

這些高階函數為轉換和處理數組提供了強大的工具：

• map()：對每個元素應用一個函數并返回一個新數組。
• filter()：創建一個新數組，其中包含滿足指定條件的元素。
• reduce()：基于reducer函數將數組縮減為單個值。

4. 數組解構

解構簡介

解構允許您輕松地從數組和對象中提取值。以下是解構數組的方法：

let [first, second]=fruits;
console.log(first); // Output: 'apple'
console.log(second); // Output: 'banana'

當使用返回數組的函數時，解構特別有用。

5. 展開和休息運算符

價差運算符

展開運算符 ( ...) 用于將數組拆分為單獨的元素。它對于復制數組或組合它們很方便：

let moreFruits=['kiwi', 'mango'];
let allFruits=[...fruits, ...moreFruits];

剩余參數

函數參數中的剩余參數 ( ...) 允許您將多個參數收集到一個數組中：

function sum(...numbers) {
  return numbers.reduce((total, num)=> total + num, 0);
}

console

.log(sum(1, 2, 3)); // Output: 6

6. ES6 數組特性

find()和findIndex()

該find()方法返回滿足給定條件的第一個元素，同時findIndex()返回該元素的索引。

let scores=[85, 90, 78, 92, 88];
let highScore=scores.find(score=> score > 90);
console.log(highScore); // Output: 92

some()和every()

some()檢查至少一個元素是否滿足條件，同時every()檢查所有元素是否滿足條件。

let ages=[25, 30, 16, 42, 19];
let canVote=ages.every(age=> age >=18);
console.log(canVote); // Output: false

includes()

該includes()方法檢查數組是否包含特定元素，返回trueor false：

let pets=['dog', 'cat', 'rabbit'];
console.log(pets.includes('cat')); // Output: true

7. 數組排序和搜索

數組排序

使用sort()

該sort()方法按字母或數字順序排列數組元素：

let fruits=['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // Output: ['apple', 'banana', 'cherry']

自定義排序compare功能

對于自定義排序，您可以將比較函數傳遞給sort()：

let numbers=[10, 3, 5, 8, 1];
numbers.sort((a, b)=> a - b);
console.log(numbers); // Output: [1, 3, 5, 8, 10]

搜索數組

indexOf(),lastIndexOf(), 和includes()

這些方法可幫助您查找數組中的元素：

• indexOf()：返回第一次出現的索引。
• lastIndexOf()：返回最后一次出現的索引。
• includes()：檢查元素是否存在。

8. 常見問題

數組和對象有什么區別？

數組是通過數字索引訪問的值的有序集合，而對象是通過鍵（字符串）訪問的鍵值對的集合。數組最適合項目列表，而對象適合對現實世界的實體進行建模。

如何檢查數組中是否存在某個元素？

您可以使用該includes()方法來檢查數組中是否存在某個元素。例如：

let fruits=['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // Output: true

map()使用、filter()、 和的優點是什么reduce()？

• map()：通過對每個元素應用函數來創建新數組，這對于轉換數據很有用。
• filter()：返回一個新數組，其中的元素滿足指定條件，非常適合選擇數據。
• reduce()：通過應用reducer函數將數組縮減為單個值，有助于聚合數據。

JavaScript 中可以有不同數據類型的數組嗎？

是的，JavaScript 允許數組包含不同數據類型的元素。這種靈活性是 JavaScript 數組的優勢之一。

從數組中刪除重復項的最佳方法是什么？

您可以通過將數組轉換為 Set 然后再轉換回數組來從數組中刪除重復項：

let uniqueArray=[...new Set(arrayWithDuplicates)];

9. 高級數組操作

使用集合

JavaScript Sets 提供了一種處理數組中唯一值的便捷方法。您可以將數組轉換為 Set 以自動刪除重復項：

let uniqueFruits=new Set(fruits);

使用該reduce()方法進行復雜操作

該reduce()方法對于在數組上執行復雜的操作非常強大。例如，您可以使用它來計算數組中值的總和：

let numbers=[1, 2, 3, 4, 5];
let total=numbers.reduce((accumulator, currentValue)=> accumulator + currentValue, 0);
console.log(total); // Output: 15

數組操作splice()

該splice()方法允許您添加、刪除或替換數組中特定位置的元素：

let colors=['red', 'green', 'blue'];
colors.splice(1, 0, 'yellow'); // Inserts 'yellow' at index 1

10. 數組計算

對數組元素求和

您可以使用該方法計算數組中所有元素的總和reduce()，如前面所示。

尋找平均值

要求數字數組的平均值，請將總和除以元素數：

let numbers=[10, 20, 30, 40, 50];
let sum=numbers.reduce((acc, num)=> acc + num, 0);
let average=sum / numbers.length;

尋找最大值和最小值

和函數對于查找數字數組中Math.max()的Math.min()最大值和最小值非常有用：

let numbers=[10, 20, 5, 30, 15];
let max=Math.max(...numbers); // Maximum value
let min=Math.min(...numbers); // Minimum value

尋找獨特的元素

要查找數組中的唯一元素，可以使用 Set 數據結構，如前所述。

結論

JavaScript 數組是 Web 開發人員不可或缺的多功能工具。它們使您能夠高效地處理數據集合、執行復雜的操作以及創建交互式 Web 應用程序。通過掌握本指南中討論的概念和技術，您將能夠充分利用 JavaScript 數組在項目中的全部潛力?？鞓肪幋a！

avaScript 數組中的最小值和最大值

在 JavaScript 中使用數值數組時，我們可能會發現自己需要找到最小值或最大值。幸運的是，JavaScript 的內置 Math 對象已經涵蓋了相應方法。我們可以簡單地使用 Math.min()或Math.max() 將其與擴展運算符(...) 結合使用，因為這兩個函數都接受任意數量的參數。

JavaScript

const nums=[2, 4, 6, 8, 1, 3, 5, 7];
Math.max(...nums); // 8
Math.min(...nums); // 1

對于更復雜的情況，例如在對象數組中查找最小值/最大值，您可能不得不求助于 Array.prototype.map() 或 Array.prototype.reduce()。另一方面，我們后續的 minBy 或 maxBy 文章也會介紹到。