@TOC

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个，所有标准列表查看 Ecma标准查看连接：Ecma标准规则 ECMA-262（ECMAScript）历史版本查看网址：ECMAScript标准 ECMA-262 历史： ES6兼容性：ES6兼容可查看兼容性在这里插入图片描述

关键字

let 块级作用域 { }
const 常量声明关键字
... 扩展运算符能将数组转换为逗号分隔的参数序列
Symbol 新类型属性唯一，且不能参与运算
[...] 类似 arguments 可以接受多个参数

let

在这里插入图片描述

<script type="text/javaScript">
        // 1. 变量不能重复声明
        // let star = "罗志祥"; let star = "小猪";
        // 2. 块级作用域  全局 函数 eval 
        // for if while else
       /*  {
            let girl = "周扬青";
        }
        console.log(girl); */
        // 3. 不存在变量的提升
        console.log(song);
        var song = "恋爱达人";
        // 4. 不影响作用域链
        {
            let school = "尚硅谷";
            function fn() {
                console.log(school);
            }
            fn();
        }
    </script>

let 案例

	<div class="box">
	        <h2>点击切换颜色</h2>
	        <div class="item"></div>
	        <div class="item"></div>
	        <div class="item"></div>
    </div>
	<script>
        let items = document.getElementsByClassName("item");
        for(let i = 0;i < items.length ; i++) {
            items[i].onclick = function () {
                // this.style.backgroundColor  = 'pink';
                items[i].style.backgroundColor = "pink";
            }
        }
    </script>

const

<script>     
        const Shcool = "尚硅谷";
        // 1. const 声明常量，一定要赋初始值 且名字大写（潜规则）当然小写也可以写
        // const A;
        // 2. 常量的值不能做修改
        // Shcool = "GTGUIGU";
        // 3. 拥有块级作用域
      /*   {
            const PLAYER = "UI";
        }
        console.log(PLAYER); */
        // 4. 对于数组和对象的元素修改，不算做对常量的修改，不会报错
        const TEAM = ["UZI","MXLG","Ming","Letme"];
        // TEAM.push("Mieko");
        TEAM = 100;
</script>

解构赋值

 <script>

        // 数组结构允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量
        // let arr = [1,2,3];
        // let [a,b,c,d,e] = arr;
        // console.log(a);
        // console.log(b);
        // console.log(c);
        // console.log(d);
        // console.log(e);
        // 对象解构允许使用变量的名字匹配对象的属性 匹配成功将对象的属性值赋值给变量
        let Obj = {
            name: 'red',
            age: 18
        };
        let {name,age} = Obj;
        console.log(name);
        console.log(age);
        let {name:myName ,age:myAge} = Obj;
        console.log(myName);
        console.log(myAge);
    </script>

 <script>
        //ES6允许按照定模式从数组和对象中提取值，对变量进行赋值，
        //这被称为解构赋值。
        //1.数组的结构
    /*     const F4 = ['小沈阳','刘能','赵四','宋小宝'];
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song); */
        //2.对象的解构
        const zhao1 = {
            name :'赵本山',
            age : '不详',
            xiaopin: function(){
                console. log("我可以演小品");
            }
        };
        // let {name, age, xiaopin} = zhao1;
        // console.log(name);
        // console.log(age);
        // console.log(xiaopin);
        let {xiaopin,age} = zhao1;
        xiaopin();
    </script>

模板字符串

 <script>
        // ES6 引入新的声明字符串 
        // 1. 声明
        // let str = `我也是一个字符串哟~`;
        // console.log(str, typeof str);
        // 2. 内容中可以直接出现换行符
        //2.内容中可以直接出现换行符
        let str = `<ul>
                     <li>沈腾</li>
                     <li>玛丽</li>
                     <li>艾伦</li>
                   </ul> `;    

        //3. 变量拼接 
        let lovest = ' 魏翔';
        let out =`${lovest}是我心目中最搞笑的演员!! `;
        console. log(out);
    </script>

