JS學習筆記#7 | 陣列（Array）

Hồ Xuân Hoàng Dương on Unsplash

陣列（Array）是 JavaScript 中用來儲存一組有序資料的集合。

陣列可以包含各種資料型別的值，例如數字、字串、布林值，甚至其他陣列或物件。

1. 宣告陣列的方法

• 使用中括號 []

  let fruits = ["蘋果", "香蕉", "橘子"];

• 使用 Array 建構函式

  let numbers = new Array(1, 2, 3);

2. 陣列的特性

• 有序性：陣列中的每個元素都有一個索引，從 0 開始計數。例如: 第一個元素的索引是 0，第二個是 1，依此類推。
• 長度屬性 length：可以取得陣列的長度。

  let items = [1, 2, 3, 4];
  console.log(items.length); // 輸出：4

3. 訪問與修改陣列元素

• 訪問元素：使用中括號和索引。

  let colors = ["紅", "藍", "綠"];
  console.log(colors[0]); // 輸出："紅"

• 修改元素：直接使用索引賦新值。

  let colors = ["紅", "藍", "綠"];
  colors[1] = "黃色"; // 將 "藍" 修改為 "黃色"
  console.log(colors); // 輸出：["紅", "黃色", "綠"]

4. 陣列方法

• push()：將元素加到陣列末端。

  let arr = ['a', 'b', 'c'];
  const count = arr.push('d');
  console.log(count); // 返回：4
  console.log(arr);   // ["a", "b", "c", "d"]

• pop()：移除並回傳陣列最後一個元素。

  let arr = ['a', 'b', 'c'];
  console.log(arr.pop());  // 輸出："c"
  console.log(arr);        // 輸出：["a", "b"]

• shift()：移除並回傳陣列第一個元素。

  let arr = ['a', 'b', 'c'];
  const firstElement = arr.shift();
  console.log(firstElement);  // 輸出："a"
  console.log(arr);           // 輸出：["b", "c"]

• unshift()：將元素加到陣列開頭。

  let arr = ['a', 'b', 'c'];
  console.log(arr.unshift('d', 'f')); // 返回：5
  console.log(arr);  // 輸出：["d", "f", "a", "b", "c"]

• forEach()：對陣列中的每個元素執行提供的函式。

  let numbers = [1, 2, 3]; 
  numbers.forEach(num => console.log(num)); 
  // 輸出：1 
  // 輸出：2 
  // 輸出：3

• map()：對陣列中的每個元素執行提供的函式並回傳一個新陣列。

  let numbers = [1, 2, 3];
  let doubled = numbers.map(num => num * 2);
  console.log(numbers) // [1,2,3]
  console.log(doubled) // [2, 4, 6]

• filter()：根據條件過濾元素並回傳一個新陣列。

  let numbers = [1, 2, 3];
  let evenNumbers = numbers.filter(num => num % 2 === 0);
  console.log(numbers) // [1,2,3]
  console.log(evenNumbers) // [2]

• concat()：合併陣列。

  let arr1 = [1, 2];
  let arr2 = [3, 4];
  let combined = arr1.concat(arr2); 
  console.log(combined) // [1, 2, 3, 4]

• includes()：檢查陣列中是否包含指定元素，回傳 true 或 false。

  const pets = ['cat', 'dog', 'bat'];
  console.log(pets.includes("cat")); // 輸出：true

• find()：找出陣列中符合條件的第一個元素，並回傳該元素的值。如果沒有符合條件的元素，則回傳 undefined。

let numbers = [10, 20, 30, 40, 50];
let foundNumber = numbers.find(num => num > 30); 
console.log(foundNumber); // 輸出：40

let notFound = numbers.find(num => num > 100);
console.log(notFound); // 輸出：undefined

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];
let user = users.find(u => u.id === 2);
console.log(user); // 輸出: { id: 2, name: 'Bob' }

• some()：檢查陣列中是否至少有一個元素符合條件，回傳 true 或 false。

let numbers = [1, 3, 5, 8, 9];
let hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // 輸出：true

let allOdd = numbers.some(num => num % 2 === 0);
console.log(allOdd); // 輸出：true

let products = [
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Orange', price: 1.5 }
];
let hasExpensive = products.some(product => product.price > 2);
console.log(hasExpensive); // 輸出: false

• every()：檢查陣列中是否所有元素都符合條件，回傳 true 或 false。

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // 輸出：true

let allGreaterThanZero = numbers.every(num => num > 0);
console.log(allGreaterThanZero); // 輸出：true

let numbers2 = [2, 4, 6, 8, 10, 1];
let allEven2 = numbers2.every(num => num % 2 === 0);
console.log(allEven2); // 輸出：false

let ages = [25, 30, 22, 28, 35];
let allAdults = ages.every(age => age >= 18);
console.log(allAdults); // 輸出: true

• sort()：對陣列的元素進行排序，並回傳排序後的陣列。

// 字串排序​
let fruits = ["banana", "apple", "orange", "grape"]; 
fruits.sort(); 
console.log(fruits); // 輸出：["apple", "banana", "grape", "orange"]

//數字排序 (使用比較函式)
let numbers = [10, 2, 1, 25];
// 升序排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 輸出：[1, 2, 10, 25]
// 降序排序
numbers.sort((a, b) => b - a);
console.log(numbers); // 輸出：[25, 10, 2, 1]

// 物件排序
let products = [
    { name: "Laptop", price: 1200 },
    { name: "Tablet", price: 300 },
    { name: "Phone", price: 800 },
];
// 按照價格升序排序
products.sort((a, b) => a.price - b.price);
console.log(products); 
// 輸出：
// [
//  { name: 'Tablet', price: 300 },
//  { name: 'Phone', price: 800 },
//  { name: 'Laptop', price: 1200 }
// ]

• • .sort() 會直接修改原始陣列。如果你不希望修改原始陣列，可以使用 slice() 複製一份再排序。