Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!-- This is feature markdown template | 1 <!-- Feature template markdown: |
| 2 ## Header | 2 ## Header |
| 3 | 3 |
| 4 **Usage Example:** | 4 **Usage Example:** |
| 5 | 5 |
| 6 ``` js | 6 ```js |
| 7 | 7 |
| 8 ``` | 8 ``` |
| 9 | 9 |
| 10 **Documentation:** [link]() | 10 **Documentation:** [link]() |
| 11 | 11 |
| 12 **Discussion Notes / Link to Thread:** | 12 **Discussion Notes / Link to Thread:** |
| 13 | 13 |
| 14 hyphen-hyphen-hyphen (change to actual hyphen) | 14 hyphen-hyphen-hyphen (change to actual hyphen) |
| 15 | |
| 16 --> | 15 --> |
| 17 | 16 |
| 18 | |
| 19 <style type="text/css"> | 17 <style type="text/css"> |
| 20 .doc { | 18 .doc { |
| 21 font-size: 16px; | 19 font-size: 16px; |
| 22 } | 20 } |
| 23 | 21 |
| 24 .doc h2[id] { | 22 .doc h2[id] { |
| 25 line-height: 20px; | 23 line-height: 20px; |
| 26 font-size: 16px; | 24 font-size: 16px; |
| 27 } | 25 } |
| 28 | 26 |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 50 display: none; | 48 display: none; |
| 51 padding: 0px 10px; | 49 padding: 0px 10px; |
| 52 } | 50 } |
| 53 | 51 |
| 54 .feature-container.open > *:not(h2){ | 52 .feature-container.open > *:not(h2){ |
| 55 display: block; | 53 display: block; |
| 56 } | 54 } |
| 57 </style> | 55 </style> |
| 58 | 56 |
| 59 <script> | 57 <script> |
| 60 document.addEventListener("DOMContentLoaded", function(event) { | 58 document.addEventListener('DOMContentLoaded', function(event) { |
| 61 // Move all headers and corresponding contents to an accordion container. | 59 // Move all headers and corresponding contents to an accordion container. |
| 62 document.querySelectorAll('h2[id]').forEach(function(header){ | 60 document.querySelectorAll('h2[id]').forEach(function(header) { |
| 63 var container = document.createElement('div'); | 61 var container = document.createElement('div'); |
| 64 container.classList.add('feature-container'); | 62 container.classList.add('feature-container'); |
| 65 header.parentNode.insertBefore(container, header); | 63 header.parentNode.insertBefore(container, header); |
| 66 | 64 |
| 67 // Add all the following siblings until it hits an <hr> | 65 // Add all the following siblings until it hits an <hr> |
|
dpapad
2016/12/06 17:16:51
Nit: Period missing at the end of the comment.
Dan Beam
2016/12/06 21:04:20
Done.
| |
| 68 var ele = header; | 66 var el = header; |
| 69 while(ele && ele.tagName !== 'HR') { | 67 while (el && el.tagName !== 'HR') { |
| 70 var nextEle = ele.nextElementSibling; | 68 var nextEl = el.nextElementSibling; |
| 71 container.append(ele); | 69 container.append(el); |
| 72 ele = nextEle; | 70 el = nextEl; |
| 73 } | 71 } |
| 74 | 72 |
| 75 // Add handler to open accordion on click. | 73 // Add handler to open accordion on click. |
| 76 header.addEventListener('click', () => { | 74 header.addEventListener('click', function() { |
| 77 header.parentNode.classList.toggle('open'); | 75 header.parentNode.classList.toggle('open'); |
| 78 }); | 76 }); |
| 79 }); | 77 }); |
| 80 | 78 |
| 81 // Then remove all <hr>s since everything's accordionized. | 79 // Then remove all <hr>s since everything's accordionized. |
| 82 document.querySelectorAll('hr').forEach(function(ele){ | 80 document.querySelectorAll('hr').forEach(function(el) { |
|
dpapad
2016/12/06 17:16:52
Nit (optional): Can we use ES6 for this code?
doc
Dan Beam
2016/12/06 21:04:20
not until we've allowed it, no (see above where I
| |
| 83 ele.parentNode.removeChild(ele); | 81 el.parentNode.removeChild(el); |
| 84 }); | 82 }); |
| 85 }); | 83 }); |
| 86 </script> | 84 </script> |
| 87 | 85 |
| 88 [TOC] | 86 [TOC] |
| 89 | 87 |
| 90 # ES6 Support In Chromium | 88 # ES6 Support In Chromium |
| 91 | 89 |
| 92 This is a list of new/updated features in ES6 specs that is being considered to | 90 This is a list of new/updated features in ES6 specs that is being considered to |
| 93 be supported for Chromium development. | 91 be supported for Chromium development. |
| 94 | 92 |
| 95 >**TBD:** Do we want to differenciate allow/ban status between subprojects? If | 93 > **TBD:** Do we want to differenciate allow/ban status between subprojects? If |
| 96 so, how to denote? | 94 > so, how to denote? |
| 97 | 95 |
| 98 >**TBD:** Cross platform-build support? | 96 > **TBD:** Cross platform-build support? |
| 99 | 97 |
| 100 You can propose changing the status of a feature by sending an email to | 98 You can propose changing the status of a feature by sending an email to |
| 101 chromium-dev@chromium.org. Include a short blurb on what the feature is and why | 99 chromium-dev@chromium.org. Include a short blurb on what the feature is and why |
| 102 you think it should or should not be allowed, along with links to any relevant | 100 you think it should or should not be allowed, along with links to any relevant |
| 103 previous discussion. If the list arrives at some consensus, send a codereview | 101 previous discussion. If the list arrives at some consensus, send a codereview |
| 104 to change this file accordingly, linking to your discussion thread. | 102 to change this file accordingly, linking to your discussion thread. |
| 105 | 103 |
| 106 >Some descriptions and Usage examples are from [kangax](https://kangax.github. | 104 > Some descriptions and Usage examples are from [kangax](https://kangax.github.i o/compat-table/es6/) |
|
Dan Beam
2016/12/06 05:01:35
btw, scottchen@, you can't break mid-word like thi
| |
| 107 io/compat-table/es6/) and [http://es6-features.org/](http://es6-features.org/) | 105 and [http://es6-features.org/](http://es6-features.org/) |
| 108 | 106 |
| 109 # Allowed Features | 107 # Allowed Features |
| 110 | 108 |
| 111 The following features are allowed in Chromium development. | 109 The following features are allowed in Chromium development. |
| 112 | 110 |
| 113 ## `Promise` | 111 ## `Promise` |
| 114 | 112 |
| 115 Built-in representation of a value that might be determined asynchronously, | 113 The Promise object is used for asynchronous computations. A Promise represents a |
| 116 relieving developers from "callback hell". | 114 value which may be available now, or in the future, or never. |
| 117 | 115 |
| 118 **Usage Example:** | 116 **Usage Example:** |
| 119 | 117 |
| 120 ``` js | 118 ```js |
| 121 function promiseA() { | 119 /** @type {!Promise} */ |
| 122 return new Promise((resolve, reject) => setTimeout(resolve, 100)); | 120 var fullyLoaded = new Promise(function(resolve) { |
| 123 } | 121 function isLoaded() { return document.readyState == 'complete'; } |
| 124 | 122 |
| 125 function promiseB() { | 123 if (isLoaded()) { |
| 126 return new Promise((resolve, reject) => setTimeout(resolve, 200)); | 124 resolve(); |
| 127 } | 125 } else { |
| 126 document.onreadystatechange = function() { | |
| 127 if (isLoaded()) resolve(); | |
| 128 }; | |
| 129 } | |
| 130 }); | |
| 128 | 131 |
| 129 function promiseC() { | 132 // ... some time later ... |
| 130 return new Promise((resolve, reject) => setTimeout(resolve, 300)); | 133 loaded.then(startTheApp).then(maybeShowFirstRun); |
| 131 } | |
| 132 | |
| 133 Promise.all([promiseA(), promiseB(), promiseC()]).then(([a, b, c]) => { | |
| 134 someFunction(a, b, c); | |
| 135 }); | |
| 136 ``` | 134 ``` |
| 137 | 135 |
| 138 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 136 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-pr omise-objects) |
| 139 /#sec-promise-objects) | 137 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_ Objects/Promise) |
| 140 | 138 |
| 141 **Discussion Notes:** Feature already extensively used prior to creation of | 139 **Discussion Notes:** Feature already extensively used prior to creation of |
| 142 this document. | 140 this document. |
| 143 | 141 |
| 144 --- | 142 --- |
| 145 | 143 |
| 146 # Banned Features | 144 # Banned Features |
| 147 | 145 |
| 148 The following features are banned for Chromium development. | 146 The following features are banned for Chromium development. |
| 149 | 147 |
| 150 # Features To Be Discussed | 148 # Features To Be Discussed |
| 151 | 149 |
| 152 The following features are currently disallowed. See the top of this page on | 150 The following features are currently disallowed. See the top of this page on |
| 153 how to propose moving a feature from this list into the allowed or banned | 151 how to propose moving a feature from this list into the allowed or banned |
| 154 sections. | 152 sections. |
| 155 | 153 |
| 156 ## `let` (Block-Scoped Variables) | 154 ## `let` (Block-Scoped Variables) |
| 157 | 155 |
| 158 Declare variable that exists within the block scope. `let` can generally be | 156 `let` declares a variable within the scope of a block. This differs from `var`, |
| 159 used to replace `var` but `let` in global scope, unlike `var`, does not | 157 which uses function level scope. |
| 160 introduce a property on the global object. | |
| 161 | 158 |
| 162 **Usage Example:** | 159 **Usage Example:** |
| 163 | 160 |
| 164 ``` js | 161 ```js |
| 165 // This will make all buttons output "3". | 162 function varTest() { |
| 166 for(var i = 0; i < 3; i++) { | 163 var x = 1; |
| 167 buttons[i].onclick = function() { | 164 if (true) { |
| 168 console.log(i); | 165 var x = 2; // same variable! |
| 169 }; | 166 console.log(x); // 2 |
| 167 } | |
| 168 console.log(x); // 2 | |
|
dpapad
2016/12/06 17:16:51
To make the two examples equivalent, the following
Dan Beam
2016/12/06 21:04:20
Done.
| |
| 170 } | 169 } |
| 171 | 170 |
| 172 // This will make buttons output corresponding "i" values. | 171 function letTest() { |
| 173 for(let i = 0; i < 3; i++) { | 172 let x = 1; |
| 174 buttons[i].onclick = function() { | 173 if (true) { |
| 175 console.log(i); | 174 let x = 2; // different variable |
| 176 }; | 175 console.log(x); // 2 |
| 176 » » let x = 5; // TypeError Identifier 'x' has already been declare d. | |
| 177 } | |
| 178 console.log(x); // 1 | |
| 177 } | 179 } |
| 178 | |
| 179 var bar = 1; | |
| 180 var bar = 1; // No error thrown. | |
| 181 | |
| 182 let foo = 1; | |
| 183 let foo = 1; // TypeError: Identifier 'foo' has already been declared. | |
| 184 ``` | 180 ``` |
| 185 | 181 |
| 186 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 182 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-le t-and-const-declarations) |
| 187 /#sec-let-and-const-declarations) | |
| 188 | 183 |
| 189 **Discussion Notes / Link to Thread:** | 184 **Discussion Notes / Link to Thread:** |
| 190 | 185 |
| 191 --- | 186 --- |
| 192 | 187 |
| 193 ## `const` (Block-Scoped Constants) | 188 ## `const` (Block-Scoped Constants) |
| 194 | 189 |
| 195 Constants (also known as "immutable variables") are variables which cannot be | 190 Constants (also known as "immutable variables") are variables which cannot be |
| 196 re-assigned new content. Note that if the value is an object, the object itself | 191 re-assigned new content. Note that if the value is an object, the object itself |
| 197 is still mutable. | 192 is still mutable. |
| 198 | 193 |
| 199 `const` has traditionally been supported as a "function scoped" declaration | 194 Also note that in Chrome, `const` is block scoped like `let`. |
| 200 like `var` (except in Internet Explorer), however in VMs supporting ES6 `const` | |
| 201 is now a block scope declaration. | |
| 202 | 195 |
| 203 **Usage Example:** | 196 **Usage Example:** |
| 204 | 197 |
| 205 ``` js | 198 ```js |
| 206 const gravity = 9.81; | 199 const gravity = 9.81; |
| 207 gravity = 0; // TypeError: Assignment to constant variable. | 200 gravity = 0; // TypeError: Assignment to constant variable. |
| 201 gravity === 9.81; // true | |
| 208 | 202 |
| 209 gravity === 9.81; // true | 203 const frobber = {isFrobbing: true}; |
| 204 frobber = {isFrobbing: false}; // TypeError: Assignment to constant variable. | |
| 205 frobber.isFrobbing = false; // works | |
| 210 ``` | 206 ``` |
| 211 | 207 |
| 212 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 208 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-le t-and-const-declarations) |
| 213 /#sec-let-and-const-declarations) | 209 |
| 210 **See also:** [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/Jav aScript/Reference/Global_Objects/Object/freeze) | |
| 214 | 211 |
| 215 **Discussion Notes / Link to Thread:** | 212 **Discussion Notes / Link to Thread:** |
| 216 | 213 |
| 217 --- | 214 --- |
| 218 | 215 |
| 219 ## `=>` (Arrow Functions) | 216 ## `=>` (Arrow Functions) |
| 220 | 217 |
| 221 Arrow functions provide a concise syntax to create a function, and fix a number | 218 Arrow functions provide a concise syntax to create a function, and fix a number |
| 222 of difficulties with this (e.g. eliminating the need to write `const self = | 219 of difficulties with this (e.g. eliminating the need to write `const self = |
| 223 this`. Particularly useful for nested functions or callbacks. | 220 this`. Particularly useful for nested functions or callbacks. |
| 224 | 221 |
| 225 Prefer arrow functions over the function keyword, over `f.bind(this)`, and | 222 Prefer arrow functions over the function keyword and over `f.bind(this)`. |
| 226 especially over `goog.bind(f, this)`. | |
| 227 | 223 |
| 228 Arrow functions has an implicit return when used without a body block. | 224 Arrow functions has an implicit return when used without a body block. |
| 229 | 225 |
| 230 **Usage Example:** | 226 **Usage Example:** |
| 231 | 227 |
| 232 ``` js | 228 ```js |
| 233 // General usage, eliminating need for .bind(this). | 229 // General usage, eliminating need for .bind(this). |
| 234 setTimeout(() => { | 230 setTimeout(() => { |
| 235 this.doSomething(); | 231 this.doSomething(); |
| 236 }, 1000); // no need for .bind(this) or const self = this. | 232 }, 1000); // no need for .bind(this) or const self = this. |
| 237 | 233 |
| 238 // Another example... | 234 // Another example... |
| 239 window.addEventListener('scroll', (event) => { | 235 window.addEventListener('scroll', (event) => { |
| 240 this.doSomething(event); | 236 this.doSomething(event); |
| 241 }); // no need for .bind(this) or const self = this. | 237 }); // no need for .bind(this) or const self = this. |
| 242 | 238 |
| 243 // Implicit return: returns the value if expression not inside a body block. | 239 // Implicit return: returns the value if expression not inside a body block. |
| 244 () => 1 // returns 1 | 240 () => 1 // returns 1 |
| 245 () => {1} // returns undefined - body block does not implicitly return. | 241 () => {1} // returns undefined - body block does not implicitly return. |
| 246 () => {return 1;} // returns 1 | 242 () => {return 1;} // returns 1 |
| 247 ``` | 243 ``` |
| 248 | 244 |
| 249 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 245 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ar row-function-definitions) |
| 250 /#sec-arrow-function-definitions) | |
| 251 | 246 |
| 252 **Discussion Notes / Link to Thread:** | 247 **Discussion Notes / Link to Thread:** |
| 253 | 248 |
| 254 --- | 249 --- |
| 255 | 250 |
| 256 ## Classes | 251 ## Classes |
| 257 | 252 |
| 258 OOP-style and boilerplate-free class syntax, including inheritance, super(), | 253 OOP-style and boilerplate-free class syntax, including inheritance, `super()`, |
| 259 static members, and getters and setters. | 254 static members, and getters and setters. |
| 260 | 255 |
| 261 **Usage Example:** | 256 **Usage Example:** |
| 262 | 257 |
| 263 ``` js | 258 ```js |
| 259 // Note: let Shape = class {...}; also works | |
|
dpapad
2016/12/06 17:16:51
This comment is probably more meaningful if placed
Dan Beam
2016/12/06 21:04:20
Done.
| |
| 260 | |
| 261 class Shape { | |
| 262 constructor(x, y) { | |
| 263 this.x = x; | |
| 264 this.y = y; | |
| 265 } | |
| 266 } | |
| 267 | |
| 264 class Rectangle extends Shape { | 268 class Rectangle extends Shape { |
| 265 constructor(id, x, y, width, height) { | 269 constructor(x, y, width, height) { |
| 266 super(id, x, y); | 270 super(id, x, y); |
| 267 this.width = width; | 271 this.width = width; |
| 268 this.height = height; | 272 this.height = height; |
| 269 } | 273 } |
|
dpapad
2016/12/06 17:16:52
Nit: New line between functions?
Dan Beam
2016/12/06 21:04:20
Done.
| |
| 270 static defaultRectangle() { | 274 static goldenRectangle() { |
| 271 return new Rectangle('default', 0, 0, 100, 100); | 275 » » var PHI = (1 + Math.sqrt(5)) / 2; |
|
dpapad
2016/12/06 17:16:52
Can we use "let" in all ES6 examples? Or at least
Dan Beam
2016/12/06 21:04:20
i'm trying to use only 1 new concept at a time
| |
| 276 return new Rectangle(0, 0, PHI, 1); | |
| 272 } | 277 } |
| 273 move(x, y) { | 278 } |
| 274 this.x = x; | |
| 275 this.y = y; | |
| 276 } | |
| 277 }; | |
| 278 ``` | 279 ``` |
| 279 | 280 |
| 280 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 281 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-cl ass-definitions) |
| 281 /#sec-class-definitions) | |
| 282 | 282 |
| 283 **Discussion Notes / Link to Thread:** | 283 **Discussion Notes / Link to Thread:** |
| 284 | 284 |
| 285 --- | 285 --- |
| 286 | 286 |
| 287 ## Block Scope Functions | 287 ## Block Scope Functions |
| 288 | 288 |
| 289 **Usage Example:** | 289 **Usage Example:** |
| 290 | 290 |
| 291 ``` js | 291 ```js |
| 292 { | 292 { |
| 293 function foo() { | 293 function foo() { |
| 294 return 1; | 294 return 1; |
| 295 } | 295 } |
| 296 // foo() === 1 | 296 // foo() === 1 |
| 297 { | 297 { |
| 298 function foo() { | 298 function foo() { |
| 299 return 2; | 299 return 2; |
| 300 } | 300 } |
| 301 // foo() === 2 | 301 // foo() === 2 |
| 302 } | 302 } |
| 303 // foo() === 1 | 303 // foo() === 1 |
| 304 } | 304 } |
| 305 ``` | 305 ``` |
| 306 | 306 |
| 307 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 307 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-fu nctiondeclarationinstantiation) |
| 308 /#sec-functiondeclarationinstantiation) | |
| 309 | 308 |
| 310 **Discussion Notes / Link to Thread:** | 309 **Discussion Notes / Link to Thread:** |
| 311 | 310 |
| 312 --- | 311 --- |
| 313 | 312 |
| 314 ## Default Function Parameters | 313 ## Default Function Parameters |
| 315 | 314 |
| 315 Initialize parameters with default values if no value or `undefined` is passed. | |
| 316 | |
| 316 **Usage Example:** | 317 **Usage Example:** |
| 317 | 318 |
| 318 ``` js | 319 ```js |
| 319 function f(x, y = 7, z = 42) { | 320 /** |
| 320 return x + y + z; | 321 * @param {!Element} element An element to hide. |
| 322 * @param {boolean=} animate Whether to animatedly hide |element|. | |
| 323 */ | |
| 324 function hide(element, animate=true) { | |
| 325 function setHidden() { element.hidden = true; } | |
| 326 | |
| 327 if (animate) | |
| 328 element.animate({...}).then(setHidden); | |
| 329 else | |
| 330 setHidden(); | |
| 321 } | 331 } |
| 322 // f(1) === 50; | 332 |
| 333 hide(document.body); // animated, animate=true by default | |
| 334 hide(document.body, false); // not animated | |
| 323 ``` | 335 ``` |
| 324 | 336 |
| 325 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 337 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-fu nctiondeclarationinstantiation) |
| 326 /#sec-functiondeclarationinstantiation) | 338 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functio ns/Default_parameters) |
| 327 | 339 |
| 328 **Discussion Notes / Link to Thread:** | 340 **Discussion Notes / Link to Thread:** |
| 329 | 341 |
| 330 --- | 342 --- |
| 331 | 343 |
| 332 ## Rest Parameters | 344 ## Rest Parameters |
| 333 | 345 |
| 334 Aggregation of function arguments into one Array variable. | 346 Aggregation of function arguments into one Array variable. |
| 335 | 347 |
| 336 **Usage Example:** | 348 **Usage Example:** |
| 337 | 349 |
| 338 ``` js | 350 ```js |
| 339 function f(x, y, ...a) { | 351 function usesRestParams(a, b, ...theRest) { |
| 340 // for f(1, 2, 3, 4, 5)... | 352 console.log(a); // 'a' |
| 341 // x = 1, y = 2 | 353 console.log(b); // 'b' |
| 342 // a = [3, 4, 5] | 354 console.log(theRest); // [1, 2, 3] |
| 343 } | 355 } |
| 356 | |
| 357 usesRestParams('a', 'b', 1, 2, 3); | |
| 344 ``` | 358 ``` |
| 345 | 359 |
| 346 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 360 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-fu nction-definitions) |
| 347 /#sec-function-definitions) | |
| 348 | 361 |
| 349 **Discussion Notes / Link to Thread:** | 362 **Discussion Notes / Link to Thread:** |
| 350 | 363 |
| 351 --- | 364 --- |
| 352 | 365 |
| 353 ## Spread Operators | 366 ## Spread Operators |
| 354 | 367 |
| 355 Spreading the elements from an iterable collection into individual literals as | 368 Spreading the elements from an iterable collection into individual literals as |
| 356 function parameters. | 369 function parameters. |
| 357 | 370 |
| 358 **Usage Example:** | 371 **Usage Example:** |
| 359 | 372 |
| 360 ``` js | 373 ```js |
| 361 // Spreading an Array | 374 // Spreading an Array |
| 362 var params = [ 'hello', true, 7 ]; | 375 var params = ['hello', true, 7]; |
| 363 var other = [ 1, 2, ...params ]; // [ 1, 2, 'hello', true, 7 ] | 376 var other = [1, 2, ...params]; // [1, 2, 'hello', true, 7] |
| 364 f(1, 2, ...params) === 9; | |
| 365 | 377 |
| 366 // Spreading a String | 378 // Spreading a String |
| 367 var str = 'foo'; | 379 var str = 'foo'; |
| 368 var chars = [ ...str ]; // [ 'f', 'o', 'o' ] | 380 var chars = [...str]; // ['f', 'o', 'o'] |
| 369 ``` | 381 ``` |
| 370 | 382 |
| 371 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 383 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ar gument-lists-runtime-semantics-argumentlistevaluation) |
| 372 /#sec-argument-lists-runtime-semantics-argumentlistevaluation) | |
| 373 | 384 |
| 374 **Discussion Notes / Link to Thread:** | 385 **Discussion Notes / Link to Thread:** |
| 375 | 386 |
| 376 --- | 387 --- |
| 377 | 388 |
| 378 ## Object Literal Extensions | 389 ## Object Literal Extensions |
| 379 | 390 |
| 380 Convenient new ways for object property definition. | 391 Convenient new ways for object property definition. |
| 381 | 392 |
| 382 **Usage Example:** | 393 **Usage Example:** |
| 383 | 394 |
| 384 ``` js | 395 ```js |
| 385 // Computed property name | 396 // Computed property name |
| 386 var x = 'key'; | 397 var prop = 'foo'; |
| 387 var obj = {[x]: 1}; | 398 var o = { |
| 399 [prop]: 'hey', | |
| 400 ['b' + 'ar']: 'there', | |
| 401 }; | |
| 402 console.log(o); // {foo: 'hey', bar: 'there'} | |
| 388 | 403 |
| 389 // Shorthand property | 404 // Shorthand property |
| 390 var obj = {x, y}; //equivalent to {x:x, y:y} | 405 var foo = 1; |
| 406 var bar = 2; | |
| 407 var o = {foo, bar}; | |
| 408 console.log(o); // {foo: 1, bar: 2} | |
| 391 | 409 |
| 392 // Method property | 410 // Method property |
| 393 var obj = { | 411 var clearSky = { |
| 394 foo() {...}, | 412 // basically the same as clouds: function() { return 0; } |
| 395 bar() {...} | 413 clouds() { return 0; }, |
| 396 } | 414 color() { return 'blue'; }, |
| 415 }; | |
| 416 console.log(clearSky.color()); // 'blue' | |
| 417 console.log(clearSky.clouds()); // 0 | |
| 397 ``` | 418 ``` |
| 398 | 419 |
| 399 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 420 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ob ject-initialiser) |
| 400 /#sec-object-initialiser) | 421 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operato rs/Object_initializer) |
| 401 | 422 |
| 402 **Discussion Notes / Link to Thread:** | 423 **Discussion Notes / Link to Thread:** |
| 403 | 424 |
| 404 --- | 425 --- |
| 405 | 426 |
| 406 ## Template Literals | 427 ## Template Literals |
| 407 | 428 |
| 408 Expression interpolation for Strings, with the ability to access raw template | 429 Expression interpolation for Strings, with the ability to access raw template |
| 409 pieces. | 430 pieces. |
| 410 | 431 |
| 411 **Usage Example:** | 432 **Usage Example:** |
| 412 | 433 |
| 413 ``` js | 434 ```js |
| 414 // Simple example | 435 // Simple example |
| 415 var greeting = 'hello'; | 436 var greeting = 'hello'; |
| 416 var myName = {first: 'Foo', last: 'Bar'}; | 437 var myName = {first: 'Foo', last: 'Bar'}; |
| 417 var message = `${greeting}, | 438 var message = `${greeting}, |
| 418 my name is ${myName.first + myName.last}`; | 439 my name is ${myName.first + myName.last}`; |
| 419 // message == 'hello,\nmy name is FooBar' | 440 // message == 'hello,\nmy name is FooBar' |
| 420 | |
| 421 // Custom interpolation | |
| 422 function foo (strings, ...values) { | |
| 423 // for foo`bar${42}baz`... | |
| 424 // strings[0] === 'bar'; | |
| 425 // strings[1] === 'baz'; | |
| 426 // values[0] === 42; | |
| 427 | |
| 428 return strings[1] + strings[0] + values[0]; | |
| 429 } | |
| 430 | |
| 431 var newString = foo`bar${42}baz`; // 'bazbar42' | |
| 432 ``` | 441 ``` |
| 433 | 442 |
| 434 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 443 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-te mplate-literals) |
| 435 /#sec-template-literals) | |
| 436 | 444 |
| 437 **Discussion Notes / Link to Thread:** | 445 **Discussion Notes / Link to Thread:** |
| 438 | 446 |
| 439 --- | 447 --- |
| 440 | 448 |
| 441 ## Binary & Octal Literals | 449 ## Binary & Octal Literals |
| 442 | 450 |
| 443 **Usage Example:** | 451 **Usage Example:** |
| 444 | 452 |
| 445 ``` js | 453 ```js |
| 446 0b111110111 === 503; | 454 0b111110111 === 503; |
| 447 0o767 === 503; | 455 0o767 === 503; |
| 448 ``` | 456 ``` |
| 449 | 457 |
| 450 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 458 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-li terals-numeric-literals) |
| 451 /#sec-literals-numeric-literals) | |
| 452 | 459 |
| 453 **Discussion Notes / Link to Thread:** | 460 **Discussion Notes / Link to Thread:** |
| 454 | 461 |
| 455 --- | 462 --- |
| 456 | 463 |
| 457 ## `/u` Unicode Regex Literal | 464 ## `/u` Unicode Regex Literal |
| 458 | 465 |
| 459 **Usage Example:** | 466 **Usage Example:** |
| 460 | 467 |
| 461 ``` js | 468 ```js |
| 462 'ð ®·'.match(/./u)[0].length === 2; | 469 'ð ®·'.match(/./u)[0].length === 2; |
| 463 ``` | 470 ``` |
| 464 | 471 |
| 465 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 472 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ge t-regexp.prototype.sticky) |
| 466 /#sec-get-regexp.prototype.sticky) | |
| 467 | 473 |
| 468 **Discussion Notes / Link to Thread:** | 474 **Discussion Notes / Link to Thread:** |
| 469 | 475 |
| 470 --- | 476 --- |
| 471 | 477 |
| 472 ## `\u{}` Unicode String | 478 ## `\u{}` Unicode String |
| 473 | 479 |
| 474 **Usage Example:** | 480 **Usage Example:** |
| 475 | 481 |
| 476 ``` js | 482 ```js |
| 477 '\u{1d306}' == '\ud834\udf06'; // true | 483 '\u{1d306}' == '\ud834\udf06'; // true |
| 478 ``` | 484 ``` |
| 479 | 485 |
| 480 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 486 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-li terals-string-literals) |
| 481 /#sec-literals-string-literals) | |
| 482 | 487 |
| 483 **Discussion Notes / Link to Thread:** | 488 **Discussion Notes / Link to Thread:** |
| 484 | 489 |
| 485 --- | 490 --- |
| 486 | 491 |
| 487 ## `/y` Regex Sticky Matching | 492 ## `/y` Regex Sticky Matching |
| 488 | 493 |
| 489 Keep the matching position sticky between matches and this way support | 494 Keep the matching position sticky between matches and this way support |
| 490 efficient parsing of arbitrary long input strings, even with an arbitrary | 495 efficient parsing of arbitrarily long input strings, even with an arbitrary |
| 491 number of distinct regular expressions. | 496 number of distinct regular expressions. |
| 492 | 497 |
| 493 **Usage Example:** | 498 **Usage Example:** |
| 494 | 499 |
| 495 ``` js | 500 ```js |
| 496 var re = new RegExp('yy', 'y'); | 501 var re = new RegExp('yy', 'y'); |
| 497 re.lastIndex = 3; | 502 re.lastIndex = 3; |
| 498 var result = re.exec('xxxyyxx')[0]; | 503 var result = re.exec('xxxyyxx')[0]; |
| 499 result === 'yy' && re.lastIndex === 5; // true | 504 result === 'yy' && re.lastIndex === 5; // true |
| 500 ``` | 505 ``` |
| 501 | 506 |
| 502 **Documentation:** [link](http://es6-features.org | 507 **Documentation:** [link](http://es6-features.org/#RegularExpressionStickyMatchi ng) |
| 503 /#RegularExpressionStickyMatching) | |
| 504 | 508 |
| 505 **Discussion Notes / Link to Thread:** | 509 **Discussion Notes / Link to Thread:** |
| 506 | 510 |
| 507 --- | 511 --- |
| 508 | 512 |
| 509 ## Destructuring Assignment | 513 ## Destructuring Assignment |
| 510 | 514 |
| 511 Flexible destructuring of collections or parameters. | 515 Flexible destructuring of collections or parameters. |
| 512 | 516 |
| 513 **Usage Example:** | 517 **Usage Example:** |
| 514 | 518 |
| 515 ``` js | 519 ```js |
| 516 // Array | 520 // Array |
| 517 var list = [ 1, 2, 3 ]; | 521 var [a, , b] = [1, 2, 3]; // a = 1, b = 3 |
| 518 var [ a, , b ] = list; | |
| 519 // a = 1, b = 3 | |
| 520 | 522 |
| 521 // Object | 523 // Object |
| 522 var {width, height, area: a} = rect; | 524 var {width, height} = document.body.getBoundingClientRect(); |
| 523 // width = rect.width, height = rect.height, a = rect.area | 525 // width = rect.width, height = rect.height |
| 524 | 526 |
| 525 // Parameters | 527 // Parameters |
| 526 function f ([ name, val ]) { | 528 function f([name, val]) { |
| 527 console.log(name, val); | 529 console.log(name, val); // 'bar', 42 |
| 528 } | 530 } |
| 529 function g ({ name: n, val: v }) { | 531 f(['bar', 42]); |
|
dpapad
2016/12/06 17:16:52
What happens if user calls it as follows? Can we a
Dan Beam
2016/12/06 21:04:20
Done.
| |
| 530 console.log(n, v); | 532 |
| 533 function g({name: n, val: v}) { | |
| 534 console.log(n, v); // 'foo', 7 | |
| 531 } | 535 } |
| 532 function h ({ name, val }) { | 536 g({name: 'foo', val: 7}); |
| 533 console.log(name, val); | 537 |
| 538 function h({name, val}) { | |
| 539 console.log(name, val); // 'bar', 42 | |
| 534 } | 540 } |
| 535 | 541 h({name: 'bar', val: 42}); |
| 536 f([ 'bar', 42 ]); | |
| 537 g({ name: 'foo', val: 7 }); | |
| 538 h({ name: 'bar', val: 42 }); | |
| 539 | 542 |
| 540 ``` | 543 ``` |
| 541 | 544 |
| 542 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 545 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-de structuring-assignment) |
| 543 /#sec-destructuring-assignment) | |
| 544 | 546 |
| 545 **Discussion Notes / Link to Thread:** | 547 **Discussion Notes / Link to Thread:** |
| 546 | 548 |
| 547 --- | 549 --- |
| 548 | 550 |
| 549 ## Modules | 551 ## Modules |
| 550 | 552 |
| 551 Support for exporting/importing values from/to modules without global | 553 Support for exporting/importing values from/to modules without global |
| 552 namespace pollution. | 554 namespace pollution. |
| 553 | 555 |
| 554 **Usage Example:** | 556 **Usage Example:** |
| 555 | 557 |
| 556 ``` js | 558 ```js |
| 557 // lib/rect.js | 559 // lib/rect.js |
| 558 export function getArea() {...}; | 560 export function getArea() {...}; |
| 559 export { width, height, unimportant }; | 561 export {width, height, unimportant}; |
| 560 | 562 |
| 561 // app.js | 563 // app.js |
| 562 import {getArea, width, height} from 'lib/rect'; | 564 import {getArea, width, height} from 'lib/rect'; |
| 563 | 565 |
| 564 ``` | 566 ``` |
| 565 | 567 |
| 566 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 568 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-mo dules) |
| 567 /#sec-modules) | |
| 568 | 569 |
| 569 **Discussion Notes / Link to Thread:** | 570 **Discussion Notes / Link to Thread:** |
| 570 | 571 |
| 571 --- | 572 --- |
| 572 | 573 |
| 573 ## Symbol Type | 574 ## Symbol Type |
| 574 | 575 |
| 575 Unique and immutable data type to be used as an identifier for object | 576 Unique and immutable data type to be used as an identifier for object |
| 576 properties. | 577 properties. |
| 577 | 578 |
| 578 **Usage Example:** | 579 **Usage Example:** |
| 579 | 580 |
| 580 ``` js | 581 ```js |
| 581 const foo = Symbol(); | 582 const foo = Symbol(); |
| 582 const bar = Symbol(); | 583 const bar = Symbol(); |
| 583 typeof foo === 'symbol'; // true | 584 typeof foo === 'symbol'; // true |
| 584 typeof bar === 'symbol'; // true | 585 typeof bar === 'symbol'; // true |
| 585 let obj = {}; | 586 let obj = {}; |
| 586 obj[foo] = 'foo'; | 587 obj[foo] = 'foo'; |
| 587 obj[bar] = 'bar'; | 588 obj[bar] = 'bar'; |
| 588 JSON.stringify(obj); // {} | 589 JSON.stringify(obj); // {} |
| 589 Object.keys(obj); // [] | 590 Object.keys(obj); // [] |
| 590 Object.getOwnPropertyNames(obj); // [] | 591 Object.getOwnPropertyNames(obj); // [] |
| 591 Object.getOwnPropertySymbols(obj); // [ foo, bar ] | 592 Object.getOwnPropertySymbols(obj); // [foo, bar] |
| 592 ``` | 593 ``` |
| 593 | 594 |
| 594 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 595 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-sy mbol-constructor) |
| 595 /#sec-symbol-constructor) | |
| 596 | 596 |
| 597 **Discussion Notes / Link to Thread:** | 597 **Discussion Notes / Link to Thread:** |
| 598 | 598 |
| 599 --- | 599 --- |
| 600 | 600 |
| 601 ## `for ...of` Loops | 601 ## `for ...of` Loops |
| 602 | 602 |
| 603 Convenient operator to iterate over all values of an iterable object. | 603 Convenient operator to iterate over all values in an iterable collection. This |
| 604 differs from `for ...in`, which iterates over all iterable properties. | |
| 604 | 605 |
| 605 **Usage Example:** | 606 **Usage Example:** |
| 606 | 607 |
| 607 ``` js | 608 ```js |
| 608 // Given an iterable collection `fibonacci`... | 609 // Given an iterable collection fibonacci numbers... |
| 609 for (let n of fibonacci) { | 610 for (var n of fibonacci) { |
| 610 console.log(n); | 611 console.log(n); // 1, 1, 2, 3, ... |
| 611 } | 612 } |
| 612 ``` | 613 ``` |
| 613 | 614 |
| 614 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 615 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-fo r-in-and-for-of-statements) |
| 615 /#sec-for-in-and-for-of-statements) | 616 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Stateme nts/for...of) |
| 616 | 617 |
| 617 **Discussion Notes / Link to Thread:** | 618 **Discussion Notes / Link to Thread:** |
| 618 | 619 |
| 619 --- | 620 --- |
| 620 | 621 |
| 621 ## Object Static Methods | 622 ## Object Static Methods |
| 622 | 623 |
| 623 **Usage Example:** | 624 **Usage Example:** |
| 624 | 625 |
| 625 ``` js | 626 ```js |
| 626 // Object.assign | 627 // Object.assign |
| 627 var o = Object.assign({a:true}, {b:true}, {c:true}); | 628 var o = Object.assign({a:true}, {b:true}, {c:true}); |
| 628 'a' in o && 'b' in o && 'c' in o; // true | 629 'a' in o && 'b' in o && 'c' in o; // true |
| 629 | 630 |
| 630 // Object.setPrototypeOf | 631 // Object.setPrototypeOf |
| 631 Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true | 632 Object.setPrototypeOf({}, Array.prototype) instanceof Array; //true |
| 632 | 633 |
| 633 // Object.is | 634 // Object.is |
| 634 // Object.getOwnPropertySymbols | 635 // Object.getOwnPropertySymbols |
| 635 ``` | 636 ``` |
| 636 | 637 |
| 637 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 638 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-pr operties-of-the-object-constructor) |
| 638 /#sec-properties-of-the-object-constructor) | |
| 639 | 639 |
| 640 **Discussion Notes / Link to Thread:** | 640 **Discussion Notes / Link to Thread:** |
| 641 | 641 |
| 642 --- | 642 --- |
| 643 | 643 |
| 644 ## String Static & Prototype methods | 644 ## String Static & Prototype methods |
| 645 | 645 |
| 646 **Usage Example:** | 646 **Usage Example:** |
| 647 | 647 |
| 648 ``` js | 648 ```js |
| 649 // String.raw | 649 // String.raw |
| 650 // String.fromCodePoint | 650 // String.fromCodePoint |
| 651 | 651 |
| 652 // String.prototype.codePointAt | 652 // String.prototype.codePointAt |
| 653 // String.prototype.normalize | 653 // String.prototype.normalize |
| 654 // String.prototype.repeat | 654 // String.prototype.repeat |
| 655 // String.prototype.startsWith | 655 // String.prototype.startsWith |
| 656 // String.prototype.endsWith | 656 // String.prototype.endsWith |
| 657 // String.prototype.includes | 657 // String.prototype.includes |
| 658 ``` | 658 ``` |
| 659 | 659 |
| 660 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 660 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-pr operties-of-the-string-constructor) |
| 661 /#sec-properties-of-the-string-constructor) | |
| 662 | 661 |
| 663 **Discussion Notes / Link to Thread:** | 662 **Discussion Notes / Link to Thread:** |
| 664 | 663 |
| 665 --- | 664 --- |
| 666 | 665 |
| 667 ## Array Static & Prototype Methods | 666 ## Array Static & Prototype Methods |
| 668 | 667 |
| 669 **Usage Example:** | 668 **Usage Example:** |
| 670 | 669 |
| 671 ``` js | 670 ```js |
| 672 // Array.from | 671 // Array.from |
| 673 // Array.of | 672 // Array.of |
| 674 | 673 |
| 675 // Array.prototype.copyWithin | 674 // Array.prototype.copyWithin |
| 676 // Array.prototype.find | 675 // Array.prototype.find |
| 677 // Array.prototype.findIndex | 676 // Array.prototype.findIndex |
| 678 // Array.prototype.fill | 677 // Array.prototype.fill |
| 679 // Array.prototype.keys | 678 // Array.prototype.keys |
| 680 // Array.prototype.values | 679 // Array.prototype.values |
| 681 // Array.prototype.entries | 680 // Array.prototype.entries |
| 682 ``` | 681 ``` |
| 683 | 682 |
| 684 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 683 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-pr operties-of-the-array-constructor) |
| 685 /#sec-properties-of-the-array-constructor) | |
| 686 | 684 |
| 687 **Discussion Notes / Link to Thread:** | 685 **Discussion Notes / Link to Thread:** |
| 688 | 686 |
| 689 --- | 687 --- |
| 690 | 688 |
| 691 ## Number Properties | 689 ## Number Properties |
| 692 | 690 |
| 693 **Usage Example:** | 691 **Usage Example:** |
| 694 | 692 |
| 695 ``` js | 693 ```js |
| 696 // Number.isFinite | 694 // Number.isFinite |
| 697 // Number.isInteger | 695 // Number.isInteger |
| 698 // Number.isSafeInteger | 696 // Number.isSafeInteger |
| 699 // Number.isNaN | 697 // Number.isNaN |
| 700 // Number.EPSILON | 698 // Number.EPSILON |
| 701 // Number.MIN_SAFE_INTEGER | 699 // Number.MIN_SAFE_INTEGER |
| 702 // Number.MAX_SAFE_INTEGER | 700 // Number.MAX_SAFE_INTEGER |
| 703 ``` | 701 ``` |
| 704 | 702 |
| 705 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 703 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-is finite-number) |
| 706 /#sec-isfinite-number) | |
| 707 | 704 |
| 708 **Discussion Notes / Link to Thread:** | 705 **Discussion Notes / Link to Thread:** |
| 709 | 706 |
| 710 --- | 707 --- |
| 711 | 708 |
| 712 ## Iterators | 709 ## Iterators |
| 713 | 710 |
| 714 **Usage Example:** | 711 **Usage Example:** |
| 715 | 712 |
| 716 ``` js | 713 ```js |
| 717 let fibonacci = { | 714 let fibonacci = { |
| 718 [Symbol.iterator]() { | 715 [Symbol.iterator]() { |
| 719 let pre = 0, cur = 1; | 716 let pre = 0, cur = 1; |
| 720 return { | 717 return { |
| 721 next () { | 718 next () { |
| 722 [ pre, cur ] = [ cur, pre + cur ]; | 719 [pre, cur] = [cur, pre + cur]; |
| 723 return { done: false, value: cur }; | 720 return {done: false, value: cur}; |
| 724 } | 721 } |
| 725 }; | 722 }; |
| 726 } | 723 } |
| 727 }; | 724 }; |
| 728 ``` | 725 ``` |
| 729 | 726 |
| 730 **Documentation:** [link]() | 727 **Documentation:** [link]() |
| 731 | 728 |
| 732 **Discussion Notes / Link to Thread:** | 729 **Discussion Notes / Link to Thread:** |
| 733 | 730 |
| 734 --- | 731 --- |
| 735 | 732 |
| 736 ## Generators | 733 ## Generators |
| 737 | 734 |
| 738 Special iterators with specified pausing points. | 735 Special iterators with specified pausing points. |
| 739 | 736 |
| 740 **Usage Example:** | 737 **Usage Example:** |
| 741 | 738 |
| 742 ``` js | 739 ```js |
| 743 function* range(start, end, step) { | 740 function* range(start, end, step) { |
| 744 while (start < end) { | 741 while (start < end) { |
| 745 yield start; | 742 yield start; |
| 746 start += step; | 743 start += step; |
| 747 } | 744 } |
| 748 } | 745 } |
| 749 | 746 |
| 750 for (let i of range(0, 10, 2)) { | 747 for (let i of range(0, 10, 2)) { |
| 751 console.log(i); // 0, 2, 4, 6, 8 | 748 console.log(i); // 0, 2, 4, 6, 8 |
| 752 } | 749 } |
| 753 | 750 |
| 754 ``` | 751 ``` |
| 755 | 752 |
| 756 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 753 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ge nerator-function-definitions) |
| 757 /#sec-generator-function-definitions) | |
| 758 | 754 |
| 759 **Discussion Notes / Link to Thread:** | 755 **Discussion Notes / Link to Thread:** |
| 760 | 756 |
| 761 --- | 757 --- |
| 762 | 758 |
| 763 ## `Map` | 759 ## `Map` |
| 764 | 760 |
| 761 A simple key/value map in which any value (both objects and primitive values) | |
| 762 may be used as either a key or a value. | |
| 763 | |
| 765 **Usage Example:** | 764 **Usage Example:** |
| 766 | 765 |
| 767 ``` js | 766 ```js |
| 767 var map = new Map(); | |
| 768 map.size === 0; // true | |
| 769 map.get('foo'); // undefined | |
| 770 | |
| 768 var key = {}; | 771 var key = {}; |
| 769 var map = new Map(); | 772 map.set(key, 123); |
| 773 map.size === 1; // true | |
| 774 map.has(key); // true | |
| 775 map.get(key); // 123 | |
| 770 | 776 |
| 771 map.set(key, 123); | 777 map.delete(key); |
| 772 | 778 map.has(key); // false; |
| 773 map.has(key) && map.get(key) === 123; // true | 779 map.size === 0; // true |
| 774 ``` | 780 ``` |
| 775 | 781 |
| 776 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 782 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ma p-objects) |
| 777 /#sec-map-objects) | 783 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_ Objects/Map) |
| 778 | 784 |
| 779 **Discussion Notes / Link to Thread:** | 785 **Discussion Notes / Link to Thread:** |
| 780 | 786 |
| 781 --- | 787 --- |
| 782 | 788 |
| 783 ## `Set` | 789 ## `Set` |
| 784 | 790 |
| 791 An object that lets you store unique values of any type, whether primitive | |
| 792 values or object references. | |
| 793 | |
| 785 **Usage Example:** | 794 **Usage Example:** |
| 786 | 795 |
| 787 ``` js | 796 ```js |
| 788 var obj = {}; | |
| 789 var set = new Set(); | 797 var set = new Set(); |
| 790 | 798 |
| 791 set.add(123); | 799 set.add(123); |
| 800 set.size(); // 1 | |
| 801 set.has(123); // true | |
| 802 | |
| 792 set.add(123); | 803 set.add(123); |
| 793 | 804 set.size(); // 1 |
| 794 set.has(123); // true | |
| 795 ``` | 805 ``` |
| 796 | 806 |
| 797 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 807 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-se t-objects) |
| 798 /#sec-set-objects) | 808 [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_ Objects/Set) |
| 799 | 809 |
| 800 **Discussion Notes / Link to Thread:** | 810 **Discussion Notes / Link to Thread:** |
| 801 | 811 |
| 802 --- | 812 --- |
| 803 | 813 |
| 804 ## `WeakMap` | 814 ## `WeakMap` |
| 805 | 815 |
| 806 WeakMap does not prevent garbage collection if nothing else refers to an object | 816 WeakMap does not prevent garbage collection if nothing else refers to an object |
| 807 within the collection. | 817 within the collection. |
| 808 | 818 |
| 809 **Usage Example:** | 819 **Usage Example:** |
| 810 | 820 |
| 811 ``` js | 821 ```js |
| 812 var key = {}; | 822 var key = {}; |
| 813 var weakmap = new WeakMap(); | 823 var weakmap = new WeakMap(); |
| 814 | 824 |
| 815 weakmap.set(key, 123); | 825 weakmap.set(key, 123); |
| 816 | 826 |
| 817 weakmap.has(key) && weakmap.get(key) === 123; // true | 827 weakmap.has(key) && weakmap.get(key) === 123; // true |
| 818 ``` | 828 ``` |
| 819 | 829 |
| 820 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 830 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-we akmap-objects) |
| 821 /#sec-weakmap-objects) | |
| 822 | 831 |
| 823 **Discussion Notes / Link to Thread:** | 832 **Discussion Notes / Link to Thread:** |
| 824 | 833 |
| 825 --- | 834 --- |
| 826 | 835 |
| 827 ## `WeakSet` | 836 ## `WeakSet` |
| 828 | 837 |
| 829 WeakSet does not prevent garbage collection if nothing else refers to an object | 838 WeakSet does not prevent garbage collection if nothing else refers to an object |
| 830 within the collection. | 839 within the collection. |
| 831 | 840 |
| 832 **Usage Example:** | 841 **Usage Example:** |
| 833 | 842 |
| 834 ``` js | 843 ```js |
| 835 var obj1 = {}; | 844 var obj1 = {}; |
| 836 var weakset = new WeakSet(); | 845 var weakset = new WeakSet(); |
| 837 | 846 |
| 838 weakset.add(obj1); | 847 weakset.add(obj1); |
| 839 weakset.add(obj1); | 848 weakset.add(obj1); |
| 840 | 849 |
| 841 weakset.has(obj1); // true | 850 weakset.has(obj1); // true |
| 842 ``` | 851 ``` |
| 843 | 852 |
| 844 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 853 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-we akset-objects) |
| 845 /#sec-weakset-objects) | |
| 846 | 854 |
| 847 **Discussion Notes / Link to Thread:** | 855 **Discussion Notes / Link to Thread:** |
| 848 | 856 |
| 849 --- | 857 --- |
| 850 | 858 |
| 851 ## Typed Arrays | 859 ## Typed Arrays |
| 852 | 860 |
| 853 A lot of new typed Arrays... | 861 A lot of new typed Arrays... |
| 854 | 862 |
| 855 **Usage Example:** | 863 **Usage Example:** |
| 856 | 864 |
| 857 ``` js | 865 ```js |
| 858 new Int8Array(); | 866 new Int8Array(); |
| 859 new UInt8Array(); | 867 new UInt8Array(); |
| 860 new UInt8ClampedArray() | 868 new UInt8ClampedArray(); |
| 861 // ...You get the idea. Click on the Documentation link below to see all. | 869 // ... You get the idea. Click on the Documentation link below to see all. |
| 862 ``` | 870 ``` |
| 863 | 871 |
| 864 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 872 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ty pedarray-objects) |
| 865 /#sec-typedarray-objects) | |
| 866 | 873 |
| 867 **Discussion Notes / Link to Thread:** | 874 **Discussion Notes / Link to Thread:** |
| 868 | 875 |
| 869 --- | 876 --- |
| 870 | 877 |
| 871 ## `Proxy` | 878 ## `Proxy` |
| 872 | 879 |
| 873 Hooking into runtime-level object meta-operations. | 880 Hooking into runtime-level object meta-operations. |
| 874 | 881 |
| 875 **Usage Example:** | 882 **Usage Example:** |
| 876 | 883 |
| 877 ``` js | 884 ```js |
| 878 let target = { | 885 var keyTracker = new Proxy({}, { |
| 879 foo: 'Welcome, foo' | 886 keysCreated: 0, |
| 880 }; | 887 |
| 881 let proxy = new Proxy(target, { | 888 get (receiver, key) { |
| 882 get (receiver, name) { | 889 if (key in receiver) { |
| 883 return name in receiver ? receiver[name] : `Hello, ${name}`; | 890 console.log('key already exists'); |
| 884 } | 891 } else { |
| 892 ++this.keysCreated; | |
| 893 console.log(this.keysCreated + ' keys created!'); | |
| 894 receiver[key] = true; | |
| 895 } | |
| 896 }, | |
| 885 }); | 897 }); |
| 886 proxy.foo === 'Welcome, foo'; // true | 898 |
| 887 proxy.world === 'Hello, world'; // true | 899 keyTracker.key1; // 1 keys created! |
| 900 keyTracker.key1; // key already exists | |
| 901 keyTracker.key2; // 2 keys created! | |
| 888 ``` | 902 ``` |
| 889 | 903 |
| 890 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 904 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-pr oxy-object-internal-methods-and-internal-slots) |
| 891 /#sec-proxy-object-internal-methods-and-internal-slots) | |
| 892 | 905 |
| 893 **Discussion Notes / Link to Thread:** | 906 **Discussion Notes / Link to Thread:** |
| 894 | 907 |
| 895 --- | 908 --- |
| 896 | 909 |
| 897 ## `Reflection` | 910 ## `Reflection` |
| 898 | 911 |
| 899 Make calls corresponding to the object meta-operations. | 912 Make calls corresponding to the object meta-operations. |
| 900 | 913 |
| 901 **Usage Example:** | 914 **Usage Example:** |
| 902 | 915 |
| 903 ``` js | 916 ```js |
| 904 let obj = { a: 1 }; | 917 let obj = {a: 1}; |
| 905 Object.defineProperty(obj, 'b', { value: 2 }); | 918 Object.defineProperty(obj, 'b', {value: 2}); |
| 906 obj[Symbol('c')] = 3; | 919 obj[Symbol('c')] = 3; |
| 907 Reflect.ownKeys(obj); // ['a', 'b', Symbol(c)] | 920 Reflect.ownKeys(obj); // ['a', 'b', Symbol(c)] |
| 908 ``` | 921 ``` |
| 909 | 922 |
| 910 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 923 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-re flection) |
| 911 /#sec-reflection) | |
| 912 | 924 |
| 913 **Discussion Notes / Link to Thread:** | 925 **Discussion Notes / Link to Thread:** |
| 914 | 926 |
| 915 --- | 927 --- |
| 916 | 928 |
| 917 ## Math Methods | 929 ## Math Methods |
| 918 | 930 |
| 919 A lot of new Math methods. | 931 A lot of new Math methods. |
| 920 | 932 |
| 921 **Usage Example:** | 933 **Usage Example:** |
| 922 | 934 |
| 923 ``` js | 935 ```js |
| 924 // See Doc | 936 // See Doc |
| 925 ``` | 937 ``` |
| 926 | 938 |
| 927 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0 | 939 **Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-ma th) |
| 928 /#sec-math) | |
| 929 | 940 |
| 930 **Discussion Notes / Link to Thread:** | 941 **Discussion Notes / Link to Thread:** |
| 931 | 942 |
| 932 --- | 943 --- |
| OLD | NEW |