理解 JavaScript 中的數組-js教程-PHP中文網

Understanding Arrays in JavaScript

JavaScript 中的陣列

在 JavaScript 中，數組是一種特殊類型的對象，用於儲存有序的資料集合。陣列可以保存不同資料類型的多個值，包括數字、字串、對象，甚至其他陣列。

1.建立陣列

A.使用陣列文字

建立陣列最常見的方法是使用方括號 []。

範例：

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

登入後複製

B.使用 new Array() 建構子

此方法建立一個空數組或具有指定元素的陣列。

範例：

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

登入後複製

2.存取陣列元素

使用從零開始的索引存取陣列元素。

範例：

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

登入後複製

更新元素：

const numbers = new Array(5); // Creates an array with 5 empty slots
console.log(numbers.length); // Output: 5
const colors = new Array("Red", "Green", "Blue");
console.log(colors); // Output: ["Red", "Green", "Blue"]

登入後複製

3.常用陣列方法

A.新增和刪除元素

push()：將一個元素加入陣列末尾。

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
console.log(fruits[2]); // Output: Cherry

登入後複製

pop()：刪除最後一個元素。

fruits[1] = "Blueberry";
console.log(fruits); // Output: ["Apple", "Blueberry", "Cherry"]

登入後複製

unshift()：在開頭加入一個元素。

fruits.push("Mango");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Mango"]

登入後複製

shift()：刪除第一個元素。

fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]

登入後複製

B.尋找元素

indexOf()：找出元素的索引。

fruits.unshift("Strawberry");
console.log(fruits); // Output: ["Strawberry", "Apple", "Banana"]

登入後複製

includes()：檢查陣列中是否有元素。

fruits.shift();
console.log(fruits); // Output: ["Apple", "Banana"]

登入後複製

C.轉換數組

map()：透過轉換每個元素來建立一個新陣列。

console.log(fruits.indexOf("Banana")); // Output: 1

登入後複製

filter()：使用通過測試的元素建立一個新陣列。

console.log(fruits.includes("Cherry")); // Output: false

登入後複製

reduce()：將陣列縮減為單一值。

const numbers = [1, 2, 3];
const squared = numbers.map((num) => num ** 2);
console.log(squared); // Output: [1, 4, 9]

登入後複製

D.組合切片數組

concat()：組合兩個或多個陣列。

const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2]

登入後複製

slice()：傳回陣列的一部分。

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 6

登入後複製

splice()：從陣列中新增或刪除元素。

const moreFruits = ["Peach", "Grape"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // Output: ["Apple", "Banana", "Peach", "Grape"]

登入後複製

4.迭代數組

for 迴圈：

const sliced = allFruits.slice(1, 3);
console.log(sliced); // Output: ["Banana", "Peach"]

登入後複製

for...of 循環：

allFruits.splice(1, 1, "Orange");
console.log(allFruits); // Output: ["Apple", "Orange", "Peach", "Grape"]

登入後複製

forEach() 方法：

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

登入後複製

5.多維數組

陣列可以包含其他數組，建立矩陣或多維結構。

範例：

for (let fruit of fruits) {
  console.log(fruit);
}

登入後複製

6.陣列排序與反轉

sort()：對陣列進行就地排序。

fruits.forEach((fruit) => console.log(fruit));

登入後複製

reverse()：反轉元素的順序。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // Output: 6

登入後複製

7.陣列解構

解構可讓您將陣列中的值提取到變數中。

範例：

const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

登入後複製

8.總結

陣列用於在 JavaScript 中儲存有序的資料集合。
使用索引存取元素。
使用push()、map()、filter()和reduce()等陣列方法進行運算和轉換。
陣列用途廣泛，對於處理 JavaScript 中的動態資料集合至關重要。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是理解 JavaScript 中的數組的詳細內容。更多資訊請關注PHP中文網其他相關文章！