JavaScript資料方法彙總

　　好程式設計師web 前端培訓分享 JavaScript 資料方法彙總， 在JavaScript 中，陣列是一個特殊的變數，用於儲存不同的元素。它具有一些內建屬性和方法，可用於根據需要新增，刪除，迭代或運算元。並且瞭解 JavaScript 陣列方法可以提升你的開發技能。

　　 在本文中，我們將介紹 幾 種關於JavaScript 的陣列方法，這些方法可以幫助你正確地處理資料。

　　 1.some()

　　 2. reduce()

　　 3. Every()

　　 4. map()

　　 5. flat()

　　 6. filter()

　　 7. forEach()

　　 8. findIndex()

　　 9. find()

　　 10. sort()

　　 11. concat()

　　 12. fill()

　　 13. includes()

　　 14. reverse()

　　 15. flatMap()

　　 注意，大多數情況下，我們將簡化作為引數傳遞的函式。

　　 // Instead of using this waymyAwesomeArray.some(test => { if (test === "d") { return test }})// We'll use the shorter onemyAwesomeArray.some(test => test === "d")

　　 1 、 some()

　　 此方法為引數傳遞的函式測試陣列。如果有一個元素與測試元素匹配，則返回true ，否則返回 false 。譯者注： some() 不會對空陣列進行檢測 ;some() 不會改變原始陣列。

　　 const myAwesomeArray = ["a", "b", "c", "d", "e"]

　　 myAwesomeArray.some(test => test === "d")

　　 //-------> Output : true

　　 2 、 reduce()

　　 此方法接收一個函式作為累加器。它為陣列中的每個元素依次執行回撥函式，不包括陣列中被刪除或者從未被賦值的元素。函式應用於累加器，陣列中的每個值最後只返回一個值。譯者注：reduce() 方法接受四個引數：初始值 ( 上一次回撥的返回值 ) ，當前元素值，當前索引，原陣列。

　　 const myAwesomeArray = [1, 2, 3, 4, 5]

　　 myAwesomeArray.reduce((total, value) => total * value)

　　 // 1 * 2 * 3 * 4 * 5

　　 //-------> Output = 120

　　 3 、 Every()

　　 此方法是對陣列中每項執行給定函式，如果陣列的每個元素都與測試匹配，則返回true ，反之則返回 false 。

　　 const myAwesomeArray = ["a", "b", "c", "d", "e"]

　　 myAwesomeArray.every(test => test === "d")

　　 // -------> Output : falseconst myAwesomeArray2 = ["a", "a", "a", "a", "a"]

　　 myAwesomeArray2.every(test => test === "a")

　　 //-------> Output : true

　　 4 、 map()

　　 該方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。它按照原始陣列元素順序依次處理元素。譯者注：map() 不會對空陣列進行檢測 ;map() 不會改變原始陣列。

　　 const myAwesomeArray = [5, 4, 3, 2, 1]myAwesomeArray.map(x => x * x)

　　 //-------> Output : 25

　　 // 16

　　 // 9

　　 // 4

　　 // 1

　　 5 、 flat()

　　 此方法建立一個新陣列，其中包含子陣列上的holden 元素，並將其平整到新陣列中。請注意，此方法只能進行一個級別的深度。

　　 const myAwesomeArray = [[1, 2], [3, 4], 5]

　　 myAwesomeArray.flat()

　　 //-------> Output : [1, 2, 3, 4, 5]

　　 6 、 filter()

　　 該方法接收一個函式作為引數。並返回一個新陣列，該陣列包含該陣列的所有元素，作為引數傳遞的過濾函式對其返回true 。譯者注： filter() 方法是對資料中的元素進行過濾，也就是說是不能修改原陣列中的資料，只能讀取原陣列中的資料， callback 需要返回布林值 ; 為 true 的時候，對應的元素留下來 ; 為 false 的時候，對應的元素過濾掉。

　　 const myAwesomeArray = [ { id: 1, name: "john" },

　　 { id: 2, name: "Ali" }, { id: 3, name: "Mass" },

　　 { id: 4, name: "Mass" },]

　　 myAwesomeArray.filter(element => element.name === "Mass")

　　 //-------> Output : 0:{id: 3, name: "Mass"},

　　 // 1:{id: 4, name: "Mass"}

　　 7 、 forEach()

　　 此方法用於呼叫陣列的每個元素。並將元素傳遞給回撥函式。譯者注: forEach() 對於空陣列是不會執行回撥函式的。

　　 const myAwesomeArray = [ { id: 1, name: "john" },

　　 { id: 2, name: "Ali" }, { id: 3, name: "Mass" },]

