es6去掉字符串里的引号_ES6排名前十位的最佳特性列表和常用的一些语法(排名不分先后)...

以下是ES6排名前十位的最佳特性列表(排名不分先后):

• Default Parameters(默认参数)in ES6;
• Template Literals(模板文本)in ES6;
• Multi-line Strings(多行字符串)in ES 6;
• Destructuring Assignment(解构赋值)in ES 6;
• Enhanced Object Literals(增强的对象文本)in ES 6;
• Arrow Functions(箭头函数)in ES6;
• Promises in ES 6;
• Block-Scoped Constructs Let and Const(块作用域构造Let and Const);
• Classes(类)in ES 6;
• Modules(模块)in ES6

Default Parameters(默认参数)

//以前的Javascript原先定义方式var link=function(height,color,url){var height=height || 50；var color=color || 'red';var url=url || 'http:// baidu.com';...｝

但在ES6中,可以直接把默认值放在函数声明里:

//新的 JavaScript定义方式var link=function(height=50,color='red',url='http://baidu.com'){...}

Template Literals(模板文本)

//ES6之前只能使用组合字符串方式var name='Your name is' + first + '' +last + '.' ;var url='http://localhost:3000/api/messages/' + id;

在ES6中,可以使用新的语法${NAME},并将其放在反引号里:

//ES6支持模板文本var name=`Your name is ${first} ${last}.`;var url=`http://localhost:3000/api/messages/S{id)`;

Multi-line Strings(多行字符串)

//ES6之前方式只能使用组合字符串Var roadPoem= `江南好,风景旧曾谙。+'日出江花红胜火,+'春来江水绿如蓝。'+'能不忆江南?'+'忆江南·江南好`;

在ES6中,仅用反引号就可以解决了:

//支持多行文本的字符串var roadPoem=`江南好,风景旧曾谙。日出江花红胜火,春来江水绿如蓝。能不忆江南?忆江南·江南好`;

Destructuring Assignment(解构赋值)

从一个简单的赋值讲起,其中 house和mouse是key,同时house和mouse 也是一个变量,在ES5中是这样的:

var data=$('body').data();// data 拥有内个属性 house 和mousehouse=data.house;mouse=data.mouse;

在Node.js中用ES5是这样的:

var jsonMiddleware = require('body-parser').jsonMiddleware;var body=req.body; //body 两个属性 username 和l passwordusername=body.username;password=body.password;

在ES6中,可以使用以下语句来代替上面的ES5代码:

var { house,mouse}=$('body').data();var {jsonMiddleware}=require('body-parser');var {username,password}=req.body;

这个同样也适用于数组

var [coll,co12]=$('.column'),[linel,line2,line3,,line5]=file.split('n');

Enhanced Obiectliterals(增强的对象义牛

通过ES6,可以把ES5中的JSON变得更加接近于一个类。

下面是一个典型的ES5对象文本，里面有一些方法和属性:

//文本对象vat serviceBase=fport:3000,url:'baidu.com"},getaccounts=function(){return [1,2,3]);var accountServiceES 5={port: serviceBase.port,url: serviceBase.url,getAccounts:getAccounts,tostring:function(){return JSON.stringify(this.valueOf());},getUrl:function(){return "http://w+this.url++this.port},valueOf 1_2_3:getAccounts()}

如果开发者想让它更有意思,可以用Object.create从ServiceBase 继承原型的方法:

var accountServiceES 50bjectCreate=Object.create(serviceBase)var accountServiceES 50bjectCreate={getAccounts:getAccounts,toString:function(){return JSON.stringify(this.valueof());},getUrl:function(){return "http://"+this.url+':'+ this.port},valueOf_1_2_3:getAccounts()}

其实对于以上两种 accountServiceES 5ObjectCreate 和accountServiceES 5并不是完全一致的。Object.Create()方法创建一个新对象,其是使用现有的对象来继承创建一个新的对象,而 accountSerivce ES5并且继承现有对象。

在ES 6的对象文本中,既可以直接分配 getAccounts:getAccounts,也可以只需用一个 getAccounts.此外,可以通过 _proto_(并不是通过proto)设置属性:

var serviceBase={port:3000,url:'baidu.com'},getAccounts=function(){return [1,2,3]});var accountService={proto:serviceBase,getAccounts,

另外,可以调用super防范,以及使用动态key值(valueOf_1_2_3):

tostring(){return JSON.stringify((super.valueOf()));},getUrl(){return "http://"+this.url+':'+this.port},[ 'valueOf_ + getAccounts().join('_')]:getAccounts()};console.log(accountService)

对于旧版的对象来说,ES6的对象文本是一个很大的进步

Arrow Functions(箭头函数)

有了箭头函数,就不必用 that=this 或self=this,_this=this,.bind(this)那么麻烦了

var _this=this;$('.btn').click(function(event){_this.sendData();})

在ES6中则不需要用 _this=this:

$('.btn').click((event)=>this.sendData();})

但并不是完全否定之前的方案,ES6委员会决定,以前的 function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能。

,通过call 传递文本给 logUpperCase()函数,在ES5中：

var logUppercase= function(){var _this= this;this.string=this.string.toUpperCase();return function(){return console.log(_this.string);}}LogUppercase.call({string:'ES 6 rocks'})();

而在ES6中并不需要用 _this浪费时间:

var logUpperCase=function(){this.string= this.string.toUpperCase();return()=> console.log(this.string);}logUpperCase.call({ string:'ES 6 rocks'})();

• 注意:在ES6中,“》=”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头

函数后,它就变成了一个表达式,其将暗中返回单个语句的结果。如果结果超过一行,将需要明确使用 return。

在箭头函数中,对于单个参数,括号()是可省略的,但当参数超过一个时就需要括号()了。

在ES5代码中有明确的返回功能:

var ids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];var messages=ids.map(function(value,index,list){return 'ID of'+ index+' element is'+value+'';})；

