es6学习（二）
（一）Set和Map数据结构
Set：类似数组，但元素是唯一的。
①初始化，Set的初始化和Array的初始化不同，不会出现相同的元素。代码详情如下：
var set=new Set();//空元素
var set2=new Set([1,2,6,1,4,3,4,5,6,4,5,1,5,1,6])//用数组初始化，会去掉重复的
console.log(set2);//元素是：1 2 6 4 3 5
②添加元素add(任何类型)，返回Set本身，在添加空对象的时候，多次添加空的对象都是会存在。详情代码如下：
set.add({});//1 有1个元素
set.add({});//2 有2个元素 添加的对象都是空对象 但还还是会添加
set.add(null);//3 有3个元素
set.add(null);//3 还是只有3个元素 因为在前面添加了一个null的元素 不会重复
③sizi 长度,而数组中长度的获取市length，Set中是用size。
console.log(set.size);//3
console.log(set2.size);//6
④delete(value)删除某个值，返回一个布尔值，表示删除是否成功。
var set3=new Set(["a","b",1,2,3]);
set3.delete("a");//返回true；
console.log(set3);//Set(4) {"b", 1, 2, 3}
set3.delete("cc");//返回false
console.log(set3);//Set(4) {"b", 1, 2, 3}
⑤has(value)返回一个布尔值，表示该值是否是Set的成员。
var set4=new Set(["a","b",1,2,3]);
set4.has("a")//ture
set4.has("c")//false
⑥clear()清除所有成员，没有返回值。
var set5=new Set(["a","b",1,2,3]);
set5.clear();
console.log(set5);//Set(0) {}
⑦遍历操作：keys():返回键名的遍历器。values():返回键值的遍历器。entries():返回键值对的遍历器。forEach():使用回调函数遍历每一个成员；回调函数的第一个第二个参数是元素，第三个是set本身。
//keys():返回键名的遍历器
var set6=new Set([1,2,3,4,5,6,7,8,9]);
console.log(set6.keys());//SetIterator {1, 2, 3, 4, 5, …}
//values():返回键值的遍历器
set6.values();
//entries():返回键值对的遍历器
set6.entries();
//forEach():使用回调函数遍历每一个成员；回调函数的第一个第二个参数是元素，第三个是set本身
set6.forEach(function(a,b,c){
if (a>4) {
console.log("大于4的是"+a)//5 6 7 8 9
} else{
console.log("小于4的是"+a)//1 2 3 4
}
})
Map：是一种键值结构，和对象不同。
①Map初始化：Map的初始化是通过二维数组的形式来初始化的。
var m=new Map();//空的
var m1=new Map([["name","张三"],["age",20],["clas",10]]);//使用二维数组初始化
console.log(m1);//Map(3) {"name" => "张三", "age" => 20, "clas" => 10}
②size属性 长度，和Set是一样的都是获取它元素的个数。
var m1=new Map([["name","张三"],["age",20],["clas",10]]);//使用二维数组初始化
console.log(m1.size);//3
console.log(m.size);//0 ③set(key,value)设置key所对应的键值，然后返回整个Map结构，key和value可以任何类型
var m2=new Map([["name","张三"],["age",20]])
m2.set("name","小明");
m2.set("cles",20);
console.log(m2);//Map(3) {"name" => "小明", "age" => 20, "cles" => 20}
④get(key)读取对应key对应的键值，如果找不到key，返回undefined。
var m2=new Map([["name","张三"],["age",20]])
console.log(m2.get("name"))//张三
console.log(m2.get("age"));//20
⑤has(key)返回一个布尔值，表示某个键是否在map数据结构中。
var m3=new Map([["name","张三"],["age",20]]);
console.log(m3.has("name"));//true
console.log(m3.has("asd"));//false
⑥delete()删除某一个键，返回true、如果删除失败，返回false。
var m4=new Map([["name","张三"],["age",20],["clas",10]]);
console.log(m4.delete("caaa"));//false
console.log(m4);//Map(3) {"name" => "张三", "age" => 20, "clas" => 10}
console.log(m4.delete("clas"));//ture
console.log(m4);//Map(2) {"name" => "张三", "age" => 20}
⑦/clear()清除所有成员，没有返回值。
var m5=new Map([["name","张三"],["age",20]]);
m5.clear();
console.log(m5);//Map(0) {}
⑧遍历操作：keys():返回键名的遍历器、values():返回键值的遍历器、entries():返回键值对的遍历器、forEach():使用回调函数遍历每一个成员；回调函数的第一个参数是键，第二个参数是值，第三个是map本身。
var m6=new Map([["name","张三"],["age",20],["clas",10]]);
console.log(m6.keys());//MapIterator {"name", "age", "clas"}
//values():返回键值的遍历器
console.log(m6.values());//MapIterator {"张三", 20, 10}
//entries():返回键值对的遍历器
console.log(m6.entries());//MapIterator {"name" => "张三", "age" => 20, "clas" => 10}
//forEach():使用回调函数遍历每一个成员；回调函数的第一个参数是键，第二个参数是值，第三个是map本身
m6.forEach(function(a,b,c){
console.log(a,b,c)
})
//张三 "name" Map(3) {"name" => "张三", "age" => 20, "clas" => 10}
//20 "age" Map(3) {"name" => "张三", "age" => 20, "clas" => 10}
//10 "clas" Map(3) {"name" => "张三", "age" => 20, "clas" => 10}
⑨Map的转换
Map转换为数组：
var m7=new Map([["name","张三"],["age",20],["clas",10]]);
var arr=[...m7];
console.log(arr);//(3) [Array(2), Array(2), Array(2)] 转换成二维数组
Map转换为对象：
var m8=new Map([["name","张三"],["age",20],["clas",10]]);
function strmap(m8){
let obj=Object.create(null);
for (var [k,v] of m8) {
obj[k]=v;
}
return obj;
}
var objs=strmap(m8);
console.log(objs);//{name: "张三", age: 20, clas: 10}
对象转换为Map：
var obj1={"name":"李四","age":20,"ming":10};
function mapstr(obj){
let ma=new Map()
for (var k of Object.keys(obj)) {
ma.set(k,obj[k]);
}
return ma;
}
var m10=mapstr(obj1);
console.log(m10);//Map(3) {"name" => "李四", "age" => 20, "ming" => 10}
（二）Reflect对象反射
作用：对对象进行操作
①Reflect.apply：调用指定对象的this
格式为：Reflect.apply(target, thisArgument, argumentsList)
target 目标函数
thisArgument target函数调用时绑定的this对象
argumentsList target函数调用时传入的实参列表，该参数应该是一个数组的对象
var re=Reflect.apply(Math.floor,undefined,[1.75]);
console.log(re);//1
②Reflect.get：获取对象的属性
格式：Reflect.get(target,propertyKey)
target 需要获取的对象
propertyKey 需要获取的键
var obj={name:"小明",age:20};
var re = Reflect.get(obj,"name");
console.log(re);//小明
var re1=Reflect.get(["a","b","c",1,2,3],2)
console.log(re1);//c
③Reflect.set：设置对象的属性
格式：Reflect.set(target,propertyKey,value);
target 设置属性的目标对象
propertyKey 设置属性的名称
value 设置的值
var obj={name:"小明",age:20};
Reflect.set(obj,"name","张三")//true
console.log(obj.name)//张三
Reflect.set(obj,"class",14);
console.log(obj);//{name: "张三", age: 20, class: 14}
//数组
var arr=["a","b","c",1,2,3];
Reflect.set(arr,1,"new");//ture
console.log(arr);//["a", "new", "c", 1, 2, 3]
console.log(arr[1]);//new
④Reflect.defineProperty:添加或修改对象的属性
格式：Reflect.defineProperty(target, propertyKey, attributes)
target 目标对象
propertyKey 要设定或修改的属性的名称
attributes 要设定或修改的属性的描述
const obj={};
Reflect.defineProperty(obj,"name",{value:"小明"});
console.log(obj);//object name：小明
⑤Reflect.deleteProperty：删除属性
格式：Reflect.deleteProperty(target, propertyKey)
target 删除属性的目标对象
propertyKey 将删除的属性的名称
var obj={name:"小明",age:30}
Reflect.deleteProperty(obj,"name");
console.log(obj);//objcet age:30
//数组
var arr=[1,2,"b",3,4,"a"];
Reflect.deleteProperty(arr,2);
console.log(arr);//[1, 2, , 3, 4, "a"]
⑥Reflect.ownKeys：返回对象的属性的key值
格式：Reflect.ownKeys(target)
target 获取自身属性键的目标对象
var obj={name:"小明",age:20}
var re=Reflect.ownKeys(obj);
console.log(re);//["name", "age"]
⑦Reflect.has：检查对象是否拥有某个属性
格式：Reflect.has(target, propertyKey)
target 目标对象
propertyKey 属性名，需要检查目标对象是否存在此属性
var obj={name:"小明",age:20};
var boo=Reflect.has(obj,"name");
console.log(boo);//ture
（三）Proxy代理对象
作用：用于表示一个异步操作的最终状态（完成或失败），以及返回的值。
<p data-zx="str.name"></p>
<script type="text/javascript">
// var str={name:"小明"};
var str=new Proxy({name:"小明"},{
set(a,b,c){
Reflect.set(a,b,c);
render();
},
get(a,b){
var st=Reflect.get(a,b);
return st
}
})
function render(){
//获取需要绑定数据的元素
var zx=document.querySelectorAll("[data-zx]");
for (var i=0;i<zx.length;i++) {
var zxdata=zx[i];
//获取属性值
var value=eval(zxdata.getAttribute('data-zx'));
//渲染到节点上
zxdata.innerText=value;
}
}
render();
var person = {
firstname: "江",
lastname: "小白"
}
var proxtperson = new Proxy(person, {
get(target, key) {
if(key === "fullname") {
return [target.firstname, target.lastname].join(" ");
}
return target[key];
},
set: function(target, key, value) {
if(key === 'fullName') {
var fullNameInfo = value.split(' ');
target.fisrsName = fullNameInfo[0];
target.lastName = fullNameInfo[1];
} else {
target[key] = value;
}
}
})
var obj=Reflect.get(proxtperson,"fullname")
console.log(obj);
console.log(proxtperson["fullname"]);（四）promise异步
作用：为对象赋能，为能现有的对象增加更多的功能。
一个场景：当对象的属性发生变化时，能够实时渲染到页面上
代码如下：
//定义promise对象
let mypromise = new Promise(function(resolve,reject){
//当异步代码执行成功时，我们才会调用resolve（...），当异步代码失败时就会调用reject（...）
//在本例中，使用setTimeout（...）来模拟异步代码，实际编码市可能是XHR请求或
// HTML5的一些API方法
setTimeout(function(){
resolve("成功");//代码执行正常 返回“成功”
reject("失败");//代码执行不正常 返回“失败”
},0)
})
// 使用promise对象
mypromise.then(function(succ){
//succ的值是上面调用resolve（...)方法传入的值
//succ参数不一定非要是字符串类型，
console.log(succ);
})
mypromise.catch(function(err){
//err的值是上面调用reject（...)方法传入的值
//err参数不一定非要是字符串类型
console.log(err);
})ajax异步代码：
function myasy(url){
return new Promise((resolve,reject)=>{
var xhr=new XMLHttpRequest();
xhr.open(GET,url);
//加载完成时返回的resolve函数
xhr.onload=()=>resolve(xhr.responseText);
//加载出错误时返回的reject函数
xhr.onerror=()=>reject(xhr.statusText);
xhr.send();
})
};
mysym(url).then(res=>{}).catch(err=>{});
（五）for...of
迭代遍历array、map、set、string、typedarra、arguments对象等。
<div>
<p>第1个</p>
<p>第2个</p>
<p>第3个</p>
</div>
<script type="text/javascript">
//迭代遍历array、map、set、string、typedarra、arguments对象等
//迭代数组
var arr=[1,2,3,4,5];
for (var i of arr) {
console.log(i);//1 2 3 4 5
}
//迭代Set
var set=new Set(["a","b","c","d","e"]);
for (var s of set) {
console.log(s);//a b c d e
}
//迭代Map
var ma=new Map([["name","张三"],["age",20]]);
for (var m of ma) {
console.log(m);//["name", "张三"] ["age", 20]
}
for (var [k,v] of ma) {
console.log(k);//name age
console.log(v);//张三 20
}
//迭代DOM
//注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行
var dom=document.querySelectorAll("div>p");
for (var d of dom) {
console.log(d.innerHTML);//第1个 第2个 第3个
}
</script>
（六）class定义类
class 声明创建一个基于型继承的具有给定名称的新类。
//class 声明创建一个基于型继承的具有给定名称的新类。
//语法：
// class name [extends]{
// //class body
// }
class persons{
//构造方法
constructor(name,age){
this.name=name;
this.age=age;
}
toString(){
return `name=${this.name} age=${this.age}`;
}
}
//类的调用
var per=new persons("张三",20);
console.log(per.toString());
//继承
class student extends persons{
constructor(name,age,course){
super(name,age);
this.course=course;
}
toString(){
return `name=${this.name} age=${this.age} course=${this.course} `;
}
}
var stu=new student("李四",20,"三班");
console.log(stu.toString());
（七）模块的导入与导出
export：从模块中导出函数，对象或原始值，以便其他程序可以通过import语句使用它们。
语法：export{name1,name2,name3....,nameN};导出多个（对象、变量、方法）//这样导出的模块在import导入时导出的名称要一致的。
export default expression;导出默认的名称。//这个导出的模块在import导入时名称可以自己定义。
import：用于导入由一个模块导出的绑定。.
在导入时要引入编译器。代码如下：
<script src="traceur/traceur.js" type="text/javascript" charset="utf-8"></script>
<script src="traceur/BrowserSystem.js" type="text/javascript" charset="utf-8"></script>
<script src="traceur/bootstrap.js" type="text/javascript" charset="utf-8"></script>
导出代码如下：
var morth=12;
var untli={
add(x,y){
return x+y;
},
morth,
che(x,y){
return x*y;
}
}
//export {untli}
//或者
//默认名字导出
export default untli
var unt={
jian(x,y){
if (x>y) {
return x-y;
}else{
return y-x;
}
},
chu(x,y){
return x/y;
}
}
export {unt}
导入代码如下：
import {unt} from "./export2.js";
console.log(unt.jian(10,20),unt.chu(24,12));//10,2
//导入默认名字
import un from "./export.js";
console.log(un.add(10,20),un.morth,un.che(5,12));//30,60