ES6语法糖集锦
sublime3安装Es6插件 javascriptNext,然后安装即可 JavaScriptNext - ES6 Syntax()高亮插件 ----------------------------------------------------------------- let、const命令 与var声明 let块级作用域 let不允许在代码块内重复声明一个变量 function aa(){ let a=3 { let a=5 //子作用域 } } 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象; 使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升; 使用const声明的是常量,在后面出现的代码中不能再修改该常量的值。 ----------------------------------------------------------------- 数组结构: let [a,b,c,d] = ["aa","bb","23","44"] 对象解构 函数参数解构 ----------------------------------------------------------------- Symbol(值类型数据,唯一的) let a = 3 let b = 3 alert(a=b) //true ------------------- let a = Symbol(3) let b = Symbol(3) alert(a=b)//false ----------------------------------------------------------------- Set var set = new Set([1,2,3,4,5,2,8,4])//自动合并了重复值 for(var key in set){ console.log(key) //1,2,3,4,5,8 } --------------------------------- let arr = [1,2,3,4,2,86,4] arr.map(function(item){ set add(elem) //添加元素 }) map---->Es5语法 ----------------------------------------------------------------- WeakSet(与Set类似唯一区别就是成员只能是对象) var weakset = new WeakSet(); ----------------------------------------------------------------- Map遍历 键可以是各种类型 let obj1 = {}; let obj2 = {}; let obj = new Object(); obj[obj1] = 33; obj[obj2] = 66; for(let key in obj){ console.log(key) //只循环出一个object } --------------------------------------- var mapData = new Map(); var obj1 = {}; var obj2 = {}; mapData.set(obj1,"22") //添加新元素 mapData.set(obj2,"22") //添加新元素 console.log(mapData.get("obj1")) //获取键 console.log(mapData.has("obj1")) //判断是否含有键 console.log(mapData.delete("obj1")) //删除键 mapData.clear() //清空
-----------------------------------------------------------------
WeakMap不可遍历没有size属性
var wm = new WeakMap();
var obj = new Object();
console.log(wm.get(obj)) //undefined
console.log(wm.has(obj)) //false
-----------------------------------------------------------------
Itrator遍历器
let arr = ["bob","pop","wow"];
let op = arr[Symbol.iterator]();
console.log(op.next());
console.log([...arr]) //依旧是数组
-----------------------------------------------------------------
Generator函数;
1.function的关键字和函数名称之间有个*号
2.函数体内可以用yield语句
3.函数调用后不会立即执行,返回的是一个遍历器对象;
function Es.(){
function *aa(){
yield"中国";
yield"美工";
yield"技术";
return "end";
}
let a = aa();
console.log(a.netx());
}
-----------------------------------------------------------------
Promise对象
三种状态:Pending(等待)、resolve(成功)、reject(失败)
异步操作解决方案,比原有的回调函数等方式更为合理
该对象改变状态只有两种可能Pending转变为resolve,Pending转变为reject;
function aa(){
function bb(){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log(123456)
},1000)
})
}
}
-----------------------------------------------------------------
async函数:(ES7)
await Promise.reject("出错了") //抛出例外,直接到例外处理处
var asyncFun = async function(){
var a1 = await function(){
setTimeout(function(){
console.log(111)
},3000)
}();
var a2 = await function(){
setTimeout(function(){
console.log(222)
},1000)
}();
console.log("执行完毕")
}
asyncFun();//先打印222再打印111;
---------------------------------
let asyncFun1 = async function(){
console.log("aaa")
return "第一个"
}
let asyncFun2 = async function(data){
console.log("bbb"+data)
return "第二个"
}
asyncFun1().then(asyncFun2).then(function(data){
console.log("这是最后执行"+data)
})
-----------------------------------------------------------------
箭头函数:(省去function关键字内部没有prototype和构造器constructor,不支持new操作,this指向会改变)
Es5写法
function a(a=6){
return a*a
}
Es6写法
let fn = (a=6)=>a*a;
console.log(fn(9));//81
Es5函数内部this不会改变,异步操作this也会改变如(async和setTimeout)
-----------------------------------------------------------------
class类(方法没有重载也就是说不可以覆盖)
class Person{
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
getName(){
console.log(this.name)
}
}
let person = new Person("bob",18,"男");
person.getName();