rse / es6-features Goto Github PK
View Code? Open in Web Editor NEWECMAScript 6: Feature Overview & Comparison
Home Page: https://rse.github.io/es6-features/
License: Other
ECMAScript 6: Feature Overview & Comparison
Home Page: https://rse.github.io/es6-features/
License: Other
In this example two arguments are provided where one is expected. This hinders code comprehension as in the ES6 style the function is not named explicitly, I had to look at the ES5 style to understand that the default exported function is the one imported as exp
.
The large red Xs in the top-right corners of the ES5 code snippets somewhat imply that they contain errors. Should they be taken away or changed to something else to imply that the ES6 way is better?
In http://es6-features.org/#SymbolType
Object.getOwnPropertySymbols(obj) // [ foo, bar ]
Should be
Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]
In http://es6-features.org/#GlobalSymbols
shoud be
Object.getOwnPropertySymbols(obj) // [ Symbol(app.foo), Symbol(app.bar) ]
"Astral plane" characters (those whose code point value >= 0x10000) are supported in ES6 in the following ways:
console.log(...'a😬c')
logs "a" "😬" "c"
, whereas var str = 'a😬c'; for (var i = 0; i < str.length; i++) { console.log(str[i]) }
logs "a" "�" "�" "c"
.[...'a😬c'].length
is the correct value of 3, rather than 'a😬c'.length
's incorrect value of 4.String.codePointAt()
lets you receive the correct code point - 'a😬c'.codePointAt(1)
is '😬'
, but 'a😬c'[1]
is '�'
.Currently there's a fork that is translating it to portuguese but wouldn't be the best to support i18n? It's not so hard to do as you already have a build script and you can manage to have mutiples versions of the .txt file.
Consider that this is valid ES6:
var b = [1,2,3];
var a = [0, ...b];
a; // [0,1,2,3]
It is an ES6 to ES5 transpiler that, with its polyfill, is nearly spec compliant.
The biggest area where it deviates from spec is its handling of the temporal dead zone (TDZ) (Traceur has the same problem). It's hard for a transpiler to know if a function call is reading an undeclared variable or unallocated this
or not, and the necessary safety wrapper is an insane performance drop.
Other than that, it's become the de facto standard.
In fact,
var PI = (function () {
var PI = 3.141593;
return function () { return PI; };
})();
could be reduced to
var PI = function () {
return 3.141593;
};
and it would have totally same effect, while being simpler and faster.
It seems like semicolons doesn't appear on ES6 examples on the pages.
If you look at features.txt:605 you see semicolons even though they're not visible on the site.
Consider that this is valid ES6:
function *generator() { yield 1; yield 2; yield 3; }
var [a, b] = generator();
a; // 1
b; // 2
The following ECMAScript 5 sample has an unused variable.
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
f.apply(undefined, [ 1, 2 ].concat(params)) === 9;
var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]
The previously mentioned code should be changed to the following.
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
f.apply(undefined, other) === 9;
var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]
It would be awesome if this had links (either on the left or on the example pages) to the relevant location in the MDN JavaScript documentation. That way if you wanted more details on a particular feature it'd be just one click a way.
I suggest the MDN JavaScript docs because I find them complete, well maintained and well written, but any similar on-line JavaScript language doc would work.
Just an issue I saw on the "getters and setters" page. ES5 does support literal getters and setters in object literals. Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get
When visiting https://es6-features.org/ I get a certificate error.
It would be nice if reading the page was possible over a secure connection and if the http:
version redirected to the https:
version.
Hey Ralf, great work on es6-features.org
Would be nice to have each feature classified with their support status, and also I couldn't find list comprehensions, are they there and I can't find them or is it missing?
Keep it up!
In http://es6-features.org/#Proxing:
Instead of:
let proxy = new Proxy(target, {
get (receiver, name) {
return `Hello, ${name}!!`
}
})
Shouldn't it be:
let proxy = new Proxy(target, {
get: function (receiver, name) {
return `Hello, ${name}!!`
}
})
?
Because it is syntax. Stackoverflow
Here's some ES5 equivalents of a few such methods to get you started.
Object.assign:
var src1 = { foo: 1, bar: 2 };
var src2 = { foo: 3, baz: 3 };
var dst = {};
Object.keys(src).forEach(function(e) {
dst[e] = src[e];
});
Object.keys(src2).forEach(function(e) {
dst[e] = src2[e];
});
dst.foo; // 3
dst.bar; // 2
dst.baz; // 3
Array.find:
[1,3,4,2].filter(function(e) { return e > 3; })[0]; // 4
String.prototype.repeat:
(Array(12)+",").replace(/,/g, "red"); // "redredredredredredredredredredredred"
Love it!
But why we use var everywhere instead of let/const?
I was looking around and in TypedArrays the example seems to not work properly for username.
In the username setter you have this._username[0] = v
v is a string _username is a Uint8Array, I was wondering if there is a new feature to cast one into the other but I didn't find anything.
I understand if this is just for a example, I just want to know if there is something that I didn't catch.
Seems lastIndex not working with exec method
ES6 minor releases should include having options between mutable and non mutable collection. It can be useful for developing progressive web apps and mobile apps.
Consider that this is valid ES6:
function *generator() { yield 1; yield 2; yield 3; }
var a = [...generator()];
a[0]; // 1
a[1]; // 2
a[2]; // 3
I understand it is written in purpose to show ES6 feature in a clear way (and it does). When I read the overview, I am trying to run the examples in the browser console and the output of "\u{20BB7}" === "𠮷" === "\uD842\uDFB7"
is false
. My first thought was that the browser doesn't support it yet.
I am okey when partial example give an error and I need to add some code to it, or the example with for (let codepoint of "𠮷") console.log(codepoint)
gives Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
error, and I need add
(function(){
"use strict";
for (let codepoint of "𠮷") console.dir(codepoint);
})()
but if the example is valid Javascript, I think, it should give unabigouse output.
"\u{20BB7}" === "𠮷" === "\uD842\uDFB7"
output => false
("\u{20BB7}" === "𠮷") && ("𠮷" === "\uD842\uDFB7")
or
"\u{20BB7}" === "𠮷" && "𠮷" === "\uD842\uDFB7"
or
"\u{20BB7}" === "𠮷"
"𠮷" === "\uD842\uDFB7"
I believe that Array.prototype.findIndex is a new feature of es6, see: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.findIndex
and https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
However, I don't see it mentioned at http://es6-features.org/#ArrayElementFinding
I see that in the source code viewers there's a modernized vs traditional mode, the modernized not containing any semicolons. What makes this any modern than the semicoloned version? I personally think it's a bad practice. Worse yet, the modernized is the default for ES6, suggesting that no semicolons should be used for ES6 code.
Placing a function declaration inside another function declaration has been valid JavaScript since Netscape 2.0, and moreover has never been disallowed by strict mode.
http://es6-features.org/#Proxing
proxy.foo === "Hello, foo"
proxy.foo === "Hello, foo!!"
By far one of the most popular applications of let
is the ability to do this:
let callbacks = [];
for(let i = 0; i <= 2; i++) {
callbacks[i] = function() { return i * 2; };
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;
That is, each function has its own binding of i
, rather than a shared function-scoped binding.
(This is not supported by any browsers yet.)
First of all, this is an incredible tool and I'm really excited about it.
I'd love if there were some browser compatibility table, similar to what MDN provides. Is this feasible?
Thanks!
Hello,
Thank you for the useful information page. Can you please tell me where I can find it as a pdf file?
Hi, just a general comment. Sometimes I find the variable names used in examples completely confounding. For example, sometimes the variable name is ''dst". Sometimes it's "quud". In the latter, I guess it's supposed to signify a random variable name. In the case of the former, I'm not sure if it stands for something I can't think of. I think the code examples would be better if the variable names were more descriptive / longer.
The Map/Set example doesn't work
https://github.com/rse/es6-features/blob/38f6a8499116f5207806272eaa6a4a9153293068/features.txt
let m = new Map()
m.set("hello", 42)
m.set(s, 34)
Lexical this could be written as:
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));
Default parameter values could be written as:
function f (x, y, z) {
if (y === undefined)
y = 7;
if (z === undefined)
z = 42;
return x + y + z;
}
f(1) === 50;
This is not comparable to const
: you can still re-bind the PI
variable to something else, e.g. PI = 7;
. Really, ES5 has no equivalent.
Line 1143 in e9f44ba
ES5 example: Object.
keys
getOwnPropertyNames
In the lexical this
the ES6 and ES5 (1st variant) examples doesn't really show any difference.
The this
in lambda depends on the context where the lambda was created. Here both are assumed to be global. Had the ES6 example kept such that the lambda was created inside another function/context where the this
object is something other than the global this
, then it would make more sense!
I encountered this issue while trying out the string interpolation feature of ES6
the code is
...
if (unevaluated_lines) {
let num_lines_message = (`${unevaluated_lines} answer ${unevaluated_lines == 1 ? "line was" : "lines were"} not evaluated.`)
submit.reject(Error("Please give an evaluation to every answer line. " + num_lines_message))
...
but the saved string in the variable num_lines_message
does follow spacing between string literals but the line of code unassigned to a variable works fine. See screenshot below:
This is wrong. That code depicts function-scoped functions. It should actually be this:
{
function foo() {...}
foo();
{
function bar() {...}
bar();
}
}
ES5:
function foo() {...}
function bar() {...}
{
foo();
{
bar();
}
}
[QUESTION]
Is there any way to shorten the following with ES6 features?
return { op: this.op, lhs: this.lhs, rhs: this.rhs };
I was hoping I could do something like this...
return { this.op, this.lhs, this.rhs };
...but that results in a syntax error.
It is possible to do this...
const { op, lhs, rhs } = this;
return { op, lhs, rhs };
...but that's still a bit verbose (you have to repeat {op, lhs, rhs}
twice, which becomes inefficient with longer or more properties).
In the case of:
var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]
list[ b, a ]
is interpreted as an array expression. http://astexplorer.net/ was useful to troubleshoot it.
In the section "Custom Interpolation" under "Template Strings" the following code is presented as a backwards compatible ECMAScript 5 equivalent:
ES6: get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
ES5: get([ "http://example.com/foo?bar=", "&quux=", "" ], [ bar + baz, quux ]);
This is incorrect as per the Tagged template strings specification for ES6. The templated variables (quux, bar+baz) are passed into the template function as separate function arguments, not as an array (see mozilla dev reference).
The actual code should read something like:
ES6: get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
ES5: get([ "http://example.com/foo?bar=", "&quux=", "" ], bar+baz, quux);
This array-like behaviour is, however, often implemented within the ES6 context using rest parameters, as this behaviour is arguably more practical to use.
Currently the examples default to ES6 using the Modernized style (no semicolons) and ES5 using the Traditional style (with semicolons). This introduces a misleading and orthogonal extra diff when comparing the various examples. Please consider making Modernized/Traditional a single setting that modifies both the ES6 and ES5 example code at the same time. And please consider defaulting it to traditional. As it stands, I hesitate to forward a link to this site to my coworkers who are just getting started with ES6 since it adds unnecessary confusion and will trigger a knee-jerk reaction against ES6 due to "ES6 is anti-semicolons!" 😉
Would be grateful, if you add localization for this.
Can you make a gitbook version of this project?
Heyho, I just wanted to add a little thing:
http://es6-features.org/#BinaryOctalLiteral doesn't tell the simplest way of handling octal numbers. To write octal numbers your number simply has to start with a leading zero, so
0767 === 503 -> true
010 === parseInt('10', 8) -> true (result: 8)
077 === parseInt('77', 8) -> true (result: 63)
You could add this to the page, because it is an existing feature in ES5, even though a lot of people don't know about.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.