最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最常用的几个语法
1. let
用它所声明的变量，只在let命令所在的代码块内有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<title>Document</title>
</head>
<body>
<script>
//例1
let name = 'zhangshang'
while (true) {
let name = 'lishi'
console.log("名字1: "+name) //输出 obama
break
}
console.log("名字2: "+name) //输出 zach
//例2
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i); // 输出6，如果是var a 那会输出10
};
}
a[6]()
</script>
</body>
</html>
本地保存为html文件用谷歌浏览器打开
image.png
2. const
声明常量。一旦声明，常量的值就不能改变。
const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量
const monent = require('moment')
3. class, extends, super
<script>
//class
class Animal {
constructor(){ //constructor方法，这就是构造方法
this.type = 'animal' //this关键字则代表实例对象
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //输出 animal says hello
//class 继承
class Cat extends Animal {
constructor(){
super() //super关键字，它指代父类的实例（即父类的this对象）
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //输出 cat says hello
</script>
//constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。
//子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
4. arrow function 箭头函数
是ES6最最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多
<script>
//箭头函数
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //animal says hi
</script>
当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。
4. template string 模板字符串``
我们要用一堆的'+'号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：
<Link to={`/taco/${taco.name}`}>{taco.name}</Link>
<script>
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
</script>
5. destructuring 解构
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
方式一：
<script>
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}
</script>
方式二：
<script>
let dog = {type: 'animal', many: 2}
let { type, many} = dog //把dog数组的值，赋给type,many
console.log(type, many) //打印变量type, many，输出animal 2
</script>
5. default参数
ES6允许为函数参数设置默认值，即直接写在参数定义后面。
<script>
function Point(x = 0, y = 0) {
this.x = x;
this.y = y;
}
var p = new Point();
p //输出 {x:0, y:0}
</script>
5. rest参数 （三个点）
Rest参数接收函数的多余参数，组成一个数组，放在形参的最后，形式如下：
<script>
function animals(...types){
console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]
</script>
注意，rest参数之后不能再有其它参数（即，只能是最后一个参数），否则会报错。
函数的length属性，不包括rest参数：
网友评论