箭头函数

 <script>
        // ES6 允许使用箭头 => 定义函数
        /* let fn = function() {

        }
        let fn1 = (a,b) =>   a + b;
        console.log(fn1(1,2)); */

        // this 是静态的. this 始终指向函数声明时所在的作用域下 this 的值
        function getName() {
            console.log(this.name);
        };
        let getName2 = () => {
            console.log(this.name);
        };
        window.name = '尚硅谷';
        const school = {
            name:"GEUGUIGU",
        }

        // 直接调用
        /* getName();
        getName2(); */

        // call 方法调用
        // getName.call(school);
        // getName2.call(school);
        // 2. 不能作为构造函数实例化对象
     /*    let Person = (name, age) => {
            this.name = name,
            this.age = age
        };
        let me = new Person("xiao",30);
        console.log(me); */

        // 3. 不能使用arguments 变量
      /*   let fn2 = () => {
            console.log(arguments);
        }
        fn2(1,2,3); */

        // 4. 箭头函数的简写
        // 1.  简写小括号，当形参有且只有一个的时候
        /* let add = n => {
            return n+n;
        }
        console.log(add(2)); */
        // 2. 省略花括号，当代码体只有一条语句的时候 此时 return 必须省略 而且语句执行的返回值就是函数的返回值
        let pow = n => n * n;
        console.log(pow(9));
    </script>

箭头函数实践

<div id="ad"></div>
    <script>
        let ad = document.getElementById('ad');

        ad.addEventListener("click",function() {
            // 保存this的值
            // let _this = this;
            setTimeout(() => {
                // 修改this的背景颜色
                // _this.style.backgroundColor = 'pink';
                this.style.backgroundColor = 'pink';
            },2000);
        });

         
        const arr = [1,3,6,9,50,8,100,4,5];
       /*  const result = arr.filter(function(item) {
            if(item % 2 === 0) {
                return true;
            }else {
                return false;
            }
        });
        console.log(result); */
         const result = arr.filter((item) => item % 2 === 0);
        console.log(result);
        // 箭头函数适合与 this 无关的回调，定时器，数组的方法回调
        // 箭头函数不适合与 this 有关的回调， 事件的回调 ，对象的方法
        
    </script>

rest ．．．接受多个参数用来代替arguments

 <script>
        // ES6 引入 rest参数，用于获取函数的实参，用来代替arguments
        // ES6　获取实参的方式
        /* function date() {
            console.log(arguments);
        }
        date("白纸","阿娇","四位") */

        // rest 参数 
       /*  function date(...agrs) {
            console.log(agrs); // filter some every map
        }

        date("白纸","阿娇","四位"); */

         // rest 参数必须放到参数的最后 
        function date(a,...agrs,b) {
            console.log(a);
            console.log(b);
            console.log(agrs); // filter some every map
        }

        date(1,2,3,4,5,6);
    </script>

扩展运算符　数组转换为逗号分隔的参数序列

 <script>
        // ... 扩展运算符能将 数组 转换为逗号分隔的 参数序列
        const tfboys = ["易烊千玺","王源","王俊凯"]; // => "易烊千玺","王源","王俊凯"

        function chunwan() {
            console.log(arguments);
        }
        chunwan(...tfboys);// chunwan("易烊千玺","王源","王俊凯")
 </script>
 //    扩展运算实践
	<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        // 1. 数组的合并
       /*  const arr1 = [1,2,3];
        const arr2 = [4,5,6];
        // const arr3 = arr1.concat(arr2);
        const arr3 = [...arr1,...arr2] // [1,2,3 , 4,5,6]
        console.log(arr3); */

        // 2. 数组的克隆
        /* const array1 = ['E','G','M'];
        const array2 = [...array1]; // 'E','G','M'
        console.log(array2); */

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

    </script>

Symbol 　新增的唯一属性

内置方法：

