ES6 new features and advantages

The emergence of ES6 (ECMAScript2015) has undoubtedly brought new surprises to front-end developers. It contains some great new features, which can more easily implement many complex operations and improve the efficiency of developers. Below are some commonly used new features. He makes the front end closer and closer to the back end...

1. Arrow operator

If you know C# or Java, you must know lambda expressions. The new arrow operator => in ES6 has the same effect. It simplifies writing functions. The left side of the operator is the input parameter, while the right side is the operation performed and the returned value Inputs=>outputs.

The new arrow operator in ES6 is used to simplify the writing of functions. The left side of the operator is the parameter, and the right side is the specific operation and return value. .

// ES6
var test = (num1, num2) => { return num1 + num2; }

// 传统
var test = function(num1, num2) {
    return num1 + num2;
};

2. Class support

ES6 added support for classes and introduced the class keyword (in fact, class has always been a reserved word in JavaScript, the purpose is to consider that it may be used in new versions in the future, and now it finally comes in handy). JS itself is object-oriented, and the classes provided in ES6 are really just wrappers around the JS prototype pattern. Now that native class support is provided, object creation and inheritance are more intuitive, and concepts such as parent class method invocation, instantiation, static methods, and constructors are more visualized.

//类的定义
class Animal {
	//ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
    	//直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

3. String Templates

String templates are relatively simple and easy to understand. ES6 allows the use of backticks ` to create strings, which can contain variables ${vraible} wrapped in dollar signs and curly braces.

//产生一个随机数
var num=Math.random();

//将这个数字输出到console
console.log(`your num is ${num}`);

4.let and const keywords

Let can be regarded as var, but the variables it defines can only be used within a specific scope, and it is invalid to leave this scope. const is very intuitive and is used to define constants, that is, variables that cannot be changed in value.

for (let i=0;i<2;i++)console.log(i);//输出: 0,1

console.log(i);//输出：undefined,严格模式下会报错

5.for of value traversal

We all know that the for in loop is used to traverse arrays, class arrays or objects. The newly introduced for of loop in ES6 has similar functions, except that it provides values ​​instead of serial numbers for each loop.

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//输出 a,b,c
}

More new features of ES6: http://www.cnblogs.com/Wayou/p/es6_new_features.html