| Index: docs/es6_chromium.md
|
| diff --git a/docs/es6_chromium.md b/docs/es6_chromium.md
|
| index 17d083e8b0efe16b1cdcb951e87dc8e5cee14818..27b0f95f017f62e28193e3ac6226b3a5cf34d719 100644
|
| --- a/docs/es6_chromium.md
|
| +++ b/docs/es6_chromium.md
|
| @@ -1,9 +1,9 @@
|
| -<!-- This is feature markdown template
|
| +<!-- Feature template markdown:
|
| ## Header
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
|
|
| ```
|
|
|
| @@ -12,10 +12,8 @@
|
| **Discussion Notes / Link to Thread:**
|
|
|
| hyphen-hyphen-hyphen (change to actual hyphen)
|
| -
|
| -->
|
|
|
| -
|
| <style type="text/css">
|
| .doc {
|
| font-size: 16px;
|
| @@ -57,30 +55,30 @@ hyphen-hyphen-hyphen (change to actual hyphen)
|
| </style>
|
|
|
| <script>
|
| -document.addEventListener("DOMContentLoaded", function(event) {
|
| +document.addEventListener('DOMContentLoaded', function(event) {
|
| // Move all headers and corresponding contents to an accordion container.
|
| - document.querySelectorAll('h2[id]').forEach(function(header){
|
| + document.querySelectorAll('h2[id]').forEach(function(header) {
|
| var container = document.createElement('div');
|
| container.classList.add('feature-container');
|
| header.parentNode.insertBefore(container, header);
|
|
|
| - // Add all the following siblings until it hits an <hr>
|
| - var ele = header;
|
| - while(ele && ele.tagName !== 'HR') {
|
| - var nextEle = ele.nextElementSibling;
|
| - container.append(ele);
|
| - ele = nextEle;
|
| + // Add all the following siblings until it hits an <hr>.
|
| + var el = header;
|
| + while (el && el.tagName !== 'HR') {
|
| + var nextEl = el.nextElementSibling;
|
| + container.append(el);
|
| + el = nextEl;
|
| }
|
|
|
| // Add handler to open accordion on click.
|
| - header.addEventListener('click', () => {
|
| + header.addEventListener('click', function() {
|
| header.parentNode.classList.toggle('open');
|
| });
|
| });
|
|
|
| // Then remove all <hr>s since everything's accordionized.
|
| - document.querySelectorAll('hr').forEach(function(ele){
|
| - ele.parentNode.removeChild(ele);
|
| + document.querySelectorAll('hr').forEach(function(el) {
|
| + el.parentNode.removeChild(el);
|
| });
|
| });
|
| </script>
|
| @@ -92,10 +90,10 @@ document.addEventListener("DOMContentLoaded", function(event) {
|
| This is a list of new/updated features in ES6 specs that is being considered to
|
| be supported for Chromium development.
|
|
|
| ->**TBD:** Do we want to differenciate allow/ban status between subprojects? If
|
| -so, how to denote?
|
| +> **TBD:** Do we want to differenciate allow/ban status between subprojects? If
|
| +> so, how to denote?
|
|
|
| ->**TBD:** Cross platform-build support?
|
| +> **TBD:** Cross platform-build support?
|
|
|
| You can propose changing the status of a feature by sending an email to
|
| chromium-dev@chromium.org. Include a short blurb on what the feature is and why
|
| @@ -103,8 +101,8 @@ you think it should or should not be allowed, along with links to any relevant
|
| previous discussion. If the list arrives at some consensus, send a codereview
|
| to change this file accordingly, linking to your discussion thread.
|
|
|
| ->Some descriptions and Usage examples are from [kangax](https://kangax.github.
|
| -io/compat-table/es6/) and [http://es6-features.org/](http://es6-features.org/)
|
| +> Some descriptions and Usage examples are from [kangax](https://kangax.github.io/compat-table/es6/)
|
| +and [http://es6-features.org/](http://es6-features.org/)
|
|
|
| # Allowed Features
|
|
|
| @@ -112,31 +110,31 @@ The following features are allowed in Chromium development.
|
|
|
| ## `Promise`
|
|
|
| -Built-in representation of a value that might be determined asynchronously,
|
| -relieving developers from "callback hell".
|
| +The Promise object is used for asynchronous computations. A Promise represents a
|
| +value which may be available now, or in the future, or never.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -function promiseA() {
|
| - return new Promise((resolve, reject) => setTimeout(resolve, 100));
|
| -}
|
| -
|
| -function promiseB() {
|
| - return new Promise((resolve, reject) => setTimeout(resolve, 200));
|
| -}
|
| -
|
| -function promiseC() {
|
| - return new Promise((resolve, reject) => setTimeout(resolve, 300));
|
| -}
|
| +```js
|
| +/** @type {!Promise} */
|
| +var fullyLoaded = new Promise(function(resolve) {
|
| + function isLoaded() { return document.readyState == 'complete'; }
|
|
|
| -Promise.all([promiseA(), promiseB(), promiseC()]).then(([a, b, c]) => {
|
| - someFunction(a, b, c);
|
| + if (isLoaded()) {
|
| + resolve();
|
| + } else {
|
| + document.onreadystatechange = function() {
|
| + if (isLoaded()) resolve();
|
| + };
|
| + }
|
| });
|
| +
|
| +// ... some time later ...
|
| +loaded.then(startTheApp).then(maybeShowFirstRun);
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-promise-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
|
|
|
| **Discussion Notes:** Feature already extensively used prior to creation of
|
| this document.
|
| @@ -155,36 +153,42 @@ sections.
|
|
|
| ## `let` (Block-Scoped Variables)
|
|
|
| -Declare variable that exists within the block scope. `let` can generally be
|
| -used to replace `var` but `let` in global scope, unlike `var`, does not
|
| -introduce a property on the global object.
|
| +`let` declares a variable within the scope of a block. This differs from `var`,
|
| +which uses function level scope.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -// This will make all buttons output "3".
|
| -for(var i = 0; i < 3; i++) {
|
| - buttons[i].onclick = function() {
|
| - console.log(i);
|
| - };
|
| +```js
|
| +// Scope.
|
| +function varTest() {
|
| + var x = 1;
|
| + if (true) {
|
| + var x = 2; // Same variable!
|
| + console.log(x); // 2
|
| + }
|
| + console.log(x); // 2
|
| }
|
|
|
| -// This will make buttons output corresponding "i" values.
|
| -for(let i = 0; i < 3; i++) {
|
| - buttons[i].onclick = function() {
|
| - console.log(i);
|
| - };
|
| +function letTest() {
|
| + let x = 1;
|
| + if (true) {
|
| + let x = 2; // Different variable.
|
| + console.log(x); // 2
|
| + }
|
| + console.log(x); // 1
|
| }
|
|
|
| -var bar = 1;
|
| -var bar = 1; // No error thrown.
|
| +// Redeclaration throws.
|
| +function f() {
|
| + var a = 'hello';
|
| + var a = 'hola'; // No error!
|
|
|
| -let foo = 1;
|
| -let foo = 1; // TypeError: Identifier 'foo' has already been declared.
|
| + let b = 'world';
|
| + let b = 'mundo; // TypeError Identifier 'b' has already been declared.
|
| +}
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-let-and-const-declarations)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -196,21 +200,23 @@ Constants (also known as "immutable variables") are variables which cannot be
|
| re-assigned new content. Note that if the value is an object, the object itself
|
| is still mutable.
|
|
|
| -`const` has traditionally been supported as a "function scoped" declaration
|
| -like `var` (except in Internet Explorer), however in VMs supporting ES6 `const`
|
| -is now a block scope declaration.
|
| +Also note that in Chrome, `const` is block scoped like `let`.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| const gravity = 9.81;
|
| -gravity = 0; // TypeError: Assignment to constant variable.
|
| +gravity = 0; // TypeError: Assignment to constant variable.
|
| +gravity === 9.81; // true
|
|
|
| -gravity === 9.81; // true
|
| +const frobber = {isFrobbing: true};
|
| +frobber = {isFrobbing: false}; // TypeError: Assignment to constant variable.
|
| +frobber.isFrobbing = false; // Works.
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-let-and-const-declarations)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations)
|
| +
|
| +**See also:** [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -219,17 +225,16 @@ gravity === 9.81; // true
|
| ## `=>` (Arrow Functions)
|
|
|
| Arrow functions provide a concise syntax to create a function, and fix a number
|
| -of difficulties with this (e.g. eliminating the need to write `const self =
|
| -this`. Particularly useful for nested functions or callbacks.
|
| +of difficulties with `this` (e.g. eliminating the need to write `const self =
|
| +this`). Particularly useful for nested functions or callbacks.
|
|
|
| -Prefer arrow functions over the function keyword, over `f.bind(this)`, and
|
| -especially over `goog.bind(f, this)`.
|
| +Prefer arrow functions over `.bind(this)`.
|
|
|
| -Arrow functions has an implicit return when used without a body block.
|
| +Arrow functions have an implicit return when used without a body block.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // General usage, eliminating need for .bind(this).
|
| setTimeout(() => {
|
| this.doSomething();
|
| @@ -241,13 +246,12 @@ window.addEventListener('scroll', (event) => {
|
| }); // no need for .bind(this) or const self = this.
|
|
|
| // Implicit return: returns the value if expression not inside a body block.
|
| -() => 1 // returns 1
|
| -() => {1} // returns undefined - body block does not implicitly return.
|
| -() => {return 1;} // returns 1
|
| +() => 1 // returns 1.
|
| +() => {1} // returns undefined - body block does not implicitly return.
|
| +() => {return 1;} // returns 1.
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-arrow-function-definitions)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -255,30 +259,35 @@ window.addEventListener('scroll', (event) => {
|
|
|
| ## Classes
|
|
|
| -OOP-style and boilerplate-free class syntax, including inheritance, super(),
|
| +OOP-style and boilerplate-free class syntax, including inheritance, `super()`,
|
| static members, and getters and setters.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| +class Shape {
|
| + constructor(x, y) {
|
| + this.x = x;
|
| + this.y = y;
|
| + }
|
| +}
|
| +// Note: let Shape = class {...}; is also valid.
|
| +
|
| class Rectangle extends Shape {
|
| - constructor(id, x, y, width, height) {
|
| + constructor(x, y, width, height) {
|
| super(id, x, y);
|
| this.width = width;
|
| this.height = height;
|
| }
|
| - static defaultRectangle() {
|
| - return new Rectangle('default', 0, 0, 100, 100);
|
| - }
|
| - move(x, y) {
|
| - this.x = x;
|
| - this.y = y;
|
| +
|
| + static goldenRectangle() {
|
| + var PHI = (1 + Math.sqrt(5)) / 2;
|
| + return new Rectangle(0, 0, PHI, 1);
|
| }
|
| -};
|
| +}
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-class-definitions)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-class-definitions)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -288,7 +297,7 @@ class Rectangle extends Shape {
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| {
|
| function foo() {
|
| return 1;
|
| @@ -304,8 +313,7 @@ class Rectangle extends Shape {
|
| }
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-functiondeclarationinstantiation)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-functiondeclarationinstantiation)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -313,17 +321,30 @@ class Rectangle extends Shape {
|
|
|
| ## Default Function Parameters
|
|
|
| +Initialize parameters with default values if no value or `undefined` is passed.
|
| +
|
| **Usage Example:**
|
|
|
| -``` js
|
| -function f(x, y = 7, z = 42) {
|
| - return x + y + z;
|
| +```js
|
| +/**
|
| + * @param {!Element} element An element to hide.
|
| + * @param {boolean=} animate Whether to animatedly hide |element|.
|
| + */
|
| +function hide(element, animate=true) {
|
| + function setHidden() { element.hidden = true; }
|
| +
|
| + if (animate)
|
| + element.animate({...}).then(setHidden);
|
| + else
|
| + setHidden();
|
| }
|
| -// f(1) === 50;
|
| +
|
| +hide(document.body); // Animated, animate=true by default.
|
| +hide(document.body, false); // Not animated.
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-functiondeclarationinstantiation)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-functiondeclarationinstantiation)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -335,16 +356,17 @@ Aggregation of function arguments into one Array variable.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -function f(x, y, ...a) {
|
| - // for f(1, 2, 3, 4, 5)...
|
| - // x = 1, y = 2
|
| - // a = [3, 4, 5]
|
| +```js
|
| +function usesRestParams(a, b, ...theRest) {
|
| + console.log(a); // 'a'
|
| + console.log(b); // 'b'
|
| + console.log(theRest); // [1, 2, 3]
|
| }
|
| +
|
| +usesRestParams('a', 'b', 1, 2, 3);
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-function-definitions)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -357,19 +379,17 @@ function parameters.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Spreading an Array
|
| -var params = [ 'hello', true, 7 ];
|
| -var other = [ 1, 2, ...params ]; // [ 1, 2, 'hello', true, 7 ]
|
| -f(1, 2, ...params) === 9;
|
| +var params = ['hello', true, 7];
|
| +var other = [1, 2, ...params]; // [1, 2, 'hello', true, 7]
|
|
|
| // Spreading a String
|
| var str = 'foo';
|
| -var chars = [ ...str ]; // [ 'f', 'o', 'o' ]
|
| +var chars = [...str]; // ['f', 'o', 'o']
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-argument-lists-runtime-semantics-argumentlistevaluation)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists-runtime-semantics-argumentlistevaluation)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -381,23 +401,33 @@ Convenient new ways for object property definition.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Computed property name
|
| -var x = 'key';
|
| -var obj = {[x]: 1};
|
| +var prop = 'foo';
|
| +var o = {
|
| + [prop]: 'hey',
|
| + ['b' + 'ar']: 'there',
|
| +};
|
| +console.log(o); // {foo: 'hey', bar: 'there'}
|
|
|
| // Shorthand property
|
| -var obj = {x, y}; //equivalent to {x:x, y:y}
|
| +var foo = 1;
|
| +var bar = 2;
|
| +var o = {foo, bar};
|
| +console.log(o); // {foo: 1, bar: 2}
|
|
|
| // Method property
|
| -var obj = {
|
| - foo() {...},
|
| - bar() {...}
|
| -}
|
| +var clearSky = {
|
| + // Basically the same as clouds: function() { return 0; }.
|
| + clouds() { return 0; },
|
| + color() { return 'blue'; },
|
| +};
|
| +console.log(clearSky.color()); // 'blue'
|
| +console.log(clearSky.clouds()); // 0
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-object-initialiser)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-object-initialiser)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -410,29 +440,16 @@ pieces.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Simple example
|
| var greeting = 'hello';
|
| var myName = {first: 'Foo', last: 'Bar'};
|
| var message = `${greeting},
|
| my name is ${myName.first + myName.last}`;
|
| // message == 'hello,\nmy name is FooBar'
|
| -
|
| -// Custom interpolation
|
| -function foo (strings, ...values) {
|
| - // for foo`bar${42}baz`...
|
| - // strings[0] === 'bar';
|
| - // strings[1] === 'baz';
|
| - // values[0] === 42;
|
| -
|
| - return strings[1] + strings[0] + values[0];
|
| -}
|
| -
|
| -var newString = foo`bar${42}baz`; // 'bazbar42'
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-template-literals)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -442,13 +459,12 @@ var newString = foo`bar${42}baz`; // 'bazbar42'
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| 0b111110111 === 503;
|
| 0o767 === 503;
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-literals-numeric-literals)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-literals-numeric-literals)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -458,12 +474,11 @@ var newString = foo`bar${42}baz`; // 'bazbar42'
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| 'ð ®·'.match(/./u)[0].length === 2;
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-get-regexp.prototype.sticky)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-get-regexp.prototype.sticky)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -473,12 +488,11 @@ var newString = foo`bar${42}baz`; // 'bazbar42'
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -'\u{1d306}' == '\ud834\udf06'; // true
|
| +```js
|
| +'\u{1d306}' == '\ud834\udf06'; // true
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-literals-string-literals)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-literals-string-literals)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -487,20 +501,19 @@ var newString = foo`bar${42}baz`; // 'bazbar42'
|
| ## `/y` Regex Sticky Matching
|
|
|
| Keep the matching position sticky between matches and this way support
|
| -efficient parsing of arbitrary long input strings, even with an arbitrary
|
| +efficient parsing of arbitrarily long input strings, even with an arbitrary
|
| number of distinct regular expressions.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| var re = new RegExp('yy', 'y');
|
| re.lastIndex = 3;
|
| var result = re.exec('xxxyyxx')[0];
|
| -result === 'yy' && re.lastIndex === 5; // true
|
| +result === 'yy' && re.lastIndex === 5; // true
|
| ```
|
|
|
| -**Documentation:** [link](http://es6-features.org
|
| -/#RegularExpressionStickyMatching)
|
| +**Documentation:** [link](http://es6-features.org/#RegularExpressionStickyMatching)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -512,35 +525,33 @@ Flexible destructuring of collections or parameters.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Array
|
| -var list = [ 1, 2, 3 ];
|
| -var [ a, , b ] = list;
|
| -// a = 1, b = 3
|
| +var [a, , b] = [1, 2, 3]; // a = 1, b = 3
|
|
|
| // Object
|
| -var {width, height, area: a} = rect;
|
| -// width = rect.width, height = rect.height, a = rect.area
|
| +var {width, height} = document.body.getBoundingClientRect();
|
| +// width = rect.width, height = rect.height
|
|
|
| // Parameters
|
| -function f ([ name, val ]) {
|
| - console.log(name, val);
|
| -}
|
| -function g ({ name: n, val: v }) {
|
| - console.log(n, v);
|
| +function f([name, val]) {
|
| + console.log(name, val); // 'bar', 42
|
| }
|
| -function h ({ name, val }) {
|
| - console.log(name, val);
|
| +f(['bar', 42, 'extra 1', 'extra 2']); // 'extra 1' and 'extra 2' are ignored.
|
| +
|
| +function g({name: n, val: v}) {
|
| + console.log(n, v); // 'foo', 7
|
| }
|
| +g({name: 'foo', val: 7});
|
|
|
| -f([ 'bar', 42 ]);
|
| -g({ name: 'foo', val: 7 });
|
| -h({ name: 'bar', val: 42 });
|
| +function h({name, val}) {
|
| + console.log(name, val); // 'bar', 42
|
| +}
|
| +h({name: 'bar', val: 42});
|
|
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-destructuring-assignment)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-destructuring-assignment)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -553,18 +564,17 @@ namespace pollution.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // lib/rect.js
|
| export function getArea() {...};
|
| -export { width, height, unimportant };
|
| +export {width, height, unimportant};
|
|
|
| // app.js
|
| import {getArea, width, height} from 'lib/rect';
|
|
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-modules)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-modules)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -577,22 +587,21 @@ properties.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| const foo = Symbol();
|
| const bar = Symbol();
|
| -typeof foo === 'symbol'; // true
|
| -typeof bar === 'symbol'; // true
|
| +typeof foo === 'symbol'; // true
|
| +typeof bar === 'symbol'; // true
|
| let obj = {};
|
| obj[foo] = 'foo';
|
| obj[bar] = 'bar';
|
| -JSON.stringify(obj); // {}
|
| -Object.keys(obj); // []
|
| -Object.getOwnPropertyNames(obj); // []
|
| -Object.getOwnPropertySymbols(obj); // [ foo, bar ]
|
| +JSON.stringify(obj); // {}
|
| +Object.keys(obj); // []
|
| +Object.getOwnPropertyNames(obj); // []
|
| +Object.getOwnPropertySymbols(obj); // [foo, bar]
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-symbol-constructor)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-symbol-constructor)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -600,19 +609,20 @@ Object.getOwnPropertySymbols(obj); // [ foo, bar ]
|
|
|
| ## `for ...of` Loops
|
|
|
| -Convenient operator to iterate over all values of an iterable object.
|
| +Convenient operator to iterate over all values in an iterable collection. This
|
| +differs from `for ...in`, which iterates over all iterable properties.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -// Given an iterable collection `fibonacci`...
|
| -for (let n of fibonacci) {
|
| - console.log(n);
|
| +```js
|
| +// Given an iterable collection fibonacci numbers...
|
| +for (var n of fibonacci) {
|
| + console.log(n); // 1, 1, 2, 3, ...
|
| }
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-for-in-and-for-of-statements)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-for-in-and-for-of-statements)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -622,20 +632,19 @@ for (let n of fibonacci) {
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Object.assign
|
| var o = Object.assign({a:true}, {b:true}, {c:true});
|
| -'a' in o && 'b' in o && 'c' in o; // true
|
| +'a' in o && 'b' in o && 'c' in o; // true
|
|
|
| // Object.setPrototypeOf
|
| -Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
| +Object.setPrototypeOf({}, Array.prototype) instanceof Array; // true
|
|
|
| // Object.is
|
| // Object.getOwnPropertySymbols
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-properties-of-the-object-constructor)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-properties-of-the-object-constructor)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -645,7 +654,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // String.raw
|
| // String.fromCodePoint
|
|
|
| @@ -657,8 +666,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
| // String.prototype.includes
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-properties-of-the-string-constructor)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-properties-of-the-string-constructor)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -668,7 +676,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Array.from
|
| // Array.of
|
|
|
| @@ -681,8 +689,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
| // Array.prototype.entries
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-properties-of-the-array-constructor)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-properties-of-the-array-constructor)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -692,7 +699,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // Number.isFinite
|
| // Number.isInteger
|
| // Number.isSafeInteger
|
| @@ -702,8 +709,7 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
| // Number.MAX_SAFE_INTEGER
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-isfinite-number)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-isfinite-number)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -713,14 +719,14 @@ Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| let fibonacci = {
|
| [Symbol.iterator]() {
|
| let pre = 0, cur = 1;
|
| return {
|
| next () {
|
| - [ pre, cur ] = [ cur, pre + cur ];
|
| - return { done: false, value: cur };
|
| + [pre, cur] = [cur, pre + cur];
|
| + return {done: false, value: cur};
|
| }
|
| };
|
| }
|
| @@ -739,7 +745,7 @@ Special iterators with specified pausing points.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| function* range(start, end, step) {
|
| while (start < end) {
|
| yield start;
|
| @@ -748,13 +754,12 @@ function* range(start, end, step) {
|
| }
|
|
|
| for (let i of range(0, 10, 2)) {
|
| - console.log(i); // 0, 2, 4, 6, 8
|
| + console.log(i); // 0, 2, 4, 6, 8
|
| }
|
|
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-generator-function-definitions)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-generator-function-definitions)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -762,19 +767,29 @@ for (let i of range(0, 10, 2)) {
|
|
|
| ## `Map`
|
|
|
| +A simple key/value map in which any value (both objects and primitive values)
|
| +may be used as either a key or a value.
|
| +
|
| **Usage Example:**
|
|
|
| -``` js
|
| -var key = {};
|
| +```js
|
| var map = new Map();
|
| +map.size === 0; // true
|
| +map.get('foo'); // undefined
|
|
|
| +var key = {};
|
| map.set(key, 123);
|
| +map.size === 1; // true
|
| +map.has(key); // true
|
| +map.get(key); // 123
|
|
|
| -map.has(key) && map.get(key) === 123; // true
|
| +map.delete(key);
|
| +map.has(key); // false
|
| +map.size === 0; // true
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-map-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-map-objects)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -782,20 +797,24 @@ map.has(key) && map.get(key) === 123; // true
|
|
|
| ## `Set`
|
|
|
| +An object that lets you store unique values of any type, whether primitive
|
| +values or object references.
|
| +
|
| **Usage Example:**
|
|
|
| -``` js
|
| -var obj = {};
|
| +```js
|
| var set = new Set();
|
|
|
| set.add(123);
|
| -set.add(123);
|
| +set.size(); // 1
|
| +set.has(123); // true
|
|
|
| -set.has(123); // true
|
| +set.add(123);
|
| +set.size(); // 1
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-set-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-set-objects)
|
| +[link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -808,17 +827,16 @@ within the collection.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| var key = {};
|
| var weakmap = new WeakMap();
|
|
|
| weakmap.set(key, 123);
|
|
|
| -weakmap.has(key) && weakmap.get(key) === 123; // true
|
| +weakmap.has(key) && weakmap.get(key) === 123; // true
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-weakmap-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-weakmap-objects)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -831,18 +849,17 @@ within the collection.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| var obj1 = {};
|
| var weakset = new WeakSet();
|
|
|
| weakset.add(obj1);
|
| weakset.add(obj1);
|
|
|
| -weakset.has(obj1); // true
|
| +weakset.has(obj1); // true
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-weakset-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-weakset-objects)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -854,15 +871,14 @@ A lot of new typed Arrays...
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| new Int8Array();
|
| new UInt8Array();
|
| -new UInt8ClampedArray()
|
| -// ...You get the idea. Click on the Documentation link below to see all.
|
| +new UInt8ClampedArray();
|
| +// ... You get the idea. Click on the Documentation link below to see all.
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-typedarray-objects)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-typedarray-objects)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -874,21 +890,27 @@ Hooking into runtime-level object meta-operations.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -let target = {
|
| - foo: 'Welcome, foo'
|
| -};
|
| -let proxy = new Proxy(target, {
|
| - get (receiver, name) {
|
| - return name in receiver ? receiver[name] : `Hello, ${name}`;
|
| - }
|
| +```js
|
| +var keyTracker = new Proxy({}, {
|
| + keysCreated: 0,
|
| +
|
| + get (receiver, key) {
|
| + if (key in receiver) {
|
| + console.log('key already exists');
|
| + } else {
|
| + ++this.keysCreated;
|
| + console.log(this.keysCreated + ' keys created!');
|
| + receiver[key] = true;
|
| + }
|
| + },
|
| });
|
| -proxy.foo === 'Welcome, foo'; // true
|
| -proxy.world === 'Hello, world'; // true
|
| +
|
| +keyTracker.key1; // '1 keys created!'
|
| +keyTracker.key1; // 'key already exists'
|
| +keyTracker.key2; // '2 keys created!'
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-proxy-object-internal-methods-and-internal-slots)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-proxy-object-internal-methods-and-internal-slots)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -900,15 +922,14 @@ Make calls corresponding to the object meta-operations.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| -let obj = { a: 1 };
|
| -Object.defineProperty(obj, 'b', { value: 2 });
|
| +```js
|
| +let obj = {a: 1};
|
| +Object.defineProperty(obj, 'b', {value: 2});
|
| obj[Symbol('c')] = 3;
|
| -Reflect.ownKeys(obj); // ['a', 'b', Symbol(c)]
|
| +Reflect.ownKeys(obj); // ['a', 'b', Symbol(c)]
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-reflection)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-reflection)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
| @@ -920,12 +941,11 @@ A lot of new Math methods.
|
|
|
| **Usage Example:**
|
|
|
| -``` js
|
| +```js
|
| // See Doc
|
| ```
|
|
|
| -**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0
|
| -/#sec-math)
|
| +**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-math)
|
|
|
| **Discussion Notes / Link to Thread:**
|
|
|
|
|