ES6的一些常用语法

为什么要使用es6

ES6是一次重大的版本升级，由于ES6秉承着最大化兼容已有代码的设计理念，过去编写的JS代码还能正常运行。事实上，许多浏览器已经支持部分ES6特性，并在继续努力实现其余特性。在一些已经实现部分特性的浏览器中，开发者符合标准的JavaScript代码已经可以正常运行，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

安装node环境，Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。用webpack来编译es6，提高浏览器的兼容性。

以下是ES6排名前十位的最佳特性列表（排名不分先后）：

 

 

Default Parameters（默认参数）in ES6；　　

   var link=function(height,color){//es5定义默认参数
      var height=height||50;
      var color=color||'red';
      ...
    }
    var link=function(height=50,color='red'){ //es6可以直接把默认值放在函数声明里
      ...
    }

 

Template Literals（模板文本）in ES6；

    //es5在字符串中插入变量
    var name='your name is'+first+' '+last+'.';
    var url='http://localhost:3000/api/message/'+id;

    //es6新语法模板文本 在反引号中用${name}
    var name=`your name is ${first} ${last}.`

 

Multi-line Strings（多行字符串）in ES6；

// es5多行字符串，
var roadPoem = '江南好，风景旧曾谙。'
    + '日出江花红胜火，'
    + '春来江水绿如蓝。'
    + '能不忆江南？'
    + '忆江南·江南好';

// 然而在ES 6中，仅仅用反引号就可以解决了：支持多行文本的字符串
var roadPoem = `江南好，风景旧曾谙。
    日出江花红胜火，
    春来江水绿如蓝。
    能不忆江南？
    忆江南·江南好`;

Destructuring Assignment（解构赋值）in ES6；

// 其中house和mouse是key，同时house和mouse也是一个变量，在ES5中是这样的：
var data = $('body').data();// data 拥有两个属性 house 和mouse
house = data.house;
mouse = data.mouse;
//在Node.js中用ES5是这样的：
var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body;  // body 两个属性 username 和password
username = body.username;
password = body.password;

//在ES6中，可以使用以下语句来代替上面的ES5代码：
var { house, mouse} = $('body').data();
var {jsonMiddleware} = require('body-parser');
var {username, password} = req.body;
//这个同样也适用于数组，是非常赞的用法：
var [col1, col2]  = $('.column'),
[line1, line2, line3, , line5] = file.split('n');

Enhanced Object Literals（增强的对象文本）in ES 6；

Arrow Functions（箭头函数）in ES 6；

Promises in ES 6；

Block-Scoped Constructs Let and Const（块作用域构造Let and Const）；

Classes（类）in ES 6；

Modules（模块）in ES 6;

原文地址：https://www.cnblogs.com/daisy-style/p/12722165.html