幾乎所有的編程語(yǔ)言都原生支持?jǐn)?shù)組類(lèi)型，因?yàn)槠涫亲詈?jiǎn)單的內(nèi)存數(shù)據(jù)結(jié)構(gòu)。數(shù)組也是 JavaScript 中最常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)之一，它提供了很多處理存儲(chǔ)數(shù)據(jù)的方法。JavaScript 中，數(shù)組是經(jīng)過(guò)改進(jìn)的對(duì)象，和其他語(yǔ)言不同的是，數(shù)組中每個(gè)槽位可以存儲(chǔ)任意類(lèi)型的數(shù)據(jù)，這意味著可以創(chuàng)建一個(gè)數(shù)組，它的第一個(gè)元素是字符串、第二個(gè)元素是數(shù)字、第三個(gè)是對(duì)象。在 JavaScript 中擁有許多很實(shí)用的方法，本文就來(lái)總結(jié)一下數(shù)組中常用的操作方法。

1. Array.map()

使用.map() 方法，可以創(chuàng)建一個(gè)基于原始數(shù)組的修訂版數(shù)組。.map() 方法接受一個(gè)函數(shù)，該函數(shù)遍歷數(shù)組中的所有項(xiàng)并進(jìn)行相應(yīng)的修改。

語(yǔ)法

const newArray = array.map(function callback(currentValue[, index[, array]]) {
 // 為新數(shù)組返回新的元素
}[, thisArg])

map 函數(shù)用于遍歷數(shù)組元素。它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，根據(jù)回調(diào)函數(shù)返回一個(gè)新數(shù)組和新元素。

參數(shù)

• callback（必須）：生成新數(shù)組元素的函數(shù)，接收三個(gè)參數(shù)：

  • currentValue：callback 數(shù)組中正在處理的當(dāng)前元素。
  • index：可選，callback 數(shù)組中正在處理的當(dāng)前元素的索引。
  • array：可選，map 方法調(diào)用的數(shù)組。

• thisArg：可選，執(zhí)行 callback 函數(shù)時(shí)值被用作 this 。

返回值

一個(gè)由原數(shù)組每個(gè)元素執(zhí)行回調(diào)函數(shù)的結(jié)果組成的新數(shù)組。

當(dāng)需要更新數(shù)組中的所有項(xiàng)并將其存儲(chǔ)到一個(gè)新數(shù)組中時(shí)，.map() 方法就可以派上用場(chǎng)了。

實(shí)例

例如有一個(gè)文章列表的數(shù)組，如下：

const articles = [
    {
        article_id: "6976209276364652558",
        title: "如何在 Vue 的計(jì)算屬性中傳遞參數(shù)",
        views: 1258,
    },
    {
        article_id: "6976113133358153736",
        title: "Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store",
        views: 2258,
    },
    {
        article_id: "6975722363241365534",
        title: "Angular管道PIPE介紹",
        views: 1568,
    },
];

現(xiàn)在基于上面文章列表數(shù)組，獲取所有 title 組成的數(shù)組，如下：

const arrayTitles = articles.map((item) => item.title);
console.log(arrayTitles);

輸出的結(jié)果如下：

[
  '如何在 Vue 的計(jì)算屬性中傳遞參數(shù)',
  'Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store',
  'Angular管道PIPE介紹'
]

當(dāng)然，只要是數(shù)組都可以使用 .map() ，接下來(lái)就基于上面標(biāo)題數(shù)組，增加作者信息，如下：

const arrayTitlesWithAuthor = arrayTitles.map(
    (title) => `《${title}》作者：天行無(wú)忌`
);
console.log(arrayTitlesWithAuthor);

輸出結(jié)果如下：

[
  '《如何在 Vue 的計(jì)算屬性中傳遞參數(shù)》作者：天行無(wú)忌',
  '《Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store》作者：天行無(wú)忌',
  '《Angular管道PIPE介紹》作者：天行無(wú)忌'
]

