ES6 规范内容

ECMAScript 6

1.声明了let命令，与var不同的是，let声明的变量只在代码块内有效

eg> var a = [];

for(var i = 0; i < 10; i++){

var c = i;

a[i] = function(){

console.log(c);

}

}

a[6](); // out:9, var声明的c在整个遍历过程中都有效，

 

var b = [];

for(var i = 0; i < 10; i++){

let c = i;

b[i] = function(){

console.log(c);

}

}

b[6](); // out:6, let声明的c只在遍历到i=6的过程中有效

 

2.let不允许在相同的作用域内定义相同的变量

eg> {

let a = 1;

let a = 23; // error

}

 

{

let a = 1;

var b = 23; //error

}

 

3.块级作用域

con>let实际上为JavaScript新增了块级作用域

eg> function(){

let n = 5;

if(true){

let n = 10;

}

console.log(n); // out:5

}

con>上面的函数中声明了两个n变量，但是外层n与内层n不属于同一级作用域，也表明了外层不受内层的影响，在外层进行输出时为5。

同时,块级作用域的出现使得广为使用的立即执行函数(IIFE)不在必要了。

//IIFE写法

(function(){

//do something

})()

 

//块级作用域写法

{

//do something

}

 

4.不存在变量提升

con>用var声明的变量会存在变量提升，用let声明的变量不存在变量提升

eg> console.log(x); // out:undefined

var x = 10;

 

console.log(x); // error

let x = 10;

 

5.const命令

con>const命令用来定义一个常量，const声明的常量重新赋值不会失败,只会默默地失败.

eg> const a = 10;

console.log(a); // out: 10

const a = 23;

console.log(a); // out: 10

 

6.set数据结构

con>ES6提供了新的数据结构Set，它类似于数组，但是它的值都是唯一的，没有重复的值.

Set本身是一个构造函数，用来生成数据结构

eg> var set = new Set();

[1,2,3,4,5,4,2,1].map(x => set.add(x));

for(i of set){

console.log(i); //out:1,2,3,4,5

}

pro>size(); //返回成员总数

add(value);

delete(value);

has(value);

clear();

 

7.Map数据结构

con>ES6还提供了Map数据结构，他提供了一种键值对存储，键不仅可以是字符串，还可以是对象

eg> var map = new Map();

var person = {name:'tiai', age:23};

map.set(person, "student");

map.get(person); //out: "student"

pro>size();

set(key, value);

get(key);

delete(key);

clear();

 

8.rest(...)运算符

con>ES6引入rest运算符，该运算符取代了arguments.length，运算符后面的数组变量将参数放入该数组变量中

eg> function add(...values){

let value = 0;

for(i of values){

value += i;

}

console.log(value);

}

add(1,2,3); //out:6

con>rest还有一个重要的作用就是将数组转为参数序列

eg> function add(s1, s2, s3){

return s1+s2+s3;

}

var a = [2, 3];

add(1, ...a); //out:6

 

//ES5

Math.max.apply(null, [s1,s2,s3]);

//==ES6

Math.max(...[s1,s2, s3]);

//==

Math.max(s1,s2,s3);

 

9.Iterator

con>遍历器是一种协议,任何对象都可以部署遍历器协议，从而可以使用(for ... of)遍历这个对象。遍历器协议规定，任意对象只要部署了next方法，就可以作为遍历器，但是next方法必须返回一个包含value和done两个属性的对象。其中，value属性当前遍历位置的值，done属性是一个布尔值，表示遍历是否结束。

eg>var Iterator = function(arr){

var nextindex = 0;

return {

next: function(){

return nextindex<arr.length?{value:arr[nextindex++], done:false}:{done:true};

}

}

}

 

10.generator

con>上一部分的遍历器，用来依次取出集合中的每一个成员，但是某些情况下，我们需要的是一个内部状态的遍历器。也就是说，每调用一次遍历器，对象的内部状态发生一次改变（可以理解成发生某些事件）。ECMAScript 6 引入了generator函数，作用就是返回一个内部状态的遍历器，主要特征是函数内部使用了yield语句。

当调用generator函数的时候，该函数并不执行，而是返回一个遍历器（可以理解成暂停执行）。以后，每次调用这个遍历器的next方法，就从函数体的头部或者上一次停下来的地方开始执行（可以理解成恢复执行），直到遇到下一个yield语句为止，并返回该yield语句的值。

ECMAScript 6草案定义的generator函数，需要在function关键字后面，加一个星号。然后，函数内部使用yield语句，定义遍历器的每个成员。

 

generator函数的这种暂停执行的效果，意味着可以把异步操作写在yield语句里面，等到调用next方法时再往后执行。这实际上等同于不需要写回调函数了，因为异步操作的后续操作可以放在yield语句下面，反正要等到调用next方法时再执行。所以，generator函数的一个重要实际意义就是用来处理异步操作，改写回调函数。

eg>{

function loadUIWindow(){

console.log("loadUIWindow is loading");

}

 

function loadDataAsync(){

console.log("data load over...");

return true;

}

 

funciton hideUI(){

console.log("Ui is hidded");

}

 

function* UIgenerator(){

loadUIWindow();

yield let ret = loadDataAsync();

if(ret){

hideUI();

}else{

console.log("data load fail");

loadDataAsync();

}

}

 

let UIgen = new UIgenerator();//return a iterator object

UIgen.next();

UIgen.next(false);

}

 

11.增强的对象写法

con>ES6允许直接写入函数和变量，作为写入对象的属性和方法

eg> var person = {

name:'ta',

age,

say(){console.log("my name is ", this.name);}

}

 

12.arrow函数

 

13.con>ES6允许为函数设置默认值

eg> function add(x=0, y=0){

return x + y;

}

 

14.模板字符串

con>模板字符串（template string）是增强版的字符串，即可以当作普通字符串使用，也可以在字符串中嵌入变量。它用反引号（`）标识。

eg>var person = function(name, female){

this.name = name;

this. female = female;

}

 

person.prototype.whois = function(){

console.log(`my name is ${this.name}, my sex is ${this.female}`);

}

var wsc = new person('wsc', 'female');

wsc.whois();

 

15.数组推导

con>允许直接通过现有数组生成新数组，这被称为数组推导（array comprehension）

eg> [for(i of [1,2,3] i * i )]

 

16.多变量赋值

eg>var [x, y] = [1, 2]

var o = {

p1:['hello', {p2:'we'}],

}

 

var {a, [b, {c}]} = o;

 

16.类

eg>//ES5

var person = function(name){

this.name = name;

}

 

person.prototype.init = function(){

console.log(`${this.name} has created`);

}

//ES6

class person{

constructor(name){

this.name = name;

}

 

init(){

console.log(this.name);

}

}

 

//还允许使用extends关键字

class boy extends person{

constructor(name, sex){

super(name);

this.sex = sex;

}

 

init(){

console.log(this.name, this.sex);

}

}

 

17.module

con>ES6允许定义模块。也就是说，允许一个JavaScript脚本文件调用另一个脚本文件。

eg> //circle.js

export function area(len, width){

return len*width;

}

 

//main.js引用这个模块

import {area} from 'circle';

console.log('面积是', area(1,2););

 

//也可以的导入整个包

module circle form 'circle'

console.log('面积是', area(1,2););