Symbol.hasInstance 当其他对象使用instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable| 对象的SymbolisConcatSpreadable 属性等于的是-一个布尔值，表示该对象用于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 对象进行f.r..of循环时，会调用Symbol.iterator方法，返回该对象的默认遍历器
Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag 在该对象上面调用toString 方法时，返回该方法的返回值
Symbol.species 创建衍生对象时，会使用该属性

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

        */
        // 创建一个Symbol
        let s = Symbol();
        console.log(s,typeof s);
        let s2 = Symbol("尚硅谷");
        let s3 = Symbol("尚硅谷");

        // Symbol.for() 创建
        let s4 = Symbol.for("尚硅谷");
        let s5 = Symbol.for("尚硅谷");

        console.log(s2 === s3);
        console.log(s4 === s5);

     /* 
            //不能与其他数据进行运算
            let result = S + 100;
            let result = s > 100;
            letresult=s+s;
        数据类型：
            USONB you”are”so. niubility
            u undefined
            s string symbol
            o object
            n null number
            b boolean
        */
    </script>

 <script>
       /*  class Person {
            static[Symbol.hasInstance](param) {
                console.log(param);
                console.log("我被用来检测类型了！");
                return true; // hasInstance 控制类型的返回值 
            };
        };
        let o = {};
        console.log(o instanceof Person); */

        const arr = [1,2,3];
        const arr2 = [4,5,6];
        arr2[Symbol.isConcatSpreadable] = false;
        console.log(arr.concat(arr2));
    </script>

Symbol设置对象属性

 <script>
        /*let game = {
            name: "game",
            up: function() {
                console.log("1");
            },
            down:function() {
                console.log("2");
            }
        }

        let methods = {
            up: Symbol(),
            down: Symbol()
        };
        game[methods.up] = function() {
            console.log("3");
        };
        game[methods.down] = function () {
          console.log("4");
        }
        console.log(game); */

        let youxi = {
          name:"狼人杀",
          [Symbol("say")]  : function() {
              console.log("我可以发言~");
          },
          [Symbol("zibao")]:function () {
              console.log("我可以自爆~");
          }

        };
    console.log(youxi);

    </script>

迭代器　　遍历

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

ES6创造了一种新的遍历命令for..of 循环，Iterator 接口主要供for..of消费

原生具备iterator接口的数据(可用forof遍历) a) Array b) Arguments c) Set d) Map e) String f) TypedArray g) NodeList

工作原理
1. 创建一个指针对象，指向当前数据结构的起始位置
2. 第一次调用对象的next方法，指针自动指向数据结构的第-一个成员.
3. 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4. 每调用 next 方法返回一个包含value 和 done 属性对象
5. ==需要自定义遍历数据的时候。要想到迭代器。==

  <script>
        const xiyou = ["唐僧","孙悟空","猪八戒","沙和尚"];
        // 使用 for ... of 遍历数组
        for(let k of  xiyou) {
            console.log(k);
        }
        let iterator = xiyou[Symbol.iterator]();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
    </script>

实践

  <script>
        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: undefined , done: true};
                        }
                    }
                }
            }
        };

        for(let v of banji) {
            console.log(v);
        }

        // banji.stus.forEach(function(value){
        //     console.log(value);
        // });
    </script>

生成器函数

 <script>
        // 生成器就是一个特殊的函数 
        // 异步编程  纯回调函数 node fs Ajax MongoDB
        // yield 断点
        function * gen() {
            // console.log(111);
            yield '一只没有耳朵'; // 断点
            // console.log(222);;
            yield '一只没有尾巴'; // 断点
            // console.log(333);
            yield '真奇怪';
            // console.log(444);
        }
        let iterator = gen();
        console.log(iterator);
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        // 遍历
        /* for(let k of gen()) {
            console.log(k);
        } */
    </script>

生成器函数的参数

<script>
        function * gen(arg) {
            console.log(arg);
            let one = yield 111;
            console.log(one);
            let tow = yield 222;
            console.log(tow);
            let three = yield 333;
            console.log(three);
        };
        let iterator = gen('AAA');
        console.log(iterator.next());
        console.log(iterator.next('BBB')); // 第二次传参 到 第一个yield
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
    </script>

生成器函数实践

 <script>
        // 异步编程 文件操作 网络操作(Ajax, request) 数据库操作
       /*  setTimeout(() => { // 回调地狱
            console.log(111);
              setTimeout(() => {
                console.log(222);
                  setTimeout(() => {
                    console.log(333);
                },3000); 
            },2000); 
        },1000);  */
        function one() {
            setTimeout(() => {
                console.log(111);
                iterator.next();
            },1000);
        }
        function tow() {
            setTimeout(() => {
                console.log(222);
                iterator.next();
            },2000);
        }
        function three() {
            setTimeout(() => {
                console.log(333);
                iterator.next();
            },3000);
        }

        function * gen() {
            yield one();
            yield tow();
            yield three();
        }
        // 调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>

