iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0
自我挑戰組

學JS的心路歷程系列 第 14

學JS的心路歷程 Day14 - 陣列常見處理方法

  • 分享至 

  • xImage
  •  

昨天我們有提到說 for-offorEach 可以用來處理陣列,但其實還有很多方法可以更快速及精簡程式碼的達到你要的效果。

話不多說,我們趕緊來看吧!

Array.prototype.map()

會回傳一個新陣列,其值為原陣列每一個值經回呼函式運算後的回傳值。故新陣列長度會與原陣列相同。

要注意的是,如果沒有回傳值,會預設回傳 undefined

var arr = [1,2,3,4,5,6,7,8,9];
var arrMap = arr.map((item,index,array)=>{
    return item * index
})
console.log(arrMap);//[0, 2, 6, 12, 20, 30, 42, 56, 72]

map 最常拿來與 forfor-in 作比較,有人認為我用原本的迴圈就可以達成了,為何還要用 map 呢?

那我們來比較一下兩者吧:

var arr = [1,2,3,4,5,6,7,8,9];
var arrMap = arr.map((item,index,array)=>{
    return item * index
})

var arrFor = [];
for(let i = 0; i < arr.length; i++){
    arrFor.push(arr[i]*i)
}

雖然意思都是一樣,但是今天別人看到你寫 for 時需要思考說,這個 for 是在幹嘛?有改動什麼東西嗎?
但如果是 map 別人一看就知道說,這是對原陣列作操作並回傳一個新的。

Array.prototype.filter()

會回傳一個陣列,其值為原陣列每一個值經回呼函式運算後回傳為 true 的值,故長度不一定等於原陣列。

var arr = [1,2,3,4,5,6,7,8,9];
var arrFilter = arr.filter((item,index,array)=>{
    return item%2 === 0;
});
console.log(arrFilter);//[2, 4, 6, 8]

通常用於條件過濾,所以才叫做 filter (過濾)。
像是過濾出不重複的陣列:

var arr = ['Jason','Turtle','Chris','Jason','Kai','Chris','Henry','Kai'];
var uniquePerson = arr.filter((item,index,array)=>{
    return array.indexOf(item) === index;
});
console.log(uniquePerson);//["Jason", "Turtle", "Chris", "Kai", "Henry"]

Array.prototype.find()

會回傳第一個滿足函式條件的值,否則回傳 undefined。

var arr = ['Jason','Turtle','Chris','Jason','Kai','Chris','Henry','Kai'];
var findPerson = arr.find((item,index,array)=>{
    return item === 'Chris';
});
console.log(findPerson);

Array.prototype.every()

會回傳陣列是否每一個值都滿足函式的條件。

var arr = [{
        name: "Jason",
        age: 29
      },
      {
        name: "Chris",
        age: 31
      },
      {
        name: "Kai",
        age: 24
      },
      {
        name: "Henry",
        age: 24
      }
    ];
var checkAge = arr.every((item,index,array)=>{
    return item.age > 10;
});
console.log(checkAge);//true
var test = arr.every((item,index,array)=>{
    return item.age < 30;
});
console.log(test);//false

Array.prototype.some()

every 用法很像,差別在於只要部分符合及回傳 true

var arr = [{
        name: "Jason",
        age: 29
      },
      {
        name: "Chris",
        age: 31
      },
      {
        name: "Kai",
        age: 24
      },
      {
        name: "Henry",
        age: 24
      }
    ];
var test = arr.some((item,index,array)=>{
    return item.age < 30;
});
console.log(test);//true

Array.prototype.reduce()

會將陣列內每一個值經回呼函式運算後回傳單一個值。
這個方法很特別的是每一次呼叫可以跟前一個回傳值作再次運算並回傳。

  • accumulator 用來累積回呼函式回傳值的累加器,是上一次呼叫後,所回傳的累加數值。
  • currentValue 是當前陣列的值
  • currentIndex 當前陣列值的索引(可選)
  • array 原本的陣列(可選)
var arr = [1,2,3,4,5,6,7,8,9,10];
var sum = arr.reduce((accumulator,item)=>{
    return accumulator + item;
});
console.log(sum);

在這邊要注意到 reduce 有個很特別的參數 initialValue 初始值 ,若沒有提供初始值,原陣列的第一個元素將會被當作初始的累加器。

var arr = [1,2,3,4,5,6,7,8,9,10];
var sum = arr.reduce((accumulator,item)=>{
	console.count(accumulator,item);
    return accumulator + item;
},0);
console.log(sum);

可以跟上一個例子作比較,會發現沒有提供 initialValue ,會少運算一次喔!

以上是今天的陣列常見處理方法,下次要對陣列作操作時不要一開始就用 for ,試著用這先簡單明瞭的方法吧!

參考資料:
JavaScript 陣列處理方法
JavaScript取出陣列重複/不重複值的方法
MDN - Array


上一篇
學JS的心路歷程 Day13-for of 和 for in
下一篇
學JS的心路歷程 Day15 - 非同步執行
系列文
學JS的心路歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言