iT邦幫忙

2024 iThome 鐵人賽

DAY 17
0

ES5 時期除了昨天介紹的那些功能,其中還有一大塊內容是有關 Array 的操作,讓我們繼續吧

  1. Array.isArray():我們可以透過 isArray() 來判斷此物件是否為陣列,在過往,由於陣列屬於物件屬性,因此得繞一圈來判斷是否為陣列,有此函式後即可直接判斷
var arr = [1, 2, 3];
var notArr = "Hello";

console.log(Array.isArray(arr));     // true
console.log(Array.isArray(notArr));  // false
  1. Array forEach():forEach 函式會將陣列內的內容全部遍歷一遍,其中可以透過參數來取得陣列值和索引值
var arr = [1, 2, 3];

arr.forEach((element, index) => {
  console.log("Element at index " + index + " is " + element);
});
// 輸出:
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
  1. Array map():map 函式會將原本的陣列透過 map 內的函式處理後將值回傳,不會更改原先陣列的值
var arr = [1, 2, 3];
var doubled = arr.map(function(x){
  return x * 2
});

console.log(doubled); // [2, 4, 6]
  1. Array filter():filter 函式會將內部函式回傳 true 值的內容統整成一個新陣列
var arr = [1, 2, 3, 4, 5];
var evenNumbers = arr.filter(function(x){
  return x % 2 === 0
});

console.log(evenNumbers); // [2, 4]
  1. Array reduce():reduce 函式內會提供兩個參數,一個執行函數,和初始值(可選),執行函數內有兩個參數:疊代後的值和目前索引的值。
    若沒有設立初始值時 reduce 會直接進行第二次的疊代,並且將第一索引值設為疊代後的值
var numberArr = [1,2,3,4]

var totalNumber = numberArr.reduce(function(accumlator, currentValue){
    return accumlator + currentValue
})
// loop1. 1 + 2(以開始進行第二次的疊代)
// loop2. 3 + 3
// loop3. 6 + 10

然而若沒有設立初始值時會有可能發生問題,尤其是以下兩種狀況
a. 陣列為空,無法獲得第一個索引值
b. 要疊代陣列內的物件
因此還是建議放上初始值

const items = [
  { name: 'Apple', quantity: 10 },
  { name: 'Banana', quantity: 5 },
  { name: 'Orange', quantity: 8 }
];

// 使用 reduce 來累加 quantity 屬性值
const totalQuantity = items.reduce(function(accumulator, item){
  return accumulator + item.quantity;
}, 0); // 初始值設為 0

// 這邊若不建立初始值,那麼第二次疊代時的 accumlator 為 item[0] 的值,會發生錯誤

console.log(totalQuantity); // 23
  1. Array reduceRight():與 reduce 相同,只是從值是從陣列右側跑到左側而已
  2. Array every():erray 函式會確認內部所有項目是否通過測試函式,回傳 true 或 false
var arr = [2, 4, 6];
var allEven = arr.every(function(x){
  return x % 2 === 0
});

console.log(allEven); // true
  1. Array some(): some 函式與 every 類似,不過只要有一個通過就會回傳 true
var arr = [1, 2, 3, 4];
var hasEven  = arr.some(function(x){
  return x % 2 === 0
});

console.log(hasEven); // true
  1. Array indexOf():indexOf 函式會將陣列從左至右開始尋找,若有找到符合的值即回傳索引,若沒有就回傳 -1
var arr = [1, 2, 3, 4, 3];
var index = arr.indexOf(3);

console.log(index); // 2,返回第一個 3 的索引
  1. Array lastIndexOf():與 indexOf 類似,不過是從右至左查詢
var arr = [1, 2, 3, 4, 3];
var index = arr.indexOf(3);

console.log(index); // 2,返回第一個 3 的索引

上一篇
Day16:ES5 功能(上)
下一篇
Day18:ES6
系列文
重新認識 FrontEnd30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言