陣列(Arrays) | Javascript

JavaScript 陣列(Arrays)是開發時常見的數據結構。它提供了一種方便的方式來組織和操作資料集合。我們將介紹 JavaScript 陣列(Arrays)的各種常見操作方式以及它們在各種情境中的有效應用。

See the Pen 陣列(Arrays)-Javascript by lenrich (@lenrich) on CodePen.

基本陣列(Arrays)創建:

範例:

"use strict";

// 數字陣列(Arrays)
const numbers = [1, 2, 3, 4, 5];

// 字串陣列(Arrays)
const fruits = ['apple', 'banana', 'orange'];

// 混合類型陣列(Arrays)
const mixedArray = [1, 'two', true, { name: 'Jack' }];

陣列操作方法(Array methods):

JavaScript 陣列(Arrays)配備了各種內置方法，簡化了常見操作。 一些基本方法包括:

  • push()
  • pop()
  • shift()
  • unshift()
  • slice()
  • splice()
"use strict";

const fruits = ['apple', 'banana', 'orange'];

// 在陣列(Arrays)末尾添加元素
fruits.push('葡萄');

// 刪除最後一個元素
const removedFruit = fruits.pop();

// 在開頭添加元素
fruits.unshift('奇異果');

// 刪除第一個元素
const removedFirstFruit = fruits.shift();

遍歷陣列(Arrays):

遍歷陣列(Arrays)是一項基本技能。forEach和map等陣列(Arrays)方法簡化了這個過程。

"use strict";

// 使用forEach遍歷元素
fruits.forEach(fruit => console.log(fruit));

// 使用map基於現有陣列(Arrays)創建新陣列(Arrays)
const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase());

更多範例:

"use strict";

// Friends
const buddy1 = 'Eleanor';
const buddy2 = 'Frank';
const buddy3 = 'Grace';

const buddies = [buddy1, buddy2, buddy3];
console.log(buddies); // [ 'Eleanor', 'Frank', 'Grace' ]

// Years
const birthYears = new Array(1993, 1986, 2001, 2013);
console.log(birthYears); // [ 1993, 1986, 2001, 2013 ]

// Accessing elements
console.log(buddies[0]); // 'Eleanor'
console.log(buddies[1]); // 'Frank'
console.log(buddies[2]); // 'Grace'

// Length of the array
console.log(buddies.length); // 3

// Last element of the array
console.log(buddies[buddies.length - 1]); // 'Grace'

// Modifying array
buddies[2] = 'Henry';
console.log(buddies); // [ 'Eleanor', 'Frank', 'Henry' ]

// Person's information
const givenName = 'Olivia';
const person = [givenName, 'Smith', 2022 - 1993, 'designer', buddies];
console.log(person); // [ 'Olivia', 'Smith', 29, 'designer', [ 'Eleanor', 'Frank', 'Henry' ] ]
console.log(person.length); // 5

// Exercise
const calculateAge = function (birthYear) {
  return 2023 - birthYear;
};

const someBirthYears = [1990, 1967, 2002, 2010, 2018];
const someAges = [calculateAge(someBirthYears[0]), calculateAge(someBirthYears[1]), calculateAge(someBirthYears[2]), calculateAge(someBirthYears[3]), calculateAge(someBirthYears[4])];
console.log(someAges); // [33,56,21,13,5]

結論:

JavaScript 陣列(Arrays)使開發人員能夠高效管理和操作數據。熟練掌握陣列(Arrays)操作和方法對於在開發高效且簡潔的程式碼非常有幫助。