ES6
Last updated
Last updated
References:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '('
Guide: https://github.com/airbnb/javascript
DON'T use 'single var pattern'
// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
new line
$second
.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
// vs
$second.on('click',function(){ alert('hello everybody');}).
fadeIn('slow').
animate({height:'120px'},500);
// vs
$second.on('click',function(){ alert('hello everybody');})
.fadeIn('slow')
.animate({height:'120px'},500);
Don't use parentheses for unary operator such as delete, void, typeof
Use single quote '' for strings
Use function declarations instead of function expressions.
index.js
require('babel-core/register');
require('./es6code');
// To run this file, do
// `node index.js`
es6code.js
import path from 'path';
class car {
startEngine() {
console.log('Ignition on');
}
}
for...in
: Iterate over property name, in arbitrary order (because property doesn't have order)
for (let prop in obj) {
// Check, in case prototype has customized properties
if (obj.hasOwnProperty(prop) {
// ...
}
}
// when using in array, it iterates on index
// Don't use this
for (let index in arr) {
}
// use Object.keys
Object.keys(obj).forEach(function (key, index) {
console.log(obj[key]);
}
// underscore
_.each(obj, function (value, key) {
});
ES6: Iterate over values: for .. of
for (let value of arr) {
}
// use forEach
arr.forEach(function (element, index) {
console.log(element);
});
// underscore
_.each(arr, function (element, index) {
});
http://exploringjs.com/es6/ch_modules.html
CommonJS Modules: The dominant implementation of this standard is in Node.js (Node.js modules have a few features that go beyond CommonJS). Characteristics:
Compact syntax
Designed for synchronous loading
Main use: server
Asynchronous Module Definition (AMD): The most popular implementation of this standard is RequireJS. Characteristics:
Slightly more complicated syntax, enabling AMD to work without eval() (or a compilation step).
Designed for asynchronous loading
Main use: browsers
Declarative syntax (for importing and exporting)
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
// import
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
// import whole module
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5
// import from node package
import fs from 'fs';
Default exports If you want to export only a single function, you have to use export default
then you can do import a from 'MyClass'
export default function () { ··· } // no semicolon!
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();
// class
//------ MyClass.js ------
export default class MyClass { ··· } // no semicolon!
// or
export { MyClass };
//------ main2.js ------
import {MyClass} from 'MyClass';
let inst = new MyClass();
Programmatic loader API: to configure how modules are loaded and to conditionally load modules
ES5只有全局作用域和函数作用域,没有块级作用域
ES6: let实际上为JavaScript新增了块级作用域; 函数本身的作用域,在其所在的块级作用域之内。
// 内层作用域可以定义外层作用域的同名变量。
{{{{
let insane = 'Hello World';
{let insane = 'Hello World';}
}}}};
// 立即执行匿名函数(IIFE)不再必要了
// IIFE写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
// ES6也规定,函数本身的作用域,在其所在的块级作用域之内。
Use for collect the rest:
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
Use for spread object or array into parameters like:
shape: {a, b} -> a, b
shape: [a, b] -> a, b
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }
Math.max(...[1,2,3]);