ES6中的新特性(一)
ECMAScript6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
我们来看看ES6都做了哪些扩展。
Let和const关键字
变量的解构赋值
字符串,数值的扩展
数组,对象的扩展
函数的扩展
for...of
先从let和const这两个关键字看起。
let关键字类似于var,但是他又和var有些不同,主要有两点,
避免了变量提升
只在块级作用域内起作用
来看一段代码
var a = 1;
(function () {
alert(a);
var a = 2;
})()
这时候弹出的会是undefined,因为在浏览器执行的时候,会有变量提升,也就是会先声明变量a,这段代码实际上是这样的
Var a;
Alert (a);
Var a=2;
而我们使用let关键字,就不会有这个问题,
var a = 1;
(function(){
alert(a);
let a = 2;
})();
这个时候浏览器会报错,
因为变量没有提升,所以执行到alert(a)的时候a还是未定义状态,而且因为let只在块级作用域里起作用,所以外部的a也取不到。
然后我们再来看看const。const就是常量的意思,所以他就有了不可更改的属性,尝试给一个常量改变值是会报错的,
const Name='matt';
Name='john';
const和let一样,只在块级作用域内作用, 不存在变量提升,必须先定义后使用, 不可重复声明, 声明后必须赋值。
const Person={
'name':'matt'
};
Person.name='john';
Person.age=12;
console.log(Person);
这段代码是ok的。怎么const又可以更改了,这就涉及到了传值赋值和传址赋值。你尝试去给Person赋一个新地址会报错的,比如Person={}。但是你只是更改它的属性的话是OK的。
那什么是传址赋值呢?就好比,你预约了一个装修工(张师傅)到你家进行装修,你把你家的地址告诉了他,他顺着地址来到你家,按照你的要求,把你家的门弄成红色。
仅仅过了两天,你觉得不好看,你又找了另一个装修工(王师傅),你也把地址告诉他,王师傅来到后也是按照你的要求,把门弄成了绿色。
最后,不管是张师傅还是王师傅,通过这个地址来到你家的时候,看到的门肯定是绿色的,因为最后一次修改是改成绿色。
写成代码就是
varZhang = {"door":"red"};
//次日,你把地址也告诉了王师傅
var Wang = Zhang;
//王师傅按照地址,去到后把门改成绿色
Wang.door = "green";
//最后不管是张师傅还是王师傅来到你家,看到门都是绿色的
console.log(Wang);//结果:输出 {door: "green"}
console.log(Zhang);//结果:输出 {door: "green"}
这就是传址赋值了。
再来看一个ES6的新特性,for…of。平时我们for循环的时候,是这样写的
Arr=[1,2,3,4,5,6]
for(vari=0;i<Arr.length;i++)
有了for…of,我们可以更清晰,牛逼得去遍历数组。
for(let itemof Arr)可以达到和上面代码同样得效果。
我们列举一下for...of的优势:
写法比for循环简洁很多;
可以用break来终止整个循环,或者continute来跳出当前循环,继续后面的循环;
结合keys( )获取到循环的索引,并且是数字类型,而不是字符串类型。
比如
var arr= [1,2,3,4,5];
for(let valueof arr){
if(value ==3){
//终止整个循环
break;
}
console.log(value);
}
这样我们就及时得跳出了循环
只会打印出来1和2.
也可以跳过当前循环,把break改成continue就可以了。我们也可以得到数字类型得索引,
vararr = [1,2,3,4,5];
for(let indexof arr.keys()){
console.log(index);
}
就可以打印出来0,1,2,3,4.
ES6有很多好玩的新属性,我们暂时说这么多。
常见问题:
1. ES6的兼容问题?
现在浏览器对Es6的兼容已经很好了,但是肯定还有不兼容的浏览器,目前常见的兼容转换工具是Babel。
2. 什么是代码块?
任何一对花括号(这玩意:{ })中的语句都属于一个块,在花括号里面用let定义的所有变量在花括号外都是不可见的,我们称之为块级作用域。
3.什么是变量提升?
在加载程序之前,浏览器会做一些准备工作,变量、函数表达式——变量声明,默认赋值为undefined;
this——赋值;
函数声明——赋值;
这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。这就是变量提升