【JS】JavaScript ES6 的新东西 介绍~~~重要 非常重要~~~

jses6 这也是面试必问的东西了，里面的东西，在写项目的时候，都经常使用，比如 箭头函数、解构赋值、let和const、对象属性简写、延展运算符、模板字符串、模块化 ~~~~~~~ 等等

大概有下面这些~~~

1. 类
2. Promise
3. let 和 const
4. 对象属性简写
5. 延展运算符
6. 数组、对象 的解构赋值
7. 模板字符串
8. 函数参数默认值
9. 模块化
10. 箭头函数
11. ………………等等

1、类

        // 1、类
        class Person {
            // 首先是
            // 构造函数，实例化的时候 就会执行
            // 不写的话，也会执行一个空的
            constructor(name, age) {
                this.name = name
                this.age = age
            }
            // logAttr 是一个自定义的 方法
            logAttr() {
                console.log(`name:${this.name} age:${this.age}`);
            }
        }
        // 实例化一个 Person
        const person1 = new Person()
        console.log('输出person1', person1);// 初始化一个空的 Person，
        console.log(person1.__proto__); // constructor: class Person
        // 实例化的 一个 class ，它的对象原型，指向的是 实例化那个 的 class
        person1.name = '呆呆狗'
        person1.age = 21
        console.log('输出person1', person1);
        person1.logAttr()

        class Son extends Person {
            constructor() {
                super('呆呆狗1号', 20)// super 一定要放在 constructor  最前面

            }
            sonLog() {
                super.logAttr()// 这是通过 super 关键字，调用父类的方法
                console.log(this.name);// 因为我们使用了 extends 就可以使用父类的属性
                this.logAttr() // 这是通过 继承，来调用的父类的方法
            }
        }
        const Son1 = new Son()
        console.log('Son1', Son1);

2、Promise

Promise 是一个异步变成解决的方案， 更详细的 promise 后期会出一篇文章专门介绍的~~~

        const P = new Promise((resolve, reject) => {
            //  resolve 表示成功，reject 表示失败
            setTimeout(() => {
                resolve('成功了~~')
            }, 1000)
        })
        P.then((result) => {
            // 成功的回调
            console.log(result);
            // 一秒后 输出 成功了~~
        }, (err) => { })

3、let 和 const

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	变量不可提升	变量不可提升
值可更改	值可更改	值不可更改

注意 ，const 定义的变量，必须在定义的时候，就要赋值！，同时也要注意，如果 const 定义的是一个引用类型的数据，只要保证不修改它的 地址 就不会报错

4、对象属性简写

这个用的还是 不少的

const name='呆呆狗',age='21',city='青岛';
  
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "呆呆", age: "21", city: "青岛"}

5、延展运算符

        console.log('延展运算符');
        const arr1 = ['apple', 'line', 'brananer']
        console.log(...arr1);// apple line brananer
        const obj1 = {
            name: '呆呆狗',
            age: 20,
            address: "山东"
        }
        console.log({ ...obj1 });// {name: "呆呆狗", age: 20, address: "山东"}

6、 数组、对象 的解构赋值

        // 可以从数组中提取值，按照对应位置，对变量赋值。
        var arr2 = ['apple', 'line', 'brananer']
        var [apple, line, brananer] = arr2
        console.log(apple, line, brananer); // apple line brananer
        // 解构不到 就是 undefined

        var obj2 = {
            name: '呆呆狗',
            age: 21
        }
        var { name: newname, age } = obj2
        //对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
        // age 就是 直接 age ，没有做任何改动
        console.log(newname, age);//呆呆狗

7、模板字符串

const first = '呆'
const last = '狗呆'
const name = `Your name is ${first} ${last}.`
console.log(nameMubanzifuchuan);//Your name is 呆 狗呆.

8、 函数参数默认值

function foo(height = 50, color = 'red'){
    var height = height || 50;
    var color = color || 'red';
    //...
    // 调用的时候，不传值，就会 显示默认值
}
foo()

9、模块化

        export var name='呆呆狗'
        export function fn(){
            console.log('fn');
        }
        // export 可以导出 无数次，而 export default 只能导出一次
        export default {}

        // 导入的时候可以
        import Number from '某个.js文件'
        // Number.属性 就可以访问到了
        import Number as obj from '某个.js文件'
        // obj.属性

        import { 就是解构赋值，按需导入 } from '某个.js文件'