波哥让我总结学习中遇到的ES6新增特性

一，变量声明：Let与const

ES6推荐使用Let来声明变量，Let提供块作用域(block-scoping)，这会比var提供的以函数为作用域有更加精细化的控制。请看下面例题

问：在下面程序中，控制台打印的最终结果？

function fn() {var arr = [];for (var i = 0; i < 5; i++) {arr.push(function(){return console.log(i);})}return arr;
}
for (let i = 0; i < 5; i++) {fn()[i]()
}
复制代码

你可能会误以为结果是[0,1,2,3,4]，但实际却是[5,5,5,5,5]

用var来定义一个变量，JavaScript在预先编译的时候会将变量提升至函数的顶部，经过5个for循环，arr里面的i会指向同一个i，此时函数中的i已经是5，所以最终结果也就是5了。

下面把for循环的var改为let:

function fn() {var arr = [];for (let i = 0; i < 5; i++) {arr.push(function(){return console.log(i);})}return arr;
}
for (let i = 0; i < 5; i++) {fn()[i]()
}
复制代码

结果输出[0,1,2,3,4]，因为let拥有块作用域，所以使用let声明的变量i不会被提升到函数顶部，i的作用域在for循环，就会每次循环有独立的值。

如果你想定义一个常量，请使用ES6里的const，const声明的变量是完全不可更改的。

const PI = 3.14;
PI = 1;
复制代码

结果是直接报错 Uncaught TypeError: Assignment to constant variable. at <anonymous>:3:4

关于let与const有几个点需要注意

let 关键词声明的变量不具备变量提升（hoisting）特性

let 和 const 声明只在最靠近的一个块中（花括号内）有效

当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

const 在声明时必须被赋值

二, 模板字符串

在ES6之前我们往往用+来处理模板字符串

var str = 'I' + 'Have' + Num + 'Apple'
复制代码

而在ES6中基本的字符串格式化,将表达式嵌入字符串中进行拼接,用${}来界定；ES6反引号(``)直接搞定

var str = `I Have ${Num} Apple`
复制代码

三, 箭头函数（Arrow Functions）

ES6中,箭头函数是函数的一种简写形式 () = >
箭头函数最直观的三个特点

不需要function 关键字来创建函数

省略return关键字

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略'{}' 和 'return';

//ES5
var fn = function(x){return x
}//ES6
var fn = (x) = >{return x
}//ES6简写
var fn = x => x
复制代码

四, 对象的遍历：for...in

//定义一个对象
var Apple = {color: "red",weight: "50g",kind:function(){console.log("HongFuShi")}
}//用for...in遍历对象
for(let item in Apple){console.log(Apple[item])
}
复制代码

五，ES6中的类`class`

ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

用class创建对象的格式:

class 类名{constructor(参数){this.属性 = 参数;}method(){// 对象中简写方法，省略了function。不要与箭头函数搞混了}
}
复制代码

注意：ES6 中支持class语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式

ES6 中支持 class语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。

方法和方法之间没有逗号。不是键值对

在ES5中，我们创建一个类通常如下：

//创建一个构造函数
function Apple (color,weight) {this.color = color;this.weight = weight;
}
//向函数原型写入方法
Apple.prototype.getkind = function(){console.log('HongFuShi');
}
//创建新对象，并调用方法
var Apple = new Apple("red","50g");
console.log(Apple);
Apple.getkind();
复制代码

在ES6中我们可以用class来声明一个类

//创建一个类
class Apple {//构造器constructor(color, weight) {this.color = color;this.weight = weight;}//类方法getkind(){console.log('HongFuShi');}
}
//创建新对象并调用属性方法
var new_Apple = new Apple("red","50g");
console.log(new_Apple);
Apple1.getkind()
复制代码

这里值得注意的是你new的对象名称不能与类的名称重复。

六，ES6里类`class` 中的继承`Extends`

在ES5中我们继承属性是这样写的：

//创建Apple构造函数
function Apple (color,weight) {this.color = color;this.weight = weight;
}
//函数原型添加方法
Apple.prototype.getkind = function(){console.log('HongFuShi');
}
//创建Smell_Apple构造函数
function Smell_Apple (color,weight,smell) {Apple.call(this,color,weight); /利用call改变this指向，达到属性继承this.smell = smell;
}
//浅拷贝继承方法
for (const key in Apple.prototype) {Smell_Apple.prototype[key] = Apple.prototype[key]
}Smell_Apple.prototype.show = function(){console.log(`苹果的颜色是${this.color},重量是${this.weight},味道${this.smell}`);
}//调用继承后的构造函数
var new_Apple = new Smell_Apple("red","50g","good")
console.log(new_Apple);
new_Apple.getkind()
new_Apple.show();
复制代码

在ES6中我们可以使用Extends来继承：

//创建一个父类
class Apple {constructor(color, weight) {this.color = color;this.weight = weight;}getkind(){console.log('HongFuShi');}
}
//子类继承父类
class Smell_Apple extends Apple{constructor(color,weight,smell) {super(color,weight)this.smell = smell;}show(){console.log(`苹果的颜色是${this.color},重量是${this.weight},味道${this.smell}`);}
}let new_Apple = new Smell_Apple("red","50g","good");
console.log(new_Apple);
new_Apple.show();
复制代码

以上就是我目前接触到的ES6新增特性，谢谢波哥的查阅。