一篇文章徹底掌握 JavaScript 數組操做

做者：Bolaji Ayodeji

翻譯：瘋狂的技術宅

原文：https://www.freecodecamp.org/...

未經容許嚴禁轉載

JavaScript 中的數組是什麼？

在開始以前，你須要先了解數組的真正含義。

在 JavaScript 中，數組是一個用於存儲不一樣數據類型的變量。它將不一樣的元素存儲在一個盒子中，供之後使用。

聲明一個數組：

let myBox = [];   // JS中的初始化數組聲明

數組中能夠包含多種數據類型

let myBox = ['hello', 1, 2, 3, true, 'hi'];

---

能夠用被稱爲方法的多個操做來操做數組。這些方法容許咱們對數組進行添加、刪除、修改擠執行更多操做。

我會在本文中向你展現一其中的一部分，讓咱們繼續：

注意：本文中使用了箭頭功能，若是你不知道這意味着什麼，你應該在這裏閱讀。箭頭功能是ES6的功能。

---

toString()

toString() 方法可以將數組轉換爲以逗號分隔的字符串。

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

join()

The JavaScript join() method combines all array elements into a string.
JavaScript 的 join() 方法將全部數組元素組合成一個字符串。

它相似於 toString() 方法，但在這裏你能夠指定分隔符而不是默認的逗號。

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

concat

此方法能夠將兩個數組組合在一塊兒，或者向數組中添加更多的元素項，而後返回一個新數組。

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

push()

此方法將元素項添加到數組的末尾，並修改原始數組。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.push('safari', 'opera mini');
console.log(browsers); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

pop()

此方法刪除數組的最後一項並返回。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.pop(); // "edge"
console.log(browsers); // ["chrome", "firefox"]

shift()

此方法刪除數組的第一項，並將它返回。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.shift(); // "chrome"
console.log(browsers); // ["firefox", "edge"]

unshift()

此方法將一個項添加到數組的開頭，並修改原始數組。

let browsers = ['chrome', 'firefox', 'edge'];
browsers.unshift('safari');
console.log(browsers); //  ["safari", "chrome", "firefox", "edge"]

你還能夠一次添加多個項目

splice()

此方法經過添加、刪除和插入元素來修改數組。

語法是：

array.splice(index[, deleteCount, element1, ..., elementN])

• Index 這裏是刪除數組中元素的起點
• deleteCount 是要從該索引中刪除的元素數
• element1, …, elementN 是要添加的元素

刪除項目

運行splice()後，它返回刪除項目以後的數組，而且被刪除的項目將其從原始數組中刪除。

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

注意: deleteCount 不包括範圍內的最後一個索引。

若是沒有聲明第二個參數，則將會從數組中刪除從給定索引開始的全部元素：

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

在下一個例子中，咱們將從數組中刪除 3 個元素，並用更多的項去替換它們：

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

添加項目

要添加項目，咱們須要將 deleteCount 設置爲零

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

slice()

此方法與 splice() 有點像，可是有很大不一樣。它返回子數組而不是子字符串。

此方法複製數組的給定部分，並將複製的部分做爲新數組返回。 它不會改變原始數組。

語法是：

array.slice(start, end)

這是一個簡單的例子：

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) //返回原始數組

使用 slice() 的最好方式是將它分配給一個新變量。

let message = 'congratulations'
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // 返回 "congrats!"

split()

此方法用於字符串。它將一個字符串分紅子串並將它們做爲數組返回。

語法：string.split(separator, limit);

• 這裏的 separator 定義瞭如何分割字符串。
• 決定了要分割成幾份

let firstName = 'Bolaji';
// return the string as an array
firstName.split() // ["Bolaji"]

另外一個例子：

let firstName = 'hello, my name is bolaji, I am a dev.';
firstName.split(',', 2); // ["hello", " my name is bolaji"]

注意：若是咱們聲明一個空數組，好比 firstName.split('');，那麼字符串中的每一個項目將都會被分割爲子字符串：

let firstName = 'Bolaji';
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

indexOf()

此方法在數組中查找項目，若是它被找到就返回索引，不然返回 -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf()

這種方法的工做方式與 indexOf() 相同，只是它從右到左工做。它返回找到的最後一個索引

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

filter()

若是數組的項目符合某個條件，則此方法將會建立一個新數組。

語法是：

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

例：經過區號檢查來自 Nigeria 的用戶

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

map()

此方法經過操做數組中的值來建立新數組。

