亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

new Array(1) 和 [undefined] 一樣嘛？

yzd / 3038人閱讀

摘要：實(shí)際上這個(gè)操作不是創(chuàng)建一個(gè)項(xiàng)都是的數(shù)組，它創(chuàng)建的是一個(gè)只有長(zhǎng)度的數(shù)組，里面的每項(xiàng)都是沒有被賦過值的可以想象實(shí)際上是創(chuàng)建了一個(gè)的數(shù)組。函數(shù)的回調(diào)函數(shù)只會(huì)被賦過值的項(xiàng)調(diào)用。沒有為數(shù)組中的項(xiàng)賦過值，而為數(shù)組中的項(xiàng)賦了一個(gè)值。

一 問題描述

最近在開發(fā)中碰到一個(gè)很奇怪的問題，請(qǐng)看下面代碼

const newArr = new Array(3).map((item) => {
  return item = {
    name: "Chris xiong"
  }
})
console.log(newArr)

大家覺得這段代碼的輸出結(jié)果是多少呢？很多小伙伴會(huì)覺得結(jié)果一定是這樣的
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
這么想的同學(xué)請(qǐng)把上面那段代碼放進(jìn)控制臺(tái)里輸出一下。你會(huì)發(fā)現(xiàn)，結(jié)果不是你想象的那樣。上述這段代碼的執(zhí)行結(jié)果是(3) [undefined × 3]。
大家一定會(huì)感到困惑，為什么輸出的是undefined * 3呢？, 是因?yàn)槲覀兊臄?shù)組里的值是undefined，所以不能給undefined賦值嘛？先不著急，我們?cè)賮砜聪旅嬉欢未a

const arrA = [undefined, undefined, undefined]
const newArr = arrA.map((item) => {
  return item = {
     name: "Chris xiong"
   }  
})
console.log(newArr)

如果上面的問題是因?yàn)閿?shù)組的值是undefined造成的話，那么第二個(gè)demo也一定是(3) [undefined × 3]。那么事實(shí)又是什么呢？這里不賣關(guān)子了。這里的輸出結(jié)果為
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
奇怪了，這里為什么又輸出的是我們想要的結(jié)果呢？很氣有沒有？下面我們一起來探究一下這個(gè)讓人困惑的問題。

二 原因探究

首先我們來看看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ù)只會(huì)被數(shù)組中那些被賦予了值的項(xiàng)調(diào)用（包括賦了undefine的值),而不會(huì)被那些重來沒有設(shè)置過值，或者被刪除了的項(xiàng)調(diào)用。（注意這里的重來沒有被賦給值）
那么現(xiàn)在我們就知道了，如果數(shù)組中的項(xiàng)沒有被賦過值，那么這項(xiàng)就不能調(diào)用callback函數(shù)。
實(shí)際上new Array(x)這個(gè)操作不是創(chuàng)建一個(gè)x項(xiàng)都是undefined的數(shù)組，它創(chuàng)建的是一個(gè)只有長(zhǎng)度的數(shù)組，里面的每項(xiàng)都是沒有被賦過值的(可以想象new Array(3)實(shí)際上是創(chuàng)建了一個(gè)[, ,]的數(shù)組。
我們來看下面一段代碼

const arrA = [ , , ]
const newArr = arrA.map((item) => {
  return item = {
     name: "Chris xiong"
   }  
})
console.log(newArr)

上面這段代碼和第一段代碼執(zhí)行結(jié)果一樣。
綜合以上，我們找出了問題的原因。
（1）map函數(shù)的回調(diào)函數(shù)只會(huì)被賦過值的項(xiàng)調(diào)用。
（2）new Array(1) 和 [undefined]不一樣。new Array(1)沒有為數(shù)組中的項(xiàng)賦過值，而[undefined]為數(shù)組中的項(xiàng)賦了一個(gè)undefined值。

三 解決方法

那么如果我們想像上面那樣創(chuàng)建一個(gè)新數(shù)組怎么辦呢？知道原因就很簡(jiǎn)單了，我們?cè)谟胣ew Array創(chuàng)建數(shù)組之后，再為數(shù)組的每一項(xiàng)隨便賦個(gè)什么值就行了。一般使用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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84793.html

