常見操作方法

在 上篇 陣列相關文章中我們已經大致了解簡單的操作方法，但其實在 JavaScript 陣列中還有更多元的方法可以使用，不過有些牽涉到 Function 的概念，所以在文章順序上可能怪怪的
話不多說，接下來就開始正式介紹常見的陣列操作啦~

回傳符合條件的元素或索引

find()

find() 會回傳第一個符合判斷條件的元素值，或沒有符合條件的元素則回傳 undefined，只會回傳不會改變原始陣列。
範例：

let array = [1, 3, 2];
let ans = array.find(item => item > 1);
console.log(ans); // 3

findIndex()

findIndex() 會回傳第一個符合判斷條件的元素索引值，或沒有符合條件的元素則回傳 -1，只會回傳不會改變原始陣列。
範例：

let array = [1, 3, 2];
let ans = array.findIndex(item => item > 1);
console.log(ans); // 1 (第一個符合條件的元素為 3， index 為 1)

filter()

filter() 會將陣列中每一項帶入函式內做篩選判斷，若元素符合條件則會回傳成一個新的陣列，不會改變原始陣列。
範例：

let array = [1, 3, 2];
let ans = array.filter(item => item > 1);
console.log(ans); // [3, 2]

迴圈處理

forEach()

forEach() 會將陣列內的每個元素傳入並執行給定的函式一次，沒有回傳值。簡單來說有點像迴圈的概念，自動幫你遍歷陣列中的每一項，讓你做操作。forEach() 的函式中有三個參數，第一個必要參數是 該項的值，後兩項參數則分別為 該項的索引值 及 原始陣列。
範例：

let array = [1, 3, 2];
// 印出每項的值
array.forEach((item, index, array) => {
    console.log(item); // 執行三次分別為 1, 3, 2
});

在實際開發中我們也很常使用 forEach 進行陣列的運算：

let array = [1, 3, 2];

// 陣列加總
let total = 0; // 初始化總和為 0
array.forEach((item, index, array) => {
    console.log(item); // 陣列每項的值
    total += item; // 將值加到 total 中
});
console.log(total); // 6

// 將陣列每項值 +1
array.forEach((item, index, array) => {
    console.log(item); // 陣列每項的值
    console.log(array[index]); // array[index] 也可以取出每項的值
    array[index] = item + 1; // 指定陣列第 index 索引值比原本 +1
});
console.log(array); // [2, 4, 3] (原始陣列每項 +1)

map()

map() 會回傳由 callback function 運算後的結果並組成新的陣列，簡單來說 map 的功能跟 foreach 蠻像的，都是遍歷一遍陣列的項目，也同樣也都有 值、索引值、原始陣列 三個參數，只是 map 需要有 return 值來組成新的陣列。
範例：

let array1 = [1, 2, 3];
// 將陣列 array1 中每一項值 +10 放到陣列 array2 中

// 普通函式
let array2 = array1.map(function(item) {
    return item + 10; // 將每一項值 +10
});
console.log(array2); // [11, 12, 13]

// 箭頭函式
let array2 = array1.map( item => { // 使用箭頭函式時若只有一個參數可以省略括號，若多個參數則要寫成 (item, index, array) => {}
    return item + 10; // 將每一項值 +10
});
console.log(array2); // [11, 12, 13]

陣列拼接、轉換、擷取

join()

join() 語法為 array.join();，會將陣列中所有元素值藉由指定的字串或字符合併在一起變成字串，若沒有指定字符預設為「逗號」。
範例：

let array = [1, 2, 3];
// 若不指定則使用逗號連接
console.log(array.join()); // 1,2,3

// 指定字符連接
console.log(array.join('-')); // 1-2-3
console.log(array.join('和')); // 1和2和3

toString()

陣列一樣可以使用 toString 將其轉為字串型態，但在使用上 join() 的彈性較高。

concat()

concat() 語法為 array.concat(array2);，會合併兩個或以上的陣列及值並回傳成一個新的陣列。
範例：

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = ['hi', 'amy'];
console.log(array1.concat(array2)); // [1, 2, 3, 4, 5, 6]
console.log(array1.concat(array2, array3)); // [1, 2, 3, 4, 5, 6, 'hi', 'amy']
console.log(array1.concat('1', 22)); // [1, 2, 3, '1', 22]

slice()

slice() 的語法為 array.slice(index1, index2) 會擷取陣列索引值 index1 到 index2 的內容成為新的陣列，而若結束索引值為負數，則是「倒數」的意思，array.slice(1, -1) 即為「擷取原始陣列索引 1 到 "倒數" 的索引 1 (倒數第二項) 」並組成新陣列。
範例：

let array = [1, 2, 3, 'hi', '123'];
console.log(array.slice(1, 3)); // [2, 3]
console.log(array.slice(1, -1)); // [2, 3, 'hi']

上一篇：[快速入門前端 55] JavaScript：Global Scope 全域和 Local Scope 區域
下一篇：[快速入門前端 57] JavaScript：常見的內建函式 (1) Math
系列文章列表：[快速入門前端] 系列文章索引列表