資訊專欄INFORMATION COLUMN
摘要：實(shí)際上這個操作不是創(chuàng)建一個項(xiàng)都是的數(shù)組，它創(chuàng)建的是一個只有長度的數(shù)組，里面的每項(xiàng)都是沒有被賦過值的可以想象實(shí)際上是創(chuàng)建了一個的數(shù)組。函數(shù)的回調(diào)函數(shù)只會被賦過值的項(xiàng)調(diào)用。沒有為數(shù)組中的項(xiàng)賦過值，而為數(shù)組中的項(xiàng)賦了一個值。
一 問題描述
最近在開發(fā)中碰到一個很奇怪的問題，請看下面代碼
const newArr = new Array(3).map((item) => {
return item = {
name: "Chris xiong"
}
})
console.log(newArr)
大家覺得這段代碼的輸出結(jié)果是多少呢？很多小伙伴會覺得結(jié)果一定是這樣的
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
這么想的同學(xué)請把上面那段代碼放進(jìn)控制臺里輸出一下。你會發(fā)現(xiàn)，結(jié)果不是你想象的那樣。上述這段代碼的執(zhí)行結(jié)果是(3) [undefined × 3]。
大家一定會感到困惑，為什么輸出的是undefined * 3呢？, 是因?yàn)槲覀兊臄?shù)組里的值是undefined，所以不能給undefined賦值嘛？先不著急，我們再來看下面一段代碼
const arrA = [undefined, undefined, undefined]
const newArr = arrA.map((item) => {
return item = {
name: "Chris xiong"
}
})
console.log(newArr)
如果上面的問題是因?yàn)閿?shù)組的值是undefined造成的話，那么第二個demo也一定是(3) [undefined × 3]。那么事實(shí)又是什么呢？這里不賣關(guān)子了。這里的輸出結(jié)果為
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
奇怪了，這里為什么又輸出的是我們想要的結(jié)果呢？很氣有沒有？下面我們一起來探究一下這個讓人困惑的問題。
首先我們來看看Array.prototype.map的定義Array.prototype.map。大家注意這一句
callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).
map函數(shù)的回調(diào)函數(shù)只會被數(shù)組中那些被賦予了值的項(xiàng)調(diào)用（包括賦了undefine的值),而不會被那些重來沒有設(shè)置過值，或者被刪除了的項(xiàng)調(diào)用。（注意這里的重來沒有被賦給值）
那么現(xiàn)在我們就知道了，如果數(shù)組中的項(xiàng)沒有被賦過值，那么這項(xiàng)就不能調(diào)用callback函數(shù)。
實(shí)際上new Array(x)這個操作不是創(chuàng)建一個x項(xiàng)都是undefined的數(shù)組，它創(chuàng)建的是一個只有長度的數(shù)組，里面的每項(xiàng)都是沒有被賦過值的(可以想象new Array(3)實(shí)際上是創(chuàng)建了一個[, ,]的數(shù)組。
我們來看下面一段代碼
const arrA = [ , , ]
const newArr = arrA.map((item) => {
return item = {
name: "Chris xiong"
}
})
console.log(newArr)
上面這段代碼和第一段代碼執(zhí)行結(jié)果一樣。
綜合以上，我們找出了問題的原因。
（1）map函數(shù)的回調(diào)函數(shù)只會被賦過值的項(xiàng)調(diào)用。
（2）new Array(1) 和 [undefined]不一樣。new Array(1)沒有為數(shù)組中的項(xiàng)賦過值，而[undefined]為數(shù)組中的項(xiàng)賦了一個undefined值。
那么如果我們想像上面那樣創(chuàng)建一個新數(shù)組怎么辦呢？知道原因就很簡單了，我們在用new Array創(chuàng)建數(shù)組之后，再為數(shù)組的每一項(xiàng)隨便賦個什么值就行了。一般使用fill方法
const newArr = new Array(3).fill().map((item) => {
return item = {
name: "Chris xiong"
}
})
console.log(newArr)
輸出的結(jié)果就是
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
注：
(1) fill函數(shù)為數(shù)組填充值。fill函數(shù)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84793.html
之前看到知乎上的這道題：如何不使用loop循環(huán)，創(chuàng)建一個長度為100的數(shù)組，并且每個元素的值等于它的下標(biāo)？，在這個問題里面題主提到，他寫了這么一段代碼： use strict let arr = Array(100).map( (item,idx) => idx) 結(jié)果arr是一個有100個空位的數(shù)組:showImg(https://segmentfault.com/img/bVtNMu);這說...
摘要：稀疏數(shù)組遍歷上面這段代碼可以看出，在遍歷數(shù)組的時候是會跳過這些空白單元，直接找到下標(biāo)為的值。 js是一門擁有非常強(qiáng)表達(dá)能力的語言，當(dāng)你知道你要做什么的時候，它能幫助你更加出色的完成這件事情。當(dāng)然，想要成為一名出色的前端工程師，需要的是更多的精力跟學(xué)習(xí)。所以大家要跟我一起努力哦！ 數(shù)組基本了解 數(shù)組（array）,字符串（string）,和數(shù)字（number）算是一個程序最基本的組成部分...
摘要：操作符剛說完，肯定又有人想用，但是，真的有用嗎操作符用來比較兩個操作數(shù)的構(gòu)造函數(shù)，運(yùn)算符與運(yùn)算符相似，用于識別正在處理的對象的類型。 題目 實(shí)現(xiàn)一個函數(shù)typeof()，輸入一個數(shù)據(jù)，返回數(shù)據(jù)的基本類型。如： typeof([]) => array typeof({}) => object typeof() => string 等等 解析 由于javascript這門語言輝(keng)...
摘要：一個沒有返回值都會有警告，所以我們寫的時候都會指定一個默認(rèn)返回值。執(zhí)行接收參數(shù)，如果參數(shù)個數(shù)是，直接執(zhí)行，上文的的執(zhí)行結(jié)果返回值是一個函數(shù)，作為參數(shù)的話，長度確實(shí)是，所以直接返回了，也就是，所以這塊是不需要的。 redux源碼解析 什么是redux Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。 為什么需要使用redux 提供了和雙向綁定思想不同的單向數(shù)據(jù)流，...
閱讀 1356·2023-04-26 00:35
閱讀 2728·2023-04-25 18:32
閱讀 3379·2021-11-24 11:14
閱讀 782·2021-11-22 15:24
閱讀 1432·2021-11-18 10:07
閱讀 6561·2021-09-22 10:57
閱讀 2787·2021-09-07 09:58
閱讀 3575·2019-08-30 15:54
