黑马程序员技术交流社区
标题: 【广州前端】轻松掌握ES6常用语法 [打印本页]
作者: AreYouGlad 时间: 2017-12-4 11:33
标题: 【广州前端】轻松掌握ES6常用语法
本帖最后由 AreYouGlad 于 2017-12-20 11:53 编辑
ES6即ECMAScript 6，是js的下一代语法标准。目前，越来越多的项目开发中已经在使用ES6了，面试中也涉及到了许多ES6的语法。我就在这和大家分享下我对ES6语法的理解。
let和const
首先，我们先了解下ES6下的变量声明。以前我们都是用var来声明变量的，ES6中增加了let和const两个关键字进行变量声明，我们来具体看看其中的异同。
[JavaScript] 纯文本查看 复制代码
$(function () {
for (var i = 0; i < 5; i++) {
$(".box").click(function () {
console.log(i);//五个5
})
}
})
点击box的时候会输出了五个5，这是因为ES5中js只有全局作用域和函数作用域，｛｝无法划分块级作用域，才会造成这种明显不合理的现象。
[JavaScript] 纯文本查看 复制代码
$(function () {
for (let i = 0; i < 5; i++) {
$(".box").click(function () {
console.log(i); //0,1,2,3,4
})
}
})
当使用let声明变量时，会为js新增块级作用域，用它声明的变量只在当前代码块中有效。同样的，const也是用来声明变量的，不过const声明的是常量，当我们试图改变const声明的常量时就会报错。一般我们在引用第三方变量时声明的变量，用const来声明可以避免重名而带来的bug。
箭头函数
在ES6中最常用的新特性就是箭头函数了，所谓的箭头函数就是function的简捷写法。
[JavaScript] 纯文本查看 复制代码
function fn(i){ return i + 1; } //ES5
(i) => i + 1 //ES6
怎么样，ES6中函数的写法是不是简单的不像话，如果代码较为复杂的情况，我们也是需要使用｛｝将代码包裹起来的。
[JavaScript] 纯文本查看 复制代码
function fn(x, y) {
x++;
y--;
return x + y;
}
let fn = (x, y) => {
x++;
y--;
return x + y;
}
箭头函数中的this指向
箭头函数不止简洁而已，它还有个强大的功能，箭头函数没有自己的this，它的this都是继承自外面的，因此内部的this就是 外层代码块的this。
[JavaScript] 纯文本查看 复制代码
let obj = {name: 123};
obj.fn = function () {
setTimeout(function () {
console.log(this, this.name); //window,""
}, 1);
}
obj.fn();
ES5传统语法中，定时器属于异步操作，会将内部函数的this指向window
[JavaScript] 纯文本查看 复制代码
let obj = {name: 123};
obj.fn = function fn() {
setTimeout(() => {
console.log(this,this.name);//obj,123
}, 1);
}
obj.fn();
ES6中，箭头函数的this继承自外部代码块，即obj，所以this为obj
class（类）和extends（继承）
ES5中，最让人头疼的无非原型、构造函数、继承...ES6提供了更接近面向对象编程的写法，引入了class（类）的概念，让对象原型的写法更清晰更加通俗易懂。
[JavaScript] 纯文本查看 复制代码
class Animal{
constructor(){
this.type="animal";
}
sayHello(word){
console.log(this.type+" says "+word);
}
}
let animal=new Animal();
animal.sayHello('hello');//animal says hello
class Dog extends Animal{
constructor(){
super();
this.type="dog";
}
}
let dog=new Dog();
dog.sayHello('hi');//dog says hi
以上代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Dog类，该类通过extends关键字，继承了Animal类的所有属性和方法。super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
``字符串
ES6中还有个非常常用的语法，当我们要进行大量html字符串拼接时，传统的写法非常麻烦，我们往往会使用mustache等模版。ES6中我们可以使用"` `"来进行字符串拼接，使用${}包裹变量。
[JavaScript] 纯文本查看 复制代码
$(".box").html("<ul>" +
"<li>" + obj.name + "</li>" +
" <li>" + obj.age + "</li>" +
" <li>" + obj.edu + "</li>" +
"</ul>"
)
传统ES5中需要大量"+"来进行字符串与变量拼接。而ES6中，只需要使用"` `"即可
[JavaScript] 纯文本查看 复制代码
$(".box").html(
`
<ul>
<li>${obj.name}</li>
<li>${obj.age}</li>
<li>${obj.age}</li>
</ul>
`
)
解构
ES6中还提出了解构的概念，方便了我们对数组、对象的操作
[JavaScript] 纯文本查看 复制代码
let a = 1;
let b = 2;
let obj = {
a: a,
b: b
};
console.log(obj);
以上为传统写法，我们也可以使用ES6中的写法，结果并没有差别
[JavaScript] 纯文本查看 复制代码
let a=1;
let b=2;
let obj={a,b};
console.log(obj);//{a: 1, b: 2}
函数的参数问题
在ES5中，我们为了预防用户忘记给函数传参，往往会使用短路操作给参数一个默认值
[JavaScript] 纯文本查看 复制代码
var fn = (num) => {
num = num || 0;
console.log(num);
}
而在ES6中，给我们提供了更加简洁的给参数默认值的方式
[JavaScript] 纯文本查看 复制代码
var fn = (num = 0) => {
console.log(num);
}
在ES5中，当用户传参个数不确定时，我们可以使用arguments。而在ES6中，也为我们提供了更加便捷的方式。
[JavaScript] 纯文本查看 复制代码
var fn = (...args) => {
console.log(args); //[1, 2, 3, 4, 5]
}
fn(1, 2, 3, 4, 5);
以上便是绝大部分ES6中常用的语法。
作者: 系统已更新请 时间: 2017-12-4 12:11
『哟哟哟』
作者: 系统已更新请 时间: 2017-12-4 12:12
666666666还有字数
作者: xiaojiyao 时间: 2017-12-4 13:09
听君一席话，胜打十盘机啊
作者: AngularBaby 时间: 2017-12-4 14:09
竟然有这种骚操作~赞赞赞~
作者: yezhimo 时间: 2017-12-5 18:28
听君一席话，胜打十盘机啊
作者: q947544128 时间: 2017-12-5 19:23
听君一席话，胜打十盘机啊
作者: AreYouGlad 时间: 2017-12-13 17:45
作者: chenkangzhen 时间: 2018-7-26 14:24
了不得！！！！太棒了
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |