iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

新手初探 Vue系列 第 26

鐵人賽Day27 - 常用的陣列方法

  • 分享至 

  • xImage
  •  

前一篇有講到 .forEach().map(),所以這裡就不講這兩個部分,我們先有個基本的陣列資料:

const people = [
  {
    name: '小明',
    money: 500
  },
  {
    name: '漂亮阿姨',
    money: 3000
  },
  {
    name: '杰倫',
    money: 60000
  },
  {
    name: '老媽',
    money: Infinity
  }
];

接著介紹一下 .filter() 這個方法,過濾資料的時候,這個方法很好使用,我們現在想要把金額 > 5000 的資料撈出來:

const filterPeople = people.filter(function(item){
    return item.money > 5000
});
console.log(filterPeople);

這個時候就會輸出"所有"符合條件的資料

再來是 .find() 方法,也是用在過濾資料,但是他跟 .filter() 不同的點在於,它只要找到第一個符合條件的資料就會回傳,便不再繼續跑下去:

const findPeople = people.find(function(item){
    return item.money == 500
});
console.log(findPeople);

這個時候在 console 看,僅會有一筆資料,這就是跟 .filter() 不同的地方

再來介紹 .every().some() 方法,這兩個方法有異曲同工之妙,.every() 是當所有資料都為 true 時,就回傳 true 如果有一筆資料為 false 就回傳 false,而 .some() 則是當有一筆資料為 true 時,就回傳 true
這兩個方法回傳的值都是布林值,這點要注意一下:

const ans = people.every(function(item){
    return item.money > 5000
});
console.log(ans);
// output fasle

接著試著用用看 .some():

const ans = people.some(function(item){
    return item.money > 5000
});
console.log(ans);
// output true

最後介紹稍微比較特別的 .reduce() 方法,它有點類似加總的概念,傳入的參數跟上面也都不太一樣,參數第一個為預設值,第二個才是陣列內的數值,然後 .reduce() 方法內的 function 後面接的就是預設值,來寫寫吧:

const ans = people.reduce(function(prev, item){
    return prev + item.money
}, 0);
console.log(ans);
// output 63500

上面 function 後面的 0 就是我的預設值,它會代進 prev 參數裡面,然後依序加總再 return 回去

以上就是幾個比較常用的陣列方法


上一篇
鐵人賽Day26 - ES6 之字串模板 Template String
下一篇
鐵人賽Day28 - Vue Cli
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言