相關(guān)文章

  • 數(shù)組空位元素的處理

    之前看到知乎上的這道題：如何不使用loop循環(huán)，創(chuàng)建一個(gè)長(zhǎng)度為100的數(shù)組，并且每個(gè)元素的值等于它的下標(biāo)？，在這個(gè)問題里面題主提到，他寫了這么一段代碼： use strict let arr = Array(100).map( (item,idx) => idx) 結(jié)果arr是一個(gè)有100個(gè)空位的數(shù)組:showImg(https://segmentfault.com/img/bVtNMu);這說...

    Yujiaao 評(píng)論0 收藏0

  • javascript數(shù)組知識(shí)基礎(chǔ)講解（上）

    摘要：稀疏數(shù)組遍歷上面這段代碼可以看出，在遍歷數(shù)組的時(shí)候是會(huì)跳過這些空白單元，直接找到下標(biāo)為的值。 js是一門擁有非常強(qiáng)表達(dá)能力的語言，當(dāng)你知道你要做什么的時(shí)候，它能幫助你更加出色的完成這件事情。當(dāng)然，想要成為一名出色的前端工程師，需要的是更多的精力跟學(xué)習(xí)。所以大家要跟我一起努力哦！ 數(shù)組基本了解 數(shù)組（array）,字符串（string）,和數(shù)字（number）算是一個(gè)程序最基本的組成部分...

    cgh1999520 評(píng)論0 收藏0

  • javascript判斷數(shù)據(jù)類型

    摘要：操作符剛說完，肯定又有人想用，但是，真的有用嗎操作符用來比較兩個(gè)操作數(shù)的構(gòu)造函數(shù)，運(yùn)算符與運(yùn)算符相似，用于識(shí)別正在處理的對(duì)象的類型。 題目 實(shí)現(xiàn)一個(gè)函數(shù)typeof()，輸入一個(gè)數(shù)據(jù)，返回?cái)?shù)據(jù)的基本類型。如： typeof([]) => array typeof({}) => object typeof() => string 等等 解析 由于javascript這門語言輝(keng)...

    Lyux 評(píng)論0 收藏0

  • 閱讀redux源碼

    摘要：一個(gè)沒有返回值都會(huì)有警告，所以我們寫的時(shí)候都會(huì)指定一個(gè)默認(rèn)返回值。執(zhí)行接收參數(shù)，如果參數(shù)個(gè)數(shù)是，直接執(zhí)行，上文的的執(zhí)行結(jié)果返回值是一個(gè)函數(shù)，作為參數(shù)的話，長(zhǎng)度確實(shí)是，所以直接返回了，也就是，所以這塊是不需要的。 redux源碼解析 什么是redux Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。 為什么需要使用redux 提供了和雙向綁定思想不同的單向數(shù)據(jù)流，...

    endless_road 評(píng)論0 收藏0

  • 霸道總裁之js對(duì)象

    摘要：應(yīng)該一樣啊騷年，不要把你判斷值類型的方法套在我們偉大的對(duì)象上。還記得上面說的，對(duì)象是由構(gòu)造器函數(shù)創(chuàng)建的嗎所以說有構(gòu)造器的類型，都是對(duì)象。其他的類型都有構(gòu)造器，所以再次聲明一切都是對(duì)象是很有道理的。 對(duì)象 在大多數(shù)人的眼里，js是一門面向?qū)ο?Object-Oriented)的語言，但是它與其他的語言比如c++,java 這些面向?qū)ο笳Z言 略有不同。!!!艸，說人話那問幾個(gè)問題吧： 1....

    TerryCai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<