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
构建方法:
- let = new Set([ ]);
- let s = new set( );
set 与 Array 类似:但也有不同
set 特点:
- 输出的没有重复元素，数组去重
- 没有 length 属性
- 没有下标的概念,不要用下标去取值;
注意: 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 的方法和属性
- add();向集合添加元素
- has();是否包含某个元素
- delete();删除指定元素
- size;得到集合的长度 属性, 其他四个是方法
- 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
遍历属性
- keys() 和 values() 的输出结果相同
- 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
- map对应的是H5里面的Object map是个集合
- 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特点
- ES6增加了promise 用来解决异步的层层嵌套的
- promise有三种状态,pending 等待 resolved 已解决 rejected 驳回
- promise实例创建成功时,就会有一个异步的请求
- 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);
});
