ES6补充

常变量关键字

• 定义变量,常量

//不会覆盖, 并且不允许重复定义
//let定义的变量不会预解析
console.log(num);
let num;
const num = 666;

• ES6开始新增了一种作用域, 叫做代码块
• 通过let定义的变量受到代码块的限制, 只能在所属的作用域中使用
• 注意点:
  • 常量不能修改
  • 常量必须在定义的时候初始化
  • 常量的指向不能改变,但指向内存中的数据可以改变

const arr = [1, 2];
//arr = [2, 4]; //报错
arr[0] = 666;
arr.push(777);
console.log(arr); //666,2,777

---

字符串模板

• 添加字符串

var str = `
<li>${obj.name}</li>
<li>${obj.age}</li>
<li>${obj.say()}</li>
`
oUl.innerHTML = str;

• 新增字符串想关方法

var str = "www.hate996.com";
var res1 = str.includes("996");
var res2 = str.startsWith("www");
var res3 = str.endsWith("com");

---

解构数组和对象

数组

• 依次将数组中的内容赋值给等号左边[]中的变量

var arr = [1, 2, 3];
//a=1, b=2, c=3
let [a, b, c] = arr;

• 如果等号右边的数组和等号左边的内容不对等,没有的就是undefined

//a=undefined,b=2,c=undefined
let [a, b, c] = [, 3, ];

• 解构数组的时候,可以指定默认值

//a=666,b=2,c=undefined
let [a=666, b, c] = [, 2, ];

对象

• 会将对象中和属性名称和解构中变量名称一致的赋值给解构的变量

let obj = {
    name: "yz",
    age: 18
};
<!--name=yz,age=18,gender="male"-->
let{name, age, gender="male"} = obj; 

• 应用场景

//简化代码
let obj = {
    name: "yz",
    age: 18
};
say(obj);
function say({name, age}){
    console.log(name, age);
}

• 高级使用

var arr = [
    {name:"yz", age:18},
    {name:"zx", age:15},
    {name:"zx", age:10},
];
let [{name},{age}] = arr;
//name=yz,age=15
console.log(name, age);

---

函数的默认参数

function sat(name = "yz", age = -1){
    console.log(name, age);
}
<!--name=yz,age=-1-->
say();

• 应用场景

某一个函数的某些参数永远都是一些固定的值,获取用于都是通过其它函数获得的,那么就可以使用默认参数

function Car(id){
    this.id = id;
}
function creatCar(id = getRandom()){
    return new Car(id);
}
function getRandom(){
    return Math.random() * 10000;
}
var c1 = creatCar();
console.log(c1);

---

扩展运算符

• 可变参数的注意点:可变参数必须在参数列表的最后

function sum(a, ...ags){
    //a=10,ages=arr(2)
    console.log(a, ags);
    var sum = 0;
    for(var i = 0, len = ags.length; i < len; i++){
        sum += ags[i];
    }
    return sum;
}
//50
console.log(sum(10, 20, 30));

• 会将数组中的元素逐个取出来赋值给形参

    var arr = [1, 2, 3, 4, 5];
    var res = sum(...arr);
    console.log(res); //15

    function sum(...ags){
        var sum = 0;
        for(var i = 0, len = ags.length; i < len; i++){
            sum += ags[i];
        }
        return sum;
    }

• 合并数组

var arr1 = [1, 3, 5];
var arr2 = [2, 4, 6];
//ES6之前:
//var res = arr1.concat(arr2);
var res = [...arr1, ...arr2];
//[1, 2, 3, 4, 5, 6]
console.log(res);

---

箭头函数

• 格式:
  • let 函数名称 = (形参列表) => {函数体}
• 作用:简化代码,修改函数中的this
• 注意点:
  • 如果函数体中只有一句代码, 那么{}可以省略
  • 如果函数形参列表中只有一个形参, 那么()可以省略
  • 如果函数体中只有一句代码, 并且是返回值,那么return可以省略

let say1 = () => console.log("hello");
let say2 = name => console.log(name);
let num = (a, b) => a + b;

this

• ES6没有this这个概念,会从所在的作用域链的上一层继承this
• 应用场景:让setTimeout/setInterval中的this变为我们想要的this

//ES6之前
setTimeout(function () {
    console.log(this);// window
}, 1000);
//ES6之后
setTimeout(()=>{
    console.log(this); // Person
}, 1000);

    function Student() {
        this.age = 666;
        // this.say = function () {
        //     // 谁调用就是谁
        //     // 可以被call/apply/bind方法修改
        //     console.log(this);
        // }
        this.say = ()=>{
            // 从上一级的作用域继承
            // 不可以被call/apply/bind方法修改
            // 因为箭头函数自己没有this
            // 因为箭头函数中的this只看定义, 不看调用
            console.log(this);
        }
    }
    var stu = new Student();
    stu.say();
    // stu.say.call({name:"zs"});

• 箭头函数中不能使用arguments

let test = () => console.log(arguments);
test(1, 3, 5);//报错

---

增加对象字面量

function creatPerson(name, age){
    var obj = {
        name,
        age,
        say(){
            console.log(name, age);
        }
    }  
    return obj;
}
var p = creatPerson("yz", 18);
p.say();

---

ES6的类

• ES6开始提供了一个关键字, 专门用于定义类 class

class Person{
    // 构造函数, 创建对象时系统会默认执行
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name, this.age);
    }
    static eat(){
        console.log("吃饭");
    }
}
let p = new Person("zx", 18);
p.say();
p.eat();

---

ES6的继承

• 在子类后面添加extends 类名

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(this.name, this.age)
    }
}
class Student extends Person{
    constructor(name, age, score){
        //利用super将父类的属性传递给父类
        super(name, age);
        this.score = score;
    }
    eat(){
        console.log("吃饭");
    }
    //在ES6中,可以重写父类的方法
    say(){
        console.log(this.name, this.age, this.score);
    }
}
let s = new Student("zx", 18, 99);
s.eat();
s.say();