.map() 方法是一個(gè)用來(lái)創(chuàng)建新數(shù)組、修改其內(nèi)容并保持原始數(shù)組不變的通用方法。當(dāng)出現(xiàn)需要修改現(xiàn)有數(shù)組的內(nèi)容并將結(jié)果存儲(chǔ)為新變量的時(shí)候就可以用。

2. Array.filter()

從方法名稱可以很容易知道其用途，沒(méi)錯(cuò)用于過(guò)濾數(shù)組元素。

filter()方法根據(jù)特定條件獲取數(shù)組中的元素，像 .map() 方法一樣，它將返回一個(gè)新數(shù)組，并保持原始數(shù)組不變。

語(yǔ)法

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

• callback ：用來(lái)測(cè)試數(shù)組的每個(gè)元素的回調(diào)函數(shù)，返回 true 表示該元素通過(guò)測(cè)試，保留該元素，false 則不保留。它接受以下三個(gè)參數(shù)：
  • element：數(shù)組中當(dāng)前正在處理的元素。
  • index：可選，正在處理的元素在數(shù)組中的索引。
  • array：可選，調(diào)用了 filter 的數(shù)組本身。
• thisArg：可選，執(zhí)行 callback 時(shí)，用于 this 的值

返回值

一個(gè)新的、由通過(guò)測(cè)試的元素組成的數(shù)組，如果沒(méi)有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組。

實(shí)例

基于上面的 articles 數(shù)組，分別獲取 views 小于 2000 的和大于 2000 的文章列表：

const lessArticles = articles.filter((item) => item.views < 2000);
const muchArticles = articles.filter((item) => item.views > 2000);
console.log(lessArticles);
console.log("\r\n==========================================\r\n");
console.log(muchArticles);

輸出的結(jié)果如下：

[
  {
    article_id: '6976209276364652558',
    title: '如何在 Vue 的計(jì)算屬性中傳遞參數(shù)',
    views: 1258
  },
  {
    article_id: '6975722363241365534',
    title: 'Angular管道PIPE介紹',
    views: 1568
  }
]

==========================================

[
  {
    article_id: '6976113133358153736',
    title: 'Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store',
    views: 2258
  }
]

當(dāng)需要從數(shù)組中刪除不符合特定條件的元素時(shí)，可以使用 .filter() 。

3. Array.find()

.find() 方法看起來(lái)很像前面介紹的.filter()方法。跟 .filter()方法一樣，將匹配的條件的元素返回，區(qū)別在于，.find() 將只返回與提供的條件匹配的第一個(gè)元素，不是數(shù)組。

語(yǔ)法

arr.find(callback[, thisArg])

• callback：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，接收 3 個(gè)參數(shù)：
  • element：當(dāng)前遍歷到的元素。
  • index：可選，當(dāng)前遍歷到的索引。
  • array：可選數(shù)組本身。
• thisArg：可選執(zhí)行回調(diào)時(shí)用作 this 的對(duì)象。

返回值

數(shù)組中第一個(gè)滿足所提供測(cè)試函數(shù)的元素的值，否則返回 undefined。

實(shí)例

將上面的 .filter() 方法改為 .find()，如下：

const lessArticle = articles.find((item) => item.views < 2000);
const muchArticle = articles.find((item) => item.views > 2000);
console.log(lessArticle);
console.log("\r\n==========================================\r\n");
console.log(muchArticle);

輸出結(jié)果如下：

{
  article_id: '6976209276364652558',
  title: '如何在 Vue 的計(jì)算屬性中傳遞參數(shù)',
  views: 1258
}

==========================================

{
  article_id: '6976113133358153736',
  title: 'Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store',
  views: 2258
}

什么時(shí)候使用 Array.find() ？ 當(dāng)需要獲取數(shù)組通過(guò)定義條件的第一個(gè)元素時(shí)。

4. Array.findIndex()

