iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
JavaScript

入門JavaScript系列 第 11

陣列應用

  • 分享至 

  • xImage
  •  

JavaScript 陣列在實際開發中有許多應用,以下是一些常見的範例:

1. 陣列的解構賦值

解構賦值允許你從陣列中提取值並賦予變數。

let colors = ['red', 'green', 'blue'];
let [primary, secondary] = colors;

console.log(primary);   // red
console.log(secondary); // green

2. 使用 reduce() 方法進行聚合

reduce() 方法可以用來對陣列中的每個元素進行累加或合併操作。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // 15

3. some()every() 方法進行條件檢查

  • some():檢查陣列中是否有至少一個元素符合條件。
let ages = [15, 22, 30];
let hasAdult = ages.some(age => age >= 18);

console.log(hasAdult); // true
  • every():檢查陣列中是否所有元素都符合條件。
let allAdults = ages.every(age => age >= 18);

console.log(allAdults); // false

4. 陣列的串接

你可以使用 concat() 方法或擴展運算符來合併多個陣列。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combined = array1.concat(array2); // [1, 2, 3, 4, 5, 6]
// 或者使用擴展運算符
let combined2 = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]

5. 陣列的分組與計數

使用 reduce() 方法來對陣列元素進行分組和計數。

let fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
let fruitCount = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});

console.log(fruitCount); // { apple: 2, banana: 2, orange: 1 }

6. 創建陣列的切片

使用 slice() 方法可以從原陣列中創建一個子陣列。

let numbers = [1, 2, 3, 4, 5];
let sliced = numbers.slice(1, 4); // [2, 3, 4]

console.log(sliced);

7. 找出陣列中的唯一值

使用 filter()indexOf() 方法可以找出陣列中的唯一值。

let numbers = [1, 2, 3, 1, 2, 4];
let uniqueNumbers = numbers.filter((value, index, self) => {
    return self.indexOf(value) === index;
});

console.log(uniqueNumbers); // [1, 2, 3, 4]

8. 使用 splice() 進行刪除和替換

splice() 方法可以用來刪除、替換或添加陣列元素。

let array = [1, 2, 3, 4, 5];
array.splice(2, 1, 10); // 刪除索引 2 的元素,並插入 10
console.log(array); // [1, 2, 10, 4, 5]

9. 使用 fill() 填充陣列

fill() 方法可以用來用固定的值填充陣列。

let filledArray = new Array(5).fill(0); // [0, 0, 0, 0, 0]

10. 合併和轉換為字符串

使用 join() 方法將陣列轉換為字符串。

let fruits = ['apple', 'banana', 'orange'];
let fruitString = fruits.join(', '); // 'apple, banana, orange'

11. 性能考量

對於大量數據的操作,考慮使用 Typed Arrays,這是一種可以在性能上比普通陣列更快的陣列類型,特別適合用於處理二進制數據。

12. 陣列的不可變性

使用 Object.freeze() 方法使陣列不可變,防止數據被修改。

const immutableArray = Object.freeze([1, 2, 3]);
// immutableArray[0] = 10; // 無法修改
console.log(immutableArray); // [1, 2, 3]

這些應用示範了 JavaScript 陣列的強大功能,透過適當的方法和技巧能有效地處理和操作數據,提升開發效率。


上一篇
陣列
下一篇
物件
系列文
入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言