iT邦幫忙

1

我流理解---JavaScript ES6---3(常用陣列方法)

  • 分享至 

  • xImage
  •  

人生就是如此捉摸不定吧...我好像大概可能應該是找到工作了吧~
但為什麼等HR聯絡可以等這麼久呢...雖然從確定核薪也才過三四天就是了...


以下的幾種函式基本上都會直接把陣列內的各項跑一次,等於是for函式的作法,所以在對陣列的部份基本可以取而代之,但像是做費先生無聊的兔子繁殖算術的這種不針對既定資料或陣列的時候,for還是很好用的

這邊先說我自己的整理:
forEach:用來對原陣列進行添加或刪減等等,會改定原陣列的值。
map:一樣是用來對原陣列進行添加或者刪減等等,但會產生新陣列,保留原陣列狀態。
filter:用來對原陣列資料進行篩選,產生新陣列,例如添加我的最愛的呈現方式。
every跟some:用來做true或false的判斷,差別在是否全部項都要符合,應可用於對狀態做判斷
reduce:結構與上述幾個較為不同,常用大概是加總或者大小判斷,自己理解是從不斷依序執行函式,將項目逐項聚焦的一種作法。

結構大致為:(其實上forEach、map、filter跟find、some基本都是一樣的,reduce另說)

arr.map(function( 原陣列的各項值 , 各項的索引值, 執行裡面函數時的this值 ){
函式內容
})

其中的參數,後兩項用不到也可以不寫。

先設定好一個陣列

const people = [
  {
    name: '阿喵',
    money: 10
  },
  {
    name: '狗勾',
    money: 20
  },
  {
    name: '老張',
    money: 8000
  }
];

.forEach

依序將陣列的值帶入函數去執行函式,可以改變原本的函式,不需要新的變數陣列去儲存return的值

people.forEach(function(a){
a.money = a.money+100 //等於把各項中的money這個數值加上100
});
console.log(people); 
//則原本people陣列的每個money都會加上100,直接影響原本陣列

.map

依序將陣列的值帶入函數並回傳一個新陣列 (回呼函式),會做return,傳回新陣列值,可創造一個新的變數來儲存。

const mapPeople = people.map(function(a){
    return{
      ...a,
      icash:a.money+500
    }
});
//mapPeople就會是一個新的陣列,與原陣列的差別就是每個money都是+500的狀態

若是有條件式,即原陣列部份的值可能會不符合條件導致不return資料,可能就要考慮不要使用map,不然新陣列中就會有undefined的值,此時可考慮用filter。
若是不希望組成新陣列,而只是在原陣列進行增減或者運算,則可改用forEach。
適合將原陣列的資料做一定的處理時使用,將新結果丟到新陣列,保持原陣列的狀態。

.filter

同樣會將陣列的值帶入函數,主要是用來做過濾,在有設定條件的情況下若不符合,則不會回傳,比map更適合用來做不需對值做改動的單純篩選動作。

const filterPeople = people.filter(function(a){
    if (a.money >= 20){
    return true;
    }
});
//filterPeople的結果會是一個只有狗勾跟老張這兩個符合條件的物件組成的新陣列。

最適合的就是拿來做過濾產生新陣列,這樣也不會影響到原陣列的內容,方便將原始資料做篩選後區分成不同的陣列來用在不同地方。

.find

基本跟filter差不多,不過只會回傳一次且為第一次,所以適合搜尋特定值。

const findPeople = people.find(function(a){
    if (a.money >= 20){
    return true;
    }
});
//findPeople的結果會是只有第一個符合條件的狗勾物件組成的新陣列,沒有老張。

如果找到的對象是物件就回傳物件,字串就回傳字串,適合用來做較為精密的搜尋,找尋id之類的非重複字樣。

.every

類似運算子中&&的概念,陣列的值都會做一次return後面的條件判斷,如果全部符合會回傳true,但只要其中一項不符就是false。

const everyPeople = people.every(function(a){
    return a.money >= 20;
});
//everyPeople的結果會是false,因為必須要全部條件都符合才行。

最大不同在於return直接寫判斷式,單純判斷符合與否,可以用作某些條件的判斷,比如v-if的顯示切換之類的。

.some

類似運算子中||的概念,陣列的值都會做一次return後面的條件判斷,只要有一個符合就會回傳true,否則就是false。

const somePeople = people.some(function(a){
    return a.money >= 200;
});
//somePeople的結果會是true,因為老張是符合的。

與every的差異就在各項是部份符合還是全部符合的判斷,從英文單字就能簡單區分,一樣可以用在v-if這種判斷,當有部份條件滿足時即可。

.reduce

適合做陣列內數字上的操作,可用做加總或比大小等。
結構也有所不同:

arr.map(function( 最初的參數值或後續函式的前一個參數,若無特別指定,就會是這個fuction的}後面的起始值 , 原陣列的各項值 , 各項的索引值 ){
函式內容
},起始值)

若是對某數值做加總可寫成

const newNumber = people.reduce(function (prev,a) {
    return prev + a.money;
},0);
//這邊的newNumber結果就會是各項money的加總

理解上可想成,先以後面的起始值作為開始,加上第一個a.money的值,再以加總完的的值作為下一輪的起始值重複加總。
所以比大小的寫法變成

const newNumber = people.reduce(function (prev,a) {
    return Math.max(prev,a.money);
},0);
//這邊的newNumber結果就會是顯示money中最大的值。

概念上就是跟起始值做比較,大的就變成起始值,再與下一個比較,最大的就會一直是起始值,然後回傳這個值。



圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言