ES6常用特性

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

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

【备注 】这里只列出了10条比较常用的特性。并不是所有的浏览器都支持ES6模块，所以你需要使用一些像jspm去支持ES6模块。

1.Default Parameters（默认参数）

ES5：

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

ES6：直接写在参数里

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

好处 节省了代码量。

2.Template Literals（模板对象）

在字符串里面输出变量

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://loalhost:3000/api/messages/${id}‘;

好处： 这里的$ {NAME}直接当做字符串用，无需写加号

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

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 theren
    Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.n
    You can only be you when you do your best.`;

好处：直接一个反引号，将所有的字符串放进去即可，中介随意换行，好清爽！

4.Destructuring Assignment （解构赋值）

下边例子中，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：

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 （增强的对象字面量）

使用对象文本可以做许多让人意想不到的事情！通过ES6，我们可以把ES5中的JSON变得更加接近于一个类。

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

var serviceBase = {port: 3000, url: ‘azat.co‘},
    getAccounts = function(){return [1,2,3]};
var accountServiceES5 = {
  port: serviceBase.port,
  url: serviceBase.url,
  getAccounts: getAccounts,
  toString: function() {
      return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ‘:‘ + this.port},
  valueOf_1_2_3: getAccounts()
}  
如果我们想让它更有意思，我们可以用Object.create从serviceBase继承原型的方法：

var accountServiceES5ObjectCreate = Object.create(serviceBase)
// Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
var accountServiceES5ObjectCreate = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify(this.valueOf());
  },
  getUrl: function() {return "http://" + this.url + ‘:‘ + this.port},
  valueOf_1_2_3: getAccounts()
}

ES6的对象文本中：既可以直接分配getAccounts: getAccounts,也可以只需用一个getAccounts

var serviceBase = {port: 3000, url: ‘azat.co‘},
getAccount = function(){return [1,2,3]};
var accountService = {
    __proto__: serviceBase, //通过proto设置属性
    getAccount, // 既可以直接分配getAccounts: getAccounts,也可以只需用一个getAccounts
    toString() { //这里将json形式改为函数形式
        return JSON.stringify(super.valueOf());
        //调用super防范
    },
    getUrl() {return "http://" + this.url + ‘:‘ + this.port},
    [ ‘valueOf_‘ + getAccounts().join(‘_‘) ]: getAccounts()  //使用动态key值(valueOf_1_2_3)此处将getAccounts()方法得到的数组[1,2,3]转化为字符串1_2_3
};
console.log(accountService);

好处：相当于直接将结果写进去，而不再必须 key：value

  • 将toString: function(){}这种json形式转变为 toString() {}这样的函数(类)的形式
  • 既可以直接分配getAccounts: getAccounts这样的json形式，也可以只需用一个getAccounts表达相同的意思

　6.Arrow Functions in（箭头函数）

这些丰富的箭头是令人惊讶的因为它们将使许多操作变成现实，比如， 
以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

ES5:

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

ES6: 就不需要用 _this = this：

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

再比如：

ES5:

var logUpperCase = function() {
  var _this = this;   //this = Object {string: "ES6 ROCKS"}
  console.log(‘this指的是‘,this); //Object {string: "ES6 ROCKS"}
  console.log(‘_this指的是‘,_this);//Object {string: "ES6 ROCKS"}
  this.string = this.string.toUpperCase();
  console.log(_this.string); //ES6 ROCKS
  console.log(this.string);  //ES6 ROCKS
  return function () {
    return console.log(_this.string); //ES6 ROCKS
    return console.log(_this.string); //如果return _this.string，将返回 undefined，因为

  }
}
logUpperCase.call({ string: ‘ES6 rocks‘ })();

ES6：我们并不需要用_this浪费时间,现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this
var logUpperCase = function() {
  this.string = this.string.toUpperCase();//this还是原来的this
  return () => console.log(this.string);
}
logUpperCase.call({ string: ‘ES6 rocks‘ })();

注意 只要你愿意，在ES6中=>可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数，它就变成了一个表达式。它将暗地里返回单个语句的结果。如果你超过了一行，将需要明确使用return。

ES5：

var ids = [‘5632953c4e345e145fdf2df8‘,‘563295464e345e145fdf2df9‘];
var messages = ids.map(function (value) {
  return "ID is " + value; // explicit return
});

ES6：

var ids = [‘5632953c4e345e145fdf2df8‘,‘563295464e345e145fdf2df9‘];
var messages = ids.map((value)  => `ID is ${value}`); //implicit return

好处： 
* 并不需要用_this浪费时间，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。 
* => 可以代替function关键字，当在一行用了箭头函数，可以省去{}，还可以省去return，它会暗地里返回的。

7.Promises

ES5：

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

ES6: 我们可以用promise重写

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

如果我们有更多的嵌套逻辑在setTimeout()回调函数中，好处会明显一点： 
ES5：

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

ES6: 我们可以用promise重写

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(块作用域和构造let和const）

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

ES6: 用let限制块级作用域

function calculateTotalAmount(vip){
    var amouont  = 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。

谈到const，就更加容易了；它就是一个不变量，也是块级作用域就像let一样。

好处 ： 我们用let限制块级作用域。而var是限制函数作用域。

9. Classes （类）

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

class baseModel {
    constructor(options, data) {// class constructor， 注意我们对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}`);
    }
    getUrl() { // class method
         console.log(`Url: ${this.url}`);
    }
}

