ECMAScript 学习小结

ECMAScript和JavaScript的关系是什么？

　　前者是后者的规格，后者是前者的一种实现。日常场合，两者是可以互换不做分别的。

　　　　ECMAScript 6 即是ECMAScript的第 6 个版本。

 

let和const命令

　　let和const命令：

　　　　let用来声明变量，用法类似于var，但是也有很大的差别。

　　　　　　const用来声明常量，常量是必须声明后立即赋值的，不可以后续赋值也不可以后续更改值，

　　　　　　　　否则会报错。const的其他特点和let基本一致。

　　　　　　　　　　let的变量声明和赋值是同步进行，是不会提前声明的，不挂载到window上的，

　　　　　　　　　　　　在let声明执行之前也是不可以对let声明的变量进行任何操作的。

 

console.log(b);     //2    
console.log(a);     //报错，提示a不存在

let a = 1;
var b = 2;

 

　　　　let、const声明的变量名不可以重复声明。

let a = 1;
var a = 2;
//直接报错

let a = 1;
function a(){
    var a = 2;
}
//直接报错

　　　　let、const声明只在let命令所在的代码块内有效。

{
    let a = 10;
    var b = 1;
}

console.log(b);      //1
console.log(a);      //报错

　　　　for循环中循环表达式很适合用let命令。也进一步证明let命令只在代码块中有效。

for(var i=0;i<10;i++){}
console.log(i)      //10

for(let j=0;j<10;j++){}
console.log(j)      //报错

　　　　

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]();       //10     

　　　　以上代码因为var为全局变量赋值，在全局范围内有效且只有一个i，每一次循环i的值都会发生改变，最终累加到10停止循环。

　　　　　　而for循环内部的console.log( i )，这里的i值在函数内找不到就只能去父级寻找，最终找到已经累加到10的i，进行输出，所以输出为10。

　　　　　　　　那么怎样才能使其输出对应下标里的i值呢？

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]();　　//6

　　　　以上代码使用了let来声明变量i，所以i只在块级作用域内有效，而且是本轮循环内有效，所以每次循环的i值都为在一个块级作用域内一个独立的变量。

　　　　　　而每次循环i能记住上一个i的值，是因为JavaScript内部进行的操作，引擎内部会记住上一轮循环的值，在上一轮循环的基础上进行计算。

　　　　　　　　除了上一种方法，还有一种采用闭包的方法。

var arr = [];
for (var i = 0; i < 10; i++) {
    (function(i){
        arr[i] = function(){
        console.log(i)
        }
    }(i))
}
arr[8]();      //8

　　　　let和const的临时死区

　　　　　　只要块级作用域内存在let和const命令，它所声明的变量就绑定这个区域，不再受外部的影响。

 

ES7中的...运算符

　　多用于调用函数和对象：

function abc(a,b,c){
　　console.log(a+b+c);
}
var arr = [3,4,5];
abc(...arr)

　　该运算符将一个数组变为参数序列。运算符也可以和正常的函数参数结合使用。

function abc(a,b,c,d){
    console.log(a+b+c+d);
}
var arr = [3,4,5];
abc(2,...arr);

 　　可以通过该运算符来达到克隆的效果。

　　　　浅克隆：

let a = {
    num : 1 
}
let b = {
    num : 2
}
let c = {
    ...a,
    ...b        
}    

　　　　深克隆

let a = {
    num : 1 
}
let b = {
    num : 2
}
let c = {
    num : {
        ...a,
        ...b
    }     
}  

 

解构赋值

　　解构一个数组

let arr = [1,2,3];
let x,y,z;
[x,y,z] = arr;
//x = 1;y = 2;z = 3;

 

　　解构一个对象

let obj = {
    name : "Tom",
    age : 18,
    sex : "0"
}
let name,age,sex;
({name,age,sex} = obj )
//name = "Tom";age = 18;sex = "0";

箭头函数

　　ES6 允许使用“箭头”（`=>`）定义函数。可以非常简洁的写函数。

var sum  = function(a,b){
    return a+b;  
}
//等同于
let sum  = (a,b) =>{
    return a+b;  
}

var fun = function(a,b){
    return {
        a:a,b:b
    }
}
//等同于
let fun = (a,b) => {
    return {
        a : a,
        b : b 
    }
}        

function fun(x){
    return function(y){
        return function(z){
            return x+y+z;
        }
    }
}        
//等同于
let fun = x => y => z => x+y+z;

 

Map 结构

　　Map数据结构类似于对象，就是用来存储内容的。

　　　　首先来用Map方法来创建一个集合。

var map = new Map();
map.a = 1;
map.b = 2;
map.c = 3;
map.set("0","html");
map.set("1","css");
map.set("2","JavaScript");

map.get("0");//"html"
map.get("0");//true

 

 　　　　这个map数据集合可以使用set方法为其中添加一个键值，也可以用get方法获取到这个值。也可以使用delete方法来删除选择的键值。

 

　　作为构造函数，Map也可以接受一个数组作为参数。

var map = new Map([['name','张三'],['age','20']]);
//等同于set('name','张三');

 实例的属性和操作方法

　　size属性

