ES6特性

最新推荐文章于 2022-05-26 10:29:18 发布

深海的鱼z

最新推荐文章于 2022-05-26 10:29:18 发布

阅读量207

点赞数

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

1.Default Parameters（默认参数） in ES6

还记得我们以前不得不通过下面方式来定义默认参数：

var link = function (height, color, url) {
 var height = height || 50;
 var color = color || 'red';
 var url = url || 'http://azat.co';
 ...
}

一切工作都是正常的，直到参数值是0后，就有问题了，因为在JavaScript中，0表示fasly，它是默认被hard-coded的值，而不能变成参数本身的值。当然，如果你非要用0作为值，我们可以忽略这一缺陷并且使用逻辑OR就行了！但在ES6，我们可以直接把默认值放在函数申明里：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

语法类似于Ruby！

2.Template Literals（模板对象） in ES6

在其它语言中，使用模板和插入值是在字符串里面输出变量的一种方式。因此，在ES5，我们可以这样组合一个字符串：

var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

幸运的是，在ES6中，我们可以使用新的语法$ {NAME}，并把它放在反引号里：

var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

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

ES6的多行字符串是一个非常实用的功能。在ES5中，不得不使用以下方法来表示多行字符串：

var roadPoem = 'Then took the other, as just as fair,nt'
    + 'And having perhaps the better claimnt'
    + 'Because it was grassy and wanted wear,nt'
    + 'Though as for that the passing therent'
    + 'Had worn them really about the same,nt';
var fourAgreements = 'You have the right to be you.n
    You can only be you when you do your best.';

