ES6语法相关内容补充

(所以说连ES5都没学的我直接开始ES6。。

let/var

事实上var的设计可以看成是JavaScript语言设计上的错误,但是这种错误多半不能修复和移除,因为需要向下兼容。大概十年前,JavaScript的创始人Brendan Eich就决定修复这个问题,于是添加了一个新的关键字let,可以将let看作是更完美的var。var为什么不那么完美?因为它的作用域有点问题。

let具有块级作用域,而var的作用域通常是不确定的,这种不确定会在开发过程中带来无形的安全隐患。当没有块级作用域的时候,var在某个块内定义了,在块外面也可以被使用,比如在一个for循环里面,我想通过循环给一组按钮添加监听事件,但是由于循环时for的i被“悄悄的”改变,所以会导致每次监听到的都是最后一个按钮。这可能会导致一些隐性的bug。但是由于函数是一个作用域,所以闭包函数可以解决这个问题,但是会让代码变得很奇怪。

ES5之前因为if和for都没有块级作用域的概念,所以在很多时候都必须借助于function的作用域来解决引用外面变量的问题。ES6中加入了let,有if和for的块级作用域。

const

这个关键字在很多语言中已经存在,主要的作用的是将某个变量修饰为常量。在JavaScript中也是如此。使用const修饰的标识符为常量,不可以再次赋值。当修饰的标识符不会被再次赋值时就可以使用const,保证数据的安全性。在ES6开发中优先使用const,只有需要改变某个标识符的时候才使用let。一旦给const修饰的标识符赋值之后不能修改,使用const定义标识符必须进行赋值,常量的含义是指向的对象不能修改,但是对象内部的属性是可以被修改的。

对象字面量增强写法

属性的增强写法

假如我有

1
2
3
const name = 'Shawn Zhou';
const age = 19;
const height = 1.82;

那么用这些东西构建一个对象的话,在ES5里需要这么写

1
2
3
4
5
const obj = {
name: name,
age: age,
height: height,
}

是不是有点繁琐?在ES6中可以简化为:

1
2
3
4
5
const obj = {
name,
age,
height,
}

函数的增强写法

在ES5中:

1
2
3
4
5
6
7
8
const obj = {
run: function() {

},
eat: function() {

},
}

在ES6中更加简洁:

1
2
3
4
5
6
7
8
const obj = {
run() {

},
eat() {

}
}
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信