template模板字符串

var html = "<div><p></p><span></span></div>";
console.log(html);

以上代碼;書寫很麻煩,也沒有換行什么的,因?yàn)閾Q行會很麻煩,(要使用拼接)打印出來的也是沒有換行的文本
以下這種稍微簡單一點(diǎn)

var str = `
<div>
    <p>${name="zjar"}</p>
    <span></span>
    我是content
</div>
`
console.log(str);

結(jié)構(gòu)稍微清晰一點(diǎn),打印出來也是換過行的文本 用的是兩個(gè)撇號,把要寫的內(nèi)容放在兩個(gè)撇號里面.可以隨意換行.
在模板里面還能使用變量,以上代碼的 name 就是一個(gè)變量,方便維護(hù).書寫語法是:${age=30};

解構(gòu)

. 對象定義可以直接使用已有的變量。如果使用了沒有定義的變量，則會拋出異常。這就是ES6的解構(gòu)，可以直接使用已有變量。

var  name = "zhar";
var obj = {
    name : name,
}
console.log(obj);
//解構(gòu)
let age = 30;
let obj2 = {name,age};
console.log(obj2);//輸出兩個(gè)鍵值對 {name:"zhar',age:30} 使用了已有的變量
// let n = "nnnnnn"
let obj3 = {n,age,name};
console.log(obj3);//這個(gè)就會報(bào)錯,n is not defined 
//如果在 let 之前聲明一下 n ,就會直接輸出了; 三個(gè)鍵值對形式的

變量與対象定義可以混用 以下

let obj4 = {nn:"2n",n,age};
console.log(obj4);

可以直接聲明變量 以下

let obj5 = {name:"zhar",age:30,address:"北京"};
let {adress} = obj5; //等同于let address = obj5.address
console.log(address);//北京
//在這塊,我的理解是 let 后面跟的變量的形式是一樣的,
//如果是對象,等號那邊也是對象,如果是字符串,等號那邊也是字符串,
//比如let address = obj5.address

可以作為參數(shù)來使用 以下

let obj5 = {name:"zhar",age:30,address:"北京"};
function fun({name,age,address}){
    console.log(22,name,age,address)
}
fun(obj5);//  22   "zhar"  30  "北京"

以下代碼是之前學(xué)ES5的方法,

let obj5 = {name:"zhar",age:30,address:"北京"};
function fun(o){
    console.log(o.name,o.age,o.address);
}
fun(obj5);//也可以得到"zhar"  30  "北京"

set&map

先看代碼: set 語法

set

構(gòu)建方法:

1. let = new Set([ ]);
2. let s = new set( );

set 與 Array 類似:但也有不同

set 特點(diǎn):

1. 輸出的沒有重復(fù)元素，數(shù)組去重
2. 沒有 length 屬性
3. 沒有下標(biāo)的概念,不要用下標(biāo)去取值;
   注意: s 是new Set 的實(shí)例 set 是個(gè)集合

let s = new Set([1,2,3,3,4,5,6,2,1]);
console.log(s);   //{1,2,3,4,5,6}   特點(diǎn)1
console.log(s.length);  // undefined  特點(diǎn)2

set 的方法和屬性

1. add();向集合添加元素
2. has();是否包含某個(gè)元素
3. delete();刪除指定元素
4. size;得到集合的長度 屬性, 其他四個(gè)是方法
5. clear(); 清空集合;

let s2 = new Set();
    s2.add(1);
    s2.add(2);
    s2.add(1);
    s2.add(2);
console.log(s2,s2.size);//無length屬性,但是有size屬性  得到的結(jié)果是{1,2} 2
console.log(s2.has(1),s2.has(2),s2.has(3)); //結(jié)果是true true false

jquery里面有 lenght 和 size() 方法 容易混淆 都是計(jì)算元素?cái)?shù)量的

s2.delete(1);//刪除
console.log(s2);//結(jié)果是{2}
s2.clear();//清空
console.log(s2);//返回一個(gè){  } 
console.log("==========",s2[0]);//結(jié)果是 undefined 特點(diǎn)3

遍歷屬性

1. keys() 和 values() 的輸出結(jié)果相同
2. entries() 的輸出結(jié)果是 鍵 和 值 的形式

let s = new Set([1,2,3,3,4,5,6,2,1]);
console.log(s.keys());
console.log(s.values());
console.log(s.entries()); 

map

1. map對應(yīng)的是H5里面的Object map是個(gè)集合
2. map可以使用任意類型做鍵,哪怕是函數(shù),兌現(xiàn)

let m = new Map();
m.set("name","zhar");
console.log(m);//{'name'=>'zhar'}
console.log(m.get("name"));//zhar

let a = 10;
m.set(a,"abc");
console.log(m);//結(jié)果是 {"name"=>"zhar",10=>"abc"};

最后總結(jié)一點(diǎn):console.log(Set) 結(jié)果是一個(gè)函數(shù); function Set(){[native code]}

我是分割線

promise 承諾

//ES5的寫法
function fun(){
//用setTimeout 替代一個(gè)異步執(zhí)行的內(nèi)容 ajax
//不可預(yù)估返回結(jié)果時(shí)間,
    setTimeout(function(){
         console.log("異步--執(zhí)行完成");
     },1000)
 }
fun();//過一秒輸出 異步--執(zhí)行完成

//回調(diào)函數(shù)  會層層嵌套,比較繁瑣
 function foo(callback){
    setTimeout(function(){
         callback("callback 給你的結(jié)果")
     },1000)
 }
 foo(function(res){
     console.log(res)
 })

promise特點(diǎn)

1. ES6增加了promise 用來解決異步的層層嵌套的
2. promise有三種狀態(tài),pending 等待 resolved 已解決 rejected 駁回
3. promise實(shí)例創(chuàng)建成功時(shí),就會有一個(gè)異步的請求
4. promise語法

let promise = new Promise(function(resolve,reject){
    if(true){//表示成功
        resolve(); //成功的方法  決定
    }else{
         reject();  // 失敗的方法  拒絕
    }
 });
 promise.then(function(){
     console.log("success");
 },function(){
     console.log("失敗")
 })
//輸出結(jié)果是   success

--------------------------------------以上是promise語法-------------------------------

function sync1(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(true){
                resolve("異步一:大于");
            }else{
                reject("異步一:小于")
            }
        },1000)
    });
};
function sync2(result){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(true){
                resolve("異步二:true");
            }else{
                reject("異步二:false");
            }
        },2000)
    })
};
function sync3(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(true){
                resolve("異步三:true");
            }else{
                reject("異步三:false");
            }
        },4000)
    })
};
sync1().then(function(res){
       con sole.log(abc);
     console.log(res);
     return sync2(res);
 },function(err){
     console.log(err);
 }).then(function(r2){
     console.log(r2);
     return sync3();
 }).then(function(r3){
     console.log(r3);
     return "abc";
 }).then(function(r4){
     console.log(r4);
     return "def";
 }).then(function(r5){
     console.log(r5);
 }).catch(function(){
     console.log("異常");
 });

//try catch finilly

以上 創(chuàng)建了3個(gè)promise實(shí)例,用setTimeout模擬異步觸發(fā),對比ES5可以很好的解決多層回調(diào)函數(shù)嵌套

//全部異步函數(shù)執(zhí)行完成后調(diào)用resolve 以最慢者為準(zhǔn)   
Promise.all([sync1(),sync2(),sync3()])
.then(function(res){
    console.log(res);
});

//race 只返回最快,返回結(jié)果只有一個(gè)
 Promise.race([sync1(),sync2(),sync3()])
 .then(function(res){
     console.log(res);
 });