JavaScript Array 遍歷與轉換方法

發表於 分類於
本文介紹 JavaScript 陣列的遍歷與轉換方法，提供實用範例，幫助開發者高效操作和管理陣列數據。

forEach

使用 forEach 方法遍歷陣列，對每個元素執行指定的函數。

1
2
3
4
5
6
7
8
let data = [1, 2, 3];
data.forEach(function(item, index, array) {
    console.log(item, index, array);
    // 結果如下
    // 1, 0, [1, 2, 3]
    // 2, 1, [1, 2, 3]
    // 3, 2, [1, 2, 3]
});

map

  1. map 方法能將原始陣列運算後，重新組合並回傳一個新陣列。
  2. 不會影響原本的陣列。
  3. 若未使用 return，則會回傳 undefined。
1
2
3
4
5
6
let data = [1, 2, 3];
let newData = data.map(function(item) {
    return item * item;
});
console.log(data); // [1, 2, 3]
console.log(newData); // [1, 4, 9]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let data = [1, 5, 10, 8, 4, 2];
let newData = data.map(function(item) {
    return item > 5;
});

// 組合物件
let newData1 = data.map(function(item) {
    let obj = {};
    obj.checkNum = item > 5;
    return obj;
});
console.log(data); // [1, 5, 10, 8, 4, 2]
console.log(newData); // [false, false, true, true, false, false]
console.log(newData1); // [{…}, {…}, {…}, {…}, {…}, {…}]

forEach 與 map 差別

1
2
3
4
5
6
7
let data = [1, 2, 3];
let newData = data.forEach(function(item) {
    return item * item;
});
console.log(data); // [1, 2, 3]
// forEach 不會返回新陣列，故 newData 為 undefined
console.log(newData); // undefined

filter

使用 filter 方法篩選出符合條件的元素，並回傳新陣列。

1
2
3
4
5
6
let data = [1, 4, 10, 15];
let newData = data.filter(function(item) {
    return item > 5;
});
console.log(data); // [1, 4, 10, 15]
console.log(newData); // [10, 15]

範例：篩選及格的學生。

1
2
3
4
5
6
7
8
9
10
11
12
let scoreData = [
    { name: '阿呆', score: 100 },
    { name: '阿美', score: 61 },
    { name: '阿新', score: 40 },
];

// 篩選及格的人
let filterScore = scoreData.filter(function(item) {
    return item.score >= 60;
});
console.log(filterScore);
// (2) [{…}, {…}]

find

使用 find 方法尋找第一筆符合條件的元素。

1
2
3
4
5
6
let data = [1, 4, 10, 15];
let newData = data.find(function(item) {
    return item > 5;
});
console.log(data); // [1, 4, 10, 15]
console.log(newData); // 10

findIndex

使用 findIndex 方法尋找第一筆符合條件的元素的索引值。

1
2
3
4
5
6
let data = [10, 20, 30];
let newData = data.findIndex(function(item) {
    return item >= 15;
});
console.log(data); // [10, 20, 30]
console.log(newData); // 1

reduce

使用 reduce 方法將陣列內數值進行累加。

1
2
3
4
5
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((a, b) => {
    return a + b;
}, 0);
console.log(total); // 15

at

使用 at 方法尋找陣列位置資料。

1
2
3
const array1 = [5, 12, 8, 130, 44, 66, 99, 10, 50];
console.log(array1.at(-1)); // 50
console.log(array1.at(-3)); // 99

concat

使用 concat 方法合併兩個或多個陣列。

1
2
3
4
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3); // ["a", "b", "c", "d", "e", "f"]

join

使用 join 方法將陣列元素合併為字串。

1
2
3
4
5
6
7
8
const arr = ['nick', 'chang'];
console.log(arr.join(' ')); // nick chang

const obj = [{ id: 1 }, { id: 2 }];
console.log(obj.join(' ')); // [object Object] [object Object]

const integrated = [1, 2, 'asd', '!@#df', [123, 999, { id: 100 }]];
console.log(integrated.join('-')); // 1-2-asd-!@#df-123,999,[object Object]

flat()

flat() 方法用於將多維陣列展平為一個單層陣列。它接受一個可選的參數，指定展平的層數。

基本用法

1
2
3
var arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); 
// 輸出: [1, 2, 3, 4]

展平一層

1
2
3
var arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat());
// 輸出: [1, 2, 3, 4, [5, 6]]

展平多層

1
2
3
var arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2));
// 輸出: [1, 2, 3, 4, 5, 6]

展平至任意深度

使用 Infinity 作為參數，可以展開任意深度的巢狀陣列：

1
2
3
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity));
// 輸出: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

處理複雜結構

1
2
3
var arr5 = [1, 2, 3, 4, [1, 2, 3, [1, 2, 3, [1, 2, 3]]], 5, ["string", { type: "物件" }]];
console.log(arr5.flat(Infinity));
// 輸出: [1, 2, 3, 4, 1, 2, 3, 1, 2, 3, 1, 2, 3, 5, "string", { type: "物件" }];

移除空項

flat() 方法還可以用來移除陣列中的空項：

1
2
3
var arr6 = [1, 2, , 4, 5];
console.log(arr6.flat());
// 輸出: [1, 2, 4, 5]