8種現代數組方法，每個開發人員都應該知道

英文 | https://javascript.plainenglish.io/8-modern-array-methods-that-every-developer-should-know-416855e01757

翻譯 | 小愛

在用代碼執行數組操作時，你是否經想過，關于數組執行，有沒有更加簡單的辦法？

在JavaScript中，我們可以使用各種非常有用的數組方法。正确使用它們後，隻需幾行代碼，便可以幫助你實作你想要的效果。

在這裡，我研究了8種數組方法，與你一起來分享一下，希望這些方法可以大大減少你的工作量。

那讓我們現在開始吧。

1、Map

Map方法允許你使用指定的操作将現有數組轉換為新數組。

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

該map方法将傳回一個新數組，并将其存儲在變量“ x”中。原始數組“數字”将保持不變。

上面的代碼輸出：

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

2、Find

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

第一次傳回true時，此方法就停止對數組進行循環疊代。

但需要注意的是，此方法隻能擷取查詢比對到的第一個元素，傳回一次，不能查詢所有查詢比對到的元素。

示例如下：

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
}      

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

3、篩選數組

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

與上述兩種方法一樣，此方法也不會更改原始數組。

在上一個示例中，我們将使用相同的“資料”數組，并将過濾出價格低于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函數 ，你會發現我們正在檢查目前對象的'price'屬性的值是否大于等于10。

如果是這樣，則将元素添加到我們的“ filteredArr”數組中。

上面的代碼片段的輸出：

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

你可以做的另一件事是，将find( )方法來實作該方法的功能。但是，會有一個差別。

使用該find方法時，我們僅獲得與搜尋查詢比對的第一個元素，而使用該filter方法，我們将獲得與查詢比對的所有元素。

如果我們使用與示例相同的示例來更好地說明這一點find ，那麼，隻有這次我們将使用該filter 方法實作相同的目的。

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'關鍵字與'filter'交換，其餘代碼保持不變。但是，輸出看起來會有所不同。

輸出結果如下：

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

如前所述，與find 方法不同，過濾器将傳回函數傳回true的每個對象，并且不會在第一次停止。

4、forEach

此方法替代了for循環。

代替編寫整個循環語句，我們可以使用此方法來實作相同的效果。

但是，此方法不傳回數組，而隻是循環周遊它們。

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

當你隻想循環周遊數組中的元素時，這是一個好方法。

但是，這不會阻止你執行其他操作，例如，根據某種條件将數組的值配置設定給其他數組。

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方法來執行這些操作。

5、Every

此方法檢查數組中的每個項目均符合某些特定條件。此方法傳回布爾值而不是數組。

當你必須確定每個元素都具有某些特定的屬性或值時，這将很有用。

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      

例如，在上面的代碼段中，學生的考試結果存儲在數組“資料”中，要通過期末考試，他必須通過每門科目。

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

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

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

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

這就是some 方法的來曆。

與every 方法一樣，此方法也傳回布爾值。但是，隻要至少一個元素滿足條件，它就會傳回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

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

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

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

此方法還傳回true或false。

此外，你可以提供搜尋開始位置以及第二個參數。

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

8、reduce

與到目前為止我們讨論的方法相比，該方法相對複雜。

我們已經使用reduce 方法計算了“資料”數組中存在的元素的總價。

請注意，我們如何不聲明全局變量來保留總數，而是使用方法本身提供的變量。

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)      

對于初學者，此方法采用2個參數，而不是1個。

第一個參數是函數最後一次疊代的傳回值，而第二個參數是數組中實際的目前元素。

是以，“ total”（第一個參數）包含“ current.price”（即目前對象的價格值）和總計之和。

此“ total”值由函數傳回，并形成函數成為下一次疊代的第一個參數。

另外，請注意，我們在函數之後傳遞了另一個參數。這是預設值。我們希望'total'從0開始，是以将0作為第二個參數傳遞給該函數。

最後的想法

JavaScript在用戶端腳本語言中占有主導地位，盡管它是一種非常适合初學者的語言，但它已廣泛應用于不同領域。

JavaScript應用程式變得越來越複雜，該語言添加了功能并進行了自我更新以滿足需求。

必須學習最佳的現代實踐，以減少工作量并使用易讀和簡單的代碼建構重要的應用程式。

JavaScript提供了各種數組方法，旨在簡化與數組有關的操作。但是，重要的是要了解何時使用什麼數組，以及使用此數組的目的是什麼，解決什麼問題。

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

這個就是我們學習JavaScript的目的，在工作中解決問題，

最後，希望你喜歡這篇文章，也希望此文對你有所幫助，如果有什麼問題，歡迎在留言區跟我們一起探讨。

感謝你的閱讀，程式設計愉快！

學習更多技能

請點選下方公衆号

、