.findIndex() 方法在名稱上跟 .find() 前半部分一樣，其實(shí)現(xiàn)的功能和.find() 一樣，其區(qū)別在于返回值不一樣，只返回與提供的條件匹配的第一個(gè)元素的索引值。

const lessArticle = articles.findIndex((item) => item.views < 2000);
const muchArticle = articles.findIndex((item) => item.views > 2000);
console.log(lessArticle); // 0
console.log(muchArticle); // 1

什么時(shí)候使用 Array.findIndex() ？ 當(dāng)需要獲取數(shù)組通過(guò)定義條件的第一個(gè)元素所在數(shù)組中的索引值時(shí)。

5. Array.forEach()

.forEach() 方法的工作方式很像常規(guī)的 for 循環(huán)，遍歷一個(gè)數(shù)組并在每個(gè)元素上執(zhí)行一個(gè)函數(shù)。.forEach() 的第一個(gè)參數(shù)是回調(diào)函數(shù)，它包含循環(huán)數(shù)組的當(dāng)前值和索引。

如下：

articles.forEach((item, index) => {
    console.log(`文章索引 ${index} 的標(biāo)題為《${item.title}》`);
});

輸出結(jié)果如下：

文章索引 0 的標(biāo)題為《如何在 Vue 的計(jì)算屬性中傳遞參數(shù)》
文章索引 1 的標(biāo)題為《Angular數(shù)據(jù)狀態(tài)管理框架：NgRx/Store》
文章索引 2 的標(biāo)題為《Angular管道PIPE介紹》

當(dāng)需要簡(jiǎn)單地循環(huán)遍歷數(shù)組的每個(gè)元素而不需要構(gòu)建新數(shù)組時(shí)。

6. for...of

for...of 是es6推出的迭代器，號(hào)稱最簡(jiǎn)潔，可以是用 break，continue和 return 終止循環(huán)。跟 .forEach() 不同的是，不提供數(shù)組索引。跟 for 語(yǔ)句相比代碼少得多，更簡(jiǎn)潔。

下面代碼遍歷輸出數(shù)組，如下：

for (const item of articles) {
    console.log(item);
}

7. for...in

這個(gè)方法跟上面的for...of 語(yǔ)法上看起來(lái)相似，for...of 是對(duì)值的遍歷，for...in 是對(duì) key/index 的遍歷。for...in 應(yīng)用于數(shù)組則 key 對(duì)應(yīng)的就是數(shù)組的索引值，應(yīng)用于對(duì)象則 key 對(duì)應(yīng)鍵值。

來(lái)看代碼執(zhí)行效果，先應(yīng)用于數(shù)組，如下：

for (const key in articles) {
    console.log(key);
}

上面代碼輸出的是數(shù)組的索引值：0、1、2，下面應(yīng)用于數(shù)組第一個(gè)對(duì)象，如下：

for (const key in articles[0]) {
    console.log(key);
}

輸出的就是：article_id、title、views。

在實(shí)際開(kāi)發(fā)中不提倡使用 for...in，如果需要遍歷對(duì)象屬性，推薦使用Object.keys 。

8. Array.every()

.every()方法將檢查數(shù)組中的每個(gè)元素是否都通過(guò)提供的條件，如果數(shù)組中的所有元素都通過(guò)條件，則將返回 true ，如果沒(méi)有，將返回 false。

語(yǔ)法

arr.every(callback(element[, index[, array]])[, thisArg])

• callback：用來(lái)測(cè)試每個(gè)元素的函數(shù)，它可以接收三個(gè)參數(shù)：

  • element：用于測(cè)試的當(dāng)前值。
  • index：可選，用于測(cè)試的當(dāng)前值的索引。
  • array：可選，調(diào)用 every 的當(dāng)前數(shù)組。

• thisArg：執(zhí)行 callback 時(shí)使用的 this 值。

返回值

如果回調(diào)函數(shù)的每一次返回都為 true 值，返回 true ，否則返回 false，即跟邏輯判斷的 && 類(lèi)似，所有結(jié)果為真才為真。

實(shí)例