AccountModel 从类baseModel 中继承而来:

class AccountModel extends baseModel {
    constructor(options, data) {
    super({private: true}, [‘32‘, ‘5242‘]);
    this.url +=‘/accounts/‘;
    }
    get accountsData() {
        return this.data;
    }
}
// 调用
let accounts = new AccountModel(5);
accounts.getName();  // Class name:  Base
console.log(‘Data is %s‘, accounts.accountsData);
// Data is 32,5242 

//子类必须在constructor方法中调用super方法，否则新建实例时会报错。
//这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。
//如果不调用super方法，子类就得不到this对象。

【注意】： 
* 此处的继承中，子类必须在constructor方法中调用super方法，否则新建实例时会报错。 
* 此处的super方法继承了父类的所有方法，包括不在父类的constructor中的其他方法，当然可以改写父类方法，比如上述例子，继承了getName(),getUrl()方法，以及constructor（）中的this.name等属性，同时改写了this.url，增加了accountsData，且新增的方法前边要加上get。 
* 子类调用super方法可以传入参数，对应constructor()函数的形参。

10. Modules （模块）

ES5导出：

module.exports = { port: 3000, getAccounts: function() { ... }}

ES6导出：

export var port = 3000;
export function getAccounts(url) { ...}

ES5导入：

var service = require(‘module.js‘);
console.log(service.port); // 3000

ES6导入：

我们需用import {name} from ‘my-module’语法

import {port, getAccounts} from ‘module‘;
console.log(port); // 300

或者ES6整体导入：

import * as service from ‘module‘;
console.log(service.port); // 3000

这里还有许多ES6的其它特性你可能会使用到，排名不分先后：

  • 全新的Math, Number, String, Array 和 Object 方法
  • 二进制和八进制数据类型
  • 默认参数不定参数扩展运算符
  • Symbols符号
  • tail调用
  • Generators (生成器)
  • New data structures like Map and Set(新的数据构造对像MAP和set)

原文地址：https://www.cnblogs.com/liuxu-xrl/p/8657566.html

时间： 2024-10-04 18:06:18

ES6常用特性的相关文章

ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

ES6常用必备知识

ES6必备知识 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: function aa() { if(bool) { var test = 'hello man' } else { console.log(test) } } 以上的代码实际上是: function aa() { var test // 变量提升 if(bool) { test = 'hello

ES6常用知识点

ES6常用知识,职场足用! 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } } 以上的代码实际上是: function aa() { var test // 变量提升,函数最顶部 if(flag) { t

ES6核心特性

摘要:聊JS离不开ES6啊! 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专研这百分之二十核心特性,将会收到事半功倍的奇效!写文章不容易,请大家多多支持与关注!本文首发地址GitHub博客. 一.开发环境配置 这部分着重介绍:babel 编译ES6语法,如何用webpack实现模块化. 1. babel 为啥需要babel? ES6 提供了许多新特性,但并不是所有的浏览器都

ES6常用语法总结

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.今天就来总结一下在工作中es6常用的属性方法 1.let ES6新增了let命令,用来生命变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 1 2 3 4 for (l

C#网络程序设计(1)网络编程常识与C#常用特性

    网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网络编程. 2)网络编程的层次 现实中的互联网是按照"TCP/IP分层协议栈"的体系结构构建的,因此程序员必须搞清楚自己要做的是哪个层次上的编程工作. TCP/IP协议体系的实现情况: 其中,网络接口层已经被大多数计算机生产厂家集成在了主板上,也就是经常所说的网卡(NIC).windows操

ES6新特性

ES6新特性概览 箭头操作符 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs. 我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐.当引入箭头操作符后可以方便地写回调了.请看下面的例子. var array = [1, 2, 3]; //传统写法 array.forEach(f

ES6新特性（函数默认参数，箭头函数）

ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:   这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 =>

MVC常用特性

MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将继续介绍一些在开发中非常有用的MVC特性,如下: BindAttribute Remote HandleError HiddenInput BindAttribute 使用BindAttribute的目的是限制用户在提交form表单时使用合适且正确的值.当我们提交一个表单时,就会检查每一个实体上绑定的特