es6相关知识汇总

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

　　ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的

　　地方，一般是　指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

ECMAScript 和 JavaScript 到底是什么关系？

　　ECMAscript是javascript的标准，javascript是ECMAscript的实现。

　　1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为

　　ECMAScript，这个版本就是 1.0 版。该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且

　　JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

环境支持：

　　目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

ES6常用特性：

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

声明命令：

　　1. let命令

　　　　ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
　　　　

{
  let a = 10;
  var b = 1;
}
console.log(b); // 1
console.log(a); // 报错a没有定义

　　2.const命令

　　　　

const PI = 3.1415;
PI = 3; //报错，赋值给常量
const a; //报错，缺少初始化

　　　　const声明一个只读的常量。一旦声明，常量的值就不能改变，且声明时必须立即初始化，不能留到以后赋值。const的作用域与let命令相同：只在声明所在的块级作用域内有效。

　　3.Class命令

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
 
// 上面为原先写法，下面为ES6的Class写法
 
class Point {
  constructor(x, y) {  // 构造方法，this关键字代表实例对象
    this.x = x;
    this.y = y;
  }
  toString() { // 自定义方法，方法之间不需要逗号分隔，加了会报错
    return '(' + this.x + ', ' + this.y + ')';
  }
}

　　　　ES6 提供了更接近传统语言的写法，引入了Class（类）这个概念（类的数据类型就是函数，类本身就指向构造函数），作为对象的模板。通过class关键字，可以定义类。class可以看作只是一个语法糖，它的绝大部分功能，

　　　　ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

　　4.import命令

　　　　import虽然属于声明命令，但它是和export命令配合使用的。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

　　　　一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果外部能够读取模块内部的某个变量、函数或类，就必须使用export关键字输出。

解构赋值

　　ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let a = 1;
let b = 2;
let c = 3;
// 等价于
let [a, b, c] = [1, 2, 3];
 
let [ , third] = ["foo", "bar", "baz"];
third // "bar"
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // 变量解构不成功，赋值为undefined
z // 数组解构不成功，赋值为[]


let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
 
let { abc } = { foo: "aaa", bar: "bbb" };
abc // undefined
 
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

 超引用

// ...   超引用
        function fun(...args){
            // console.log(arguments);     //obj
            console.log(args);     //arr  --1,2,3,4,5,6
            args.push(7);
            console.log(args);  //arr  --1,2,3,4,5,6,7
        }
        fun(1,2,3,4,5,6)


　　　　// ES5的写法
 　　　　　　Math.max.apply(null, [14, 3, 77]) 
　　　　// ES6的写法 
　　　　　　Math.max(...[14, 3, 77]) 
　　　　// 等同于 
　　　　　　Math.max(14, 3, 77);

模板字符串

　　模板字符串是为了解决使用+号拼接字符串的不便利而出现的。它的功能非常强大，但是我们大多数时候使用它则非常简单。

　　模板字符串用反引号(`)，英文输入法下跟波浪线~键同一个按键)表示，它可以表示普通的字符串，也可以表示多行字符串，同时还可以插入变量。

　　使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。

// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;

// es5var string = a + "+" + b + "=" + (a + b);

箭头函数

　　箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体

　　箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

//一个参数
        var fun = a => a + b;
        //等价
        function fun(a){
            return a + b
        }
        //没有参数或多个函数时要用()括起来
        //无参,一条语句可以省略{}
        var fun1 = () => a + b;
        //多参,执行多条语句要用{}括起来
        var fun2 = (a,b,c) =>{
             let sum = a + b + c;
             return sum;
        }

        //当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
        // 报错
        var f = (id,name) => {id: id, name: name};
        f(6,2);  // SyntaxError: Unexpected token :
         
        // 不报错
        var f = (id,name) => ({id: id, name: name});
        f(6,2);  // {id: 6, name: 2}

异步处理 Promise()

　　主要用于获取异步数据

　　语法 new Promise((resolve, reject) => { })
　　resolve 异步成功后的回调函数
　　reject 异步失败后的回调函数
　　Promise.prototype.then() 方法
　　Promise实例状态（fullfiled、rejected）改变时的执行回调
　　Promise.prototype.catch() 方法
　　是.then(null,rejeaction)的别名，用于指定发生错误时的回调函数。

//eg1:
var pro = new Promise(function(resolve,reject){
            // resolve(data)
            resolve(123);     //这个是成功的，我要把成功后的数据123传递出去
            // reject(456)   //失败时传出去
        })


        pro.then(function(val){      //then方法执行完成以后又返回了一个promise对象
            //这个是成功的回调
            console.log("成功了,接收到的数据为：" + val);
            return val + 1;
        },function(err){
            //这个是失败的回调
            console.log(err);
        }).then(function(val){
            console.log(val)
        },function(err){})

//eg2:ajax与promise
<div id="box"></div>
    <button id="btn">展示</button>
    <script>
        var box = document.getElementById("box");
        var btn = document.getElementById("btn");
        function ajax(url,succ,erro){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            xhr.onload = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    succ(xhr.responseText);
                }else{
                    erro(xhr.status);
                }
            }
        }

        btn.onclick = function(){
            var p = new Promise(function(resolve,reject){
                ajax('04.txt',function(data){
                    resolve(data);
                },function(status){
                    reject(status);
                })
            });
            p.then(function(data){
                box.innerHTML = data;
            },function(err){
                box.innerHTML = err;
            })
        }
</script>

Generator

生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议。普通函数是一路执行到底，Generator可以中间暂停。

function show(){
    alert("a")
    alert("b")
}
show(); //一次性执行完整个函数

function *show2(){
    yield "a"
    yield "b"
}
let fun = show2();
for(var i of fun){
     console.log(i)        
}
//a
//b