ES6-ES11

let 变量申明
1.变量不能重复声明
2.块级作用域（1.全局，函数，eval（es5的严格模式下））
if else while for 循环语句声明的都存在块级作用域
3.不存在变量提示
4.不影响作用域链

const 定义常量
1.一定要赋初始值
2.一般常量使用大写（潜规则）
3.常量的值不能修改
4.块级作用域
5.对于数组和对象的元素修改，不算对常量的修改，不会报错

ES6允许按照一定模式从数组和对象中提取值，对变量就行赋值，这被称为解构赋值
1.数组的结构
const F4 = [‘zhangsan’,‘lisi’,‘wangwu’]
let [z,l,w] = F4;
2.对象的结构
const zhao ={
name:‘zhangsan’，
age:‘14’,
sayName:function(){
console.log("my name is zhangsan ")
}
};
let {name ,age ;sayName}=zhao;

模板字符串（``）
1.声明
let str = 我是一个字符串
console.log(typeof str) //string
2.特性：
内容中可以直接出现换行符
变量拼接
let a = 'zhangan ’
lat b = ${a} is my name

可选链操作符（？.）
function main(config){
//const dbHost = config && config.db && config.db.host
const dbHost = config?.config.db?.config.db.host
//判断前面的值有没有传入 前面有 读取后面的选项 避免层层嵌套 而且也不会报错
console.log(dbHost)
}

     main({
         db:{
             host:'192.168.1.100',
             username:'root'   
         },
         cache:{
             host:'192.168.1.200'
             username:'admin'
         }
     })   

箭头函数（es6允许使用箭头定义函数）
1.this是静态的，this始终指向函数声明时所在作用域下this的值
2.无法通过call和apply来改变指向，指向的是申明时的
3.无法作为构造函数实例化对象
4.不能使用argument变量
5.箭头函数的简写
（1）省略小括号，当形参有且只有一个的时候
（2）省略花括号，当代码体只有一条语句的时候，此时return必须省略 而且语句的执行结果就是函数的返回值
注:箭头函数适合于this无关的回调，定时器，数组的方法回调
箭头函数不适合于this有关的回调，事件回调，对象的方法

参数默认值
1.形参的初始值,具有默认值的参数，位置一般要靠后（潜规则）
function add(a,b,c=10){
return a + b + c;
}
2.与结构赋值结合
function connect(host=‘127.0.0.1’,username,password,port){

    }
    connect({
        host:'localhosst',
        username:''root',
        password:'root',
        port:3306
    })

扩展运算符（…）
能够将数组转化为逗号分隔的参数序列
const student =[‘zhangsan’,‘lisi’,'wangwu ']
function school(){
console.log(arguments);
}
school(student);

应用 
    数组的合并
        const kuazi = ['肖央','王太利'];
        const chuanqi = ['曾毅','玲花'];
        // es5
        //  const zuixaunapple =kuazi.concat(chuanqi);
        // es6
        const zuixaunapple = [...kuazi,...chuanqi]
        console.log(zuixaunapple);
   
    数组的克隆（浅拷贝:只拷贝引用地址=>针对引用类型）       
    const  sanzhihua = ['e','g','m'];
    const sanyecao   = [sanzhihua];
    console.log(sanyecao.prototype===  sanzhihua.prototype)//true
    console.log(sanzhihua==sanyecao) //false

    将伪数组转为真正的数组
    const divs = document.querySelectorAll('div');
    const divArr = [...divs];
    console.log(divArr)//arguments

