解构赋值、迭代器一、解构赋值：解析数据结构，并对变量进行赋值，用于数组和对象解构赋值：对象的变量与属性必须同名解构

一、解构赋值：解析数据结构，并对变量进行赋值，用于数组和对象

    let arr=['red','blue','yellow']
    let object = {
        name:'张三',
        age:25,
        sex:'男'
    }

解构赋值：

对象的变量与属性必须同名

    let [a,b,c] = arr
    console.log(a,b,c)  // red blue yellow
    let {name,age,sex} = object
    console.log(name,age,sex)  // 张三 25 男

解构赋值

数组

    let arr = [20,25,15,30]
    function fn([a,b,c,d]){
        // return arr[0]+arr[1]+arr[2]+arr[3]
        return a+b+c+d // 90
    }
    fn(arr)

对象

    let object = {
        name:'张三',
        age:25,
        sex:'男'
    }
    function fn(options){
        let {name,age,sex} = options
        // optipns.name + options.age + options.sex
        console.log(name + age + sex) //张三 25 男
    }
    fn(object)

默认值

双重默认值：不传参即可执行函数

    let obj = {
        a:123,
        b:456,
        c:789
    }
   
    function fn({a=1,b=2,c=3} = {}){
        console.log(a,b,c)
    }
    fn() //123

{ a=1,b=2,c=3 }：形参默认值是1，2，3
{ }：实参默认值是空对象
{ a=1,b=2,c=3 } = { }：解构赋值

运算符：`...`（展开/rest）

...可以将部署了iterator迭代器的数据展开为逗号隔开的参数序列
使用：字符串、数组、类数组对象（元素集合、arguments）、Set、Map

对象没有部署迭代器，不能使用展开运算符

    let lis=document.querySelectorAll('li')
    console.log(...lis) // 所有li节点

    let arr = [20,15,10,25]
    function fn(...arr){ // rest运算符
        console.log(...arr) //展开运算符
    }
    fn(...arr) //展开运算符

    let arr = [20,15,10,25]
    let obj = {
        name:'张三',
        age:25,
        sex:'男'
    }
    let [a,b,...c] = arr
    let {name,...age} = obj
    console.log(a,b,c) //25 15 [10,25]
    console.log(name,age) //张三 {age:25,sex:男}

二、Generator函数(迭代器)

语法
- 在function关键字和函数名之间有一个星号*
- 在Generator函数内部可以使用yield关键字来产出一个值（暂停执行）

定义

Generator函数是ES6提供的一种异步编程解决方案
Generator函数也称为迭代器生成函数，执行后返回一个迭代器对象
Generator函数提供了一种函数暂停执行的机制（状态机）

    function * fn(){
        console.log( '任务1' );
        yield 123;
        console.log( '任务2' );
        yield 456;
        console.log( '任务3' );
        yield 789;
    }
    let res = fn()
    console.log( res );// fn {<suspended>} 迭代器对象

迭代器对象的原型上有一个next方法，执行后返回一个对象

{value: 123, done: false}

value：是Generator函数内部yield产出的值
done：表示是否执行完成的标志

    console.log( res.next() );// {value: 123, done: false}
    console.log( res.next() );// {value: 456, done: false}
    console.log( res.next() );// {value: 789, done: false}
    console.log( res.next() );// {value: undefined, done: true}

对象部署迭代器:`[Symbol.iterator]`

可遍历
可使用...运算符

    let obj = {
       name:'张三',
       age:25,
       sex:'男'
   }

    obj[Symbol.iterator] = function * (){
        //this -> obj
        let keys = Object.keys(this) 
        for(let i in keys){
            // yield keys[i] //1.键
            // yield this[keys[i]] //2.值
            yield [ keys[i] , this[keys[i]] ] //3.键值
        }
    }
    console.log(...obj) //1.name age sex
    console.log(...obj) //2.张三 25 男
    console.log(...obj) //3. ['name', '张三'] ['age', 25] ['sex', '男']

三、Symbol: 表示独一无二的值（唯一的值）

传统方式无法遍历、读取

    let obj = {
        name:'张三',
        age:25,
        [Symbol('sex')]:'男',
        [Symbol('hobby')]:'游戏'
    }
    console.log(obj[Symbol('hobby')]) //undefined
    for(let i in obj){ console.log(i)} //name  age

获取，修改Symbol

    let arr = Object.getOwnPropertySymbols(obj)
    console.log(...arr) //Symbol(sex) Symbol(hobby)
    console.log(obj[arr[0],obj[arr[1]) //男 游戏
    obj[arr[0]] = '女'
    console.log(obj[arr[0]) //女

Symbol函数有一个iterator属性，值为一个Symbol值

Symbol.iterator = Symbol('Symbol.iterator') 
console.log( Symbol.iterator )// Symbol(Symbol.iterator)

创建同一个Symbol值

   let s3 = Symbol('name');
   let s4 = Symbol('name');
   console.log( s3 , s4);// Symbol(name),Symbol(name)
   console.log( s3 === s4 );// false

    let s5 = Symbol.for('age');// 创建一个Symbol值，标识符为'age'
    let s6 = Symbol.for('age');// 返回上次创建的标识符为'age'的Symbol值
    console.log( s5 , s6 );// Symbol(age),Symbol(age)
    console.log( s5 === s6 );// true

四、Class

类

function

    //1.构造函数
        function Cat(name,color){
            this.name = name,
            this.color = color
        }
    //2.原型上的方法  实例对象共享
        Cat.prototype.skill = function(){
            console.log('skill...')
        }
    //3.静态/类的方法、属性  (Cat)
        Cat.say = function(){
            console.log('喵喵')
        }
        Cat.abc = 123

继承

    function Dog(food){
        //this -> Dog实例对象
        this.food = food 
        //1.构造函数继承
        Cat.call(this,name,color) //(Cat this -> Dog)
    }
    //2.原型方法继承  Dog.constructor -> Cat
    Dog.prototype = Object.create(Cat.prototype)
    //3.指正构造器
    Dog.prototype.constructor = Dog  // Dog.constructor -> Dog

class

    class Cat{  //类体  不是对象
        //1.构造函数
            constructor(name,color){
                this.name = name,
                this.color = color
            }
        //2.原型上的方法
            skill(){
                console.log('skill...')
            }
        //3.静态/类的方法、属性(Cat)
            say(){
                console.log('喵喵')
            }
            abc = 123
    }

继承

     class Dog extends Cat{  
         //1.构造函数继承  必须先调用super()
         constructor(name,color,food){
             super(name,color) //相当于Cat.call(this) 
             this.food = food
         }
         //2.原型方法继承
         skill(){
             super.skill()
         }
     }

五、Web Worker 多线程技术

处理高耗时、高延迟、高强度等任务
必须在服务环境下运行

不能操作DOM、BOM,但ajax navigator location等对象可以使用

    //worker.html
    
    //1.创建worker 需要传入js的路径
        let worker = new Worker('./worker.js')
    //2.发送消息
        btn.onclick = function(){
            worker.postMessage('开始工作')
        }
    //3.接收worker消息
        worker.onmessage = function(e){
             dom.innerHTML = e.data //高强度计算代码 sum
        }   
    //4.关闭worker线程
        worker.terminate()

    //workeer.js
    
    //1.接收主线程消息
        onmessage = function(e){
            let sum = 0
            if(e.data === '开始工作'){
                //高强度计算代码 
                for(let i=0;i<4000000000;i++){
                    sum+=i
                }
            }
        }
    //2.发送消息
        postMessage(sum)
    //3.关闭worker线程
        close()

解构赋值、迭代器