Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(3542)

Unified Diff: docs/es6_chromium.md

Issue 2552173002: ES6 Support: do review comments left on proposed ES6 style guide (Closed)
Patch Set: dpapad@ review Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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:**
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698