在ES6中有更加严谨的版本,参数需要被包含在括号里并且是隐式地返回:

var ids=['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];var messages=ids.map((value,index,list)=>ID of ${index} elementis ${value} '); //隐式返回

Promise实现

下面是一个简单地用 setTimeoutO)函数实现的异步延迟加载凼数:

setTimeout(function(){console.log('Yay!');},1000);

在ES6中,可以用Promise 重写,虽然在此实例中并不能减少大量的代码,甚至多写

了数行,但是逻辑却清晰了不少:

var wait1000= new Promise((resolve,reject)=>{setTimeout(resolve,1000);}).then(()=>{console.log('Yay!');})；

块作用域构造let

在ES6里,let并不是一个“花哨”的特性,是更复杂的。let是一种新的变量声明方式,允许我们把变量作用域控制在块级里面,用大括号定义代码块,在ES5中,块级作用域起不了任何作用:

function calculateTotalAmount(vip){var amount=0;if(vip){//在此定义会覆盖var amount=1;}{//在此定义会覆盖var amount=100;{//在此定义会覆盖var amount=1000;}return amount;}//打印输出内容console.log(calculateTotalAmount(true));

以上代码结果将返回1000,这真是一个bug.在ES6中,用let限制块级作用域,而var限制函数作用域。

function calculateTotalAmount(vip){var amount=0;if(vip){//使用let定义的局部变量let amount=1; //第1个1et}{let amount=100; //第2个let{let amount =1000; //第3个let}}return amount;}Console.log(calculateTotalAmount(true));

程序结果将会是0,因为块作用城中有了let,如果(amount=1),那么这个表达式将返回1.

Classes(类)

JavaScript 版本中,对于类的创建和使用是令人非常头疼的一件事,不园直接使用class命名一个类的语言(在JavaScript中class 天键子彼保留,但是没有任甸用),因为没有官方的类功能,加上大量继承模型的出现(pseudo classical，classical，functional等),造成了JavaScript类使用的困难和不规范。

ES6没有用函数,而是使用原型实现类,我们创建一个类baseModel,并且在这个类里定义一个 constructor()和一个getName()方法:

class baseModel {constructor(options,data){// class constructor,Node.js 5.6暂时不支持options={},data=[]这样传参this.name='Base';this.url='http://baidu.com/api';this.data=data;this.options=options;}getName(){ //类的方法console.log(`Class name:${this.name}`);}

这里对options和data使用了默认参数值,方法名也不需要加function 关键子,而且冒号“:”也不需要了;另一个大的区别就是不需要分配属性 this.现在设置一个属性的值,只需简单地在构造函数中分配即可。

Modules(模块)

众所周知,在ES6以前 JavaScript 并不支持本地的模块,于是人们想出了 AMD、RequireJS、CommonJS 及其他解决方法。现在ES6中可以用模块import和export操作了.

在ES5中,可以在