15個必須知道的JavaScript方法

1. some()

   此方法為參數傳遞的函數測試數組。如果有一個元素與測試元素比對，則傳回true，否則傳回false。

注： some() 不會對空數組進行檢測。

const arr = ["a","b","c","d"];
 console.log(arr.some(test => test === "e"));      //false
 console.log(arr.some(test => test === "a"));      //true
           

1. reduce()

   reduce()方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

共有四個參數：

total 必需。初始值, 或者計算結束後的傳回值。

currentValue 必需。目前元素

currentIndex 可選。目前元素的索引

arr 可選。目前元素所屬的數組對象。

const arr = [1,2,3,4,5];
let result = arr.reduce((total,value)=>total*value);
console.log(result)       //120    1*2*3*4*5
           

1. every()

   every()方法是對數組中每項運作給定函數，如果數組的每個元素都與測試比對，則傳回true，反之則傳回false。

參數：array.every(function(currentValue,index,arr), thisValue)

以下三個是function裡面的參數

currentValue 必須。目前元素的值

index 可選。目前元素的索引值

arr 可選。目前元素屬于的數組對象

thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 “this” 的值。

如果省略了 thisValue ，“this” 的值為 “undefined”

const arr = [1,2,3,4,5];
 const arr1 = [1,1,1,1,1];

 let result1 = arr.every(item => item === 1);        //隻有一項比對
 let result2 = arr1.every(item => item === 1);       //每項都會比對
 console.log(result1,result2)           //false true
           

1. map()

   map() 方法傳回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。

文法：array.map(function(currentValue,index,arr), thisValue)

currentValue 必須。目前元素的值

index 可選。目前元素的索引值

arr 可選。目前元素屬于的數組對象

thisValue同上

const arr = [1,2,3,4,5];
        console.log(arr.map(x => x*x));
        // (5) [1, 4, 9, 16, 25]
        // 0: 1
        // 1: 4
        // 2: 9
        // 3: 16
        // 4: 25
        console.log(arr.map((cur,i) => {
            return cur*i
        }))
        // (5) [0, 2, 6, 12, 20]
           

1. flat()

   此方法建立一個新數組，其中包含子數組上的holden元素，并将其平整到新數組中。請注意，此方法隻能進行一個級别的深度。

const arr = [[1,2,3],1,[23,4]];
console.log(arr.flat());
//[1, 2, 3, 1, 23, 4]

const arr = [[1,2,3],1,[23,4,[100,200]]];
console.log(arr.flat());
/*
 [1, 2, 3, 1, 23, 4, Array(2)]
0: 1
1: 2
2: 3
3: 1
4: 23
5: 4
6: (2) [100, 200]*/
           

1. filter()

   filter() 方法建立一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。filter不會改變原數組

array.filter(function(currentValue,index,arr), thisValue)

const ages = [1,2,3,4,5];
function check(age){
    return age>3;
}
console.log(ages.filter(check));         //[4,5]


const arr = [  
    { id: 1, name: "john" },  
    { id: 2, name: "Ali" },  
    { id: 3, name: "Mass" },  
    { id: 4, name: "Mass" }
]
function nameq(n){
    return n.name === 'john'
}
console.log(arr.filter(nameq))  
// [{…}]
// 0: {id: 1, name: "john"}
// length: 1
           

1. forEach()

   forEach() 方法用于調用數組的每個元素，并将元素傳遞給回調函數

   forEach() 對于空數組是不會執行回調函數的。

array.forEach(function(currentValue, index, arr), thisValue)

const arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
    console.log(item,index,arr);
})
// 1 0 (5) [1, 2, 3, 4, 5]
// 2 1 (5) [1, 2, 3, 4, 5]
// 3 2 (5) [1, 2, 3, 4, 5]
// 4 3 (5) [1, 2, 3, 4, 5]
// 5 4 (5) [1, 2, 3, 4, 5]
           

1. findIndex()

   此方法傳回傳入一個測試條件（函數）符合條件的數組第一個元素位置。它為數組中的每個元素都調用一次函數執行，當數組中的元素在測試條件時傳回 true 時, findIndex() 傳回符合條件的元素的索引位置，之後的值不會再調用執行函數。如果沒有符合條件的元素傳回 -1。

   findIndex() 并沒有改變數組的原始值。

const arr = [1,2,3,4,5];
console.log(arr.findIndex(element=>element === 3));      //2
           

1. find()

   find() 方法為數組中的每個元素都調用一次函數執行：當數組中的元素在測試條件時回 true 時, **find() 傳回符合條件的元素，之後的值不會再調用執行函數。**如果沒有符合條件的元素傳回 undefined

const arr = [1,2,3,4,5];

console.log(arr.find(element=>element === 0));     //undefined  
console.log(arr.find(element=>element === 3));     //3 
           

1. sort()

   此方法接收一個函數作為參數。它對數組的元素進行排序并傳回它。也可以使用含有參數的sort()方法進行排序。

const arr = [1,2,3,4,5];
console.log(arr.sort((a,b)=>b-a));   // [5, 4, 3, 2, 1]
           

1. concat()

   連接配接數組或值，不會改變現有數組，而僅僅傳回被連接配接數組的一個新數組。

const arr = [1,2,3,4,5];
const arr1 = [2,3,4,5,6,7,8];
console.log(arr.concat(arr1));   // [1, 2, 3, 4, 5, 2, 3, 4, 5, 6, 7, 8]
           

1. fill()

   此方法的作用是使用一個固定值來替換數組中的元素。該固定值可以是字母、數字、字元串、數組等等。它還有兩個可選參數，表示填充起來的開始位置（預設為0）與結束位置（預設為array.length）。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 3);  //["Banana", "Orange", "Runoob", "Mango"]
fruits.fill("Runoob", 2, 4);  //["Banana", "Orange", "Runoob", "Runoob"]
console.log(fruits);
           

1. includes()

   此方法用于判斷字元串是否包含指定的子字元串。如果找到比對的字元串則傳回 true，否則傳回 false。

const arr = [1,3,4,5];
console.log(arr.includes(1));  //true
           

1. reserve()

   此方法用于颠倒數組中元素的順序。第一個元素成為最後一個，最後一個元素将成為第一個。

const arr = [1,3,4,5];
console.log(arr.reverse());  //[5, 4, 3, 1]
           

1. flatMap()

   該方法将函數應用于數組的每個元素，然後将結果壓縮為一個新數組。它在一個函數中結合了flat（）和map（）。

const arr = [[1],[2],[3],[3]];
console.log(arr.flatMap(arr => arr*10));  //[10, 20, 30, 30]