实践2

 <script>
        // 模拟获取：   用户数据    订单数据    商品数据
        function getUsers() {
            setTimeout(() => {
                let data = '用户数据';
                iterator.next(data);
            }, 1000);
        }
        function getOrders() {
            setTimeout(() => {
                let data = '订单数据';
                iterator.next(data);
            }, 1000);
        }
        function getGoods() {
            setTimeout(() => {
                let data = '商品数据';
                iterator.next(data);
            }, 1000);
        }

        function * gen() {
            let user = yield getUsers();
            console.log(user);
            let orders = yield getOrders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods);
        }
        // 调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>

Promise- AJAX封装 -读取文件- then

 <script>
        // 实例化 Promise 对象           成功       失败
        const p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                // let data = "数据库中的用户数据";
                // // resolve
                // resolve(data);
                let err = '数据读取失败~';
                reject(err);
            }, 1000);
        })
        // 调用 Promise 对象的 then方法  成功 value 失败 reason
        p.then(function(value) {
            console.log(value);
        },function(reason) {
            console.error(reason);
        })  
    </script>

Promise 读取文件

const fs = require('fs'); // 1. 引入 fs 模块

// 2. 调用方法读取文件
/* fs.readFile('./dmeo.md',function(err,data) {
    if(!err) {
        console.log('文件读取成功~~');
        console.log(data.toString());
    }else {
        console.log(err);
    }
});  */
const p = new Promise(function(resolve, reject) {
    fs.readFile('./dmeo.md',(err,data) => {
        if(err) reject(err);
        resolve(data);
    });
});
p.then(function(value) {
    console.log('调用成功~');
    console.log(value.toString());
},function(reason) {
    console.log('文件读取失败~~');
})

Promise 封装AJAX

 <script>
        //接口地址: https://api.apiopen.top/getJoke
        const p = new Promise(function(resolve, reject) {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2. 初始化
            xhr.open("GET","https://api.apiopen.top/getJoke");
            // 3. 发送
            xhr.send();
            // 4. 绑定事件，处理响应结果
            xhr.onreadystatechange = function() {
                // 判断是否已经返回全部的结果
                if(xhr.readyState === 4) {
                    // 判断响应状态码 200-299
                    if(xhr.status >= 200 && xhr.status < 300) {
                        // 表示成功
                        resolve(xhr.response);
                    }else {
                        // 如果失败
                        reject(xhr.status);
                    }
                }
            }
        });
        
        // 指定回调
        p.then(function(value){
            console.log(value);
        },function(reason) {
            console.log(reason);
        })
    </script>

Promise.then

<script>
        const p = new Promise((resolve, reject) => {
            setTimeout( () => {
                resolve('成功了~~');
                // reject('失败了~~');
            }, 1000);
        });
        // 调用 then 方法 then方法的返回结果时 Promise 对象，对象的状态由回调函数的执行结果决定的
        // 1. 如果回调函数中的返回结果是 非Promise类型的属性，状态为成功，返回值为对像的成功的值

      /*   const result = p.then(value => {
            console.log(value);
            // 非Promise类型的属性
            // return 'Hello World!'; 
            // 2. 是 Promise 对象
           return new Promise((resolve, reject) => {
                resolve('OK');
                // reject('error');
            }); 
            // 3. 抛出错误
            // throw new Error('出错啦！');
            //throw '出错啦~！';
        }, reason => {
            console.log(reason);
        });
        console.log(result);*/

        // 链接调用
        p.then(value => {
                 
        }).then(value => {

        });
    </script>

Promise-catch

 <script>    
        const p = new Promise(function(resolve, reject){
            setTimeout(function() {
                // 设置 p 对象的状态为失败，并设置失败的值
                reject('出错了~');
            }, 1000);
        });                                                                                                                                                                                                                                                                                                                                                         
       /*  p.then(function(value){},function(reason) {
            console.log(reason);
        }) */
        p.catch(function(reason) {
            console.warn(reason);
        });
    </script>

Promise 读取多个文件

const fs = require('fs');

/* fs.readFile('./demo.md',(err, data1) => {
    fs.readFile('./demo copy.md',(err, data2) => {
        fs.readFile('./demo copy 2.md',(err, data3) => {
            let result = data1 + data2 + data3;
            console.log(result);
        }); 
    });
}); */

