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 |