疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

聊聊 Array 中的一个小坑

时间: 2018-12-27 分类: 前端技术   字数: 1273 字 阅读: 3分钟
标签: #JavaScript# #Array#
  • 本文译自:http://
  • 译者:疯狂的技术宅

Array 类型检测

function foo(obj) {
  // …
}

假设obj是一个数组,我们想要实现一些功能。比如 JSON.stringify就是一个例子,它以不同的方式把数组输出到其他对象。

我们可以这样做:

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

但是对于数组的子类来说这是错误的:

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

所以如果你想检查子类的类型,那么应该用instanceof:

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

但是当引入多个realm时,事情将会变得更加复杂:

Multiple realms

realm包含self引用的JavaScript全局对象。 因此,可以说在worker中运行的代码与在页面中运行的代码处于不同的realm。 在iframe之间也是如此,但同源iframe也共享一个ECMAScript’代理’,这意味着对象可以穿越 realm。

接着看代码:

<iframe srcdoc="<script>var arr = [];</script>"></iframe>
<script>
  const iframe = document.querySelector('iframe');
  const arr = iframe.contentWindow.arr;
  console.log(arr.constructor === Array); // false
  console.log(arr.constructor instanceof Array); // false
</script>

这两个都是false,因为:

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

iframe有自己的数组构造函数,它与父页面中的构造函数不同。

Array.isArray

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

Array.isArray 将为数组返回true,即使它们是在另一个realm中创建的。 对于任何realm的Array的子类,它也会返回true。 这就是JSON.stringify内部的处理方法。

但是,这并不意味着arr有 array 方法。 有些甚至所有方法都已设置为undefined,或者数组可能已将其整个原型删除:

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

不管怎样,如果要杜绝上述问题,可以通过Array原型调用Array的方法:

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

Symbols 与 realms

再看看这个:

<iframe srcdoc="<script>var arr = [1, 2, 3];</script>"></iframe>
<script>
  const iframe = document.querySelector('iframe');
  const arr = iframe.contentWindow.arr;

  for (const item of arr) {
    console.log(item);
  }
</script>

上面的logs 1, 2, 3 很不引人注目,但 for-of 循环通过调用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

虽然每个realm都有自己的Symbol实例,但Symbol.iterator在各个realm都是相同的。

Symbols同时也是JavaScript中最独特和最独特的东西。

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函数的字符串只是一个描述。 即使在同一realm内,这些Symbol也是独一无二的。

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) 创建一个与传递它的字符串唯一的symbol。 有趣的是它在各个realms都是一样的:

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

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

创建自己的 ‘is’ 函数

如果我们想要创建我们自己的“is”函数并跨越realm会怎么样? 好吧,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

即使实例来自另一个realm,即使它是一个子类,即使它的原型已被删除,也是可以的。

唯一的问题是,你需要确认自己的symbol名称在所有代码中都是唯一的。 如果其他人创建了他们自己的Symbol.for('whatever-type-symbol')并使用它来表示别的东西,那么isWhatever肯定返回false。

标签: #JavaScript# #Array#

标题:聊聊 Array 中的一个小坑

链接:https://fe-tech.viewnode.com/post/2018/1227/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

React.js大神对自己知识短板的分享
正确使用异步函数的姿势
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
  • Array 类型检测
  • Array.isArray
  • Symbols 与 realms
    • The most unique 多唯一性
    • The least unique 最小唯一性
  • 创建自己的 ‘is’ 函数
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%