例如，檢查 articles 數(shù)組所有的文章 views 都超過(guò) 1000，如下：

const isMoreThan1000 = articles.every((item) => item.views > 1000);
console.log(isMoreThan1000);  // true

檢查 articles 數(shù)組所有的文章 views 都超過(guò) 2000，如下：

const isMoreThan2000 = articles.every((item) => item.views > 2000);
console.log(isMoreThan2000); // false

什么時(shí)候使用 Array.every() ？ 當(dāng)需要確認(rèn)數(shù)組的每一項(xiàng)都通過(guò)定義的條件時(shí)。

9. Array.some()

.some() 方法和 .every() 方法類(lèi)似，但驗(yàn)證的結(jié)果是相反的，如果數(shù)組中的所有元素只要有一個(gè)通過(guò)條件，則將返回 true ，如果所有的元素都不通過(guò)條件，將返回 false。

.some() 方法和 .every() 方法在一些邏輯處理中，可以實(shí)現(xiàn)現(xiàn)邏輯 and 和 or 。

語(yǔ)法

arr.some(callback(element[, index[, array]])[, thisArg])

• callback：用來(lái)測(cè)試每個(gè)元素的函數(shù)，它可以接收三個(gè)參數(shù)：

  • element：用于測(cè)試的當(dāng)前值。
  • index：可選，用于測(cè)試的當(dāng)前值的索引。
  • array：可選，調(diào)用 some 的當(dāng)前數(shù)組。

• thisArg：執(zhí)行 callback 時(shí)使用的 this 值。

返回值

數(shù)組中有至少一個(gè)元素通過(guò)回調(diào)函數(shù)的測(cè)試就會(huì)返回 true，所有元素都沒(méi)有通過(guò)回調(diào)函數(shù)的測(cè)試返回值才會(huì)為 false。即跟邏輯判斷的 || 類(lèi)似，所有結(jié)果為假才為假。

實(shí)例

例如，檢查 articles 數(shù)組所有的文章 views 是否有 views 超過(guò) 2000 的文章，如下：

const isMore2000 = articles.some((item) => item.views > 2000);
console.log(isMore2000); // true

檢查 articles 數(shù)組所有的文章 是否有 views 超過(guò) 3000 的文章，如下：

const isMore3000 = articles.some((item) => item.views > 3000);
console.log(isMore3000);  // false

10. Array.reduce()

reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行 reducer 函數(shù)（升序執(zhí)行），將其結(jié)果匯總為單個(gè)返回值。

語(yǔ)法

Array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

實(shí)現(xiàn)了為數(shù)組中的每一個(gè)元素依次執(zhí)行 callback 函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素。

參數(shù)

• callback（必須）：執(zhí)行數(shù)組中每個(gè)值 (如果沒(méi)有提供 initialValue 則第一個(gè)值除外)的reducer函數(shù)，包含四個(gè)參數(shù)

• initialValue（可選）：作為第一次調(diào)用 callback 函數(shù)時(shí)的第一個(gè)參數(shù)的值。** 如果沒(méi)有提供初始值，則將使用數(shù)組中的第一個(gè)元素**。 在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

返回值

函數(shù)累計(jì)處理的結(jié)果。

.reduce() 方法接受一個(gè)回調(diào)函數(shù)作為其第一個(gè)參數(shù)，一個(gè)可選的初始值作為其第二個(gè)參數(shù)。如果沒(méi)有提供初始值，則使用第一個(gè)數(shù)組元素作為值。回調(diào)函數(shù)提供一個(gè)累加器 accumulator 和 currentValue 參數(shù)，用于執(zhí)行 reduce 計(jì)算。

實(shí)例

const arrNumbers = [1, 2, 3, 4, 5];
const reduceNumbers = (arrayNumbers, accumulatorInitVal = false) => {
    const reduceCallback = (accumulator, currentVal, currentIndex) => {
        console.log(`當(dāng)前索引：${currentIndex}`);
        return accumulator + currentVal;
    };
    return accumulatorInitVal
        ? arrayNumbers.reduce(reduceCallback, accumulatorInitVal)
        : arrayNumbers.reduce(reduceCallback);
};