const p = new Promise((resolve, reject) => {
    fs.readFile('./demo.md',(err,data) => {
        resolve(data);
    });
});


p.then((value) =>{
    return new Promise((resolve, reject) => {
        fs.readFile('./demo1.md',(err,data)=>{
            resolve([value,data]);
        });
    });
}).then(value => {
     return new Promise((resolve, reject) => {
        fs.readFile('./demo2.md',(err,data)=>{
            // 压入
            value.push(data);
            resolve(value);
        });
    });
}).then(value => {
    console.log(value.join('\r\n'));
});

Set 属性设置

  <script>
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
   /*      元素的个数
        console.log(s2.size);
        添加新的元素
        s2.add("喜事儿");
        删除元素
        s2.delete("坏事儿");
        检测
        console.log(s2.has("坏事儿"));
        清空
        s2.clear(); */
        console.log(s2);
        for(let k of s2) {
            console.log(k);
        }
    </script>

Set实例

 <script>
        let arr = [1,2,3,4,5,4,3,2,1];
        // 1. 数组去重
        /* let result = [...new Set(arr)];
        console.log(result); */
        // 2. 交集
        let arr2 = [4,5,6];
       /*  let result = [...new Set(arr)].filter(item => {
            let s2 = new Set(arr2); // 4 5 6 
            if(s2.has(item)) {
                return true;
            }else {
                return false;
            }
        }); */
        // let result = [...new Set(arr)].filter(item => new Set(arr2).has(item))
        // console.log(result);

        // 3. 并集
       /*  let union = [...new Set([...arr,...arr2])];
        console.log(union); */

        // 4. 差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);
    </script>

Map

 <script>
        // 声明 Map
        let map = new Map();
        // 添加元素
        map.set('name','尚硅谷'); 
        map.set('change',function() {
            console.log('我们可以改变你~~');
        });
        let key = {
            shcool: 'ATGUIGU',
        };
        map.set(key,['北京','上海','深圳']);
        // console.log(map.size); // size 
        // 删除 delete
        // map.delete('name');
        // 获取 get 
        // console.log(map.get('change'));
        // console.log(map.get(key));
        // 清空 clear
        // map.clear();
        // for  of 遍历
        for(let k of map ) {
            console.log(k);
        }
        console.log(map);
    </script>

class 类

 <script>
            function Phone(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            // 添加方法
            Phone.prototype.call = function() {
                console.log('我 可以打电话~~~');
            }
            // 实例化对象
            let HuaWei = new Phone('华为',5989);           
            HuaWei.call(); 
            console.log(HuaWei);

            // class
            class shouji { 
                // 构造方法 名字不能修改
                constructor(brand, price) {
                    this.brand = brand;
                    this.price = price;
                }
                // 方法必须使用该语法，不能使用 ES5 的对象完整形式 也就是function不用写
                call() {
                    console.log("我是一个方法啊~~");
                }
            }

            let onePlus = new shouji("1+",5899);
            onePlus.call();
            console.log(onePlus);
    </script>

类的静态成员

 <script>
      /*   function Phone() {

        };
        Phone.name = '手机';
        Phone.change = function() {
            console.log('我可以改变世界~');
        };
        Phone.prototype.call = '我想写一个函数上去~';
        let on = new Phone();
        console.log(on.name);  // undefind
        console.log(on.call); */

        class Phone{
            static name = '手机';
            static change = function() {
                console.log("我可以改变世界！");
            }
        }
        let oniko = new Phone();
        console.log(Phone.name);
        console.log(oniko.cahnge);
    </script>

类ES6前的继承

<script>
        // 创建父函数
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }
        Phone.prototype.call = function() {
            console.log("我可以打电话~");
        }
        // 创建子函数
        function SmartPhone(brand , price, color, size) {
            Phone.call(this, brand, price);
            this.color = color;
            this.size = size;
        }
        // 声明子类的方法
        SmartPhone.prototype.photo = function() {
            console.log('我可以拍照片~');
        }
        SmartPhone.prototype.playGame = function() {
            console.log('我可以打游戏~');
        }
        // 设置子级构造函数的原型 __proto__ 指向（Phone）父类获得它的方法等
        SmartPhone.prototype = new Phone;
        // 把指向调回到自己的身上 
        SmartPhone.prototype.constructor = SmartPhone;
        let chuizi = new SmartPhone("锤子",2999,"粉色","5.5mm");
        console.log(chuizi);
    </script>