Symbol基本使用
es6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
Symbol特点
1.symbol的值是唯一的，用来解决命名冲突的问题
2.symbol值不能与其他数据进行运算
3.symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
1.创建symbol
let s = Symbol();
console.log(s,typeof s);//Symbol() symbol

        let a = Symbol('123');
        let b = Symbol('123');
        console.log(a,typeof a);//Symbol(123) symbol
        console.log(a===b);//false

        let c = Symbol.for('123');
        let d = Symbol.for('123');
        console.log(c,typeof c);//Symbol(123) symbol
        console.log(c===d);//true
        
     2.向对象内添加方法

            let  game = {
            up:function(){
                console.log('up')
            },
            down:function(){
                console.log('down')
            },
            minddle:function(){
                    console.log('middle')
                }

            }


            let methods={
                up:Symbol(),
                down:Symbol(),
            }

            game[methods.up]=function(){
                console.log('上')
            }
            game[methods.down]=function(){
                console.log('下')
            }
            console.log(game);  
            //{
                up: [Function: up],
                down: [Function: down],
                minddle: [Function: minddle],
                [Symbol()]: [Function (anonymous)],
                [Symbol()]: [Function (anonymous)]
                }
    
    3.Symbol内置值
        除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法
            Symbol.hasInstance                  当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这和个方法
            Symbol.isconcatSpreadable           对象的Symbol.isconcatSpreadable属性等于是一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开
            Symbol.unscopables                  该对象指定了使用with关键字时，哪些属性会被with环境排除
            Symbol.match                        当执行str.match（myObject）时，如果该属性存在，会调用它，返回该方法的返回值
            Symbol.replace                      当该对象被str.replace(myObject)方法调用时，会返回该方法的返回值
            Symbol.search                       当该对象呗str.search(myObject)方法调用时，会返回该方法的返回值
            Symbol.split                        当对象被str.split（myObject）方法调用时，会返回该方法的返回值
            Symbol.iterator                     当对象进行for...of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
            Symbol.toPrimitive                  当对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值
            Symbol.toStringTag                  在该对象上面调用toString方法时，返回该方法的返回值
            Symbol.species                      创建衍生对象时，会使用该属性    

    4.迭代器（iterator就是对象内部的一个属性）
        迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署iterator接口，就可以完成遍历操作
            1）ES6创造了一种新的遍历命令for...of循环，iterator接口主要供for...of消费
            2）原生具备iterator接口的数据（可用for of遍历）
                Array     
                Arguments
                Set
                Map
                String
                TypedArray
                NodeList
            3）工作原理    
                a)创建一个指针对象，指向当前数据结构的起始位置
                b)第一次调用对象的next方法，指针自动指向数据结构的第一个成员
                c)接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
                d)每调用next方法返回一个包含value和done属性的对象
                    注：需要自定义遍历数据的时候，要想到迭代器

    5.迭代器的一个应用 (对对象的一种遍历)               
        const banji = {
            name: '终极一班',
            stus: [
                'xiaoming',
                'xiaoning',
                'xiaotian',
                'knight'
            ],
            [Symbol.iterator]() {
                // 索引变量
                let index = 0;
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.stus.length) {
                            const result = { value: _this.stus[index], done: false }
                            // 下标自增
                            index++;
                            return result
                        }
                        else {
                            return { value: 'undefiend', done: true }
                        }


                    }
                }
            }
        }
        // 遍历这个对象的学生
        // for(let v of banji){
        //     console.log(v);
        // }          //banji is not iterable

        // banji.stus.foreach()  可以遍历
        for (let v of banji) {
            console.log(v)
        }
    
    6.生成器
        生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
1).Promise构造函数：Promise(excutor){}
2).Promise.prototype.then 方法
3).Promise.prototype.catch方法

调用then方法，then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定
    1.如果回调函数中返回的结果是非promise 类型的属性，状态为成功，返回值为对象的成功值
    2.返回值是一个promise对象，内部返回promise的状态就决定你then方法返回promise的状态
    3.抛出错误（throw new Error('出错'），也是rejected类型

链式调用(改变我们之间回调地狱的问题)
    p.then(value=>{}).then(value=>{}).then()

调用catch方法    

Promise.allSettled
    这个方法接受一个Promise数组，返回结果是一个Promise对象，返回结果永远是成功的一个状态，里面的值是数组内每个promise的结果

Set
    ES6提供了新的数据结构Set(集合)。它类似于数组，但成员的值都是唯一的，集合实现literator接口，所以可以使用扩展运算符和for...of进行遍历集合的属性和方法    
        1) size   返回集合的元素个数
        2）add    增加一个新元素，返回当前集合
        3) delete 删除元素，返回boolean值
        4) has    检测集合中是否包含某个元素，返回boolean

Map
    Es6提供Map数据结构，它类似于对象，也是键值对的集合。但是'键'的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map也实现了iterator接口，所以可以使用扩展运算符和for...of进行遍历。Map的属性和方法       
        1)size     返回Map的元素个数
        2)set      增加一个新元素，返回当前map
        3)get      返回键名对象的键值
        4)has      检测map中是否包含某个元素，返回Boolean值
        5)clear    清空集合，返回undefined  

Class类
Es6提供了更接近传统语言的写法，引入了class类的概念，作为对象的模板。通过class关键字，可以定义类，基本上，ES6的class可以看作只是一个语法糖，它的绝大部分
功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰，更像面向对象编程的语法而已
知识点：
1)Class声明类
2)constructor定义构造函数初始化
3)extends继承父类
4)super调用父级构造方法
5)static定义静态方法和属性
6)父类方法可以重写

模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小的文件组合起来
模块化的好处
1)防止命名冲突
2)代码复用
3)高维护性
代码规范的产品
1)CommonJS =>NodeJS Browerify
2)AMD =>requireJS
3)CMD =>seaJS
ES6模块功能只要由两个命令构成：export和import
export命令用于定义规定模块的对外接口
import命令用于输入其他模块提供的功能
1.通用的导入方式
import * as m1 from “./src/js/m1.js”
2.解构赋值形式
import {school,tacher} from “./src/js/m1.js”
as可以对名称进行重命名
3.简便形式 针对默认暴露
import m3 from “./src/js/m3.js”
分别暴露 统一暴露 默认暴露

可选链操作符（？.)             
  function main(config){
        //const dbHost = config && config.db && config.db.host
          const dbHost = config?.config.db?.config.db.host  
          //判断前面的值有没有传入 前面有  读取后面的选项  避免层层嵌套  而且也不会报错
        console.log(dbHost)
    }

     main({
         db:{
             host:'192.168.1.100',
             username:'root'   
         },
         cache:{
             host:'192.168.1.200'
             username:'admin'
         }
     })