首选呐,你得了解一下javascript和ECMAScript的关系:

编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化。ECMAScript定义了:

  1. 语言语法——语法解析规则、关键字、语句、声明、运算符等。

  2. 类型——布尔型、数字、字符串、对象等。

  3. 原型和继承

  4. 内建对象和函数的标准库-json、Math、数组方法、对象自省方法等。

ecmascript不定义html和css的相关功能,也不定义类似DOM的api,这些都在独立的标准中定义。ecmascript涵盖了各种环境中js的应用场景,无论是浏览器环境还是类似nodejs的非浏览器环境。

总结而言嘛(个人理解):javascript=ECMAScript+Bom+Dom;

下面给大家介绍一下ECMAScript6新标准里面新增加的几项重要的内容:

  • Default parameters(默认参数) in es6
    还记得我们以前不得不通过下面方式来定义默认参数:

    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') {  ...  }

  

  • 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}`;

  

  • 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.`;

  

  • 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 jsonMiddleware = require('body-parser').jsonMiddleware ;
var body = req.body, // body has username and password
username = body.username,
password = body.password;

这个同样也适用于数组,非常赞的用法:

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

  

  • Enhanced Object Literals (增强的对象字面量)in ES6

  • Arrow Functions in(箭头函数) ES6                                                                                                                                                         以前我们使用闭包,this总是预期之外地产生改变,而箭头函数的迷人之处在于,现在你的this可以按照你的预期使用了,身处箭头函数里面,this还是原来的this。

有了箭头函数在ES6中, 我们就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如,下面的代码用ES5就不是很优雅:

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

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

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

  下面这是一个另外的例子,我们通过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' })();

  请注意,只要你愿意,在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

  这里使用到了我们上文提到过的字符串模板。

在箭头函数中,对于单个参数,括号()是可选的,但当你超过一个参数的时候你就需要他们。

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

var messages = ids.map(function (value, index, list) {
return 'ID of ' + index + ' element is ' + value + ' '; // explicit return
});

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

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

 Promise in ES6 

主要是用来解决异步回调黑洞的问题。

例如在ES5中如果我们有很多的嵌套逻辑在setTimeout()回调函数中,

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!')
});

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));

Classes (类)in ES6

类的创建和使用真是一件令人头疼的事情在过去的ES5中,因为没有一个关键字class (它被保留,但是什么也不能做)。

用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/';
}

Modules (模块)in ES6

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

在ES5中,你可以在<script>中直接写可以运行的代码(简称IIFE),或者一些库像AMD。然而在ES6中,你可以用export导入你的类。下面举个例子,在ES5中,module.js有port变量和getAccounts 方法:

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

  在ES5中,main.js需要依赖require(‘module’) 导入module.js:

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

  但在ES6中,我们将用export and import。例如,这是我们用ES6 写的module.js文件库:

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

  如果用ES6来导入到文件main.js中,我们需用import {name} from ‘my-module’语法,例如:

import {port, getAccounts} from 'module';console.log(port); // 3000

  或者我们可以在main.js中把整个模块导入, 并命名为 service:

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

  

 

ECMAScript6标准新增加的内容的更多相关文章

  1. vue学习之二ECMAScript6标准

    一.ECMAScript6标准简述 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScr ...

  2. h5新增加的存储方法

    h4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制. 大小:最多能存储4k 带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽. 复杂度:操作复杂. h5新增加了 ...

  3. C99标准新特性的说明

    C99标准新特性的说明   一.说明 ====== 这里的讨论的是C语言的国际标准,即国际标准化组织ISO,制定的C语言标准.历史上ISO制定过4个版本的C语言标准,他们分别是:C90(ISO/IEC ...

  4. 新增加的html里的标签元素,该元素作为事件,js获取不到id的问题

    if(flag==0){                var p = document.createElement("p");                  var text ...

  5. [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥)

    [原创] Easy SysLite V1.2 (2016.5.29更新,新增加WIN10支持,一个程序适配所有系统减肥) nohacks 发表于 2016-5-29 17:12:51 https:// ...

  6. 在Android4.4上新增加keycode

    keycode是android定义好的,但是有时候无法满足需要,进行定制化难免会涉及到新增加keycode.分成两部分,驱动和framework,这里主要讲解framework部分: 一.驱动部分: ...

  7. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  8. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  9. SQL某个字段在原内容上增加固定内容或replace查找替换内容

    今天正好遇到一个SQL小问题,特做备注 在原有的表中数据如pic 在不动原内容的基础上增加../路径,但不能修改原数据值 原数据 SQL: pic字段 需要增加'../'的内容 update Bmps ...

随机推荐

  1. PHP常用之封装分页工具类

    分页基本上是每个项目都会使用到的,所以呢,把它封装成一个工具类,以后直接调用就可以了(虽然TP框架的灰常强大,但是自己封一个也未尝不可.),这样既省时又省力还赚'工分'. 我封的这个分页工具类还比较完 ...

  2. [转]HTTP请求模型和头信息参考

    [转]HTTP请求模型和头信息参考 参考: http://blog.csdn.net/baggio785/archive/2006/04/13/661410.aspx模型: http://blog.c ...

  3. Perception(0-1.1)

    The perception modules run in the context of the process Cognition. They detect features in the imag ...

  4. BZOJ1013 [JSOI2008]球形空间产生器sphere(高斯消元)

    1013: [JSOI2008]球形空间产生器sphere Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 4846  Solved: 2525[Subm ...

  5. Codevs 4189 字典

    4189 字典 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 最经,skyzhong得到了一本好厉害的字典,这个字典里整整有n ...

  6. SQLite 约束

    约束是在表的数据列上强制执行的规则.这些是用来限制可以插入到表中的数据类型.这确保了数据库中数据的准确性和可靠性. 约束可以是列级或表级.列级约束仅适用于列,表级约束被应用到整个表. 以下是在 SQL ...

  7. 使用spring-data-mongodb操作mongodb

    mongodb.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  8. Singleton Pattern(单例模式)

    1.简介 单例模式,顾名思义,即在整个系统中,类的实例对象只有一个. 单例模式具有以下特点: 单例类只能有一个实例 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象提供这一实例 2.实现 其 ...

  9. GridView”的控件 必须放在具有 runat=server 的窗体标记内 “错误提示”

    在做导出数据到EXCEL程序中,出现了错误提示:类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记 解决办法  重写 VerifyRendering ...

  10. iOS NSNotificationCenter 移除通知带来的crash

    Where to remove observer for NSNotification? 在dealloc方法中移除通知观察者带来crash NSNotificationCenter中的通知消息已经发 ...