16-JavaScript-ES6语法

ES6常量和变量关键字

• ES6定义变量

let num;
let num = 666;

注意点:
ES6开始新增了一种作用域, 叫做代码块
通过let定义的变量受到代码块的限制, 只能在所属的作用域中使用
使用var定义变量会预解析,但是let定义变量不会预解析

//ES6代码块
    {
        const num = 888;
    }

    console.log(num);//报错,访问不到代码块内部变量

• 定义常量

const num = xxx;

注意点:
1.常量不能修改
2.常量必须在定义的同时初始化
3.常量的指向不能改变, 但是指向内存中保存的数据可以改变

    const arr = [1,3];
    // arr = [2,4]; //数组的指向不能改变
    arr[0] = 666; //数组内部元素可以更改
    arr.push(777);

---

ES6字符串模板

• ES6中新增一种字符串模板的方法

    需求: 要求从服务器获取到数据之后, 根据数据渲染界面

    //ES6之前需要做字符串拼接
    var obj = {
        name: "lnj",
        age: 13,
        gender: "male",
        say: function () {
            return "hello world";
        }
    };
    //之前需要进行字符串拼接
    var str  = "<li>"+obj.name+"</li><li>"+obj.age+"</li><li>"+obj.gender+"</li>";

    //ES6之后不需要字符串拼接,使用字符串模板
    var str = `
        <li>${obj.name}</li>
        <li>${obj.age}</li>
        <li>${obj.say()}</li>
    `;
    var oUl = document.querySelector("ul");
    oUl.innerHTML = str;

字符串新增方法

• includes()方法
  includes()判断是否包含指定的字符串,存在返回true

    var str = "http://www.it666.com/images/lnj.mp4";
    //includes()判断是否包含指定的字符串,存在返回true
    //存在兼容性问题
    let res = str.includes("it");
    console.log(res);

• startsWith()方法
  判断字符串是否以指定字符串开头
• endsWith()方法
  判断字符串是否以指定字符串结尾

    var res1 = str.startsWith("http://");
    console.log(res1);
    var res2 = str.endsWith(".mp4");
    console.log(res2);

---

ES6解构语法

解构数组

• 数组解构方法

     var arr = [1, 3, 5];
    // 解构数组会依次将数组中的内容赋值给等号左边[]中的变量
    let [a, b, c] = arr;
    console.log(a,b,c);

注意点:
如果等号右边的数组和等号左边的内容不对等, 那么没有的就是undefined

let [a,b,c] = [1,3];
console.log(a, b, c);

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

    //在指定默认值后,解构时候不重新赋值,就是默认值
    let [num1 = 777,num2,num3] = [,2,3];
    console.log(num1);//777
    console.log(num2);//2
    console.log(num3);//3

解构对象

    let obj = {
        name: "lnj",
        age: 13
    };

    // 会将对象中和属性名称和解构中变量名称一致的赋值给解构的变量
    //找不到对应的变量名称就不打印
    let {name,age} = obj;
    console.log(name, age);

    //解构的同时也可以指定默认值
    let {name,age, score = 58} = obj;
    console.log(name,age,score);

• 解构对象应用
  • 利用解构对象传参

    let obj = {
        name: "lnj",
        age: 13
    };
    //利用解构对象传参
    function say({name,age}) {
        console.log(name, age);
    }
    say(obj);
  

---

ES6函数默认参数

• ES6开始函数的参数可以直接指定默认值

function say(name = "wjh",age = -1) {
        console.log(name, age);
}
say();

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

    function Car(id) {
        this.id = id;
    }
    function createCar(id = getRandom()) {
        return new Car(id);
    }
    function getRandom() {
        return Math.random() * 10000;
    }

---

ES6可变参数

• 可变参数必须在参数列表的最后

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

        //可变参数本质就是一个数组保存传入的参数
        console.log(ags);

        return sum;
    }

    var res = sum(1,2,3,4);
    console.log(res);

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

//需求: 把数组中的元素逐个传入到函数中
    function sum(a, b, c, d) {
        return a + b + c + d;
    }
    var arr = [1 , 2, 3, 4];

    // 可变参数会将数组中的元素逐个取出来赋值给形参
    let res = sum(...arr);
    console.log(res);

• 可变参数可以实现数组拼接

    var arr1 = [1, 3, 5];
    var arr2 = [2, 4, 6];

    var res = [...arr1,...arr2];
    console.log(res);

---

ES6箭头函数

• 箭头函数的格式
  let 函数名称 = (形参列表) => {函数体}
• 箭头函数作用:
  简化代码
  修改函数中的this指向

注意点:
如果函数体中只有一句代码, 那么{}可以省略
如果函数形参列表中只有一个形参, 那么()可以省略
如果函数体中只有一句代码, 并且是返回值, 那么return可以省略

    //如果函数体中只有一句代码, 那么{}可以省略
    let say = () => console.log("haha");
    say();

    // 如果函数形参列表中只有一个形参, 那么()可以省略
    let say = name => {
        console.log(name);
    };

    say("jiajia");

    //如果函数体中只有一句代码, 并且是返回值, 那么return可以省略
    let sum = (a,b) => {
        return a + b;
    };

    let sum = (a,b) => a + b;
    var res= sum(110,20);
    console.log(res);

• 利用箭头函数解决this指向问题

    /*
    1.由于Person构造函数也是一个函数, 所以也会开启一个作用域
    2.由于箭头函数是在Person构造函数的作用域中定义的, 所以数据Person构造函数作用域
    3.箭头函数也是一个函数, 所以也会开启一个作用域
    4.在箭头函数中使用this时, 会从所在的作用域链的上一层继承this

    应用场景:
    1. 让setTimeout/setInterval中的this变为我们想要的this
     */

    function Student() {

        setInterval(() => {
            // 2. ES6的箭头函数中, 没有this这个概念
            // 它会从所在的作用域链的上一层继承this
            console.log(this);
        },1000);

    }

    var stu = new Student();

    // 注意点:
    // 箭头函数中不能使用arguments
    let test = () => {
        console.log(arguments);
    };
    test(1, 3, 5);

---

ES6增加对象字面量

• 在ES6中,如果对象中的key和value相同,可以省略,只写一个变量名称

function createPerson(name, age) {
        var obj = {
            // name: name,
            // age: age,
            // say: function () {
            //     console.log(this.name, this.age);
            // }
            name,
            age,
            //函数可以省略function
            say() {
                console.log(this.name, this.age);
            }
        };
        return obj;
    }
    var p = createPerson("zq", 34);
    console.log(p);
    p.say();

---

ES6中的类

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

// 代表定义一个名称叫做Person的类, 将来可以通过这个类创建对象

    //定义一个Person类
    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("zq",77);
    p.say();
    Person.eat();

---

ES6对象继承

• ES6中新增的继承方法
  1.在子类后面添加extends 类名
  2.利用super将父类的属性传递给子类

    //定义父类
    class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){
            console.log(this.name, this.age);
        }
    }

    // 定义子类
    // 在子类后面添加extends 父类名
    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 stu = new Student("wjh",19,23.4);
    stu.eat();
    stu.say();