ES6新特性

1.let与const变量

let与const使用规则

1. let变量不存在预解析。以下代码，若使用var声明flag，打印结果为 undefined；若使用let声明flag，结果报错：flag is not defined

console.log(flag);
//var flag = 123;
let flag = 456;
复制代码

2. let声明的变量不容许重复。以下代码会报错：

let flag = 123;
let flag = 456;
console.log(flag);
复制代码

3. ES6中，let和const引入了块级做用域。块内部定义的变量，在外部是没法被访问。

if(true){
    // var flag = 123;  //外部能够打印
    let flag = 123;     //外部会报错
}
console.log(flag);
复制代码

4. const声明的变量不容许从新赋值且必须初始化。

const n = 1;
n = 2;     //报错，不容许从新赋值
复制代码

const abc; //报错，未初始化
复制代码

2.解构赋值

1. 数组的结构赋值

let [a,b,c] = [1,2,3];       //a,b,c对应的结果为：1,2,3
let [a,b,c] = [,123,];       //a,b,c对应的结果为：undefined，123，undefined
let [a=111,b,c] = [,123,];   //a,b,c对应的结果为：111,122，undefined
console.log(a,b,c);
复制代码

2. 对象的解构赋值

let {foo,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);         //输出结果为：hello hi
复制代码

对象若是有了别名，则原有名无效，以下代码段

let {foo:abc,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);      //结果报错： foo is not defined
console.log(abc,bar);      //输出结果为：hello hi
复制代码

3. 字符串的结构赋值

let [a,b,c,d,e,length] = "hello";
console.log(a,b,c,d,e,length);    //输出结果为：h e l l o undefined
复制代码

let {length} = "hello";
console.log(length);              //输出结果为：5
复制代码

3.模板字符串

使用 反引号``(键盘上TAB上面那个键) 将整个字符串包裹起来，在里面使用 ${} 来包裹一个变量或者一个表达式

let a = 20;
let b = 30;
let string = `${a}+${b}=${a+b}`;
console.log(string);            //输出结果为：20+30=50
复制代码

let obj = {
    username : 'lisi',
    age : '12',
    gender : 'male'
}
let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';
console.log(tag);               //输出结果为：<div><span>lisi</span><span>12</span><span>male</span></div>
复制代码

4.参数默认值

function foo(param){
    let p = param || 'hello';
    console.log(p);
}
foo('hi');       //输出结果为：hi
foo();           //输出结果为：hello
复制代码

上述函数另外一种写法：

function foo(param = 'hello'){
    console.log(param);
}
复制代码

5.展开运算符...

1. 函数中使用展开运算符，以下代码段，输出结果为：1，2，[3,4,5]

function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);
}
foo(1,2,3,4,5);
复制代码

2. 数组中使用展开运算符

function foo(a,b,c,d,e,f,g){
    console.log(a + b + c + d + e + f + g);
}
let arr = [1,2,3,4,5,6,7];
//若要将arr传入foo函数中做为参数
//ES5中方法
foo.apply(null,arr);
//ES6中使用展开运算符
foo(...arr);
复制代码

以下代代码段，使用展开运算符合并数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);          //输出结果为：[1,2,3,4,5,6]
复制代码

6.箭头函数

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体。以下函数等价：

function foo(){
    console.log('hello');
}
//等价于
let foo = () => console.log('hello');
复制代码

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

// ES5
function add(a) {
    return a + 1;
};
// 使用箭头函数
let add = a => a + 1;
复制代码

箭头函数中this取决于函数的定义，而不是调用

function foo(){
    // 使用call调用foo时，这里的this其实就是call的第一个参数
    setTimeout(()=>{
        console.log(this.num);
    },100);
}
foo.call({num:1});
复制代码

7.类与继承class、extends、super

使用class来声明类名，extends继承父类，super继承父类的构造函数

class Animal{
    // 静态方法(静态方法只能经过类名调用，不能够使用实例对象调用)
    static showInfo(){
        console.log('hi');
    }
    // 构造函数
    constructor(name){
        this.name = name;
    }
    showName(){
        console.log(this.name);
    }
}
// 类的继承extends
class Dog extends Animal{
    constructor(name,color){
        super(name);       //super用来调用父类，super的调用必须在this以前，不然会报错
        this.color = color;
    }
    showColor(){
        console.log(this.color);
    }
}

let d = new Dog('doudou','yellow');
d.showName();            //输出结果为：doudou
d.showColor();           //输出结果为：yellow
Dog.showInfo();          //输出结果为：hi
复制代码

8.for...of和for...in

for...in 用于遍历数组和对象的索引或者key：

let arr = ['a', 'b', 'c'];
for (let index in arr) {
  console.log(index);
}
//输出结果为：0   1    2

let obj = {
    'name': 'zlx',
    'age': 21,
    'sex': '男'
};
for (let key in obj) {
  console.log(key);
}
//输出结果为：name   age    sex
复制代码

for...of 用来遍历数组中的每一项的值：

let arr = ['a', 'b', 'c'];
for (let value of arr) {
  console.log(value);
}
//输出结果为：a   b    c
复制代码