console.log(reduceNumbers(arrNumbers)); // 15，累計(jì)器初始值為數(shù)組的第一個(gè)元素的值1
console.log(reduceNumbers(arrNumbers, 10)); // 25，累計(jì)器初始值為10

console.log （當(dāng)前索引：${currentIndex}），是為了更加直觀的看到索引值。

第一次未定義初始值輸出如下：

當(dāng)前索引：1
當(dāng)前索引：2
當(dāng)前索引：3
當(dāng)前索引：4

第二次定義了累計(jì)器初始值輸出如下：

當(dāng)前索引：0
當(dāng)前索引：1
當(dāng)前索引：2
當(dāng)前索引：3
當(dāng)前索引：4

先來(lái)一個(gè)簡(jiǎn)單的實(shí)例，對(duì) articles 數(shù)組的 views 進(jìn)行累加求和：

const sumViews = articles.reduce(
    (accumulator, current) => accumulator + current.views,
    0
);
console.log(sumViews); // 5084

使用 .reduce() 方法可以用于展平一個(gè)數(shù)組，當(dāng)然已經(jīng)有很多方法可以做到這一點(diǎn)，這就是其中的方法之一。

const flattened = [
    [0, 1],
    [2, 3],
    [4, 5],
].reduce((accumulator, current) => accumulator.concat(current), []);
console.log(flattened); // [ 0, 1, 2, 3, 4, 5 ]

當(dāng)需要通過(guò)操作其值將數(shù)組向下轉(zhuǎn)換為單個(gè)值時(shí)，可以使用 .reduce() 方法

接下來(lái)我們來(lái)看一個(gè)奇葩需求，出于某種原因，需要一個(gè)包含所有用戶全名的新數(shù)組（他們的姓，加上他們的名字），但只有當(dāng)他們是 20 多歲，并且他們的全名是 3 個(gè)字的時(shí)候才需要。不要問(wèn)我們?yōu)槭裁葱枰@么奇葩的數(shù)據(jù)子集，產(chǎn)品經(jīng)理問(wèn)了，我們很樂(lè)意幫忙^_^

const users = [
    {
        firstName: "堅(jiān)",
        lastName: "孫",
        age: 37,
    },
    {
        firstName: "策",
        lastName: "孫",
        age: 21,
    },
    {
        firstName: "葛亮",
        lastName: "諸",
        age: 28,
    },
    {
        firstName: "備",
        lastName: "劉",
        age: 44,
    },
    {
        firstName: "統(tǒng)",
        lastName: "龐",
        age: 22,
    },
    {
        firstName: "維",
        lastName: "姜",
        age: 19,
    },
    {
        firstName: "伯溫",
        lastName: "劉",
        age: 22,
    },
];
const getFullName = (user) => `${user.lastName}${user.firstName}`;
const filterByAge = (user) => user.age >= 20 && user.age < 30;

// 常規(guī)實(shí)現(xiàn)
const getFilterResult = users
    //  第一步篩選年齡20-30之間的用戶
    .filter((user) => filterByAge(user))
    //  拼接全名
    .map((user) => getFullName(user))
    //  篩選
    .filter((fullName) => fullName.length === 3);

console.log(getFilterResult);   // [ '諸葛亮', '劉伯溫' ]

// 迭代方式實(shí)現(xiàn)
const iterationsFilterResult = (arrayResult, currentUser) => {
    const fullname = getFullName(currentUser);
    if (filterByAge(currentUser) && fullname.length === 3) {
        arrayResult.push(fullname);
    }
    return arrayResult;
};
console.log(users.reduce(iterationsFilterResult, []));  // [ '諸葛亮', '劉伯溫' ]

11. Array.slice()

