标签: ecmascript-2018

如果你声明一个带有 getter 的类

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return [this.firstName, this.lastName].join(" ");
  }
}

您可以在实例化新对象后访问 getter

const person = new Person("Jane", "Doe");
console.log(person.fullName); // "Jane Doe"

但这在使用扩展运算符复制对象后将不起作用

const personCopy = { ...person };
console.log(personCopy.fullName); // undefined

我认为这有点令人困惑的语法。

我创建了一个小的命令式原始JavaScript脚本，以阻止分散注意力的新闻网站，让我感到上瘾的行为包括：

// ==UserScript==
// @name         blocksite
// @match        *://*.news_site_1.com/*
// @match        *://*.news_site_2.com/*
// ==/UserScript==

function blocksite () {
    document.body.innerHTML =`<div dir="ltr"; style="font-size:100px; font-weight: bold; text-align: center">Blocked !</div>`;
}

setTimeout( blocksite(), 1000)
setTimeout( blocksite(), 5000) // Block possible later DOM mutations;
setTimeout( blocksite(), 10000) // Block possible later DOM mutations;

该脚本基本上可以正常工作（一个弹出窗口会接管DOM），但是我的问题是，仅在解析和呈现了所有DOM内容之后，它才阻止站点，而我通常希望阻止解析。

尽管监听load事件为时已晚，但是监听早期DOMContentLoaded事件可能比监听load或收听更好的结果setTimeout()，因为阻塞可能是在解析内容而不是呈现之后立即发生的。
但是，我需要一种完全阻止对相关网站的任何网页进行解析的方法（或者，在解析第一个DOM HTML元素节点之后，阻止任何进一步的解析）。

我尝试过的

根据评论，我在Google Chrome浏览器中尝试过：

window.stop();我不记得有任何重大更改
window.close();它仅在devtool控制台上
window.location.replace("about:blank");对我有用它仅在load事件完成后而不是在解析开始时对我有用

我的问题

使用最新的ECMAScript（10）甚至不需要执行该操作，如果需要，应该使用什么命令？

Sxribe更新：

亲爱的Sxribe，我用以下代码创建了以下文件。
该文件确实由Tampermonkey加载（带有正确的@match列表），但是加载匹配的网站时，我没有看到浏览器的任何更改（这些网站未被阻止并正常加载）。

文件中的代码 …

我有一个对象，如下所示：

let obj = {foo: 1, bar: 2, baz: 3}

我想通过调用将要删除的属性名称作为参数的方法来删除特定属性

removeProperty(obj, propertyName) {
  let { propertyName, _, ...result } = obj
  return result
}

问题是该方法仅在我们直接用语法spead编写属性名称时才起作用，例如：let { bar, _, ...result } = obj。但是它不能通过将其作为参数传递而起作用，因为语法spead会将其创建为新变量

我们如何做到这一点，如果可能的话，用另一种解决方案，除了omitlodash的

我正在尝试了解 javascript 的Symbol.asyncIterator和await of。我写了一些简单的代码，它抛出一个错误说：

    TypeError: undefined is not a function

在尝试使用for await (let x of a).

我不明白这样做的原因。

let a = {}


function test() {
        for(let i=0; i < 10; i++) {
                if(i > 5) {
                        return Promise.resolve(`Greater than 5: (${i})`)
                }else {
                        return Promise.resolve(`Less than 5: (${i})`)
                }
        }
}

a[Symbol.asyncIterator] = test;


async function main() {
        for await (let x of a) { // LINE THAT THROWS AN ERROR
                console.log(x)
        }
}


main() …

在编写异步生成器函数时，我注意到以下构造会产生SyntaxError：

async function * foo() {
  await yield bar; // Can not use 'yield' as identifier inside a generator
}

尽管颠倒上下文关键字的顺序是完全可以接受的：

async function * foo() {
  yield await bar; // OK
}

仔细阅读错误后，我能够通过将 括在括号UnaryExpression内来纠正语法AwaitExpression，以避免将令牌解析yield为标识符而不是上下文关键字：

async function * foo() {
  await (yield bar); // OK
}

但这引出了一个问题，ECMAScript 2018中涉及哪些特定的静态语义，导致yield在这种情况下被解析为标识符，同时await不需要特殊处理？

我注意到 Object Spread 语法对于它可以接受的值类型非常宽松：

console.log({ ...true });
console.log({ ...false });
console.log({ ...0 });
console.log({ ...42 });
console.log({ ...-1 });
console.log({ ...NaN });
console.log({ ...'batman' });
console.log({ .../\w+[0-9a-fA-F]?/ });
console.log({ ...['foo', 'bar', 42] });
console.log({ ...undefined });
console.log({ ...false });
console.log({ ...Symbol('hmm') });
console.log({ ...Promise.resolve('resolved') });
console.log({ ...Promise.reject('rejected') });

在对象字面量中传播时，是否存在无效的类型、类或值（即引发任何类型的错误）？当然，不包括未捕获的拒绝承诺。

我添加了一个脚本,该脚本使用ES6扩展运算符到从url获取params的项目.在我发现项目不支持ES6之后,不确定如何将其恢复为正常的vanilla Javascript语法.

使用普通的Javascript数组并使用扩展运算符很​​容易,但在像这样的更复杂的实例中,我无法使数组在不完全更改脚本的情况下返回结果.

getQueryURLParams("country");

getQueryURLParams = function(pName) {
    var urlObject = location.search
    .slice(1)
    .split('&')
    .map(p => p.split('='))
    .reduce((obj, pair) => {
      const [key, value] = pair.map(decodeURIComponent);

      return ({ ...obj, [key]: value }) //This is the section that needs to be Vanilla Javascript
    }, {});

    return urlObject[pName];
};

感谢大家的回复.在来回之后,我意识到我将整个脚本转换为ES5的建议是正确的,因为浏览器只抱怨该行,但其他项目不是ES5也是有问题的.

这是我使用ES5后的情况:

getQueryURLParams = function(pName) {


if (typeof Object.assign != 'function') {
    // Must be writable: true, enumerable: false, configurable: true
    Object.defineProperty(Object, "assign", {
      value: function assign(target, varArgs) { // .length of function …

我很好奇为什么这似乎是不可能的：

const {a, b, 'special-one'} = { a:1, b:2, 'special-one': 3 };
// output => missing : after property id

是否有可能在未来的 ES 版本中找到该语法？

谢谢你的灯:)

谁能告诉我为什么纱线格式在我的方括号前添加一个分号。没有它，纱线构建失败..

    ;[
      this.querySelector('[class$="-cover"] img'),
      this.querySelector('.FullscreenCarousel-cover-count')
     ].forEach(item => {
         // actions
    })
    })

所以我最近才开始潜心研究 Web 开发。我很快收集到的一件事是 ES5 = 旧的，而 ES6 = 闪亮的和新的。我认为 ES6 是最新和最好的 ES 必须提供的。但我刚刚发现 ES6 落后 3 个标准，而且我一直在使用和喜爱的一些功能甚至都不属于它的一部分——它们出现在后来的规范中。那么为什么我读到的所有内容都让人觉得只有 ES5 和 ES6？