您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)怎么在JavaScript中使用Array方法,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
Array對(duì)象為JavaScript內(nèi)置對(duì)象,具有以下屬性:
屬性 | 描述 |
---|---|
constructor | 返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。 |
length | 返回?cái)?shù)組中元素的個(gè)數(shù) |
prototype | 向?qū)ο筇砑訉傩院头椒ā?/td> |
用 Array.includes 代替 Array.indexOf
“如果你要在數(shù)組中查找元素,請(qǐng)使用 Array.indexOf”。我記得在學(xué)習(xí) JavaScript 的時(shí)候,在教材中讀到這樣的一句話。毫無(wú)疑問(wèn),這句話是真的!
MDN 文檔寫道,Array.indexOf 將“返回第一次出現(xiàn)給定元素的索引”。因此,如果我們稍后要在代碼中使用這個(gè)返回的索引,那么使用 Array.indexOf 找到索引就對(duì)了。
但是,如果我們只想知道數(shù)組是否包含某個(gè)值,該怎么辦?這似乎是一個(gè)是與否的問(wèn)題,或者說(shuō)是一個(gè)布爾值問(wèn)題。對(duì)于這種情況,我建議使用返回布爾值的 Array.includes。
'use strict'; const characters = [ 'ironman', 'black_widow', 'hulk', 'captain_america', 'hulk', 'thor', ]; console.log(characters.indexOf('hulk')); // 2 console.log(characters.indexOf('batman')); // -1 console.log(characters.includes('hulk')); // true console.log(characters.includes('batman')); // false
使用 Array.find 而不是 Array.filter
Array.filter 是一個(gè)非常有用的方法。它接受一個(gè)回調(diào)函數(shù)作為參數(shù),基于一個(gè)包含所有元素的數(shù)組創(chuàng)建出一個(gè)新的數(shù)組。正如它的名字一樣,我們使用這個(gè)方法來(lái)過(guò)濾元素,獲得更短的數(shù)組。
但是,如果回調(diào)函數(shù)只能返回一個(gè)元素,那么我就不推薦使用這個(gè)方法,例如使用回調(diào)函數(shù)來(lái)過(guò)濾唯一 ID。在這種情況下,Array.filter 將返回一個(gè)只包含一個(gè)元素的新數(shù)組。我們的意圖可能是通過(guò)查找特定的 ID 找到數(shù)組中包含的唯一值。
我們來(lái)看看這個(gè)方法的性能。要返回與回調(diào)函數(shù)匹配的所有元素,Array.filter 必須遍歷整個(gè)數(shù)組。此外,我們假設(shè)有數(shù)百個(gè)元素可以滿足回調(diào)參數(shù),那么過(guò)濾后的數(shù)組會(huì)非常大。
為了避免這種情況,我建議使用 Array.find。它需要一個(gè)像 Array.filter 一樣的回調(diào)函數(shù)作為參數(shù),并返回滿足回調(diào)函數(shù)的第一個(gè)元素的值。此外,只要找到第一個(gè)滿足回調(diào)函數(shù)的元素,Array.find 就會(huì)停止,無(wú)需遍歷整個(gè)數(shù)組。通過(guò) Array.find 來(lái)查找元素,我們可以更好地理解我們的意圖。
'use strict'; const characters = [ { id: 1, name: 'ironman' }, { id: 2, name: 'black_widow' }, { id: 3, name: 'captain_america' }, { id: 4, name: 'captain_america' }, ]; function getCharacter(name) { return character => character.name === name; } console.log(characters.filter(getCharacter('captain_america'))); // [ // { id: 3, name: 'captain_america' }, // { id: 4, name: 'captain_america' }, // ] console.log(characters.find(getCharacter('captain_america'))); // { id: 3, name: 'captain_america' }
用 Array.some 代替 Array.find
我承認(rèn)這個(gè)錯(cuò)誤我犯了很多次。然后,一位善良的朋友告訴我,最好可以先參考 MDN 文檔。這與上面的 Array.indexOf/Array.includes 非常相似。
在前面的例子中,我們看到 Array.find 需要一個(gè)回調(diào)函數(shù)作為參數(shù),并返回一個(gè)元素。如果我們想要知道數(shù)組是否包含某個(gè)值,Array.find 是最好的解決方案嗎?可能不是,因?yàn)樗祷氐氖且粋€(gè)元素值,而不是一個(gè)布爾值。
對(duì)于這種情況,我建議使用 Array.some,它返回所需的布爾值。另外,從語(yǔ)義上看,Array.some 表示我們只想知道某個(gè)元素是否存在,而不需要得到這個(gè)元素。
'use strict'; const characters = [ { id: 1, name: 'ironman', env: 'marvel' }, { id: 2, name: 'black_widow', env: 'marvel' }, { id: 3, name: 'wonder_woman', env: 'dc_comics' }, ]; function hasCharacterFrom(env) { return character => character.env === env; } console.log(characters.find(hasCharacterFrom('marvel'))); // { id: 1, name: 'ironman', env: 'marvel' } console.log(characters.some(hasCharacterFrom('marvel'))); // true
使用 Array.reduce 而不是鏈接 Array.filter 和 Array.map
讓我們面對(duì)現(xiàn)實(shí)吧,Array.reduce 不容易理解。事實(shí)確實(shí)如此!但是,如果我們使用 Array.filter 和 Array.map 的組合,感覺(jué)缺少了什么,對(duì)吧?
我的意思是,我們遍歷了兩次數(shù)組。第一次過(guò)濾數(shù)組并創(chuàng)建一個(gè)較短的數(shù)組,第二次又基于 Array.filter 獲得數(shù)組創(chuàng)建一個(gè)包含新值的數(shù)組。為了獲得我們想要的新數(shù)組,我們使用了兩個(gè) Array 方法。每個(gè)方法都有自己的回調(diào)函數(shù)和一個(gè)用不到的數(shù)組——由 Array.filter 創(chuàng)建的那個(gè)數(shù)組。
為了避免這種性能損耗,我的建議是使用 Array.reduce。結(jié)果是一樣的,代碼卻更簡(jiǎn)單! 我們可以使用 Array.reduce 進(jìn)行過(guò)濾,并將目標(biāo)元素添加到累加器中。累加器可以是遞增的數(shù)字、要填充的對(duì)象、要連接的字符串或數(shù)組。
在我們的例子中,因?yàn)橹笆褂昧?Array.map,所以我建議使用 Array.reduce 將滿足條件的數(shù)組元素加入到累加器中。在下面的示例中,根據(jù) env 值的具體情況,我們將它添加到累加器中或保持累加器不變。
'use strict'; const characters = [ { name: 'ironman', env: 'marvel' }, { name: 'black_widow', env: 'marvel' }, { name: 'wonder_woman', env: 'dc_comics' }, ]; console.log( characters .filter(character => character.env === 'marvel') .map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) ); // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ] console.log( characters .reduce((acc, character) => { return character.env === 'marvel' ? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] })) : acc; }, []) ) // [ // { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] }, // { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] } // ]
JS是JavaScript的簡(jiǎn)稱,它是一種直譯式的腳本語(yǔ)言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開(kāi)發(fā),可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果,讓網(wǎng)頁(yè)更加美觀。
以上就是怎么在JavaScript中使用Array方法,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。