slice() 方法將數(shù)組部分的副本返回到新的數(shù)組對(duì)象中。這個(gè)對(duì)象是從 start 到 end 選擇的。需要注意的是，此方法不會(huì)修改原始數(shù)組。此外，如果向其中一個(gè)數(shù)組添加新元素，則另一個(gè)數(shù)組不會(huì)受到影響。

語(yǔ)法

arr.slice([begin[, end]])

slice() 方法的參數(shù)是數(shù)組的開(kāi)始和結(jié)束索引。

• start：是一個(gè)從 0 開(kāi)始的索引，用于開(kāi)始復(fù)制數(shù)組的一部分。如果未定義，start 的默認(rèn)值為 0。如果 start 大于數(shù)組的索引范圍， slice() 方法將返回一個(gè)空數(shù)組。此外，start 還可以使用負(fù)索引。 slice(-1) 提取數(shù)組的最后一個(gè)元素。
• end：可選，如果 slice() 函數(shù)中只有一個(gè)參數(shù)，那就是 start。如果省略， slice() 方法從數(shù)組的末尾開(kāi)始提取。如果 end 大于數(shù)組的長(zhǎng)度，slice() 一直提取到數(shù)組的末尾，只是在它被省略的情況下。end 是提取此索引之前的元素，不包括索引 end 在內(nèi)。因此，索引的最后一個(gè)元素不包含在數(shù)組的副本中。例如，slice(1,3) 提取是數(shù)組的第二個(gè)和第三個(gè)元素，即從數(shù)組的索引 1 開(kāi)始，包含索引 1 的值到索引 3 之間的數(shù)組，但不包含索引為 3 的元素。

返回值

一個(gè)含有被提取元素的新數(shù)組。

實(shí)例

下面實(shí)例代碼是復(fù)制數(shù)組 arrNumbers 從索引 0 開(kāi)始到索引 3 之間的元素，不包含索引為 3 的元素 。

const arrNumbers = [1,3,5,6,7];
console.log(arrNumbers.slice(0, 3)); // [ 1, 3, 5 ]

可以用于復(fù)制數(shù)組，上面示例是slice() 函數(shù)的基本功能，沒(méi)有參數(shù)的數(shù)組復(fù)制原始數(shù)組。有時(shí)，可能想要更新數(shù)組中的某些元素。但是，可能需要保護(hù)原始數(shù)組中的元素，可以使用 slice() 創(chuàng)建原始數(shù)組的淺復(fù)制。

const arrNumbers = [1, 2, 3, 4, 5, 6];
const copyNumbers = arrNumbers.slice();
console.log(copyNumbers); // [ 1, 2, 3, 4, 5, 6 ]
copyNumbers[1] = 0;
console.log(copyNumbers); // [ 1, 0, 3, 4, 5, 6 ]
console.log(arrNumbers); // [ 1, 2, 3, 4, 5, 6 ]

12. Array.splice()

splice() 方法可以從數(shù)組中排除舊值，然后將新值插入數(shù)組。使用 splice() 后，將獲得兩個(gè)數(shù)組，第一個(gè)是排除的數(shù)組，第二個(gè)是編輯過(guò)的新數(shù)組。 需要注意的是，此方法會(huì)改變?cè)瓟?shù)組。

語(yǔ)法

splice(start[, deleteCount[, item1[, item2[, ...]]]]) 方法的參數(shù)是從數(shù)組 start 索引開(kāi)始，刪除 deleteCount 個(gè)元素，返回刪除元素組成的數(shù)組。

• start： 是一個(gè)從 0 開(kāi)始的索引，用于指定修改的開(kāi)始索引位置。如果未定義，start 的默認(rèn)值為 0。如果 start 大于數(shù)組的索引范圍，則從數(shù)組末尾開(kāi)始添加內(nèi)容。此外，start 還可以使用負(fù)索引，則表示從數(shù)組末位開(kāi)始的第幾位（從 -1 計(jì)數(shù)，這意味著 -n 就是倒數(shù)第 n 個(gè)元素，其實(shí)就是等價(jià)于 array.length-n ）

