js基本知识点 —— ES6的部分知识讲解

一、ES6 类的书写

          class Stu {
            // 构造器, 类似于 ES5 构造函数的函数体
            constructor(num) {
                this.name = '张三'
                this.age = num
            }

            // 接下来的位置全都是 原型的书写位置
            init() {
                console.log('原型上的 init 方法')
            }

            abc() {
                console.log('原型上的 abc 方法')
            }

            move() {
                console.log('原型上的 move 方法')
            }
        }

        const s1 = new Stu(18)
        console.log(s1)
        const s2 = new Stu(168)
        console.log(s2)
        s1.init()
        s2.move()

        const s3 = new Stu(99)
        console.log(s3)
        s3.abc()

• ES5 构造函数的问题:
  • 1. 构造函数 不加 new 也能使用, 只是没有意义
  • 2. 构造函数与原型上的内容 需要分开书写

二、ES6 模板字符串、 展开运算符 、对象简写语法

1.模板字符串

• 在 ES5 中要么是 单引号包裹' '要么是双引号包裹" "
• 而 ES6 中推出的 模板字符串是 使用 ``反引号包裹的
• 和之前的区别?
  • 1. 反引号能够换行, 但是单引号双引号不行
  • 2. 内部如果书写的 有${} 然后在内部可以识别出变量

2. 展开运算符

• 在 ES6 推出了展开运算符 ... 够展开数组 或者 对象

        // 2.0 展开数组
        let arr = [1, 2, 3]
        console.log(arr)    //[1, 2, 3]
        console.log(...arr)

       // 2.1 合并数组
            let arr2 = [...arr, 100, 101, 102]
            console.log(arr2)

       //2.2 函数传参
            function fn(a, b, c) {
                console.log('fn 函数的 形参: ', a, b, c)
            }
            fn(arr[0], arr[1], arr[2])
            fn(...arr)

       // 2.3 展开对象
            let obj = {
                a: 1,
                b: 2
            }
            // console.log(...obj)  这个代码不符合语法规范
        只能添加在对象内使用
        let obj2 = {
            ...obj,
            c: 100,
            d: 200
        }
        console.log(obj2)

3.对象的简写语法

1. 当对象的 key 与 value 相同的时候, 并且 value 是一个变量，那么可以省略其中一个不写
2. 对象内有函数，可以直接写 fn1() { }

       let name = '张三'
        let obj = {
            // name: '张三'
            // name: name
            name,
            age: 100,
            fn: function () {
                console.log('我是对象obj 属性 fn 的属性值')
            },
            fn1() {      //函数的简写
                console.log('我是 fn1 函数')
            }
        }

        // console.log(obj)
        obj.fn()
        obj.fn1()