iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
Modern Web

從ES到ESNext - 30天輕鬆掌握ECMAScript系列 第 6

ES2015(ES6) - Array

本系列文章經過重新編排和擴充,已出書為ECMAScript關鍵30天。原始文章因當時準備時程緊迫,多少有些許錯誤。為了避免造成讀者的困擾,以及配合書籍的內容規劃,將會陸續更新本系列文章。
本篇文章在 2021/11/5 已更新。

今天介紹的是關於陣列的處理,包括實體方法和靜態方法的擴充。

靜態方法

Array.from(obj, mapFn, thisArg)

類陣列(array-like)可迭代(iterable) 的物件,轉換成陣列,並回傳新的實體。

類陣列顧名思義就是很像陣列,像是會有 length 的屬性及索引化的元素,但卻不是陣列的物件。例如:字串、NodeList 等

而可迭代(iterable)的物件像是下一篇會提到的 MapSet 這種物件,可以透過迭代的方式取到元素。

將這些物件轉換成陣列的目的,通常是要對這些物件使用 Array 提供的 API 進行操作,像較常見的是使用 map
因此在第二個選擇性的參數 mapFn,可以帶入 map 函式來遍歷元素;第三個選擇性的參數 thisArg 則是指定 mapFnthis 對象。

舉例練習看看。

const str = "ABCDE";

const arr1 = Array.from(str, (chara) => chara.repeat(3));
// 等同於以下寫法
const arr2 = Array.from(str).map((chara) => chara.repeat(3));

// output:  ["AAA", "BBB", "CCC", "DDD", "EEE"]

Array.of(element1, element2, ...)

為參數裡的元素們建立陣列,並回傳新的實體。通常至少為一個以上。

Array.of(1, 2, 3); // [1, 2, 3]
Array.of("man"); // ['man']
Array.of(true, null, undefined, 1); // [true, null, undefined, 1]

實體方法

Array.prototype.find(Fn)

使用測試函式 Fn 依序遍歷 ary,如果有第一個符合測試函式的元素,則回傳元素本身。如果都沒有符合的,則回傳 undefined

Array.prototype.findIndex(Fn)

跟上面的 find()類似,不過不一樣的是,回傳的是第一個符合元素的索引值。

舉個例子練習看看。

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
  { name: "tomatoes", quantity: 3 },
];

function isMidQuantity(fruit) {
  return fruit.quantity === 3;
}

const elem = inventory.find(isMidQuantity);
const elemIndex = inventory.findIndex(isMidQuantity);

console.log(elem);
console.log(elemIndex);

// { name: 'tomatoes', quantity: 3 }
// 3

Array.prototype.fill(value, startIndex, endIndex)

將陣列中的第一個到最後一個元素,以 value 填入。後面兩個選擇性參數可決定起始索引跟結束索引。這個方法並不會回傳新的陣列,而是修改原來的陣列,使用上要小心。

let arr = [1, 2, 3];
arr.fill(4); // [4, 4, 4]
arr.fill(5, 1); // [1, 5, 5]
arr.fill(6, 2, 3); // [4, 5, 6]

Array Iterator (陣列迭代器物件)

在遍歷實體的每個元素後,產生新的陣列迭代器物件。對這個物件就能使用 next() for ... of 等特性可以使用。根據回傳的內容不同有以下三個方法可使用

  • Array.prototype.entries(): 回傳元素的 key/value pair
  • Array.prototype.keys(): 回傳元素的 key 值
  • Array.prototype.values(): 回傳元素的 value 值
const arr = ["a", "b", "c"];

const entIterator = arr.entries();
const keyIterator = arr.keys();
const valIterator = arr.values();

for (let e of entIterator) {
  console.log(`use arr.entries(): ${e}`);
}
// use arr.entries(): 0,a
// use arr.entries(): 1,b
// use arr.entries(): 2,c

for (let e of keyIterator) {
  console.log(`use arr.keys(): ${e}`);
}
// use arr.keys(): 0
// use arr.keys(): 1
// use arr.keys(): 2

for (let e of valIterator) {
  console.log(`use arr.values(): ${e}`);
}
// use arr.values(): a
// use arr.values(): b
// use arr.values(): c

小結

陣列在 Javascript 中是個很常使用的資料儲存類型。當操作複雜性提高,或資料本身結構也很複雜時,就能使用相關的語法來方便資料處理,所以可以愈熟悉,在開發上也能愈駕輕就熟喔!


上一篇
ES2015(ES6) - string
下一篇
ES2015(ES6) - Object
系列文
從ES到ESNext - 30天輕鬆掌握ECMAScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Yuri Tsai
iT邦新手 4 級 ‧ 2022-01-04 16:08:29

謝謝讀者反映,Array.prototype.fill 的範例程式碼的結果輸出有誤,已經更正囉!

我要留言

立即登入留言