　　　　size属性返回Map结构的成员总数

let map = new Map();
map.set("name","Tom");
map.set("age","20");

map.size    //2

　　Map.set(key,value)

　　　　set方法设置属性名key对应的属性值为value，然后返回整个Map结构。如果key已经有值，则属性值会被更新，否则就新生成该属性。

let map = new Map();

map.set("key",10);    //属性名是字符串，值为数字
map.set(110,"120");    //属性名是数字，值为字符串
map.set(undefined,"haha")    //属性名为undefined，值为字符串

//可以使用链式写法
map.set(1,"a")
　　.set(2,"b")
　　.set(3,"c");

　　Map.get(key)

　　　　get方法读取key对应的属性值，如果找不到key，则返回undefined

function fun(){console.log("Hello world!!!");}
let map = new Map()
    .set(fun,"Hello");

map.get(fun);    //会调用到该函数，输出"Hello world !!!"
map.get(haha);　　//undefined

　　Map.delete(key)

　　　　delete方法删除某个属性，返回true。如果删除失败，则返回false

function fun(){console.log("Hello world !!!");}
let map = new Map().set(fun,"Hello world")

map.delete(fun);    //true
map.delete(fun);    //false

　　Map.clear()

　　　　clear方法清除所有成员，没有返回值。

let map = new Map();
map.set(1,1);
map.set(2,2);

map.clear();

Map的循环遍历

　　for of

var map = new Map([['name','张三'],['age','20']]);
//等同于set('name','张三');
for(var i in map){
    console.log(i)
}
//输出map对象下标名
for(var index of map){
    console.log(index);
}
//输出添加进去的键值对的数组
for(var name of map.entries()){
    console.log(name)
}
//输出对应的键值对
for (var [key,value] of map.entries()){
    console.log(key,value)
}
//输出对应键值对
for (var val of map.values()){
    console.log(val)
}
//输出键值对的值

 

class

　　ES 6 的类完全可以看做构造函数的另一种写法。其数据类型就是函数。

class Hyh{}
typeof Hyh; //"function"

　　使用的时候也是直接对lei使用new命令，和构造函数的用法完全一致。

class ID{
    constructor(name,age){
        this.name = name;
        this.age = age;  
    }
    logFun(){
        console.log("name:"+this.name+"\n"+"age:"+this.age);
    }
}

var Tom = new ID("Tom",21);
Tom.name    //"Tom"
Tom.age    //21

Tom.logFun();     
//name:Tom
//age:21

　　Tom是ID的实例，Tom的constructor方法就是ID类原型的constructor方法，可以在类的prototype上添加类的新方法。可以通过Object.assign方法一次向类添加多个方法。

Object.assign(ID.prototype,{
    toName(){},
    toAge(){} 
})

class的继承

　　class可以通过extends关键字实现继承

class Code extends ID{}

　　继承后可以调用继承来的方法和属性

var Jack = new Code("Jack","20");
Jack.name;    //"Jack"
Jack.logFun();
//name:Jack
//age:20

　　也可以继承父类函数后再在自身添加新的属性和参数，通过super方法接收父类构造的参数信息

class ID{
    constructor(name,age){
        this.name = name;
        this.age = age;  
    }
    logFun(){
        console.log("name:"+this.name+"\n"+"age:"+this.age);
    }
}

class Code extends ID{
    constructor(name,age,color){
        super(name,age);    //用来继承父类参数接收
        this.color=color
    }
}

var color = new Code("Jack","20","black")

Promise对象　　承诺

　　它是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。主要用来做异步的消息处理的。

　　它就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise对象的两个特点：

　　1、对象的状态不受外界的影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、funlfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

　　2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为funlfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就成为resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果，这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

基本用法

　　Promise对象是一个构造函数，用来生成Promise实例。

let promise = new Promise(function(resolve,reiect){
    if("如果异步操作成功"){
        resolve(value);    //执行resolve成功函数
    }else{
        reject(error);    //执行reject失败函数
    }
})

　　Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve失败函数和reject成功函数。它们是两个函数，由JavaScript引擎提供，不用自己部署。

　　resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从pending变为resolved），再异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

then()方法

　　Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的毁掉函数。

promise.then(function(value){
    console.log("成功了！"+value);
},function(error){
    console.log("失败了！"+error);
})

　　then调用以后又返回一个Promise对象。这时可以链式写法在新的Promise上写then方法，这个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。

promise.then(function(data){
    return data + 10;
},function(){
}).then(function(data){
    console.log(data);
},function(err){
    console.log(err); 
})

　　利用Promise写一个ajax

var btn = document.getElementById("btn");
var box = document.getElementById("box");

btn.onclick = function(){
    var promise = new Promise(function(resolve,reject){
        ajax('./16.txt',function(data){
            resolve(data)
        },function(err){
        reject(err)
        })
    })
    promise.then(function(data){
        box.innerHTML = data;
    },function(err){
        box.innerHTML = err;
    })
}

function ajax(url,fnSucc,fnErr){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.send();
    xhr.onload = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
        fnSucc(xhr.responseText);
        }else{
        fnErr(xhr.status);
        }
    }
}