例：顯示頁面上的用戶名。 （基本好友列表顯示）

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
    return '<li>' + item + '</li>';
})
const render = '<ul>' + display.join('') + '</ul>';
document.write(render);

另外一個例子：

// 將美圓符號添加到數字前面
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

reduce()

此方法適用於計算總計的值。

reduce() 用於計算數組中的單個值。

let value = array.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

例：

要遍歷數組並對數組中的全部數字求和，可使用 for 循環。

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
    sum += n;
}
console.log(sum);

如下是用 reduce() 實現相同g功能的方法

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce( (accummulator, value) =>
    accummulator + value
    , 0);
console.log(sum); // 970

若是省略初始值，默認狀況下總數將從數組中的第一項開始計算。

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

下面的代碼段顯示了 reduce() 方法如何與全部四個參數一塊兒使用。

來源：MDN Docs

有關 reduce() 的各類用法的更多說明能夠在 這裏 和 這裏 找到。

forEach()

此方法適用於迭代數組。

它把函數做用於數組中的全部項

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

迭代無需不傳遞索引參數便可完成

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

every()

此方法檢查數組中的全部項是否都符合指定的條件，若是符合則返回 true，不然返回 false。

檢查全部數字是否爲正

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

some()

此方法檢查數組中的項（一個或多個）是否符合指定的條件，若是符合則返回true，不然返回false。

檢查至少有一個數字是否爲正

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

includes()

此方法檢查數組是否包含某個項目。它相似於 .some()，但它不是要查找符合的特定條件，而是檢查數組是否包含特定項。

let users = ['paddy', 'zaddy', 'faddy', 'baddy'];
users.includes('baddy'); // returns true

若是找不到該項，則返回 false

---

關於數組方法還有有更多，這只是其中的一部分。此外，還有大量能夠在數組上執行的其餘操做，請經過查看 MDN 文檔 來得到更深刻的信息。

總結

• toString() - 將數組轉換爲以逗號分隔的字符串。
• join() - 將全部數組元素組合成一個字符串。
• concat - 將兩個數組組合在一塊兒，或者將更多項添加到數組中，而後返回一個新數組。
• push() - 將項目添加到數組的末尾，改變原始數組。
• pop() - 刪除數組的最後一項並返回
• shift() - 刪除數組的第一項並返回
• unshift() - 將一個項添加到數組的開頭，改變原始數組。
• splice() - 經過添加，刪除和插入元素修改一個數組。
• slice() - 複製數組的給定部分，並將複製的部分做爲新數組返回。 它不會改變原始數組。
• split() - 將一個字符串分紅子串並將它們做爲數組返回。
• indexOf() - 查找數組中的項目並返回其索引，若是沒找到則返回-1
• lastIndexOf() - 從右到左查找項目並返回找到的最後一個索引。
• filter() - 若是數組的項目符合某個條件，則建立一個新數組。
• map() - 經過操縱數組中的值來建立一個新數組。
• reduce() - 根據數組中的單個值進行計算。
• forEach() - 遍歷數組，將函數做用於數組中的全部項
• every() - 檢查數組中的全部項是否都符合指定的條件，若是符合則返回 true，不然返回 false。
• some() - 檢查數組中的項（一個或多個）是否符合指定的條件，若是符合則返回 true，不然返回 false。
• includes() - 檢查數組是否包含某個項目。

---

數組是強大的，經過相關的方法能夠編寫實用的算法。

讓咱們寫一個小函數，一個將文章標題轉換爲 urlSlug 的函數。

URL slug是你網站上特定網頁或文章的確切地址。

當你在 Freecodecamp News 或任何其餘博客平臺上撰寫文章時，你的文章標題會自動轉換爲一個 slug，其中刪除了空格，字符變爲小寫，標題中的每一個單詞都用連字符分隔。

這是一個基本功能，能夠用咱們剛纔學到的一些方法來作到這一點。

const url = 'https://bolajiayodeji.com/'
const urlSlug = (postTitle) => {
let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle = 'Introduction to Chrome Lighthouse'
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

在 postUrl 中，咱們先將字符串轉換爲小寫，而後用 split() 方法將字符串轉換爲子字符串並將其返回到數組中

["introduction", "to", "chrome", "lighthouse"]

在 post slug 中，用連字符鏈接返回的數組，而後將它與類別字符串和主 url 鏈接到一塊兒。

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

就是這樣，很是簡單，對吧？😄

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...