JavaScript Array map() 方法

居老師的狗子發表於2019-03-19
JavaScript

一、定義

map() 方法返回一個新陣列，不會改變原始陣列。同時新陣列中的元素為原始陣列元素呼叫函式處理後的值，並按照原始陣列元素順序依次處理元素。

注意：map() 不會對空陣列進行檢測。

二、語法

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

四、ES6書寫

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})
var arr = [1,2,3,4];
arr.map((item,index,arr) => {
    return item*10 //新陣列為10,20,30,40
})
//map遍歷陣列，返回一個新陣列，不改變原陣列的值。

五、補充
查map的時候，發現了一個帖子問map裡面的this指的是啥，感覺沒太明白，關於this，真是個頭疼的問題，需要深入研究。
先儲存上有一個人的回答，以備不時之需。看起來說的好像能明白似的。
array.map(callback, this)
中的this：把this僅僅當做一個引數，即函式的實參。所以實參具體是什麼要看它的宣告、定義以及值。舉個例子：

var object = {}
array.map(callback, object)
也就是說對於map方法而言，在實際用的時候，它的第二個引數是一個前面已經宣告過的變數。但是如果你傳入this，那麼這個this就要往前找，往它所在的上一級作用域去找，如果可以找到對應的例項化物件，那麼就是這個例項化物件了，如果找不到，那就指向了全域性物件。

還是要舉個栗子：

var array = [1,2,3]
var a = {
  mapObject: function() {
    array.map(function(){}, this) // 這個時候的this是什麼呢？是a啊！
  }
}
而如果不是在一個例項化物件裡面：

array.map(function(){}, this) // this是window或者global啊！
至於你裡面console.log(this)為什麼是window，你就得知道.bind，比如：

!function(){
    console.log(this.name)
}.bind({
    name: "Sam"
})
bind, call, apply的作用都是讓函式裡面的this指向給定的一個物件。

array.map(function() {}, this) 的作用實際上和 array.map(function() {}.bind(this)) 是一樣的。map的第二個引數就是給第一個引數bind一個物件，這樣在第一個引數裡面就可以用this代替第二個引數。

回到你的題目中，前面第一個this其實就是指向了window，而function裡面的this指向的是map的第二個引數，所以繞了一圈，還是指向了window.

this指向的一個小竅門：this指向的是當前作用域所屬例項化物件，如果沒有找到該物件，則是指向window。

 



相關文章