Es6语法基础
1、插件
运行插件 code runner
高低版本转换插件 babel
2、let
let定义的变量,{}中的变量都是局部变量;var声明的变量在{}中的变量外部可以访问,只有遇到函数的时候才是局部变量。
要注意let和var的区别。
(1)块级作用域
let arr=[];
for(let i=0;i<3;i++){
arr.push(function(){
console.log(i);
})
}
console.log(arr[0],arr[1],arr[2])
输出结果为:0,1,2
因为let是局部变量,是可以在{}中获取到的。
for(var i=0;i<3;i++){
arr.push(function(){
console.log(i);
})
}
console.log(arr[0],arr[1],arr[2])
输出结果为:2,2,2
因为var是遇到函数即为局部变量,因此在函数中获取不到变量i,就会往外找全局变量i,即等循环过后才能取到变量I,因此输出全为2。
(2)变量的提升
console.log(str);
var str='11'
变量提升,输出结果为undefined
console.log(str);
let str = '1';
运行会报错
3、顶层对象的属性
浏览器环境是指window对象,在node指的是global对象。
Es6中全局变量和顶层对象脱钩
(1)let,const,class定义的全局变量不属于顶层对象;
var,function定义的全局变量属于顶层对象。
(2)globalThis对象
全局环境中,this会返回顶层对象,但是在node模块和Es6模块中,this会返回当前模块。
函数里面的this,如果函数不是作为对象的方法运行,而是单纯作为函数运行,this会指向顶层对象。但是,严格模式下,这时this会返回undefined。
function demo(){
console.log(this);
}
demo();
这里的this是顶层对象。node模块和ES6模块默认为严格模式。
不管是严格模式还是普通模式,new function(‘return()’)(),总是会返回全局对象,但是,如果浏览器使用了csp,那么eval,new,function这些方法都无法使用。
4、const
const 声明一个只读的常量,一旦声明,常量的值就不能改变,发生改变就会报错。
const obj={user:'wrj'};
obj.user = 'yh';
这样是不会报错的,因为对象时地址引用型数据。只是不能将obj修改为新的对象,不能修改引用地址。常量保存的只是一个地址,和对象中的具体内容没有关系。
剩余const属性和let属性相同。
5、解构赋值
原来赋值方式:
let arr = [1,2,3,4];
let arr1 = arr[0];
let arr2 = arr[2];
let user = {name:'wrj',age:'18'};
let name = user.name;
let age = user.age;
ES6语法解构赋值
let arr = [1,2,3];
let [b1,b2,b3] = arr;
console.log(b1,b2,b3);
//输出结果为1,2,3
定义变量的结构和目标数组的结构一致,即定义三个变量b1,b2,b3正好对应arr数组中的三个值。对应位置的变量获取到对应位置的值,也可以定义小于数组长度的变量个数。例如:
let arr = [1,[2,[3,[4]]]];
let [c1] = arr[0];//值为1;
let [c1,[c2,[c3,[c4]]]] = arr;
console.log(c1,c2,c3,c4);
//结果为1,2,3,4,
let [,[,[d3,[]]]] = arr;
//d3 为3
arr1=[];
let [f1 = 2] = arr1; //能取到值就赋值为取到的值,否则赋值为默认值2
rest参数:
[a1,...rest] = [1,2,3,4,5];
a1 = 1;
rest = [2,3,4,5]; //存储剩余的元素
let obj = {
user:'wrj',
age:'18',
sex:'nv',
}
let {age,user,sex} = obj;
console.log(user,age,sex); // 结果为'wrj','18','nv'
let obj2 = {
info:{
text:'1111',
}
}
let {info:{text}} = obj2;
//此时info为模式,取不到值
let {info,info:{text}} = obj2;
//用这种方式取info
let {info:{text:text1}} = obj2;
//把text变量名重新命名为text1;
函数的参数的解构赋值
例如:
function demo([a1,a2,a3,a4]){
console.log(a1,a2,a3,a4); //1,2,3,4,
}
demo([1,2,3,4])
//默认值的写法
function demo1({a=5,b=6} = {}){
console.log(a,b); //5,6
}
demo1();
async函数
语法:
async function demo(){
await 1; //执行完成后才会往下执行 await也能执行.then方法
await 2;
return 123;
}
demo();
//返回是promise类型
demo().then(function(data){
console.log(data);
}).catch(){
}
整理
1、对象的扩展
(1)属性简介表示法
let num = 10;
let obj = {
num,
demo(){},
}
(2)属性名表达式
let str = 'uname';
let obj = {
[str]:'kevn'
}
(3)object.is()全值相等
功能和===基本上一样,除了 +0 不等于 -0, NaN 等于 NaN
(4)object.assign() 合并对象
可枚举性的属性和方法才可以被合并
2、promise
容器 存储未来才会结束的事件的结果
new Promise(function(resove,reject){
//一般存放异步的代码 手动调用
resolve(data);
reject(err);
})
三个状态: pending 初始状态 、resolved 请求成功、rejected 请求失败
promise.prototype.then(function(data){},function(err){})
promise.all([p1,p2,p3]),让p1,p2,p3并发执行,若都执行成功则返回成功结果,若一个失败,则返回失败结果。
promise.race([p1,p2,p3]) 获取最快执行完成的结果。
promise.allSelect([p1,p2,p3]),多个promise实例并发执行,并返回所有的执行结果,不管成功还是失败。
3、generator函数
状态机 每次调用next()才能往下执行
语法:
function * demo(){
yield promise.resolve;
yield …
}
co库 可以自动执行
4、async 函数
是generator的语法糖
(1)错误捕获
async函数返回一个promise对象
promise对象的状态变化:默认的,async函数返回的promise对象,必须等到内部所有await命令后面的promise对象执行完,才会发生状态改变,除非遇到return语句或者抛出错误
任何一个await语句后面的promise对象变为reject状态,那么整个async函数都会终端执行,则reject的参数会被catch方法的回调函数接收到
(2)await
正常情况下,await命令后面是一个promise对象,返回该对象的结果,如果不是promise对象,就直接返回对应的值。
推荐链接
es6.ruanyifeng.com/#docs/async#语法