ES6 简介

一、说明

ECMAScript6    新的javascript标准

二、变量声明

var let  const

1、var 

1. 作用域范围是函数作用域或全局作用域的。

2. 不受暂存死区（TDZ）的限制。

3. 它会在 window 上以相同的名称创建一个全局属性。

4. 是可重新分配的。

5. 是可重新声明的。

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

2、let 

1. let与var 基本一致，用作变量声明
2. let在一对{}中形成局部作用域
3. let 声明的变量不会变量提升
4. let 不能重复声明变量（同一作用域）

    // 单击li alert弹出下标
    // 选择到所有的li标签
    var lis = document.querySelectorAll("ul li")
    // 遍历弹出下标 
    for (let j = 0; j < lis.length; j++) {
        lis[j].onclick = function () {
            alert(j)
        }
        // var 声明的变量 for循环在单击的时候已经执行完毕，执行完毕的j就是5
        // let 声明局部作用域  （与for循环的局部作用域互不影响的）
        // lis[j].onclick=function....代码在局部作用域中执行，就可以读取到当前局部作用域j
    }

3、 const

1. 与let 一致（局部，不提升，不能重复声明）
2. 声明必须赋值
3. 赋值不能修改（值类型）
4. 建议大写

<script>
    // 1、和let基本一致（局部，不会变量提升，不能重复声明）
    // 2、声明必须赋值
    // Uncaught没有捕捉到SyntaxError 语法错误
    // const PI
    const PI = 3.1415926
    console.log(PI);
    // 3声明的数据不能修改（值类型）
    // PI=3.14
    const PERSON = {
        name: "mumu",
        age: 18
    };//引用类型常量
    PERSON.age = 24;
    // 引用类型只要不是重新赋值，都是引用同一块内存地址
    // PERSON={}
    console.log(PERSON);
    // 4 建议变量名大写

</script>

三、数据解构

1. 数组解构：把数组解析为单个变量
2. 通过逗号跳过
3. ...接收剩余值（不定参）

• ...接收剩余值（不定参）

   //并不确定函数的参数是几个（定义函数的时候）
    //...变量名  接收所有的参数列表
    function add(...args) {
        var total = args.reduce((a, b) => a + b);
        console.log(total);
    }
    add(2, 3);
    add(1, 2, 5)

• 可以给默认值

   //可以给默认值
    let arr2 = [1, 2, 3, 4];
    let [d, e, f, g = 88] = arr2; //如果g为undefined,则g=88
    console.log(d, e, f, g);

• 快速交换变量

    //可以交换变量
    var k = 100;
    var j = 50;
    [k, j] = [j, k];

四、字符串

1、遍历  for of

2、查找

1. includes 是否包含
2. starsWith 以...开头
3. endWith 以..结尾

3、补齐

1. padStart（len，symbol）
2. padEnd（len,symbol）

4、去空白

1. trim 两端
2. trimLeft 左端
3. trimeright 右端

五、数组

（1）sort 排序

<script>
    let arr1 = [1, 12, 15, 33, 7, 9];
    let arr2 = [
        { name: '小明', age: 17, sex: '男' },
        { name: '小红', age: 19, sex: '男' },
        { name: '小白', age: 16, sex: '男' },
        { name: '小黑', age: 18, sex: '男' }
    ]
    arr1 = arr1.sort((a, b) => a - b);
    arr2 = arr2.sort((a, b) => a.age - b.age);
    console.log(arr1);
    console.log(arr2);
</script>

（2）forEach 遍历

• forEach（function（item，index，self）
  • item 当前遍历元素
  • index 当前下标
  • self 被遍历的数组

 //forEach 遍历元素
    var arr1 = [1, 2, 3, 4, 5, 6];
    //item当前遍历的元素 index 当前元素的下标，self 当前遍历的数组
    arr1.forEach(function (item, index, self) {
        console.log(item, index, self);
    })