在ES6中，用反引号就可以解决了：

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`;

4.Destructuring Assignment （解构赋值）in ES6

解构可能是一个比较难以掌握的概念。先从一个简单的赋值讲起，其中house 和 mouse是key，同时house 和mouse也是一个变量，在ES5中是这样：

var data = $('body').data(), // data has properties house and mouse
 house = data.house,
 mouse = data.mouse;

以及在node.js中用ES5是这样：

var jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body, // body has username and password
   username = body.username,
   password = body.password;

在ES6，我们可以使用这些语句代替上面的ES5代码：

var { house, mouse} = $('body').data(); // we'll get house and mouse variables
var {jsonMiddleware} = require('body-parser');
var {username, password} = req.body;

这个同样也适用于数组

var [col1, col2]  = $('.column'),
   [line1, line2, line3, , line5] = file.split('n');

5.Enhanced Object Literals （增强的对象字面量）in ES6

在ES6中新增了很多功能（方便书写理解和避免代码问题）。这里学习了对象字面量简写，不用再书写两次代码。还有对象方法简写也是同样道理。接着是字符串模板，一种更优雅的字符串拼接方式。还有对象键运算，他使用了 [] 可以为对象键赋值时进行一些运算。最后是ES6的解构语法。利用这些新特性我们的代码将会写的更优雅和易于理解

javascript中的对象使用对象字面量很容易创建，现在来使用ES5来创建一个对象，在music中两个对象属性 type和heat，他们的分别也是来之于type和heat。代码如下：

ES5对象字面量

var type = 'rock';
var heat = '50%';
var music = {
  type: type,
  heat: heat
};
console.log(music);  // Object {type: "rock", heat: "50%"}

ES6对象字面量

然而我们现在可以使用ES6的对象重新写这个例子。在ES6中如何你的对象属性名和当然作用域中的变量名相同，那么现在必须要在把这个type或heat书写两次。ES6的对象会自动的帮你完成键到值的赋值。这样看起来代码更优雅也能节省一半的字符输入量。代码如下：

var type = 'rock';
var heat = '50%';
var music = {
  type,
  heat
};
console.log(music);  // Object {type: "rock", heat: "50%"}

返回一个对象

function getMusic() {
  var type = 'rock';
  var heat = '50%';
  return { type, heat };
}
console.log(getMusic().type); // rock
console.log(getMusic().heat); // 50%

计算对象键

在这次的music对象中，我们要使用一个变量field作为我们对象的键，heat作为这个键的值。代码如下：

var heat = '50%';
var field = 'rock';
var music = {
  [field]: heat
}
console.log(music); // Object {rock: "50%"}

ES6对象键计算表达式

可以在对象键的变量上调用方法

var heat = '50%';
var field = 'Rock and Roll';
var music = {
  [field.toLowerCase()]: heat
}
console.log(music); // Object {rock and roll: "50%"}

6.Arrow Functions in（箭头函数）（）=>

CoffeeScript 就是因为它丰富的箭头函数让很多开发者喜爱。在ES6中，也有了丰富的箭头函数，
箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。
有了箭头函数在ES6中，我们就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如，下面的代码用ES5就不是很优雅：

var f = v => v;
//上面的箭头函数等同于：
var f = function (v) {
    return  v;
};

//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。  
var f = () => 5;  
//  等同于  
var f = function () { return 5 };  
var sum = (num1, num2) => num1 + num2;  
//  等同于  
var sum = function(num1, num2) {  
return num1 + num2;  
};  


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: 'ES6 rocks' })();

而在ES6，我们并不需要用_this浪费时间：

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

箭头函数有几个使用注意点。
（ 1 ）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

箭头函数里面根本没有自己的this，而是引用外层的this。

（ 2 ）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（ 3 ）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替。
（ 4 ）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

7. Promises in ES6

Promises 是一个有争议的话题。因此有许多略微不同的promise 实现语法。Q，bluebird，deferred.js，vow, avow, jquery 一些可以列出名字的。也有人说我们不需要promises，仅仅使用异步，生成器，回调等就够了。但令人高兴的是，在ES6中有标准的Promise实现。
下面是一个简单的用setTimeout()实现的异步延迟加载函数:

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

在ES6中，我们可以用promise重写:

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

或者用ES6的箭头函数：

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

到目前为止，代码的行数从三行增加到五行，并没有任何明显的好处。确实，如果我们有更多的嵌套逻辑在setTimeout()回调函数中，我们将发现更多好处：

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

在ES6中我们可以用promises重写：

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

8.Block-Scoped Constructs Let and Const（块作用域和构造let和const）**

在ES6代码中，你可能已经看到那熟悉的身影let。在ES6里let并不是一个花俏的特性，它是更复杂的。Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。我们用大括号定义代码块，在ES5中，块级作用域起不了任何作用：

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    var amount = 1;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));

结果将返回1000，这真是一个bug。在ES6中，我们用let限制块级作用域。而var是限制函数作用域。

function calculateTotalAmount (vip) {
  var amount = 0; // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1; // first amount is still 0
  }
  { // more crazy blocks!
    let amount = 100; // first amount is still 0
    {
      let amount = 1000; // first amount is still 0
    }
  }
  return amount;
}
 
console.log(calculateTotalAmount(true));

这个结果将会是0，因为块作用域中有了let。如果（amount=1）.那么这个表达式将返回1。谈到const，就更加容易了；它就是一个不变量，也是块级作用域就像let一样。下面是一个演示，这里有一堆常量，它们互不影响，因为它们属于不同的块级作用域:

function calculateTotalAmount (vip) {
  const amount = 0;
  if (vip) {
    const amount = 1;
  }
  { // more crazy blocks!
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }
  return amount;
}
console.log(calculateTotalAmount(true));

9. Classes （类）in ES6

如果你喜欢面向对象编程（OOP），那么你将喜爱这个特性。以后写一个类和继承将变得跟在facebook上写一个评论那么容易。
类的创建和使用真是一件令人头疼的事情在过去的ES5中，因为没有一个关键字class （它被保留，但是什么也不能做）。在此之上，大量的继承模型像pseudo classical, classical, functional 更加增加了混乱，JavaScript 之间的宗教战争只会更加火上浇油。
用ES5写一个类，有很多种方法，这里就先不说了。现在就来看看如何用ES6写一个类吧。ES6没有用函数, 而是使用原型实现类。我们创建一个类baseModel ，并且在这个类里定义了一个constructor 和一个 getName()方法：

class baseModel {
  constructor(options, data) { // class constructor，node.js 5.6暂时不支持options = {}, data = []这样传参
    this.name = 'Base';
    this.url = 'http://azat.co/api';
    this.data = data;
    this.options = options;
   }
 
    getName() { // class method
        console.log(`Class name: ${this.name}`);
    }
}

注意我们对options 和data使用了默认参数值。此外方法名也不需要加function关键字，而且冒号(：)也不需要了。另外一个大的区别就是你不需要分配属性this。现在设置一个属性的值，只需简单的在构造函数中分配。
AccountModel 从类baseModel 中继承而来:

class AccountModel extends baseModel {
    constructor(options, data) {

为了调用父级构造函数，可以毫不费力的唤起super()用参数传递：

super({private: true}, ['32113123123', '524214691']); //call the parent method with super
       this.name = 'Account Model';
       this.url +='/accounts/';
}

如果你想做些更好玩的，你可以把 accountData 设置成一个属性：

get accountsData() { //calculated attribute getter
    // ... make XHR
        return this.data;
    }
}

那么，你如何调用他们呢？它是非常容易的：

let accounts = new AccountModel(5);
accounts.getName();
console.log('Data is %s', accounts.accountsData);
//Class name: Account ModelData is  32113123123,524214691

10. Modules （模块）in ES6

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

Module 是 ES6 的新特性，是语言层面对模块化的支持。

与之前模块加载机制不同，Module 是动态的加载，导入的是变量的只读引用，而不是拷贝

// 1. export default 可以做默认导出

// a.js
export default 5;      // 默认导出

// b.js
import b, {a} from './a.js';    // 默认导入，不需要加花括号

// 2. 动态的加载机制

// a.js
export let a = 10;
export let b = 10;
export function add() {
  a = 15;
  b = 20;
  return a+b;
};

// b.js
import {a, b, add} from './a.js';
a+b;    // 20
add();  // 35
a+b;    // 35

export default 和 export 区别

export 和 module.export 的区别

深海的鱼z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6特性

Default Parameters（默认参数） Template Literals （模板文本）Multi-line Strings （多行字符串）Destructuring Assignment （解构赋值）Enhanced Object Literals （增强的对象文本）Arrow Functions （箭头函数）Promises (异步)Block-Scoped Constructs L...
复制链接

扫一扫