1、Map

var numbers = [4, 9, 16, 25];var x = numbers.map(v=> 2*v)console.log(x)console.log(numbers)

該map方法將返回一個(gè)新數(shù)組，并將其存儲(chǔ)在變量“ x”中。原始數(shù)組“數(shù)字”將保持不變。

上面的代碼輸出：

[8,18,32,50] // x[4,9,16,25]  // numbers

2、Find

這是另一個(gè)有用的功能。該find方法的作用是使我們能夠在數(shù)組中找到特定的對(duì)象。它的語法與map方法類似，除了我們必須根據(jù)某些特定的檢查返回true或false之外。

第一次返回true時(shí)，此方法就停止對(duì)數(shù)組進(jìn)行循環(huán)迭代。

但需要注意的是，此方法只能獲取查詢匹配到的第一個(gè)元素，返回一次，不能查詢所有查詢匹配到的元素。

示例如下：

var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var searchEle=data.find(v => v.item=='Shirt')console.log(searchEle)

輸出：

{  item:"Shirt",  price:25}

如你所見，數(shù)組“ data”中有兩個(gè)對(duì)象，“ item”的值為“ Shirt”，但是，該.find()方法僅返回了符合條件的第一個(gè)對(duì)象。

3、篩選數(shù)組

顧名思義，此方法使我們可以過濾數(shù)組。

與上述兩種方法一樣，此方法也不會(huì)更改原始數(shù)組。

在上一個(gè)示例中，我們將使用相同的“數(shù)據(jù)”數(shù)組，并將過濾出價(jià)格低于10的元素。

var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var filteredArr=data.filter(v => v.price>=10)console.log(filteredArr)

如果你看一下方法中的filter函數(shù) ，你會(huì)發(fā)現(xiàn)我們正在檢查當(dāng)前對(duì)象的'price'屬性的值是否大于等于10。

如果是這樣，則將元素添加到我們的“ filteredArr”數(shù)組中。

上面的代碼片段的輸出：

[  {    "item": "Coffee",    "price": 10  },  {    "item": "Tea",    "price": 12  },  {    "item": "Shirt",    "price": 25  },  {    "item": "Shirt",    "price": 10  }]

你可以做的另一件事是，將find( )方法來實(shí)現(xiàn)該方法的功能。但是，會(huì)有一個(gè)區(qū)別。

使用該find方法時(shí)，我們僅獲得與搜索查詢匹配的第一個(gè)元素，而使用該filter方法，我們將獲得與查詢匹配的所有元素。

如果我們使用與示例相同的示例來更好地說明這一點(diǎn)find ，那么，只有這次我們將使用該filter 方法實(shí)現(xiàn)相同的目的。

var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var searchEle=data.filter(v => v.item=='Shirt')console.log(searchEle)

我們只需要將'find'關(guān)鍵字與'filter'交換，其余代碼保持不變。但是，輸出看起來會(huì)有所不同。

輸出結(jié)果如下：

[  {    "item": "Shirt",    "price": 25  },  {    "item": "Shirt",    "price": 10  }]

如前所述，與find 方法不同，過濾器將返回函數(shù)返回true的每個(gè)對(duì)象，并且不會(huì)在第一次停止。

4、forEach

此方法替代了for循環(huán)。

代替編寫整個(gè)循環(huán)語句，我們可以使用此方法來實(shí)現(xiàn)相同的效果。

但是，此方法不返回?cái)?shù)組，而只是循環(huán)遍歷它們。

var numbers = [4, 9, 16, 25];numbers.forEach(v=> console.log(v))

當(dāng)你只想循環(huán)遍歷數(shù)組中的元素時(shí)，這是一個(gè)好方法。

但是，這不會(huì)阻止你執(zhí)行其他操作，例如，根據(jù)某種條件將數(shù)組的值分配給其他數(shù)組。