（3）filter 过滤

  //filter 过滤不符合条件的元素（返回true保留，返回false过滤）
    var arr2 = arr.filter(function (item) {
        return item % 2 == 0;
    })
    console.log("arr", arr2);

（4）map 映射

（5）reduce 累计

• reduce（function（a，b）}
  a 上一次返回的结果
  b 当前遍历的元素

  var total = arr.reduce(function (a, b) {
        return a + b;
    })
    console.log(total);
    var big = arr.reduce(function (a, b) {
        return a * 10 + b;
    })
    console.log("big", big);

（6）some 有一个

    //some 有一个返回为真，整体为真
    var arr6 = [5, 1, 2, 12, 3, 7];
    //判断arr6里面是否有一个大于10的数
    var isbig = arr6.some(function (item) {
        return item > 10;
    })
    console.log("isbig", isbig);

（7）every 每一个

    //4、every 所有的回调函数返回为真，才为真
    //查找所有的数是否都大于5
    var bigF = arr6.every(function (item) {
        return item > 5
    })
    console.log("bigF", bigF);

（8）find

  var arr = [2, 4, 6, 8,10];
    find查找符合条件的元素
    var el = arr.find(function (item) {
        if (item > 5) {
            return true
        }
    })
    var el = arr.find(item => item > 5);
    console.log(el);

六、箭头函数

1. 箭头函数:函数的简写
2. 如果不是一个需要添加()
3. 如果有多行语句用{}
4. 如果需要返回对象用({})
5. 箭构函数不能做构造函数
6. 箭头函数里面的this指向上一层作用域里面的this

    var fun = function () {
        alert("love");
    }
     fun();
    var fun = () => alert("love");
     fun1();
    //=>左侧是参数
    //右侧是执行语句也是返回值
   

七、新增数据类型

1、set 不重复的数组

1. add 添加
2. delete 删除
3. clear 清空
4. size 大小
5. has 检测

2、map 任意键的对象

1. set（key，value）设置
2. get（key）获取
3. delete 删除
4. size 大小
5. clear 清空
6. [ ]

3、weakSet 值都是引用类型的set

4、weakMap 键都是引用类型

5、symbol 唯一符合（对象的键）

八、迭代

1. 可以for of 遍历的对象都是可迭代对象
2. string 字符串
3. array 数组
4. set 集合
5. map 图
6. for (let v of myset)
7. for(let k of myArr.keys())
8. for(let v of myArr.values())
9. for(let[k,v] of myArr.entries()]

九、promise 承诺

1、模板

var p=new promise((reslove，reject)=>{

​})

2、有三个状态（状态变化不可逆）

1. pending
2. resolved
3. rejected

3、实例 p

.then(res=>{})
//回调函数获取resolved 返回的结果
//返回一个新的promise 实例
.catch(err=>{})
//获取rejected的原因

4、解决

1. 异步操作
2. 回调地狱（层级过深）

5、all全部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function downImg(url) {
            //返回 promise
            return new Promise((reslove, reject) => {
                var img = document.createElement("img");
                //指定src
                img.src = url;
                //加载成功返回图片
                img.onload = function () {
                    reslove(img)
                }
                img.onerror = function (err) {
                    reject(err)
                }
            })
        }
        var urls = [
            "https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487233328/428_428_377A883BEF8846E33089A10191655077mp.png",
            "https://res1.vmallres.com/pimages/uomcdn/CN/pms/202209/gbom/6941487264261/428_428_6D2F17BD8C440085612BE7DB2CC5497Cmp.png",
            "https://res4.vmallres.com/pimages/uomcdn/CN/pms/202209/gbom/6941487261352/428_428_058DF8465878ABAFC566B8F7C1DB8851mp.png"
        ]
        //promise.all  在promise参数列表中所有的promise  reslove才会reslove
        //promise.race 在promise参数列表中，只要reslove最快的
        // downImg("https://res8.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487233328/428_428_377A883BEF8846E33089A10191655077mp.png")
        Promise.all(urls.map(item => downImg(item)))
            .then(res => {
                for (var k of res) {
                    document.body.appendChild(k);
                }

            })
            .catch(err => {
                console.error(err)
            })
    </script>
