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();