ecmascript-next | 易学教程

What is ESNext?

阅读更多关于 What is ESNext?

问题 I've come across the term "ESNext", and wondering it is same as the EcmaScript. So, I have these questions here: What is ESNext, actually? Does it refer to any specific version of EcmaScript? 回答1: What is ESNext, actually? It varies depending on who's using the term, usually "the next" version of ECMAScript (JavaScript). For instance, at this moment if someone said "ESNext" they might be talking about ES2019 plus BigInt, dynamic import, and other features that recently reached Stage 4 of the

What is ESNext?

阅读更多关于 What is ESNext?

Javascript: Mixing in a getter (object spread)

阅读更多关于 Javascript: Mixing in a getter (object spread)

问题 I tried creating mixing in a getter into a JS object via the spread operator syntax, however it always seems to return null . HTML: <body> <div id="wrapperA"></div> <div id="wrapperB"></div> </body> <script src='./test.js'></script> JS: "use strict"; const mixin = { get wrapper() { return document.getElementById(this.wrappername); } } const wrapperA = { wrappername: 'wrapperA', ...mixin } const wrapperB = { wrappername: 'wrapperB', ...mixin } console.log(wrapperA); console.log(wrapperB);

Object destructuring ({ x, y, …rest }) for whitelisting properties of an object [duplicate]

阅读更多关于 Object destructuring ({ x, y, …rest }) for whitelisting properties of an object [duplicate]

问题 This question already has answers here : One-liner to take some properties from object in ES 6 (11 answers) Closed 3 years ago . Using Object rest destructuring is straightforward to blacklist properties of an object, like in the following example: const original = { a: 1, b: 2, c: 3, evil: "evil", ugly: "ugly", }; const { evil, ugly, ...sanitized } = original; console.log(sanitized); // prints { a: 1, b: 2, c: 3 } I wonder if there exists a similar terse way to do the same, but using a white

Async/Await not waiting

阅读更多关于 Async/Await not waiting

问题 I'm running into an issue which I don't fully understand. I feel like there are likely concepts which I haven't grasped, code that could be optimized, and possibly a bug thrown in for good measure. To greatly simplify the overall flow: A request is made to an external API The returned JSON object is parsed and scanned for link references If any link references are found, additional requests are made to populate/replace link references with real JSON data Once all link references have been

ESLint unexpected character '@' for JS decorators

阅读更多关于 ESLint unexpected character '@' for JS decorators

问题 I'm trying to use decorators in my JS project, however ESLint is throwing an error stating that the @ symbol is a unexpected character. My code: @observable items = []; My .eslintrc: { "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { "jsx": true }, "sourceType": "module" }, "env": { "browser": true, "node": true, "es6": false }, "ecmaFeatures": { "modules": true }, "rules": { "strict": [ 2, "global" ], "quotes": [ 2, "single" ], "indent": [ 2, 4 ], "eqeqeq": [ 2, "smart" ], "semi": [ 2,

Spread syntax ES6 with statement

阅读更多关于 Spread syntax ES6 with statement

问题 I tried to write ternary operator with spread syntax and copy two objects. Is it possible to use ternary operator with spread syntax inside with literal objects? My code works okay, I just want to optimize it. hintStyle: disabled ? {...globalStyles.hint, ...globalStyles.hintDisabled} : globalStyles.hint, I want to write like this: hintStyle: {...globalStyles.hint, {disabled ? ...globalStyles.hintDisabled : {}}}, 回答1: Spread is not an operator, it's part of the object literal syntax (or at

How to detect when the BROWSER blocks an iFrame

阅读更多关于 How to detect when the BROWSER blocks an iFrame

问题 On an https website, I'm trying to load randomly submitted URLs into an iframe, allowing the user to see that website embedded in my own user interface. As long as the remote url is https (like my own site), and the remote server doesn't explicitly block itself from being embedded in iframes, the website displays fine within the iframe. I know how to create a server-side script that can pre-detect if the iframe will be blocked due to the 3rd party's intentional iframe-blocking. However, there

Getting value from returned promise from async function

阅读更多关于 Getting value from returned promise from async function

问题 I'm getting used to the proposed async/await syntax and there's some unintuitive behavior. Inside the "async" function, I can console.log the correct string. However, when I try to return that string, instead, it returns a promise. Checking this entry: async/await implicitly returns promise? , it's pretty clear that any "async function()" will return a promise, NOT a value. That's fine. But how do you get access to the value? If the only answer is "a callback", that's fine - but I was hoping

Transpile Async Await proposal with Babel.js?

阅读更多关于 Transpile Async Await proposal with Babel.js?

问题 There is a proposal for introducing C# style async-await . I know Babel.js transpiles ES6 to ES5, but is there any way to make it transpile async-await to ES5 ? 回答1: Babel v6 As of Babel v6, Babel doesn't contain any transformers itself anymore. You have to explicitly specify any feature you want to transform. Presets - non ES2015 environment The quickest way to get this working is to use presets which already contain the set of plugins needed to transform ES2015 and newer proposals. For