　　 myAwesomeArray.forEach(element => console.log(element.name))

　　 //-------> Output : john

　　 // Ali

　　 // Mass

　　 8 、 findIndex()

　　 此方法返回傳入一個測試條件( 函式 ) 符合條件的陣列第一個元素位置。它為陣列中的每個元素都呼叫一次函式執行，當陣列中的元素在測試條件時返回 true 時 , findIndex() 返回符合條件的元素的索引位置，之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 -1 譯者注： findIndex() 對於空陣列，函式是不會執行的， findIndex() 並沒有改變陣列的原始值。

　　 const myAwesomeArray = [ { id: 1, name: "john" },

　　 { id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.findIndex(element => element.id === 3)

　　 // -------> Output : 2myAwesomeArray.findIndex(element => element.id === 7)

　　 //-------> Output : -1

　　 9 、 find()

　　 此方法返回透過測試( 函式內判斷 ) 的陣列的第一個元素的值。 find() 方法為陣列中的每個元素都呼叫一次函式執行：當陣列中的元素在測試條件時回 true 時 , find() 返回符合條件的元素，之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 undefined 。譯者注 : find() 對於空陣列，函式是不會執行的 ;find() 並沒有改變陣列的原始值。

　　 const myAwesomeArray = [ { id: 1, name: "john" },

　　 { id: 2, name: "Ali" }, { id: 3, name: "Mass" },] myAwesomeArray.find(element => element.id === 3)

　　 // -------> Output : {id: 3, name: "Mass"}

　　 myAwesomeArray.find(element => element.id === 7)

　　 //-------> Output : undefined

　　 10 、 sort()

　　 此方法接收一個函式作為引數。它對陣列的元素進行排序並返回它。也可以使用含有引數的sort() 方法進行排序。

　　 const myAwesomeArray = [5, 4, 3, 2, 1]

　　 // Sort from smallest to largestmyAwesomeArray.sort((a, b) => a - b)

　　 // -------> Output : [1, 2, 3, 4, 5]

　　 // Sort from largest to smallestmyAwesomeArray.sort((a, b) => b - a)

　　 //-------> Output : [5, 4, 3, 2, 1]

　　 11 、 concat()

　　 此方法用於連線兩個或多個陣列/ 值，它不會改變現有的陣列。而僅僅返回被連線陣列的一個新陣列。

　　 const myAwesomeArray = [1, 2, 3, 4, 5]const

　　 myAwesomeArray2 = [10, 20, 30, 40, 50]

　　 myAwesomeArray.concat(myAwesomeArray2)

　　 //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

　　 12 、 fill()

　　 此方法的作用是使用一個固定值來替換陣列中的元素。該固定值可以是字母、數字、字串、陣列等等。它還有兩個可選引數，表示填充起來的開始位置( 預設為 0) 與結束位置 ( 預設為 array.length) 。譯者注： fill() 方法用於將一個固定值替換陣列的元素。

　　 const myAwesomeArray = [1, 2, 3, 4, 5]

　　 // The first argument (0) is the value

　　 // The second argument (1) is the starting index

　　 // The third argument (3) is the ending indexmyAwesomeArray.fill(0, 1, 3)

　　 //-------> Output : [1, 0, 0, 4, 5]

　　 13 、 includes()

　　 此方法用於判斷字串是否包含指定的子字串。如果找到匹配的字串則返回 true ，否則返回 false 。

　　 譯者注：includes() 方法區分大小寫。

　　 const myAwesomeArray = [1, 2, 3, 4, 5]myAwesomeArray.includes(3)

　　 // -------> Output : truemyAwesomeArray.includes(8)

　　 // -------> Output : false

　　 14 、 reverse()

　　 此方法用於顛倒陣列中元素的順序。第一個元素成為最後一個，最後一個元素將成為第一個。

　　 const myAwesomeArray = ["e", "d", "c", "b", "a"]

　　 myAwesomeArray.reverse()

　　 // -------> Output : ['a', 'b', 'c', 'd', 'e']

　　 15 、 flatMap()

　　 該方法將函式應用於陣列的每個元素，然後將結果壓縮為一個新陣列。它在一個函式中結合了flat() 和 map() 。

　　 const myAwesomeArray = [[1], [2], [3], [4], [5]]

　　 myAwesomeArray.flatMap(arr => arr * 10)

　　 //-------> Output : [10, 20, 30, 40, 50]

　　 // With .flat() and .map()myAwesomeArray.flat().map(arr => arr * 10)

　　 //-------> Output : [10, 20, 30, 40, 50]

　　

　　 免責宣告：本文圖片及文字資訊均由小編轉載自網路，如有侵權請聯絡我們進行刪除。