我认知的ES6语法

工作中难免会遇到有关于ES6语法的用法及注意事项。以下是个人总结的一些知识，如有不足或错误还望指正！
那么，在ES6中，我们有哪些改变的地方呢？

1、变量声明

之前的写法：

var a;//声明一个变量a
var PI=3.14;//声明一个常量PI并赋值

ES6的写法：

let a;//声明一个变量a
const PI=3.14;//声明一个常量PI并赋值

ES6中引入了let、const。它们都是块级作用域，只在最近的一个块中（花括号中）有效。并且const声明的常量是无法改变的，再次赋值会报错。

2、箭头函数（this的指向）

之前的做法：

//在外部函数中将this存为一个变量，回调函数中使用该变量，而不是直接使用this。
var name = 'my name is window';
var obj = {
name: 'my name is 小佑@小佐',
fn: function () {
var that = this;
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
	 console.log(that.name);   //my name is 小佑@小佐
}, 1000)
}
}

ES6中的写法：

var name = 'my name is window';
var obj = {
name: 'my name is  小佑@小佐',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(() => {
	 console.log(this.name);  //my name is 小佑@小佐
}, 1000)
}
}

完全不用考虑this的指向问题，这无疑是工程师们的一大福音。

3解构赋值

简介：解构赋值是ES6中推出的一种高效、简洁的赋值方法
之前的写法：

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

ES6的写法：

let [first, second, third] = someArray;

当然还可以不写前面的，代表只赋值第三个变量，如：

let [,,third] = [1,2,3];

还支持对象解构：

let {name,age} = {name: "lisi", age: "20"};
console.log(name); //lisi
console.log(age); //20

看起来是简洁的多且易于理解。

4、模板字符串

简介：ES6中提供了用反引号｀来创建字符串，里面可包含${…}等。
之前的写法：

“This is a pretty little template string”

对于动态创建元素及内容的时候往往字符串比较长需要拼接，传统的做法就比较麻烦且容易出错。

ES6的写法：

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

怎么样？看起来是不是方便很多。

结语：当然除了以上列举的ES6的用法以外，还有很多ES6语法的体现，在这里我只是抛砖引玉。如promise语法也是值得大家去学习并掌握的。以上就是我所分享的ES6的知识点。

猜你喜欢