var numbers = [4, 9, 16, 25];var s=[];numbers.forEach(  v=> v%2==0 ? //checking for even numbers  s.push(v*v): //adding their square to another array  null)console.log(s)

但是，最好是使用filter方法來執(zhí)行這些操作。

5、Every

此方法檢查數(shù)組中的每個(gè)項(xiàng)目均符合某些特定條件。此方法返回布爾值而不是數(shù)組。

當(dāng)你必須確保每個(gè)元素都具有某些特定的屬性或值時(shí)，這將很有用。

var data = [{name:'Science', results:'passed'},{name:'Maths',results:'failed'},{name:'Computer',results:'passed'},];var finalResult=data.every(v => v.results=='passed')console.log(finalResult) // => false

例如，在上面的代碼段中，學(xué)生的考試結(jié)果存儲(chǔ)在數(shù)組“數(shù)據(jù)”中，要通過期末考試，他必須通過每門科目。

因此，我們使用了該every()方法來檢查他是否通過了所有學(xué)科。

你甚至可以檢查是否存在特定值，如下所示：

var data = [{name:'Science', results:'passed'},{name:'Maths',}, //here results is missing{name:'Computer',results:'passed'},];var everyEle=data.every(v => v.results)console.log(everyEle) // => false

6、Some

如果我們要檢查某些要素是否滿足條件而不是每個(gè)要素，該怎么辦？

這就是some 方法的來歷。

與every 方法一樣，此方法也返回布爾值。但是，只要至少一個(gè)元素滿足條件，它就會(huì)返回true。

var data = [{name:'Science', results:'passed'},{name:'Maths',results:'failed'},{name:'Computer',results:'passed'},];var finalResult=data.every(v => v.results=='passed')console.log(finalResult) // => true

7、includes

這是一種非常簡單的方法，用于檢查數(shù)組中是否包含特定元素。

值得一提的是，該includes方法也可用于String并提供相同的功能。

var numbers = [4, 9, 16, 25];var s=numbers.includes(4)console.log(s) // => true

此方法還返回true或false。

此外，你可以提供搜索開始位置以及第二個(gè)參數(shù)。

var numbers = [4, 9, 16, 25];var s=numbers.includes(4,2)//(element,starting index)console.log(s) // => false

8、reduce

與到目前為止我們討論的方法相比，該方法相對(duì)復(fù)雜。

我們已經(jīng)使用reduce 方法計(jì)算了“數(shù)據(jù)”數(shù)組中存在的元素的總價(jià)。

請(qǐng)注意，我們?nèi)绾尾宦暶魅肿兞縼肀Ａ艨倲?shù)，而是使用方法本身提供的變量。

var data = [  {item:'Coffee', price:10},  {item:'Tea',price:12},  {item:'Shirt',price:25},  {item:'Pen',price:6},  {item:'Shirt', price:10}];var totalPrice=data.reduce((total,current) => {  return current.price+total},0)console.log(totalPrice)

最后的想法

JavaScript在客戶端腳本語言中占有主導(dǎo)地位，盡管它是一種非常適合初學(xué)者的語言，但它已廣泛應(yīng)用于不同領(lǐng)域。

JavaScript應(yīng)用程序變得越來越復(fù)雜，該語言添加了功能并進(jìn)行了自我更新以滿足需求。

必須學(xué)習(xí)最佳的現(xiàn)代實(shí)踐，以減少工作量并使用易讀和簡單的代碼構(gòu)建重要的應(yīng)用程序。

JavaScript提供了各種數(shù)組方法，旨在簡化與數(shù)組有關(guān)的操作。但是，重要的是要了解何時(shí)使用什么數(shù)組，以及使用此數(shù)組的目的是什么，解決什么問題。

使用JavaScript提供的最佳功能并了解何時(shí)使用它們，還可以在技術(shù)面試中提供優(yōu)于其他功能的優(yōu)勢。

這個(gè)就是我們學(xué)習(xí)JavaScript的目的，在工作中解決問題，

最后，希望你喜歡這篇文章，也希望此文對(duì)你有所幫助，如果有什么問題，歡迎在留言區(qū)跟我們一起探討。

感謝你的閱讀，編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)