1.let
传统的变量声明都是用var
eg：
(function(){ var i = 1; var i = 10; console.log(i); })(); ES6改用let变量声明 eg： (function(){ let i = 2; cosole.log(i); } 与var的区别： 1.let声明的变量只在当前代码块有效 2.同一代码块里不允许出现重名let变量 3.let特别适合用于循环（因为var声明的变量会有变量提升的情况） eg： var arr = []; for(var i = 0;i < 10;i++){ arr[i] = function(){ console.log(i); } } arr[3]();//此时i=10 /****************************/
var arr = []; for(let i = 0;i < 10;i++){ arr[i] = function(){ console.log(i); } } arr[3]();//此时i=3 2.set （1）set是ES6新增的一种数据类型，语法特点与数组类似。
（2）与数组不同的是set数据结构里的所有数据都是唯一的。 eg： /******传统写法******/
var arr = [1,2,3,4,6,6,7,7,8]; /*传统遍历数组方法一*/ for(var i = 0;i < arr.length;i++){ console.log(arr[i]);//此时输出1，2，3，4，6，6，7，7，8 } /*传统遍历数组方法二*/ arr1.map(function(val){ console.log(val); })； /******set写法******/ var set = new Set(arr); /*set遍历数组方法*/ for(var element of set){//for in 循环不能遍历set集合，得用for of console.log(element );//此时输出1，2，3，4，6，7，8 } /*set添加数据方法*/ var set2 = new Set();
for(var i = 0;i <10;i++){ set2.add(i*2); } console.log(set2); /*set将集合转换为数组 扩展运算符*/ var arr3 = [...set2]; console.log(arr3); /*清空和删除set*/ set2.delete(2);//没有索引，直接删除数据2 console.log(set2); set2.clear();//清空set2数据 console.log(set2); tip：为什么在删除的时候没有用索引？ 因为set数组的索引和数据是一样的。 eg： let set3 = new Set([1,7,9,4,2,3,4]); set3.forEach(function(index,val){ console.log(index+":"+val);//此时结果是1:1 7:7 9：9 4：4 2：2 3：3 4：4 });
/*判断set中是否有对应数据*/ console.log(set3.has(9));//此时答案是true /*set数组长度*/ console.log(set3.size);//此时是6，set没有length的属性 3. weakSet
与set使用方式类似。但与set的不同的地方在于WeakSet只能保存对象类型的数据， 有add，clear，delete，has方法，但不能遍历，取值。 eg： let ws1 = new WeakSet();
let num = new Number(5); ws1.add(5);//报错，因为5不是对象类型的数据 ws1.add(num);//不报错，因为num是对象类型的数据 4.const 用来声明变量，语法规则和let一样，但是const声明的变量不可修改，且只在当前的代码块有效， 同一代码块里不允许出现重名const常量。 eg：
(function () { { const PI = Math.PI; const n = 2; //n = 5; //同一代码块里不允许出现重名const常量 alert(n); let m = 3; m = 5; alert(m); } //alert(n); //const声明的常量只在当前的代码块有效 })(); 5.symbol ES6新增的一种数据类型，表示独一无二的值。 eg： { var a = "ccy"; var b = "ccy"; alert(a == b); } { let a = Symbol("ccy"); let b = Symbol("ccy"); alert(a == b); } 6.map map也是ES6新增的一种数据类型，它的本质和对象一样都是键值对的集合。 与对象不同的是，它的键值可以是各种数据类型。 let map1 = new Map(); var obj1 = new Object(); var obj2 = new Object(); /*set方法 添加值*/ map1.set(obj1,"对象键值1"); map1.set(obj2,"对象键值2"); /*get方法获取值*/ console.log(map1.get(obj1)); console.log(map1.get(obj2)); /*has方法判断是否存在*/ console.log(map1.has(obj2)); /*delete方法删除数据*/ map1.delete(obj2); console.log(map1.size); /*clear清空数据*/ map1.clear(); console.log(map1.size);
/*数组作为构造函数参数*/ let arrMap = new Map([['name','ccy'],['age','18']]); console.log(arrMap); /*forEach遍历Map*/ arrMap.forEach(function(val,key){ console.log(key+":"+val); }); /*转换成数组 扩展运算符*/ let arr = [...arrMap]; console.log(arr); /*for of循环*/ for(let i of arrMap){ console.log(i); } /*键迭代器*/ let keys = arrMap.keys(); console.log(keys); for(var i = 0 ; i < arrMap.size; i++){ console.log(keys.next().value); } /*值迭代器*/ let vals = arrMap.values(); console.log(vals); /*获取map的大小*/ let size = arrMap.size; console.log(size); /*数字类型的键名*/ let ccy = new Map([[1,"zhangsan"],[2,"lisi"]]); ccy.forEach(function(val,key){ console.log(key+":"+val); }); 7.weakMap weakMap和Map相似,但是区别是weakMap只能接收对象键值的数据 eg: let wm = new WeakMap(); let obj = new Object(); obj.name = "name"; wm.set(obj,"hello"); console.log(wm.has(obj)); console.log(wm.get(obj)); wm.delete(obj); console.log(wm.get(obj)); 8.Arrow
/*标准函数定义形式*/ function show(){ //无参 console.log("hello"); } show(); /*箭头函数写法*/ let show2=()=>{ //无参 console.log("hello"); } show2(); /*标准写法*/ function showName(name){ //有参 console.log(name); } showName("ccy"); /*箭头函数写法*/ let showName2=(name)=>{ //有参 console.log(name); } showName2("ccy"); /*标准写法*/ function add(a,b){ //有参有返回值 return a+b; } console.log(add(2,3)); /*箭头函数写法*/ let add2=(a,b)=>a+b; //有参有返回值 console.log(add2(2,3)); /*标准写法*/ function add3(a,b){ //有参有返回值有输出操作 console.log("我是加法运算"); return a+b; } console.log(add3(2,3)); /*箭头函数写法*/ let add4=(a,b)=>{ //有参有返回值有输出操作 console.log("我是加法运算"); return a+b; } console.log(add4(2,3)); 看惯了标准函数，箭头函数看起来是不是很难看，那ECMA设计它来干什么？？ 箭头函数可以优化对this的操作，它对this的处理与一般的普通函数不一样。 箭头函数的this始终指向函数定义时的this，而不是执行时。 var obj = { data:"我是测试数据", fun:function(){ console.log(this.data);//this指向谁？ }, fun2:function(){ setTimeout(function(){ //console.log(this); this.fun(); },1000); } } obj.fun(); //obj.fun2() //报错！ 因为定时器函数里的this的指向已经发生偏移，指向window对象 /*用箭头函数解决这个问题*/ var obj2 = { data:"我是测试数据", fun:function(){ console.log(this.data); }, fun2:function(){ setTimeout(()=>{//匿名函数 没有参数 this.fun(); },1000); } } obj2.fun(); obj2.fun2(); 9.promise function fun1(){ return new Promise(function(resolve,reject){ setTimeout(function(){ console.log("我是函数1"); resolve(111); //reject("函数1发生错误"); param = "我是函数1的数据";//往后面的函数传递参数 },4000); }); } function fun2(){ return new Promise(function(resolve,reject){ setTimeout(function(){ console.log("我是函数2"); console.log(param); resolve(222); },3000); }); } function fun3(){ return new Promise(function(resolve,reject){ setTimeout(function(){ console.log("我是函数3"); console.log(param); resolve(333); },2000); }); } function fun4(){ return new Promise(function(resolve,reject){ setTimeout(function(){ console.log("我是函数4"); console.log(param); },1000); }); } fun1().then(function(data){ console.log(data);//fun1的resolve传递的数据 }).then(fun2).then(function(data){ console.log(data) }).then(fun3).then(function(data){ console.log(data) }).then(fun4).then(function(data){ console.log(data); }).catch(function(err){ console.log(err); if(err == "函数1发生错误"){ //fun2().then(fun3).then(fun4);//哪怕函数1发生错误，我也也可安排函数继续往下进行。 } }); 10.Iterator /*声明一个数组*/ let arr = [1,2,3,4,5]; /*声明一个遍历器*/ let it = arr[Symbol.iterator](); for(;;){ let ele = it.next(); if(ele.done == true){ break; } console.log(ele.value); } /*能使用遍历器的有数组、对象、set和map，能使用遍历器的，就可以使用for of*/ for(var i of arr){ console.log(i); } /*展开运算符*/ var newArr = [...arr]; console.log(newArr); 11.generator /*每一个yeild语句定义不同的状态，它是一个代码执行暂停标识。 return也是定义了一个状态。*/ function* show(){ yield "第一个阶段"; yield "第二个阶段"; yield "第三个阶段"; yield "第四个阶段"; return "end"; } /*调用show函数，函数不会立即执行，而是返回一个遍历器对象*/ var itFunction = show(); /*对遍历器对象依次调用next()去执行*/ console.log(itFunction.next()); console.log(itFunction.next()); console.log(itFunction.next()); console.log(itFunction.next()); console.log(itFunction.next()); function* show2(){ yield function fun1(){ setTimeout(function(){ console.log('chenchuanyin'); },1000); }; yield function fun2(){ console.log("ccy"); } } var itFun = show2(); var fun1 = itFun.next().value; var fun2 = itFun.next().value; fun1(); fun2(); 13.destructuring /*数组解构赋值*/ function arr(){ { /*完全解析*/ let [a,b,c] = [1,2,3];//普通 console.log(a+":"+b+":"+c); let [a1, [[b1], c1]] = [1, [[2], 3]];//嵌套 console.log(a1+":"+b1+":"+c1); let [ , , third] = ["foo", "bar", "baz"]; console.log(third); let [x, , y] = [1, 2, 3]; console.log(x+":"+y); /*不完全解析*/ let [x1, y1] = [1, 2, 3]; console.log(x1+":"+y1); let [x3,, y3 = "cc", z3 = "ccy"] = [1, 2, 3]; console.log(x3+":"+y3+":"+z3); let [a2, [b2], d2] = [1, [2, 3], 4]; console.log(a2+":"+b2+":"+d2); } }; arr(); /*对象解构赋值*/ function obj(){ /*对象的属性没有次序，变量必须与属性同名，才能取到正确的值*/ let {foo, bar ,arr:[name,age,id="001"]} = {foo: "aaa", bar: "bbb" ,arr:["zhangsan","18"]}; console.log(foo+":"+bar+":"+name+":"+age+":"+id); } obj(); /*字符串解构*/ let [q,w,e] = "ccy"; console.log(e); /*函数参数解构*/ let funObj = { name:"ccy", age:"18" }; function show({name,age,id="002"}){ console.log(name+":"+age+":"+id); } show(funObj); 14.class /*之前语法定义类*/ /*定义一个类*/ function Person(name,age,add){ this.name = name; this.age = age; this.add = add; this.say = function(){ console.log(this.name+":"+this.age+":"+this.add); } } /*定义鼎泰属性和静态方法*/ Person.node = "ccy"; Person.run = function () { }; /*实例化出来一个对象*/ var student1 = new Person("王**",28,"福山区"); student1.say(); /*ES6定义类的语法*/ class Human{//定义类名 constructor(name,age,add){//构造函数 this.name = name; //成员属性 this.age = age; this.add = add; this.say = function(){ //成员方法 console.log(this.name+":"+this.age+":"+this.add+":1"); }; /*方法重载:在同一个类里面，方法名相同，参数列表不一样。 但是这里没有重载！！！只是覆盖！*/ /*this.say = function (id,no) { console.log(this.name+":"+this.age+":"+this.add+":"+":2"); }*/ } /*静态属性和方法*/ //static 'n' = "jereh"; static sayName(){ console.log("我是类方法！"); } } let student2 = new Human("龚*",27.5,"莱山区"); //Human.sayName(); student2.say(); student2.say("10001","1608"); //console.log(Human.n); Human.sayName(); /*继承*/ class Animal{ constructor(kind){ this.kind = kind; } say(){ console.log(this.kind+"也会说话"); } } let dog = new Animal("狗"); dog.say(); class Dog extends Animal{ /*如果又自定义构造函数，一定注意调用super()*/ constructor(kind,CatchR){ super(); this.kind = kind; this.CatchR = CatchR; } /*之前的方法不能满足需要，这里进行 重写 ！！*/ say(){ //方法的重写 console.log(this.kind+"汪汪！"+this.kind+"追"+this.CatchR); } } let dog2 = new Dog("狗","兔子"); dog2.say(); class Cat extends Animal{ constructor(kind,EatFish){ super(); this.kind = kind; this.EatFish = EatFish; } say(){ console.log(this.kind +"喵喵！"+this.kind+"吃"+this.EatFish) } } var cat = new Cat("猫","鱼"); cat.say();