![Destructuring
var [name, type] = ['rob', 'shoe']
var {label, activity} = getActivity()
var [title, , link] = ['señor', 'rob', 'http://...']
function findAccount({name: customerName}) {
console.log(customerName)
}](https://image.slidesharecdn.com/es6-180215132648/85/ES6-Primer-7-320.jpg)
![Parameter Handling
// defaults
function getBook(title, version = 1) { .. }
// rest or splat operator
function addShoes(color, ...attributes) {
// attributes is an array containing parameters 2+
attributes.forEach(..)
}
// spread operator
function removeItem(name, type, element) { .. }
removeItem(...['walrus', 'shoe', panelElement])
// spread can also be used in other areas, like
// array or object literals (eg. simple concat)
var allLayers = [layer1, layer2, ...everythingElse]](https://image.slidesharecdn.com/es6-180215132648/85/ES6-Primer-8-320.jpg)
ES6 Primer
- 2. Classes class Panel { constructor() { // make the thing } addItem(toAdd) { // add the item } }
- 3. Arrow Functions arrayOfSomeStuff.filter(item => item < 20) toggle.addEventListener('click', (evt) => { // toggle the toggle })
- 4. this class Layer { this.url = 'http://onxmaps.com/' .. pages.forEach(function(page) { console.log(this.url + page) }.bind(this)) } class Layer { this.url = 'http://onxmaps.com/' .. pages.forEach((page) => { console.log(this.url + page) }) }
- 5. Objects var preferences = { fontSize: 16, // shorthand for theme: theme theme } * there are a couple other object literal changes that have varying levels of support and usefulness.
- 6. Template Strings `using the backticks` `now supports multiline strings` `added ${adjective} support for interpolation`
- 7. Destructuring var [name, type] = ['rob', 'shoe'] var {label, activity} = getActivity() var [title, , link] = ['señor', 'rob', 'http://...'] function findAccount({name: customerName}) { console.log(customerName) }
- 8. Parameter Handling // defaults function getBook(title, version = 1) { .. } // rest or splat operator function addShoes(color, ...attributes) { // attributes is an array containing parameters 2+ attributes.forEach(..) } // spread operator function removeItem(name, type, element) { .. } removeItem(...['walrus', 'shoe', panelElement]) // spread can also be used in other areas, like // array or object literals (eg. simple concat) var allLayers = [layer1, layer2, ...everythingElse]
- 9. const & let // block-scoped read only values const name = 'walrus' // block-scoped variable values let uri = '/account/' Do not become part of the window object like var
- 10. for..of loops for (const item of pileOfItems) { console.log(item) } The problem with the old for..in loops: • Did weird things with objects (nested properties) • Did weird things with arrays (out of order) New for..of loops: • Flat out don't work with objects (stop iterating over object properties you animal) • Works great with arrays * caveat: for..of works with iterable collections like NodeList, but IE/Edge still has a rough time with this.
- 11. Modules export function addItem(toAdd) { .. } export const scale = 12 export class Layer { .. } .. import { addItem, scale, Layer } from 'lib/layer' // import everything with * import * as layerLib from 'lib/layer' console.log(layerLib.scale) // default export export default class Layer { .. } .. import LayerHelper from 'lib/layer'
- 12. Promises fetch(this.environment.apiUrl + '/v1/preferences', options) .then(checkStatus) .then(parseJson) .then((response) => { // do something with our parsed response object }) .catch((error) => { // handle your error }) Writing your asynchronous code in a synchronous fashion
- 13. Other • Map, Set data structures • New helpful Math APIs • Unicode variables and matching • Generators