template模板字符串

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

以上代码;书写很麻烦,也没有换行什么的,因为换行会很麻烦,(要使用拼接)打印出来的也是没有换行的文本
以下这种稍微简单一点

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

结构稍微清晰一点,打印出来也是换过行的文本 用的是两个撇号,把要写的内容放在两个撇号里面.可以随意换行.
在模板里面还能使用变量,以上代码的 name 就是一个变量,方便维护.书写语法是:${age=30};

解构

. 对象定义可以直接使用已有的变量。如果使用了没有定义的变量，则会抛出异常。这就是ES6的解构，可以直接使用已有变量。

var  name = "zhar";
var obj = {
    name : name,
}
console.log(obj);
//解构
let age = 30;
let obj2 = {name,age};
console.log(obj2);//输出两个键值对 {name:"zhar',age:30} 使用了已有的变量
// let n = "nnnnnn"
let obj3 = {n,age,name};
console.log(obj3);//这个就会报错,n is not defined 
//如果在 let 之前声明一下 n ,就会直接输出了; 三个键值对形式的

变量与対象定义可以混用 以下

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

可以作为参数来使用 以下

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

以下代码是之前学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

构建方法:

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

set 与 Array 类似:但也有不同

set 特点:

1. 输出的没有重复元素，数组去重
2. 没有 length 属性
3. 没有下标的概念,不要用下标去取值;
   注意: s 是new Set 的实例 set 是个集合

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

set 的方法和属性

1. add();向集合添加元素
2. has();是否包含某个元素
3. delete();删除指定元素
4. size;得到集合的长度 属性, 其他四个是方法
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属性  得到的结果是{1,2} 2
console.log(s2.has(1),s2.has(2),s2.has(3)); //结果是true true false

jquery里面有 lenght 和 size() 方法 容易混淆 都是计算元素数量的

s2.delete(1);//删除
console.log(s2);//结果是{2}
s2.clear();//清空
console.log(s2);//返回一个{  } 
console.log("==========",s2[0]);//结果是 undefined 特点3

遍历属性

1. keys() 和 values() 的输出结果相同
2. entries() 的输出结果是 键 和 值 的形式

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对应的是H5里面的Object map是个集合
2. map可以使用任意类型做键,哪怕是函数,兑现

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);//结果是 {"name"=>"zhar",10=>"abc"};

最后总结一点:console.log(Set) 结果是一个函数; function Set(){[native code]}

我是分割线

promise 承诺

//ES5的写法
function fun(){
//用setTimeout 替代一个异步执行的内容 ajax
//不可预估返回结果时间,
    setTimeout(function(){
         console.log("异步--执行完成");
     },1000)
 }
fun();//过一秒输出 异步--执行完成

//回调函数  会层层嵌套,比较繁琐
 function foo(callback){
    setTimeout(function(){
         callback("callback 给你的结果")
     },1000)
 }
 foo(function(res){
     console.log(res)
 })

promise特点

1. ES6增加了promise 用来解决异步的层层嵌套的
2. promise有三种状态,pending 等待 resolved 已解决 rejected 驳回
3. promise实例创建成功时,就会有一个异步的请求
4. promise语法

let promise = new Promise(function(resolve,reject){
    if(true){//表示成功
        resolve(); //成功的方法  决定
    }else{
         reject();  // 失败的方法  拒绝
    }
 });
 promise.then(function(){
     console.log("success");
 },function(){
     console.log("失败")
 })
//输出结果是   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

以上 创建了3个promise实例,用setTimeout模拟异步触发,对比ES5可以很好的解决多层回调函数嵌套

//全部异步函数执行完成后调用resolve 以最慢者为准   
Promise.all([sync1(),sync2(),sync3()])
.then(function(res){
    console.log(res);
});

//race 只返回最快,返回结果只有一个
 Promise.race([sync1(),sync2(),sync3()])
 .then(function(res){
     console.log(res);
 });