ES继承

 <script>
        class father{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            call() {
                console.log('my have a son');
            }
        }

        class son extends father {
            constructor(name, age, tall) {
                super(name, age)
                this.tall = tall;
            }
           /* 拥有同名方法时 会调用 子类本身的而不是调用父类的
            call(){
                console.log('my have a father');
            } */
            call1(){
                console.log('my have a father');
            }
        }
        let son_ = new son('lhj', 18 ,175);
        console.log(son_);
        son_.call();
        son_.call1();
    </script>

class 的 get 和 set

 <script>
        // get 和  set
        class Phone {
            get price() {
                console.log('价格属性被读取了~~');
                return 'Hello World!    ';
            };
            set price(newValue) {
                console.log('价格属性被修改了~~');
            }
        }

        // 实例化对象
        let s = new Phone();
        // console.log(s.price);
        s.price = 'I Love You~~~'
    </script>

async await 异步任务

<script>
        // async 函数
         async function fn() {
            //  返回一个字符串
            //  return 'Hello World';
            // 返回的结果不是一个 Promise 类型的对象，返回的结果就是成功的 Promise 对像
            // return ;
            // 抛出错误，返回的结果是一个失败的 Promise 
            // throw new Error('出错啦~');
            // 返回的结果是一个 Promise 对象
            return new Promise((resolve, reject) => {
                resolve('成功的数据~~');
                // reject('失败的数据~~');
            });
         }
         const result = fn();
         result.then(value => {
             console.log(value);
         }, reason => {
             console.log(reason);
         });

    </script>

	//    await 
     <script>
        const p = new Promise((resolve, reject) => {
            // resolve('成功的值~~');
            reject('失败啦');
        });
        // await 要放在 async 函数中 失败的值需要try catch来获取错误的结果
        async function main() {
            try {
                let result = await p;
                console.log(result);
            } catch(e) {
                console.log(e);
            }
        }
        main();
    </script>

async & await 实践

const fs = require("fs");