</body>

</html>

6、race 赛跑

1. 返回最先resolve结果
2. 拿到渠道的resolve结束

十、同步和异步

1、同步是按顺序从上至下阻塞式执行代码
（上一行代码不执行完毕，下行不会执行）

2、异步是先执行主线程的代码，再执行其他线程的代码（非阻塞式）

3、实现异步的方式

1. 回调函数
2. 事件响应
3. 订阅发布模式
4. Promise
5. sync和await

    // 实现异步 1、回调函数 2、事件响应 3、promise 承诺  4、订阅和发布模式
    function say(str, delay, callback) {
        setTimeout(() => {
            console.log(str);
            if (callback) { callback() }
        }, delay)
    }
    say("ejkakra",2000,()=>{
        say("你笑起来真好看",5000,()=>{
            say("我可以加你的微信吗",3000)
        })
    })

十一、async与await

1、async装饰的函数，返回的是一个promise对象，返回的结果是resolved

2、await 用来等待异步的resolve结果 只能出现在async 装饰的函数中

  //async 修饰的函数，函数执行返回的是一个promise对象
    //通常配合await等待关键字，await只能出现在async在修饰的函数里面
    //await会等待promise的reslove的结果

    function say(msg, delay) {
        return new Promise((reslove, reject) => {
            setTimeout(() => reslove(msg), delay)
        })
    }
    async function doit() {
        var m1 = await say("你好，你俩可以去死吗", 4000);
        console.log(m1); 
        var m2 = await say("吃鸡", 3000)
        console.log(m2);
        return "国庆佳节"
    }
    doit()
        .then(res => console.log(res))

十二、generator 生成器

1、就是在函数前面添加个*

function *range（min，max）{
    for（var i=min，i<max;i++）{
         yield i;
    }
}

2、生成器执行的结果是一个迭代器

3、var iter=range（1,10）

4、迭代器通过next方法返回一个对象，对象的value是yield生成的结果 在生成器里面 遇到yield就停止等待下一次next调用

{value：1，done：false}
...
{value：undefined，done：true}

5、可以通过for 来遍历迭代器

for(v of range (1,100)){
console.log()
}

6、string.Array，Set，Map的迭代器 arr[Symbol,iterator]

十三、Object.defineProperty

Object.defineProperty(obj,props,{
set(v){//设置}，
get（v）{//获取}
​configurable：true，是否能删除
enumerable：true，是否可以枚举
value 默认值
writable：true 是否可写
}）
​可以定义对象的某个属性

十四、proxy 代理对象

1. target 目标对象

2. handle处理器

   1. set（target，propery，value）{//拦截set}
   2. get（target，property）{
      //拦截set
      return target[property]
      ​}
   3. var proxy=new Proxy(target,handle)

    //async 修饰的函数，函数执行返回的是一个promise对象
    //通常配合await等待关键字，await只能出现在async在修饰的函数里面
    //await会等待promise的reslove的结果

    function say(msg, delay) {
        return new Promise((reslove, reject) => {
            setTimeout(() => reslove(msg), delay)
        })
    }
    async function doit() {
        var m1 = await say("你好，你俩可以去死吗", 4000);
        console.log(m1); 
        var m2 = await say("吃鸡", 3000)
        console.log(m2);
        return "国庆佳节"
    }
    doit()
        .then(res => console.log(res))

十五、类

1. typeof class 结果是function
2. 类的本质是函数
3. class Block{}
4. 构造函数 constructor(){}
5. 实例化的时候 new关键字调用的就是构造函数
6. super()
7. 调用父类的构造函数
8. extends 继承父类的方法
9. static 类的静态属性和方法
10. 类的this 指向的是他的实例（也就是new 出来的对象）