http://es6.ruanyifeng.com/#docs/intro
JavaScript Standard Reference Tutorial
http://javascript.ruanyifeng.com/
1. Arrow operator
2. Class support
//class definition
class Animal {
//New constructor in ES6
constructor(name) {
this.name = name;
}
//instance method
sayName() {
console.log('My name is '+this.name);
}
}
// class inheritance
class Programmer extends Animal {
constructor(name) {
/ / Directly call the parent class constructor to initialize
super(name);
}
program() {
console.log("I'm coding...");
}
}
// test our class
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//Output 'I'm coding...'
3. Enhanced object literals
can define prototypes in object literals, and
define methods that can
directly
var human = {
breathe() {
console.log('breathing...');
}
};
var worker = {
__proto__: human, //Set the prototype of this object to human, which is equivalent to inheriting human
company: 'freelancer',
work() {
console.log('working...');
}
};
human.breathe();//Output 'breathing...'
//Call the inherited breathe method
worker.breathe();//Output 'breathing...'
4. The string template
ES6 allows the use of backticks ` to create strings. The strings created by this method can contain variables ${vraible} wrapped by dollar signs and curly braces
//generate a random number
var num = Math.random ();
// output this number to the console
console.log(`your num is ${num}`);
5. Let and const keywords Let
can be regarded as var, but the variables it defines can be used only if it is limited to a specific scope, and it is invalid if it leaves this scope. const is very intuitive and is used to define constants, that is, variables whose values cannot be changed
for (let i=0;i<2;i++)console.log(i);//输出: 0,1 console.log(i);//Output: undefined, an error will be reported in strict mode
6. for of value traversal
var someArray = [ "a", "b", "c" ];
for (v of someArray) {
console.log(v);//Output a,b,c
}
7. Promises
Promises are a mode of handling asynchronous operations, which were previously implemented in many third-party libraries, such as jQuery's deferred object. When you initiate an asynchronous request and bind event handlers such as .when(), .done(), etc., you are actually applying the promise pattern
//create promise
var promise = new Promise(function(resolve, reject) {
// Do some asynchronous or time-consuming operation
if ( /*if successful*/ ) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
// bind handler
promise.then(function(result) {
//If the promise is successful, it will be executed here
console.log(result); // "Stuff worked!"
}, function(err) {
//promise failure will execute here
console.log(err); // Error: "It broke"
});
8. New API
Math, Number, String, Object's new API
10. Symbols
Symbol is a basic type, like Number, String and Boolean, it is not an object. Symbols are generated by calling the symbol function, which accepts an optional name parameter, and the symbol returned by the function is unique. This return value can then be used as an object key. Symbol can also be used to create private properties, the outside cannot directly access the property value keyed by symbol
(function() {
// create symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
})();
var c = new MyClass("hello")
c["key"] === undefined//The property cannot be accessed because it is private
11. Extended parameters
Allows to pass arrays or array-like arrays directly as function parameters without using apply
var people=['Wayou','John','Sherlock'];
//sayHello function originally received three separate parameters shemale, man two and man three
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
// but we pass an array as an extension parameter, which maps nicely to each individual parameter
sayHello(...people);//输出：Hello Wayou,John,Sherlock
//In the past, if we needed to pass an array as a parameter, we needed to use the function's apply method
sayHello.apply(null,people);//输出：Hello Wayou,John,Sherlock
12
Indefinite Parameters The format of indefinite parameters is three periods followed by the variable name representing all indefinite parameters. For example, in the following example, ...x represents all the parameters passed to the add function.
//function to add all parameters
function add(...x){
return x.reduce((m,n)=>m+n);
}
// pass any number of parameters
console.log(add(1,2,3));//Output: 6
console.log(add(1,2,3,4,5));//Output: 15
13 Default parameters
function sayHello(name){
//The traditional way of specifying default parameters
var name=name||'dude';
console.log('Hello '+name);
}
//Use ES6 default parameters
function sayHello2(name='dude'){
console.log(`Hello ${name}`);
}
sayHello();//Output: Hello dude
sayHello('Wayou');//Output: Hello Wayou
sayHello2();//Output: Hello dude
sayHello2('Wayou');//Output: Hello Wayou
14. iterator, generator
15 modules
// point.js
module "point" {
export class Point {
constructor (x, y) {
public x = x;
public y = y;
}
}
}
// myapp.js
//declare the referenced module
module point from "/point.js";
//It can be seen here that although the referenced module is declared, it can still be imported by specifying the required part
import Point from "point";
var origin = new Point(0, 0);
console.log(origin);
16. Proxies
//Define the target object to be listened to
var engineer = { name: 'Joe Sixpack', salary: 50 };
//define the handler
var interceptor = {
set: function (receiver, property, value) {
console.log(property, 'is changed to', value);
receiver[property] = value;
}
};
//create proxy to listen
engineer = Proxy(engineer, interceptor);
// make some changes to trigger the proxy
engineer.salary = 60;//Console output: salary is changed to 60