function  readDemo() {
    return new Promise((resolve, reject) => {
        fs.readFile('./demo.md',(err,data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
function  readDemo1() {
    return new Promise((resolve, reject) => {
        fs.readFile('./demo1.md',(err,data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
function  readDemo2() {
    return new Promise((resolve, reject) => {
        fs.readFile('./demo2.md',(err,data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}

// 声明一个async对像
async function main() {
    let demo = await readDemo();
    let demo1 = await readDemo1();
    let demo2 = await readDemo2();
    console.log(demo.toString());
    console.log(demo1.toString());
    console.log(demo2.toString());
}

main();

async & await 封装 AJAX

<script>
    // 发送 AJAX 请求，返回的结果是 Promise 对象
    function sendAJAX(url) {
      return new Promise((resolve, reject) => {
          // 创建 AJAX　对象
          const xhr = new XMLHttpRequest();
          // 初始化
          xhr.open("GET",url);
          // 发送
          xhr.send();
          // 绑定事件
          xhr.onreadystatechange = function () {
              if(xhr.readyState === 4) {
                  if(xhr.status >= 200 && xhr.status < 300) {
                        resolve(xhr.response); // 成功返回响应体
                  }else {
                      reject(xhr.status);  // 失败返回状态码
                  }
              }
          }
      });
    }
    // Promise then 方法测试
    // sendAJAX("https://api.apiopen.top/getJoke").then(value => {
    //     console.log(value);
    // }, reason => {});

    // async 和 await 方法的测试
    async function main() {
        // 发送 AJAX 请求
        let result = await sendAJAX("https://api.apiopen.top/getJoke");
        // 再次测试
        let result1 = await sendAJAX("http://tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P");
        console.log(result1);
    }
    main();
</script>

正则表达式的新增

 <script>
        // 声明一个字符串
      /*   let str = "<a href='http://www.atguigu.com'>尚硅谷</a>";
        // 提取 url 和 文本标签
        const reg = /<a href='(.*)'>(.*)<\/a>/;
        
        // 执行
        const result = reg.exec(str);
        console.log(result[1]);
        console.log(result[2]); */

        let str = "<a href='http://www.atguigu.com'>尚硅谷</a>";
        // 提取 url 和 文本标签
        const reg = /<a href='(?<url>.*)'>(?<text>.*)<\/a>/;
        
        // 执行
        const result = reg.exec(str);
        console.log(result);
        console.log(result.groups.url);

	 // 正则断言  字符串声明
	        let str = 'JS5201314你知道吗555啦啦啦'
	        // 正向断言
	       /*  const reg = /\d+(?=啦)/;
	        const result = reg.exec(str); */
	        // 反向断言
	        const reg = /(?<=吗)\d+/;
	        const result = reg.exec(str);
	        console.log(result);
    </script>

 <script>
        // dot . 元字符 除换行符以外的任意单个字符
        let str = `
             <ul>
                 <li>
                    <a>肖申克的救赎</a>
                    <p>上映日期：1994-09-10</p>
                </li>
                <li>
                    <a>阿甘正传</a>
                    <p>上映日期：1994-07-06</p>
                </li>
            </ul>
        `;
        // 声明正则
        // const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs; // .*? 匹配换行空字符
        // 执行匹配
        // const result = reg.exec(str);
        let result;
        let data = [];
        while(result = reg.exec(str)) {
            // console.log(result);
            data.push({title: result[1],time:result[2]});
        }
        console.log(data);
    </script>

数组降维

 <script>
        // flat 平 将多维数组转为低位数组
       /*  let arr = [1,2,3,4,5,[6,7,8]];
        console.log(arr.flat()); */
        //  let arr = [1,2,3,4,5,[6,7,8,[9,10,11]]];
        //  参数作为深度 是一个数字
        // console.log(arr.flat(2));
        // flatMap
        const arr = [1,2,3,4];
        const result = arr.flatMap(item => [item * 10]);
        console.log(result);
    </script>

空白字符串的去除

 <script>
        // trim 
        let srt = '    Hi~~~~    ';
        console.log(srt);
        console.log(srt.trim()); // 左右去除
        console.log(srt.trimStart()); // 左边去除
        console.log(srt.trimEnd()); // 右边去除
    </script>

数组转对象

 <script>
        // 二维数组 转对象
        // const result = Object.fromEntries([
        //     ["name","ATGUIGU"],
        //     ["citys","BeiJing,ShangHai,ShenZhen"]
        // ]);
        // Map
      /*   const m = new Map();
        m.set("name","AIGUIGU");
        const result = Object.fromEntries(m);
        console.log(m);
        console.log(result); */
        // Object.entries();
        const arr = Object.entries({
            name: "尚硅谷"
        });
        console.log(arr);
    </script>

ES6模块化

HTML文件


<body>
    <!-- <script type="module">
        // 1. 通用的导入方式   引入 37.ES6模块化 内容
        // import * as ES6 from "./37.ES6模块化.js";
        // 2. 解构赋值形式
        /* import {school, teach} from "./37.ES6模块化.js";
        // 不同文件 同名 可以用 as 修改名 
        import {school as guigu, findJob} from "./37.ES6模块化.js";
        import {default as ES6} from "./37.ES6模块化.js";
        console.log(ES6); */
        // 3. 简便方式 针对默认暴露
        // import ES6 from "./37.ES6模块化.js";
        // console.log(ES6);
    </script> -->
 <script src="./37.app.js" type="module"></script>

JS文件

// 分别暴露
export let school = "尚硅谷";

export function teach() {
    console.log('我们可以交给你一些技能~~');
}


// 统一暴露 
let school1 = "尚硅谷";

function findJob() {
    console.log('我们可以帮助你找工作~~');
};

export{school1, findJob};

// 默认暴露
export default {
    school : "尚硅谷",
    change: function() {
        console.log("我们可以改变你~~");
    }
}

语法打包将ES6 的代码转换为旧浏览器能兼容的代码

<body>
    <!-- 
        1.在Node安装工具babel-cli babel-preset-env browserify
        2. npx babel src/js -d dist/js
        3.打包npx browserify dist/js/app.js -0 dist/bundle.js
     -->
   <script src=" dist/bundle. js"></script>
</body>

Javascript ES6 -- ES11新特性笔记

关键字

let