JavaScript Array 常用操作大補帖
備註
Array 是 JS 中最常用的資料結構之一。本篇文章整理 JS 中常見的 Array methods,以便忘記語法時快速查詢。
新增與移除方法
push()
- 在陣列末端添加一個或多個元素,並返回陣列的新長度
- 範例:
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]
- 語法:
arr.push(element1[, ...[, elementN]])
- 回傳值:呼叫此方法之物件的新
length
屬性值。
pop()
- 從陣列末端移除最後一個元素並返回該元素的值
- 範例:
const animals = ['pigs', 'goats', 'sheep', 'cows'];
const lastAnimal = animals.pop();
console.log(lastAnimal);
// 預期輸出: "cows"
console.log(animals);
// 預期輸出: Array ["pigs", "goats", "sheep"]
- 語法:
arr.pop()
- 回傳值:被移除的元素值,若陣列為空則為 undefined。
shift()
- 從陣列開頭移除第一個元素並返回該元素的值
- 範例:
const animals = ['pigs', 'goats', 'sheep'];
const firstAnimal = animals.shift();
console.log(firstAnimal);
// 預期輸出: "pigs"
console.log(animals);
// 預期輸出: Array ["goats", "sheep"]
- 語法:
arr.shift()
- 回傳值:被移除的元素值,若陣列為空則為 undefined。
unshift()
- 在陣列開頭添加一個或多個元素,並返回陣列的新長度
- 範例:
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.unshift('cows');
console.log(count);
// 預期輸出: 4
console.log(animals);
// 預期輸出: Array ["cows", "pigs", "goats", "sheep"]
- 語法:
arr.unshift(element1[, ...[, elementN]])
- 回傳值:呼叫此方法之陣列的新
length
屬性值。
splice()
- 在指定位置插入或移除元素並返回被移除的元素
- 範例:
const months = ['January', 'February', 'March', 'April', 'May'];
const removedMonths = months.splice(2, 2, 'June', 'July');
console.log(removedMonths);
// 預期輸出: Array ["March", "April"]
console.log(months);
// 預期輸出: Array ["January", "February", "June", "July", "May"]
- 語法:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
- 回傳值:包含被移除元素的陣列。如果沒有移除任何元素,則返回空陣列。
存取方法
indexOf()
- 回傳指定元素在陣列中第一個出現的索引,若不存在則回傳 -1
- 範例:
const fruits = ['apple', 'banana', 'orange', 'apple'];
console.log(fruits.indexOf('apple'));
// 預期輸出: 0
console.log(fruits.indexOf('grape'));
// 預期輸出: -1
- 語法:
arr.indexOf(searchElement[, fromIndex])
- 回傳值:指定元素的索引值,若不存在則回傳 -1。
slice()
- 回傳指定範圍的陣列元素組成的新陣列
- 範例:
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits);
// 預期輸出: Array ["banana", "orange", "grape"]
console.log(fruits);
// 預期輸出: Array ["apple", "banana", "orange", "grape", "kiwi"]
- 語法:
arr.slice([begin[, end]])
- 回傳值:一個包含提取之元素的新陣列。
遍歷與迭代方法
forEach()
- 迭代陣列並執行指定操作
- 範例:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number * 2);
});
// 預期輸出:
// 2
// 4
// 6
// 8
// 10
- 語法:
arr.forEach(function callback(currentValue[, index[, array]]) {
//your iterator
}[, thisArg]);
- 回傳值:undefined。forEach() 方法是用來遍歷陣列,並對每個元素執行指定的回調函式,但並不會返回新的陣列。
搜尋方法
filter()
- 回傳符合條件的元素組成的新陣列
- 範例:
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
return number % 2 === 0;
});
console.log(evenNumbers);
// 預期輸出: Array [2, 4]
- 語法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
- 回傳值:一個新的陣列,包含符合條件的元素。