陣列進階操作

從原陣列為基底建立新陣列 map

map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果。

操作方式

array.map(function(currentValue, index, arr), thisValue)

陣列.filter(函式運作(當前值、索引值、陣列本身),該筆資料)

圖示範例

將可頌全部更換為三明治	將三明治全部更換為甜甜圈

實際範例

const numbers = [1, 2, 4, 9, 16, 25];
console.log(numbers);
// 輸出：[1, 2, 4, 9, 16, 25]

// 取平方根
const sqrtNumbers = numbers.map((element) => Math.sqrt(element));
// const sqrtNumbers = numbers.map(Math.sqrt);
console.log(sqrtNumbers);
// 輸出：[1, 1.4142135623730951, 2, 3, 4, 5]

// 轉換為字串
const numbersToString = numbers.map((element) => element.toString());
// const numbersToString = numbers.map(String);
console.log(numbersToString);
// 輸出：['1', '2', '4', '9', '16', '25']

// 使用自建立函式操作
function addTen(num) {
  return num + 10;
}

const newArr = numbers.map((element) => addTen(element));
// const newArr = numbers.map(addTen);
console.log(newArr);
// 輸出：[11, 12, 14, 19, 26, 35]

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.map((e) => e.rating > 8));
// 輸出：[true, true, true, false]

console.log(boardGame.map((e) => (e => e.title + '中文版')));
// 輸出：['黯淡港灣中文版', '瘟疫危機中文版', '精靈島中文版', '拼布對決中文版']

console.log(boardGame.map((e) => `<p>標題：${e.title}</p>`));
// 輸出：['<p>標題：黯淡港灣中文版</p>', '<p>標題：瘟疫危機中文版</p>', '<p>標題：精靈島中文版</p>', '<p>標題：拼布對決中文版</p>']

// 寫入到頁面中
document.write(boardGame.map((e) => `<p>標題：${e.title}</p>`).join(''));

過濾陣列中的內容 filter

操作方式

array.filter(function(currentValue, index, arr), thisValue)

陣列.filter(函式運作(當前值、索引值、陣列本身),該筆資料)

圖示範例

過濾選出陣列中的三明治	過濾選出陣列中的可頌

實際範例

const ages = [32, 33, 16, 40];

console.log(ages.filter((e) => e > 20));
// 輸出： [32, 33, 40]

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.filter((e) => e.rating > 8));

// 輸出：
// (3) [{…}, {…}, {…}]
// 0: {title: '黯淡港灣', rating: 8.4}
// 1: {title: '瘟疫危機', rating: 8.4}
// 2: {title: '精靈島', rating: 8.1}
// length: 3

找尋陣列中的內容 find

圖示範例

找尋陣列中的第一個三明治	找尋陣列中的第一個可頌

實際範例

const ages = [32, 33, 16, 40];

console.log(ages.find((e) => e > 32));
// 輸出： 33

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.find((e) => e.rating < 8.2));
// 輸出：{title: '精靈島', rating: 8.1}

透過運算找尋陣列中的索引(index) findIndex

圖示範例

找尋陣列中的第一個三明治的索引	找尋陣列中的第一個可頌的索引

操作方式

array.findIndex(function(currentValue, index, arr), thisValue)

實際範例

const ages = [32, 33, 16, 40];

console.log(ages.findIndex((e) => e > 32));
// 輸出： 1

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.findIndex((e) => e.rating < 8.2));
// 輸出：2

確認陣列中是否有符合的值 some

圖示範例

確認陣列中是否有可頌	確認陣列中是否有甜甜圈

操作方式

array.some(function(value, index, arr), this)

實際範例

const ages = [32, 33, 16, 40];

console.log(ages.some((e) => e > 50));
// 輸出： false

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.some((e) => e.rating < 8.2));
// 輸出：true
console.log(boardGame.some((e) => e.title === '精靈島'));
// 輸出：true
console.log(boardGame.some((e) => e.title === '大西部之路'));
// 輸出：false

確認陣列中的值是否都符合條件(index) every

圖示範例

確認陣列中是否「都是」可頌	確認陣列中是否「都是」甜甜圈

操作方式

array.every(function(currentValue, index, arr), thisValue)

實際範例

const ages = [32, 33, 16, 40];

console.log(ages.every((e) => e > 15));
// 輸出： true
console.log(ages.every((e) => e > 50));
// 輸出： false

物件範例

const boardGame = [
  { title: '黯淡港灣', rating: 8.4 },
  { title: '瘟疫危機', rating: 8.4 },
  { title: '精靈島', rating: 8.1 },
  { title: '拼布對決', rating: 7.6 },
];

console.log(boardGame.every((e) => e.rating > 7.2));
// 輸出：true
console.log(boardGame.every((e) => e.title === '精靈島'));
// 輸出：false