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

yzd 發布于2019-08-20 18:52 / 2958人閱讀

摘要：實際上這個操作不是創建一個項都是的數組，它創建的是一個只有長度的數組，里面的每項都是沒有被賦過值的可以想象實際上是創建了一個的數組。函數的回調函數只會被賦過值的項調用。沒有為數組中的項賦過值，而為數組中的項賦了一個值。

一問題描述

最近在開發中碰到一個很奇怪的問題，請看下面代碼

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

大家覺得這段代碼的輸出結果是多少呢？很多小伙伴會覺得結果一定是這樣的
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]
這么想的同學請把上面那段代碼放進控制臺里輸出一下。你會發現，結果不是你想象的那樣。上述這段代碼的執行結果是(3) [undefined × 3]。
大家一定會感到困惑，為什么輸出的是undefined * 3呢？, 是因為我們的數組里的值是undefined，所以不能給undefined賦值嘛？先不著急，我們再來看下面一段代碼

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

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

二原因探究

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

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

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

三解決方法

那么如果我們想像上面那樣創建一個新數組怎么辦呢？知道原因就很簡單了，我們在用new Array創建數組之后，再為數組的每一項隨便賦個什么值就行了。一般使用fill方法

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

輸出的結果就是
[{name: "Chris xiong"}, {name: "Chris xiong"}, {name: "Chris xiong"}]

注：
(1) fill函數為數組填充值。fill函數

GPU云服務器云服務器云主機和云服務器一樣嘛 ucloud和阿里云一樣嗎表情識別和圖像識別一樣嗎空間和云服務器一樣嗎

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

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

數組空位元素的處理

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

Yujiaao 2019-08-19 17:56 評論0 收藏0
javascript數組知識基礎講解（上）

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

cgh1999520 2019-08-23 18:04 評論0 收藏0
javascript判斷數據類型

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

Lyux 2019-08-19 18:22 評論0 收藏0
閱讀redux源碼

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

endless_road 2019-08-20 15:58 評論0 收藏0
霸道總裁之js對象

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

TerryCai 2019-08-19 17:18 評論0 收藏0