ES6及其之后的新特性详解-CSDN博客

  //不能重复声明，
    // let start = 1
    // let start = 2

    // 块级作用域
    // {
    //     let age = 18
    // }
    // console.log(age);

    // 不存在变量提升
    // console.log(a);
    // let a = 1

    // 不影响作用域链
    // {
    //     let age = 18
    //     function fn() {
    //         console.log(age);
    //     }
    //     fn()
    // }

const声明常量

必须有初始值，常量的值不能修改，块级作用域，操作空间地址不算重新赋值


    // 必须有初始值
    // const age = 18

    // 常量的值不能修改
    // age = 8

    // 块级作用域
    // {
    //     const age = 18
    // }
    // console.log(age);

    // 操作空间地址不算重新赋值
    // const arr = [1, 2, 3]
    // arr.push(4)

解构赋值

允许按照一定格式从数组和对象中提取值，对变量进行赋值

    // 数组的解构
    // let f4 = ['小沈阳', '刘能', '赵四', '宋小宝']
    // let [x, l, z, s] = f4
    // console.log(x, l, z, s);

    // 对象解构
    // let zhao = {
    //     name: '赵本山',
    //     age: '60',
    //     xiaopin: function () {
    //         console.log('我可以演小品');
    //     }
    // }
    // let { xiaopin } = zhao
    // xiaopin()

模板字符串

可以识别换行符，拼接变量

    let age = 18
    let str = `我今年${age}了`
    console.log(str);

对象的简化写法

kv 一致省略v 函数可以不写function

    let age = 18
    let name = 'jyc'
    let obj = {
        name,
        age,
        fn() {
            console.log(obj.age);
        }
    }
    obj.fn()

箭头函数

没有自己的this，this指向函数声明时所在作用域下this的值
不能作为构造函数
不能使用arguments
形参就一个值可以省略小括号，执行语句就一个值可以省略花括号和return

    // var age = 18
    // let obj = {
    //     age: 22
    // }
    // function getAge() {
    //     console.log(this.age);
    // }
    // let getAge1 = () => {
    //     console.log(this.age);
    // }
    // getAge()
    // getAge1()
    // getAge.call(obj)
    // getAge1.call(obj)


    // let fn = a => a + a
    // console.log(fn(1));

函数参数的默认值设置

允许函数参数赋初始值

   function add(a, b, c = 10) {
        return a + b + c
    }
    // console.log(add(1, 2));


    //与解构赋值结合
    function reqire({ host, userName, password, port = 8080 }) {
        console.log(host);
        console.log(userName);
        console.log(password);
        console.log(port);
    }
    reqire({
        host: ' 172.168.0.0.1',
        userName: 'root',
        password: 'root',

    })

rest参数

用于获取函数实参代替arguments


    // arguments es5伪数组
    // function data() {
    //     console.log(arguments);
    // }


    // rest参数必须要放到最后得到数组
    function data(a, b, ...args) {
        console.log(args);
    }
    data('小白', '小明', '小李', 1, 2, 3)//(4) ['小李', 1, 2, 3]

扩展运算符

合并浅克隆伪数组转数组

    //合并
    let a = [1, 2, 3]
    let b = [4, 5, 6]
    let arr = [...a, ...b]
    console.log(arr);

    //浅克隆
    let arr2 = [...arr]
    console.log(arr2);

    // 伪数组转数组
    function fn() {
        console.log([...arguments]);
    }
    fn('小白', '小明', '小李')

symbol

es6引入了一种新的原始值类型symbol，表示独一无二的值，

symbol是唯一的，用来解决命名冲突的问题，不能参与运算，不能使用for in 使用refice，ownkeys

主要用于给对象添加属性和方法

创建使用

    let game = {
        name: '俄罗斯方块',
        up: () => { },
        down: () => { }
    }
    let methods = {
        up: Symbol(),
        down: Symbol(),
    }
    game[methods.up] = function () {
        console.log('我可以改变形状');
    }
    game[methods.down] = function () {
        console.log('我可以下降');
    }
    console.log(game);

Symbol.hasInstance

当其对象用 instanceof，判断是否为该对象的实例时会调用这个方法

    class Person {
        static [Symbol.hasInstance]() {
            console.log('我被用来检测类型');
            return true
        }
    }
    let o = {}
    console.log(o instanceof Person); //true

Symbol.isConcatSpreadable

等于的是一个布尔值，表示Array.prototype.content（）时是否可以展开

    let arr1 = [1, 2, 3]
    let arr2 = [4, 5, 6]
    arr1[Symbol.isConcatSpreadable] = false
    let arr = arr1.concat(arr2)
    console.log(arr);//(4) [Array(3), 4, 5, 6]

迭代器 iterator

迭代器是一种接口，为各种不同的数据结构，提供统一的访问机制，任何数据结构只要部署了iterator接口就可以完成遍历操作

es6创造了一种新的遍历命令 for...of.. iterator接口主要提供 for...of..消费

具备iterator接口的数据 array ，arguments，set map string typeArray NodeList

工作原理

创建一个指针对象，指向当前数据结构的起始位置，
第一次调用对象的.next方法，指针自动指向数据结构的第一个成员
接下来不断调用.next方法，指针一直往后移动，直到指向最后一个成员
每次调用next方法，返回一个包含value和done属性的对象

    let arr = [10, 20, 30]

    let iterator = arr[Symbol.iterator]()//一个函数 得到一个对象 
    console.log(iterator);//得到一个对象 ，有一个next方法（指针）