map與forEach的小結

tomato 發布于2019-08-23 18:34 / 2800人閱讀

摘要：方法功能創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。。方法功能遍歷，對數組中的元素依次處理。

Array.map()方法
功能 : 創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。。
參數 : （currentValue，index，arrOrigin）(當前元素的值，當前元素的索引，當前元素的數組對象)
使用 :

 var arr = [1,2,3];
 
 arr.map((currentVaLue,index,arrOrigin)=>{},this)

特別注意：

    1.map()不會對空數組進行檢測，所以最好在使用map()之前進行檢測是否為數組
    2.map()正常情況下不會改變原始數組,但是可以通過arrOrigin來修改
    3.map()可以有返回值，需要return
    4.map()中傳入Math等數學元素,返回的數組中會被處理成想要的樣子.如:xxx.map(Math.sqrt)  ===>可以將數組中的內容開平方.
    5.map()中傳入Number等轉換格式的方法,返回的數組也會被轉換.如:xxx.map(Number)  ===>里面的元素都會被轉化為數字類型

舉個好的栗子：

let arrMap1=[1,2,3];
// let arrMap1=""; //用于檢驗
let arrMap2=Array.isArray(arrMap1)?arrMap1:[] 
let newArrMap=arrMap2.map((item,index,arrOrigin) => {
    return item*2;
})
// console.log(arrMap1)//沒有改變。。。
// console.log(arrMap2)//沒有改變。。。
// console.log(newArrMap)

Array.forEach()方法
功能 : 遍歷，對數組中的元素依次處理。
參數 : （currentValue，index，arrOrigin）(當前元素的值，當前元素的索引，當前元素的數組對象)
官方使用

 var arr = [1,2,3];
 arr.forEach((currentVaLue,index,arr)=>{},this)

特別注意：

    1.forEach()不會對空數組進行檢測，所以最好在使用forEach()之前進行檢測是否為數組

    2.forEach()正常情況下不會直接改變原始數組,但是可以通過arrOrigin來修改

舉個好的栗子

let arrForEach1=[1,2,3];
// let arrForEach1=""; //用于檢驗
let arrForEach2=Array.isArray(arrForEach1)?arrForEach1:[] 
arrForEach2.forEach((item,index,arrOrigin) => {
    arrOrigin[index]=item*2;
})

//寫一個用forEach來累加參數的累加方法
function Counter(arr){
    this.sum=0;
    this.count=0;
}
Counter.prototype.add=function(arr){
    if (!Array.isArray(arr)){
        console.warn("請傳入數組")
        return
    } 
    arr.forEach(function (element){
        // console.log(this)
        this.sum+=element;
        ++this.count;
    },this)
}
let obj=new Counter();
obj.add([1,2,3])
// let ADD=obj.add; //檢驗this
// ADD([1,2,3]);
// console.log(obj);
// console.log(obj.sum);

//換一個優雅的寫法
class calssCounter{
    constructor(){
        this.sum=0;
        this.count=0;
    }
    add(arr){
        if(!Array.isArray(arr)){
            console.warn("請輸入數組");
            return
        }
        arr.forEach(function(ele){
            this.sum+=ele;
            ++this.count;
        },this)
    }
}
let objClass = new calssCounter();
objClass.add([1,2,3,4,5]);
console.log(objClass.sum)

注：文中部分例子來源于：https://developer.mozilla.org...

GPU云服務器云服務器 map集合的使用 java的map合并 java的map結構 Js map的存儲

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105459.html

JavaScript 中遍歷方法小結

摘要：遍歷方法小結常用的遍歷方法遍歷對數組的每個元素執行一次提供的函數創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果遍歷大家都熟悉，所以重點講一下與的區別相同點回調函數參數相同，都自帶三個屬性均不會修改原數組第二參數的遍歷方法小結常用的遍歷方法 for 遍歷 forEach（對數組的每個元素執行一次提供的函數） map（創建一個新數組，其結果是該數組中的每個...

flyer_dev 2019-08-23 16:06 評論0 收藏0
從非數組對象轉數組方法小結

摘要：該方法可以將類數組對象轉換為數組，所謂類數組對象，就是含和索引屬性的對象返回的數組長度取決于對象屬性的值，且非索引屬性的值，或索引大于的值都不會被返回到數組中實錘如下簡潔寫法該方法可以將類數組對象和可迭代對象轉換為數組類數組對象上文已提及， Array.prototype.slice.call(obj) 該方法可以將類數組對象轉換為數組，所謂類數組對象，就是含 length 和索引屬性...

silvertheo 2019-08-22 15:09 評論0 收藏0
Javascript函數式編程小結

摘要：源起函數式編程近幾年非常流行經?？梢栽诰W上看到別人討論相關話題我機緣巧合之下在上看到有人提到一個講函數式編程的視頻看過之后突然茅塞頓開瞬間把之前零碎的關于函數式編程的知識一下子都聯系了起來于是自己希望趁有空把這些知識總結一下這樣既可以回顧下源起函數式編程近幾年非常流行,經?？梢栽诰W上看到別人討論相關話題. 我機緣巧合之下在github上看到有人提到一個講js函數式編程的視頻,看過之...

zengdongbao 2019-08-21 10:54 評論0 收藏0
js數組操作方法小結

摘要：操作方法創建數組類數組將類數組轉換真正的數組修改數組合并數組，返回新數組，原數組不變數組轉化為字符串以默認為逗號拼接為字符串。 Array操作方法創建數組 var arr=[] var arr = new Array() var arr1 = [1, 2, 3] var arr2 = [a, b, c] var arrLike = [{ name: 123, age:...

April 2019-08-23 14:26 評論0 收藏0
es6-Set與Map

摘要：由于和不會被轉換為字符串，所以在內部是不同的項，如果他們被轉化為字符串，那么都會等于，如果多次調用并傳入相同的值作為參數。第二次重復傳入并不會被添加到集合中，那么的屬性值還是為。的方法和共享了幾個方法。小結正式將與引入。 se5中的set與map 在est5中開發者使用對象屬性來模擬。set多用于檢查鍵的存在，map多用于提取數據。 { let set = Object.cre...

big_cat 2019-08-22 17:36 評論0 收藏0