數組空位元素的處理

Yujiaao 發布于2019-08-19 17:56 / 362人閱讀

之前看到知乎上的這道題：如何不使用loop循環，創建一個長度為100的數組，并且每個元素的值等于它的下標？，在這個問題里面題主提到，他寫了這么一段代碼：

"use strict"
let arr = Array(100).map( (item,idx) =>  idx)

結果arr是一個有100個空位的數組:

這說明Array.prototype.map()會跳過空位元素嘛。

然后我在下面的答案里看到這么一條：

Array.from(new Array(100), (item, idx) => idx)

//or the alternative
Array.from({length: 5}, (item, idx) => idx)

我本來是覺得，這個肯定也不行嘛，這倆都是用Array構造函數新建了一個全是空位的數組嘛，怎么會不一樣呢？結果試了一下之后發現居然成功地得到了數組。我開始懷疑Array.from的map函數的實現和Array.prototype.map有不一樣的地方。再加上MDN的文檔也來搗亂：

Array.from(arrayLike[, mapFn[, thisArg]])

#arrayLike

An array-like or iterable object to convert to an array.

#mapFn

Optional. Map function to call on .

#thisArg

Optional. Value to use as this when executing mapFn.

在這里mapFn下面明確地指出mapFn會調用every element of the array.

而在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.

明確說明會跳過空位元素，所以我就想是不是這倆家伙的map方法本身不一致。

當然結論并沒有這么厲害 Orz...后來我偶然間發現原來是因為Array.from()方法會把數組的空位轉為undefined.也就是說數組空位元素的處理和map方法的實現是無關的。

數組空位元素的處理

forEach(), filter(), every() 和some()都會跳過空位。

map()會跳過空位，但會保留這個值

join()和toString()會將空位視為undefined，而undefined和null會被處理成空字符串

// forEach方法
[,"a"].forEach((x,i) => log(i)); // 1

// filter方法
["a",,"b"].filter(x => true) // ["a","b"]

// every方法
[,"a"].every(x => x==="a") // true

// some方法
[,"a"].some(x => x !== "a") // false

// map方法
[,"a"].map(x => 1) // [,1]

// join方法
[,"a",undefined,null].join("#") // "#a##"

// toString方法
[,"a",undefined,null].toString() // ",a,,"

ES6則是明確將空位轉為undefined,Array.from方法會將數組的空位轉為undefined,也就是說，這個方法不會忽略空位:

Array.from(["a",,"b"])
// [ "a", undefined, "b" ]

擴展運算符（...）也會將空位轉為undefined:

[...["a",,"b"]]
// [ "a", undefined, "b" ]

for...of循環也會遍歷空位:

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

entries()、keys()、values()、find()和findIndex()會將空位處理成undefined:

// entries()
[...[,"a"].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,"a"].keys()] // [0,1]

// values()
[...[,"a"].values()] // [undefined,"a"]

// find()
[,"a"].find(x => true) // undefined

// findIndex()
[,"a"].findIndex(x => true) // 0

參考：阮一峰ES2015

GPU云服務器云服務器 php去除數組的元素數組元素數組元素值數組重復元素

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

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

JavaScript學習之數組(下)

摘要：數組篇方法函數可以將函數作為參數傳入，并將數組中每個元素代入函數進行處理返回，返回一個新的數組可以看出可以傳入兩個參數，第一個參數中函數可以填入三個參數，數組的元素，數組的索引，數組本身第二個參數用來綁定回調函數內部的注意點當元素為空位，，數組篇 map()方法 map函數可以將函數作為參數傳入，并將數組中每個元素代入函數進行處理返回，返回一個新的數組 arr.map(functio...

Labradors 2019-08-23 12:14 評論0 收藏0
JavaScript 小知識點

摘要：比如，構造函數返回的數組都是空位。方法方法方法方法方法方法方法方法對空位的處理則是明確將空位轉為。在這些情況下，迭代器關閉。原型鏈相關最詳盡的 JS 原型與原型鏈終極詳解 isNaN() 和 Number.isNaN() 的區別 isNaN() 是 ES1 規范；是全局方法；如果參數不是一個 Number 類型，會先嘗試將參數轉化為數值，然后對轉換后的結果進行是否是 Na...

馬永翠 2019-08-22 17:58 評論0 收藏0
ES6：數組

摘要：中的方法遍歷一下數組中的每個選項返回一個新的數組。還可以接受第二個參數，作用類似與數組的方法，用于對每個元素進行處理。這個方式是用于將一組值，轉換為數組。可選到該位置前停止讀取數據，默認等于數組長度。如果是負數，表示倒數。 ES6中數組增加了很多新的方法，但是先回顧下之前ES5中的數組的方法。 ES5中的方法 Array.prototype.forEach 遍歷一下數組中的每個選...

lavor 2019-08-21 11:33 評論0 收藏0
ECMAScript6 新特性——“數組的擴展”

摘要：原來的也被修改了數組實例的喝方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為的成員，然后返回該成員。數組實例的方法使用給定值，填充一個數組。 1 Array.from() Array.from方法用于將兩類對象轉為真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括...

Eminjannn 2019-08-19 18:01 評論0 收藏0
你不知道的數組

摘要：數組定義數組是按次序排列的一組值每個值都有編號，從開始可以在定義時賦值，也可以先定義后賦值任何類型的數據都可以存入數組數組的本質本質上，數組屬于一種特殊的對象，它的鍵名是按次序排列的一組整數數組成員的鍵名是固定的，因此不用為每個元素指定鍵名數組定義數組是按次序排列的一組值每個值都有編號，從0開始可以在定義時賦值，也可以先定義后賦值任何類型的數據都可以存入數組 ...

beita 2019-08-26 11:55 評論0 收藏0