• deleteCount：是可選的，整數(shù)，表示要移除的數(shù)組元素的個(gè)數(shù)。如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于 array.length - start（也就是說(shuō)，如果它大于或者等于 start 之后的所有元素的數(shù)），那么 start 之后數(shù)組的所有元素都會(huì)被刪除。如果 deleteCount 是 0 或者負(fù)數(shù)，則不移除元素，這種情況下，至少應(yīng)添加一個(gè)新元素。

• tem1, item2, ... ：可選，要添加進(jìn)數(shù)組的元素，從 start 位置開(kāi)始。如果不指定，splice() 則將只刪除數(shù)組元素。添加進(jìn)去的元素的位置位于開(kāi)始刪除索引后，結(jié)束于結(jié)束索引前。

返回值

由被刪除的元素組成的一個(gè)數(shù)組。如果只刪除了一個(gè)元素，則返回只包含一個(gè)元素的數(shù)組。如果沒(méi)有刪除元素，則返回空數(shù)組。

實(shí)例

const arrNumbers = [1, 3, 5, 6, 7];
console.log(arrNumbers.splice(0, 3, 8, 9)); // [ 1, 3, 5 ]
console.log(arrNumbers); // [ 8, 9, 6, 7 ]

// 刪除元素
const arrNumbers = [1, 3, 5, 6, 7];
console.log(arrNumbers.splice(0)); // [ 1, 3, 5, 6, 7 ]
console.log(arrNumbers); // [] 

// 在數(shù)組中插入元素
const ColorNames = (start, deleteCount, arr) => {
    arr.splice(start, deleteCount, "Pink", "Black", "Green");
    return arr;
};
// 數(shù)組后
console.log(ColorNames(2, 0, ["Golden", "Brown"])); // [ 'Golden', 'Brown', 'Pink', 'Black', 'Green' ]
// 數(shù)組前
console.log(ColorNames(0, 0, ["Golden", "Brown"])); // [ 'Pink', 'Black', 'Green', 'Golden', 'Brown' ]

13. Array.sort()

.sort() 對(duì)數(shù)組進(jìn)行排序，不考慮其數(shù)據(jù)類(lèi)型：無(wú)論是編號(hào)數(shù)組、字符串?dāng)?shù)組還是復(fù)雜的對(duì)象數(shù)組。需要注意的一點(diǎn)是，.sort() 方法不會(huì)返回新的排序數(shù)組，而是更改原始數(shù)組。

語(yǔ)法

arr.sort([compareFunction])

• compareFunction：可選，用來(lái)指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的 Unicode 位點(diǎn)進(jìn)行排序。
  • firstEl：第一個(gè)用于比較的元素。
  • secondEl：第二個(gè)用于比較的元素。

對(duì)于 compareFunction ，返回值的不同將影響數(shù)組的排序，如下：

• 如果 compareFunction(a, b) 返回 0，則表示 a 排在 b 前面
• 如果compareFunction(a, b) 返回大于 0 的值，則表示 b 排在 a 前面
• 如果 compareFunction(a, b) 返回小于 0 的值 ，則表示 a 排在 b 前面

返回值

排序后的數(shù)組，不會(huì)返回新的排序數(shù)組，而是更改原始數(shù)組。

實(shí)例

const months = ["Nov", "Feb", "Jan", "Dec"];
const sorted = months.sort();

console.log(months); // [ 'Dec', 'Feb', 'Jan', 'Nov' ]
console.log(sorted); // [ 'Dec', 'Feb', 'Jan', 'Nov' ]

總結(jié)

JavaScript 提供了大量不同的處理數(shù)組的方法，本文介紹的內(nèi)容基本囊括了可能用到的數(shù)組方法，而對(duì)于.concat() 方法，幾乎用擴(kuò)展符替代了，如 [...array1,...array2] 。數(shù)組操作是編程世界里面最基本的操作，有必要熟練掌握。