javascript中的數組數據處理方法的補充
說明：對常用數組方法push()、splice()、slice()...的補充
注意，大多數情況下，將簡化作為參數傳遞的函數。
// arr.some(function(test) {return ..});
1、some()
此方法為參數傳遞的函數測試數組。如果有一個元素與測試元素匹配，則返回true，否則返回false。
譯者注： some() 不會對空數組進行檢測；some() 不會改變原始數組。
1 const arr = ["a", "b", "c", "d", "e"] 2 arr .some(test => test === "d") 3 //-------> Output : true
2、reduce()
此方法接收一個函數作為累加器。它為數組中的每個元素依次執行回調函數，不包括數組中被刪除或者從未被賦值的元素。函數應用于累加器，數組中的每個值最后只返回一個值。
譯者注：reduce() 方法接受四個參數：初始值（上一次回調的返回值），當前元素值，當前索引，原數組。
const arr = [1, 2, 3, 4, 5] arr.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120
3、every()
此方法是對數組中每項運行給定函數，如果數組的每個元素都與測試匹配，則返回true，反之則返回false。
const arr = ["a", "b", "c", "d", "e"] const arr2 = ["a", "a", "a", "a", "a"] arr.every(test => test === "d") //-------> Output : false arr2.every(test => test === "a") //-------> Output : true
4、map()
該方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。它按照原始數組元素順序依次處理元素。
譯者注：map() 不會對空數組進行檢測；map() 不會改變原始數組。
const arr = [5, 4, 3, 2, 1] arr.map(x => x * x) //-------> Output : 25 // 16 // 9 // 4 // 1
5、flat()
此方法創建一個新數組，其中包含子數組上的holden元素，并將其平整到新數組中。
請注意，此方法只能進行一個級別的深度。
const arr = [[1, 2], [3, 4], 5] const arr1 = [[1, 2], [3, [4, 6]], 5] arr.flat() //-------> Output : [1, 2, 3, 4, 5] arr1.flat() //-------> Output : [1, 2, 3, Array(2), 5]
6、filter()
該方法接收一個函數作為參數。并返回一個新數組，該數組包含該數組的所有元素，作為參數傳遞的過濾函數對其返回true。
譯者注：filter（）方法是對數據中的元素進行過濾，也就是說是不能修改原數組中的數據，只能讀取原數組中的數據，callback需要返回布爾值；為true的時候，對應的元素留下來；為false的時候，對應的元素過濾掉。
const arr = [ { id: 1, name: "john" },
{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },
{ id: 4, name: "Mass" }]
arr.filter(element => element.name === "Mass")
//-------> Output : 0:{id: 3, name: "Mass"},
// 1:{id: 4, name: "Mass"}
7、forEach()
此方法用于調用數組的每個元素。并將元素傳遞給回調函數。
譯者注: forEach() 對于空數組是不會執行回調函數的。
const arr = [ { id: 1, name: "john" },
{ id: 2, name: "Ali" }, { id: 3, name: "Mass" },]
arr .forEach(element => console.log(element.name))
//-------> Output : john
// Ali
// Mass
8、findIndex()
此方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。它為數組中的每個元素都調用一次函數執行，當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調用執行函數。如果沒有符合條件的元素返回 -1
譯者注：findIndex() 對于空數組，函數是不會執行的， findIndex() 并沒有改變數組的原始值。
const arr = [{ id: 1, name: "john"}, {id: 2, name: "Ali"}, { id: 3, name: "Mass"}]
arr.findIndex(element => element.id === 3)
// -------> Output : 2
arr.findIndex(element => element.id === 7)
//-------> Output : -1
9、find()
此方法返回通過測試（函數內判斷）的數組的第一個元素的值。find() 方法為數組中的每個元素都調用一次函數執行：當數組中的元素在測試條件時回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。如果沒有符合條件的元素返回 undefined。
譯者注: find() 對于空數組，函數是不會執行的；find() 并沒有改變數組的原始值。
const arr = [{id: 1, name: "john"}, {id: 2, name: "Ali"}, {id: 3, name: "Mass"}]
arr.find(element => element.id === 3)
// -------> Output : {id: 3, name: "Mass"}
arr.find(element => element.id === 7)
//-------> Output : undefined
10、sort()
此方法接收一個函數作為參數。它對數組的元素進行排序并返回它。也可以使用含有參數的sort()方法進行排序。
const arr = [5, 4, 3, 2, 1] arr.sort((a, b) => a - b) // -------> Output : [1, 2, 3, 4, 5] arr.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1]
11、const()
此方法用于連接兩個或多個數組/值，它不會改變現有的數組。而僅僅返回被連接數組的一個新數組。
const arr = [1, 2, 3, 4, 5] const arr2 = [10, 20, 30, 40, 50] arr.concat(arr2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]
12、fill()
此方法的作用是使用一個固定值來替換數組中的元素。該固定值可以是字母、數字、字符串、數組等等。它還有兩個可選參數，表示填充起來的開始位置（默認為0）與結束位置（默認為array.length）。
譯者注：fill() 方法用于將一個固定值替換數組的元素。
const arr = [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 index // array.fill(value, start, end) arr.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5]
13、includes()
此方法用于判斷字符串是否包含指定的子字符串。如果找到匹配的字符串則返回 true，否則返回 false。
譯者注：includes() 方法區分大小寫。
const arr = [1, 2, 3, 4, 5] arr.includes(3) // -------> Output : true arr.includes(8) // -------> Output : false
14、reverse()
此方法用于顛倒數組中元素的順序。第一個元素成為最后一個，最后一個元素將成為第一個。
const arr = ["e", "d", "c", "b", "a"] arr.reverse() // -------> Output : ['a', 'b', 'c', 'd', 'e']
15、flatMap()
該方法將函數應用于數組的每個元素，然后將結果壓縮為一個新數組。它在一個函數中結合了flat()和map()。
const arr = [[1], [2], [3], [4], [5]] arr.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] arr.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]
浙公網安備 33010602011771號