ES6特性

ES6特性

① let和const

• let相当于给js新增了块级作用域，声明的变量只在let命令所在的代码块内有效。
• const也是声明变量，它声明的变量，不能改变，可以用来声明第三方库变量的应用。
• 该特性与var区分，let不存在变量提升，且先调用后声明时会产生死区。

② 函数参数默认值

• 传统方法为var height = height || 50;
• ES方法则可在函数声明时定义默认值

function foo(height = 50,color = 'red'){
   // ...
}

③ 模板字符串

• 传统方法使用 + 拼接字符串

var name = 'Your name is ' + first + ' ' + last + '.';

• ES6中使用反引号（`），并将需要拼接的变量放入${ }中，

var name = `Your name is ${first} ${last}.`;

④ 多行字符串

• ES6中可直接放入反引号中，不影响字符串换行。

⑤ 解构赋值

• es6按照一定模式，从数组和对象中提取值，对变量进行赋值，这就成为解构，也就是说，运用es5的方法，数组和对象中的变量需要，一个个进行赋值，而es6可以一步到位。

let [foo, [[bar], baz]] = [1, [[2], 3]];

    foo // 1

    bar // 2

    baz // 3

let [head, ...tail] = [1, 2, 3, 4];

    head // 1

    tail // [2, 3, 4]

 
let [x, y, ...z] = ['a'];

    x // "a"

    y // undefined

    z // []

⑥ 箭头函数

• 除了书写简洁了很多，最大的优点是this指向，使用箭头函数，函数内部的this就是定义时所在的对象。箭头函数根本没有自己的this，this是继承外面的，它内部的this就是外层代码块的this。

var f = () => 5;

// 等同于

var f = function () { return 5 };

 

var sum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) {

 return num1 + num2;

};

⑦ Promise

//创建promise

var promise = new Promise(function(resolve, reject) {

    // 进行一些异步或耗时操作

    if ( /*如果成功 */ ){

        resolve("Stuffworked!");

    } else {

        reject(Error("Itbroke"));

    }

});

//绑定处理程序

promise.then(function(result) {

   //promise成功的话会执行这里

    console.log(result); // "Stuffworked!"

}, function(err) {

   //promise失败会执行这里

    console.log(err); // Error:"It broke"

});

⑧ 类

//类的定义

class Animal {

   //ES6中新型构造器

    constructor(name){

        this.name = name;

    }

    //实例方法

    sayName() {

        console.log('My name is '+this.name);

    }

}

//类的继承

class Programmer extendsAnimal {

    constructor(name) {

       //直接调用父类构造器进行初始化

        super(name);

    }

    program() {

        console.log("I'mcoding...");

    }

}

//测试我们的类

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...’

⑨ 模块化

• 将不同功能的代码分别放在不同文件中，达到模块化效果。

// point.js

module "point" {

    export class Point {

        constructor (x, y) {

            public x = x;

            public y = y;

        }

    }

}

 

// myapp.js

//声明引用的模块

module point from "/point.js";

//这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入

import Point from "point";

 

var origin = new Point(0, 0);

console.log(origin);