聊聊 Array 中的坑

songze 發(fā)布于2019-08-23 14:50 / 2075人閱讀

摘要：原文翻譯瘋狂的技術(shù)宅本文首發(fā)微信公眾號(hào)歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章類型檢測(cè)假設(shè)是一個(gè)數(shù)組，我們想要實(shí)現(xiàn)一些功能。將為數(shù)組返回，即使它們是在另一個(gè)中創(chuàng)建的。本文首發(fā)微信公眾號(hào)歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

原文：https://jakearchibald.com/201...
翻譯：瘋狂的技術(shù)宅

本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

Array 類型檢測(cè)

function foo(obj) {
  // …
}

假設(shè)obj是一個(gè)數(shù)組，我們想要實(shí)現(xiàn)一些功能。比如 JSON.stringify就是一個(gè)例子，它以不同的方式把數(shù)組輸出到其他對(duì)象。

我們可以這樣做：

if (obj.constructor == Array) // …

但是對(duì)于數(shù)組的子類來說這是錯(cuò)誤的：

class SpecialArray extends Array {}
const specialArray = new SpecialArray();
console.log(specialArray.constructor === Array); // false
console.log(specialArray.constructor === SpecialArray); // true

所以如果你想檢查子類的類型，那么應(yīng)該用instanceof：

console.log(specialArray instanceof Array); // true
console.log(specialArray instanceof SpecialArray); // true

但是當(dāng)引入多個(gè)realm時(shí)，事情將會(huì)變得更加復(fù)雜：

Multiple realms

realm包含self引用的JavaScript全局對(duì)象。因此，可以說在worker中運(yùn)行的代碼與在頁面中運(yùn)行的代碼處于不同的realm。在iframe之間也是如此，但同源iframe也共享一個(gè)ECMAScript"代理"，這意味著對(duì)象可以穿越 realm。

接著看代碼：

這兩個(gè)都是false，因?yàn)椋?/p>

console.log(Array === iframe.contentWindow.Array); // false

iframe有自己的數(shù)組構(gòu)造函數(shù)，它與父頁面中的構(gòu)造函數(shù)不同。

Array.isArray

console.log(Array.isArray(arr)); // true

Array.isArray 將為數(shù)組返回true，即使它們是在另一個(gè)realm中創(chuàng)建的。對(duì)于任何realm的Array的子類，它也會(huì)返回true。這就是JSON.stringify內(nèi)部的處理方法。

但是，這并不意味著arr有 array 方法。有些甚至所有方法都已設(shè)置為undefined，或者數(shù)組可能已將其整個(gè)原型刪除：

const noProtoArray = [];
Object.setPrototypeOf(noProtoArray, null);
console.log(noProtoArray.map); // undefined
console.log(noProtoArray instanceof Array); // false
console.log(Array.isArray(noProtoArray)); // true

不管怎樣，如果要杜絕上述問題，可以通過Array原型調(diào)用Array的方法：

if (Array.isArray(noProtoArray)) {
  const mappedArray = Array.prototype.map.call(noProtoArray, callback);
  // …
}

Symbols 與 realms

再看看這個(gè)：

上面的logs 1, 2, 3 很不引人注目，但 for-of 循環(huán)通過調(diào)用arr[Symbol.iterator]來工作，這在某種程度上可以跨越realm。這是如何做：

const iframe = document.querySelector("iframe");
const iframeWindow = iframe.contentWindow;
console.log(Symbol === iframeWindow.Symbol); // false
console.log(Symbol.iterator === iframeWindow.Symbol.iterator); // true

雖然每個(gè)realm都有自己的Symbol實(shí)例，但Symbol.iterator在各個(gè)realm都是相同的。

Symbols同時(shí)也是JavaScript中最獨(dú)特和最獨(dú)特的東西。

The most unique 多唯一性

const symbolOne = Symbol("foo");
const symbolTwo = Symbol("foo");
console.log(symbolOne === symbolTwo); // false
const obj = {};
obj[symbolOne] = "hello";
console.log(obj[symbolTwo]); // undefined
console.log(obj[symbolOne]); // "hello"

傳遞給Symbol函數(shù)的字符串只是一個(gè)描述。即使在同一realm內(nèi)，這些Symbol也是獨(dú)一無二的。

The least unique 最小唯一性

const symbolOne = Symbol.for("foo");
const symbolTwo = Symbol.for("foo");
console.log(symbolOne === symbolTwo); // true
const obj = {};
obj[symbolOne] = "hello";
console.log(obj[symbolTwo]); // "hello"

Symbol.for(str) 創(chuàng)建一個(gè)與傳遞它的字符串唯一的symbol。有趣的是它在各個(gè)realms都是一樣的：

const iframe = document.querySelector("iframe");
const iframeWindow = iframe.contentWindow;
console.log(Symbol.for("foo") === iframeWindow.Symbol.for("foo")); // true

這就是Symbol.iterator大致的工作原理。

創(chuàng)建自己的 "is" 函數(shù)

如果我們想要?jiǎng)?chuàng)建我們自己的“is”函數(shù)并跨越realm會(huì)怎么樣？好吧，Symbol允許我們這樣做：

const typeSymbol = Symbol.for("whatever-type-symbol");

class Whatever {
  static isWhatever(obj) {
    return obj && Boolean(obj[typeSymbol]);
  }
  constructor() {
    this[typeSymbol] = true;
  }
}

const whatever = new Whatever();
Whatever.isWhatever(whatever); // true

即使實(shí)例來自另一個(gè)realm，即使它是一個(gè)子類，即使它的原型已被刪除，也是可以的。

唯一的問題是，你需要確認(rèn)自己的symbol名稱在所有代碼中都是唯一的。如果其他人創(chuàng)建了他們自己的Symbol.for("whatever-type-symbol")并使用它來表示別的東西，那么isWhatever肯定返回false。

本文首發(fā)微信公眾號(hào)：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

云服務(wù)器 GPU云服務(wù)器聊聊聊聊webrtc網(wǎng)關(guān) 語言的坑爹設(shè)計(jì) 阿里云服務(wù)器的坑

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

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

登陸后可評(píng)論

0條評(píng)論

songze

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

樹莓派學(xué)習(xí)筆記（六）交叉編譯概念及安裝使用

閱讀 765·2021-09-28 09:35
解析link元素

閱讀 2598·2019-08-29 11:25
cookie與session的區(qū)別

閱讀 2160·2019-08-23 18:36
JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

閱讀 1861·2019-08-23 16:31
聊聊 Array 中的坑

閱讀 2076·2019-08-23 14:50
如何在VScode 中調(diào)試 ts 文件 Unit test

閱讀 3126·2019-08-23 13:55
js 事件循環(huán)中的job queue和message queue

閱讀 3296·2019-08-23 12:49
iview Table表格組件無法拆分單元格的解決思路

閱讀 2087·2019-08-23 11:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

聊聊 Array 中的坑

相關(guān)文章

【Copy攻城獅日志】聊聊JavaScript heap out of memory

聊聊javascript中的數(shù)組

基于Vue2實(shí)現(xiàn)的仿手機(jī)QQapp（支持對(duì)話功能，滑動(dòng)刪除....）—— 聊聊開發(fā)過程中踩到的一些坑

ES6時(shí)代，你真的會(huì)克隆對(duì)象嗎(二)

聊聊在javascript中數(shù)組的使用

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

0條評(píng)論

songze

男|高級(jí)講師

TA的文章

樹莓派學(xué)習(xí)筆記（六）交叉編譯概念及安裝使用

解析link元素

cookie與session的區(qū)別

JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的