ES6笔记

ES6

解构赋值

• 数组的解构

  const F4 = ['小沈阳','刘能','赵四','宋小宝'];
  //中括号
        let [xiao, liu, zhao, song] = F4;
        console.log(xiao);
        console.log(liu);
        console.log(zhao);
        console.log(song);

• 对象的解构

  const zhao = {
            name: '赵本山',
            age: '不详',
            xiaopin: function(){
                console.log("我可以演小品");
            }
        };
//花括号
        let {name, age, xiaopin} = zhao;
        console.log(name);
        console.log(age);
        console.log(xiaopin);
        xiaopin();

• 同名匹配

let {xiaopin} = zhao;
        xiaopin();

• 赋值

function connect({host="127.0.0.1", username,password, port}){
            console.log(host)
            console.log(username)
            console.log(password)
            console.log(port)
        }
        
        connect({
        //未传参则使用默认值
        //    host: 'localhost',
            username: 'root',
            password: 'root',
            port: 3306
        })

模板字符串

• 内容中可以直接出现换行符

        let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

• 变量拼接

        let lovest = '魏翔';
        let out = `${lovest}是我心目中最搞笑的演员!!`;
        console.log(out);

箭头函数

• 声明

        let fn = (a,b) => {
            return a + b;
        }
        // 调用函数
        let result = fn(1, 2);
        console.log(result);

• 特性
• this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值

function getName(){
            console.log(this.name);
        }
        //此时声明在window下
        let getName2 = () => {
            console.log(this.name);
        }

        //设置 window 对象的 name 属性
        window.name = '尚硅谷';
        const school = {
            name: "ATGUIGU"
        }

• 直接调用,指向window

        getName();
        getName2();

• call 方法调用

        //输出ATGUIGU
        getName.call(school);
        //输出尚硅谷
        getName2.call(school);

• 简写

            let pow = n => n * n;
            console.log(pow(8));

• 运用

   ad.addEventListener("click", function () {
        setTimeout( () =>{
           this.style.backgroundColor = "yellow";
        }, 1000)
    })

        const arr = [1,6,9,10,100,25];
        const result = arr.filter(item => item % 2 === 0);
        console.log(result);
        // 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
        // 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法

rest参数

• rest 参数

function date(...args){
            console.log(args);// filter some every map 
        }
        date('阿娇','柏芝','思慧');

• rest 参数必须要放到参数最后

  function fn(a,b,...args){
            console.log(a);
            console.log(b);
            console.log(args);
        }
        fn(1,2,3,4,5,6);

扩展运算符

• 数组的合并

//『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
        const kuaizi = ['王太利','肖央'];
        const fenghuang = ['曾毅','玲花'];
        const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
        console.log(zuixuanxiaopingguo);

• 数组的克隆

   const sanzhihua = ['E','G','M'];
        const sanyecao = [...sanzhihua];//  ['E','G','M']
        console.log(sanyecao);

• 将伪数组转为真正的数组

 const divs = document.querySelectorAll('div');
        const divArr = [...divs];
        console.log(divArr);// arguments

Symbol

 //向对象中添加方法 up down
    let game = {
        name: '俄罗斯方块',
        up: function () {
            console.log("up")
        },
        down: function () {
            console.log("down")
        }
    };

    // 声明一个对象
    let methods = {
        up: Symbol("up"),
        down: Symbol("down")
    };
   
    game[methods.up] = function () {
        console.log("我可以改变形状");
    }

    game[methods.down] = function () {
        console.log("我可以快速下降!!");
    }
    //直接调用方法
    game.up();
    game.down();
    //输出对象
    console.log(game);
    //调用Symbol对象中的方法
    game[methods.up]();
    game[methods.down]();

    //提前定义变量
    let symbolSay = Symbol('say'), symbolZibao = Symbol('zibao');
    let youxi = {
        // name:"狼人杀",
        [symbolSay]: function () {
            console.log("我可以发言")
        },
        [symbolZibao]: function () {
            console.log('我可以自爆');
        }
    }
    //输出对象
    console.log(youxi)
    //因为属性名为变量,故使用[]表示该属性来调用方法
    youxi[symbolSay]();
    youxi[symbolZibao]();

迭代器

    <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};
                        }
                    }
                };
            }
        }

        //遍历这个对象 
        //banji对象中不含有迭代器,添加 [Symbol.iterator]() {}方法后可以使用,便于控制访问权限
         for (let v of banji) {
            console.log(v);
        }
        //数组本身自带迭代器
        for (let v of banji.stus) {
            console.log(v);
        }
    </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();
        iterator.next();
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

        //遍历
        for(let v of gen()){
        //输出了yield中的内容
            console.log(v);
        }

    </script>

• 传实参

    <script>
        function * gen(arg){
        //第一次执行next(),戒指到yield语句,输出AAA,即arg
            console.log(arg);
            let one = yield 111;
         //输出BBB
            console.log(one);
            let two = yield 222;
         //输出CCC
            console.log(two);
            let three = yield 333;
            console.log(three);
        }

        //执行获取迭代器对象
        let iterator = gen('AAA');
         console.log(iterator.next());
        //next方法可以传入实参
        console.log(iterator.next('BBB'));
        console.log(iterator.next('CCC'));
        console.log(iterator.next('DDD'));
    </script>

• 多次调用

  function one(){
            setTimeout(()=>{
                console.log(111);
                //调用下一次
                iterator.next();
            },1000)
        }

        function two(){
            setTimeout(()=>{
                console.log(222);
                iterator.next();
            },2000)
        }

        function three(){
            setTimeout(()=>{
                console.log(333);
                iterator.next();
            },3000)
        }

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        //第一次调用
        iterator.next();

    <script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                //运行的第二次next方法,输出了第一个yiled的返回值
                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 users = yield getUsers();
            console.log(users);
            let orders = yield getOrders();
            console.log(orders);
            let goods = yield getGoods();
            console.log(goods);
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();
    </script>

Promise

读取文件

// 引入 fs 模块
const fs = require('fs');
//使用 Promise 封装
const p = new Promise(function(resolve, reject){
    fs.readFile("./resources/为学.md", (err, data)=>{
        //判断如果失败
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());
}, function(reason){
    console.log("读取失败!!");
});

Ajax请求

    <script>
        // 接口地址: https://api.apiopen.top/getJoke
        const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://api.apiopen.top/getJ");

            //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.error(reason);
        });
    </script>

Promise-then方法

    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
                // reject('出错啦');
            }, 1000)
        });

        //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
        //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

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

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });


    </script>

Promise-catch方法

    <script>
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });
        //必须指定第一个函数           
        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });
        //语法糖,直接设置出错功能      
        p.catch(function(reason){
            console.warn(reason);
        });
    </script>

读取多个文件

//引入 fs 模块
const fs = require("fs");

// fs.readFile('./resources/为学.md', (err, data1)=>{
//     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
//         fs.readFile('./resources/观书有感.md', (err, data3)=>{
//             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
//             console.log(result);
//         });
//     });
// });

//使用 promise 实现
const p = new Promise((resolve, reject) => {
    //读取第一个文件
    fs.readFile("./resources/为学.md", (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    //创建一个新的Promise对象,因此后面可以接then
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //第一次的data存为value,第二次的data为data,存为数组
            resolve([value, data]);
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //压入,value为第二次的数据,是数组,所以将第三次的data使用push()方法
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    return new Promise((resolve, reject) => {
        
        fs.readFile("./resources/观书有感2.md", (err, data) => {
            //压入,第四次后都相同,使用push()方法添加数据即可
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    //每个元素之间添加换行符
    console.log(value.join('\r\n'));
});

Set集合

声明

        //自动去重
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
        //长度
        console.log(s2.size);
        //添加
        s2.add('喜事儿');
        //删除
        s2.delete('坏事儿');
        //检测
        console.log(s2.has('糟心事'));
        //清空
        s2.clear();
        //遍历
          for(let v of s2){
            console.log(v);
        }

Set集合方法

• 数组去重

        let arr = [1,2,3,4,5,4,3,2,1];
        let result = [...new Set(arr)];
        console.log(result);

• 交集

        let arr = [1,2,3,4,5,4,3,2,1];
        let arr2 = [4,5,6,5,6];
        let s2 = new Set(arr2);// 4 5 6
        // let result = [...new Set(arr)].filter(item => {
        //     if(s2.has(item)){
        //         return true;
        //     }else{
        //         return false;
        //     }
        // });
        let result = [...new Set(arr)].filter(item => s2.has(item));
        console.log(result);

• 并集

         let arr = [1,2,3,4,5,4,3,2,1];
         let arr2 = [4,5,6,5,6];
         let union = [...new Set([...arr, ...arr2])];
         console.log(union);

• 差集

        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff);

Map

• 声明

        let m = new Map();
          m.set('name','尚硅谷');
        m.set('change', function(){
            console.log("我们可以改变你!!");
        });

Class

• 创建

 class Shouji{
            //构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法, 不能使用 ES5 的对象完整形式
            call(){
                console.log("我可以打电话!!");
            }
        }

        let onePlus = new Shouji("1+", 1999);
        onePlus.call();
        console.log(onePlus);

• 静态成员

 class Phone{
            //静态属性属于类而不属于实例对象
            static name = '手机';
            static change(){
                console.log("我可以改变世界");
            }
        }

        let nokia = new Phone();
        //undefined
        console.log(nokia.name);
        //手机
        console.log(Phone.name);

继承

• 继承

    <script>
        class Phone{
            //构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            //父类的成员属性
            call(){
                console.log("我可以打电话!!");
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size){
                super(brand, price);// Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo(){
                console.log("拍照");
            }

            playGame(){
                console.log("玩游戏");
            }

            call(){
                //重写父类方法
                super.call();
                //不会覆盖super.call();
                console.log('我可以进行视频通话');
            }
        }

        const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
        // console.log(xiaomi);
        xiaomi.call();
        xiaomi.photo();
        xiaomi.playGame();
    </script>

• 重写

          call(){
                //重写父类方法
                super.call();
                //不会覆盖super.call();
                console.log('我可以进行视频通话');
            }

getter和setter

    <script>
        // get 和 set  
        class Phone{
            get price(){
                console.log("价格属性被读取了");
                return 'iloveyou';
            }

            set price(newVal){
                console.log('价格属性被修改了');
            }
        }

        //实例化对象
        let s = new Phone();

        // console.log(s.price);
        s.price = 'free';
    </script>

Math. * 及Number. * 方法拓展

对象方法拓展

Object.is

          console.log(Object.is(120, 120));// ===
        console.log(Object.is(NaN, NaN));// ===
        console.log(NaN === NaN);// ===

Object.assign 对象的合并

• 代码

        const config1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            test: 'test'
        };
        const config2 = {
            host: 'http://atguigu.com',
            port: 33060,
            name: 'atguigu.com',
            pass: 'iloveyou',
            test2: 'test2'
        }
        console.log(Object.assign(config1, config2));

• 结果,可用于yaml配置

Object
host: "http://atguigu.com"
name: "atguigu.com"
pass: "iloveyou"
port: 33060
test: "test"
test2: "test2"
__proto__: Object

暴露语法

分别暴露

export let school = '***';
export function teach() {
    console.log("我们可以教给你开发技能");
}

统一暴露

let school = '***';
function findJob(){
    console.log("我们可以帮助你找工作!!");
}
//
export {school, findJob};

默认暴露

export default {
    school: '***',
    change: function(){
    console.log("我们可以改变你!!");
    }
}

导入

<script type="module">
  import * as m1 from "./src/js/m1.js";
  import * as m2 from "./src/js/m2.js";
  import * as m3 from "./src/js/m3.js";
  m1.teach();
  m2.findJob();
  //添加default
  m3.default.change();
</script>

解构赋值

<script type="module">
        import {school, teach} from "./src/js/m1.js";
        //别名,2个school冲突
        import {school as guigu, findJob} from "./src/js/m2.js";
        //默认写法,default as 别名
        import {default as m3} from "./src/js/m3.js";
</script>

简便形式

<script type="module">
import m3 from "./src/js/m3.js";
    console.log(m3);
    </script>

NPM包

       // 1. 安装工具 npm i babel-cli babel-preset-env browserify(webpack) -D
       // 2. 编译 npx babel src/js -d dist/js --presets=babel-preset-env
       //3. 打包 npx browserify dist/js/app.js -o dist/bundle.js
            <script src="dist/bundle.js"></script>

ES7

includes

        const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
        console.log(mingzhu.includes('西游记'));

**

        console.log(2 ** 10);
        //等价
        console.log(Math.pow(2, 10));

ES8

async

async function fn(){ 
             //抛出错误, 返回的结果是一个失败的 Promise
            // throw new Error('出错啦!');
            //返回的结果如果是一个 Promise 对象
            return new Promise((resolve, reject)=>{
                resolve('成功的数据');
                // reject("失败的错误");
            });
        }
   //resul是Promise类型,值为返回值
   const result = fn();
   //调用 then 方法
        result.then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        })

await

    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject) => {
            // resolve("用户数据");
            // resolve可以直接通过
            // let result = await p;
            // console.log(result);得到返回值的结果
            //reject则需要在async中使用try... catch获取到异常值
            reject("失败啦!");
        })

        // await 要放在 async 函数中.
        
        async function main() {
            try {
                let result = await p;
                
                console.log(result);
            } catch (e) {
                console.log(e);
            }
        }
        //调用函数
        main();
    </script>

async和await结合读取文件

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

//读取『为学』
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readGuanShu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

//声明一个 async 函数
async function main(){
    //获取为学内容
    //await Promise对象,readWeiXue()就是Promise对象,value是获取的file
    let weixue = await readWeiXue();
    //获取插秧诗内容
    let chayang = await readChaYangShi();
    // 获取观书有感
    let guanshu = await readGuanShu();

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshu.toString());
}

main();

Ajax

• 定义方法

        // 发送 AJAX 请求, 返回的结果是 Promise 对象
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                //1. 创建对象
                const x = new XMLHttpRequest();

                //2. 初始化
                x.open('GET', url);

                //3. 发送
                x.send();

                //4. 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            //成功啦
                            resolve(x.response);
                        }else{
                            //如果失败
                            reject(x.status);
                        }
                    }
                }
            })
        }

• 测试方法

            //promise then 方法测试
            sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
                console.log(value);
            }, reason=>{})

  // async 与 await 测试  axios
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            //再次测试
            let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')
            console.log(result);
            console.log(tianqi);
        }
        main();

对象拓展

    <script>
        //声明对象
        const school = {
            name:"尚硅谷",
            cities:['北京','上海','深圳'],
            xueke: ['前端','Java','大数据','运维']
        };

       // 获取对象所有的键
        console.log(Object.keys(school));
      //  获取对象所有的值
        console.log(Object.values(school));
      //  entries
        console.log(Object.entries(school));
      //  创建 Map
        const m = new Map(Object.entries(school));
        console.log(m.get('cities'));

     //   对象属性的描述对象
        console.log(Object.getOwnPropertyDescriptors(school));

        const obj = Object.create(null, {
            name: {
                //设置值
                value: '尚硅谷',
                //属性特性
                writable: true,
                configurable: true,
                enumerable: true
            } 
        });
    </script>

ES9

对象展开

• rest参数

        function connect({host, port, ...user}){
            console.log(host);
            console.log(port);
            console.log(user);
        }

        connect({
            host: '127.0.0.1',
            port: 3306,
            username: 'root',
            password: 'root',
            type: 'master'
        });

• 输出

127.0.0.1
3306
//..user作为对象封装
Object
password: "root"
type: "master"
username: "root"

对象合并

        const skillOne = {
            q: '天音波'
        }

        const skillTwo = {
            w: '金钟罩'
        }

        const skillThree = {
            e: '天雷破'
        }
        const skillFour = {
            r: '猛龙摆尾'
        }

        const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};

命名捕获分组

   let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
        //分组命名
        const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;

        const result = reg.exec(str);

        console.log(result.groups.url);

        console.log(result.groups.text);

• 输出

http://www.atguigu.com
尚硅谷

断言

 let str = 'JS5211314你知道么555啦啦啦';
        //正向断言
        //数字后面是不是"啦"
        const reg = /\d+(?=啦)/;
        //输出555
        const result = reg.exec(str);
        //反向断言
        //数字前面是不是"么"
        const reg = /(?<=么)\d+/;
        const result = reg.exec(str);
        //输出555
        console.log(result);

正则扩展

后边多一个？表示懒惰模式。

必须跟在*或者+后边用

如：

如果用正则匹配src中内容非懒惰模式匹配

src=".*"

匹配结果是：src="test.jpg" width="60px" height="80px"

意思是从="往后匹配，直到最后一个"匹配结束

懒惰模式正则：

src=".*?"

结果：src="test.jpg"

因为匹配到第一个"就结束了一次匹配。不会继续向后匹配。因为他懒惰嘛。

.表示除\n之外的任意字符

*表示匹配0-无穷

+表示匹配1-无穷

    <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>/;
        //模式修正符s, .可以匹配任意字符, .*?防止贪婪,模式修正符g,全局匹配
        const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
        //执行匹配
        // const result = reg.exec(str);
        let result;
        let data = [];
        while(result = reg.exec(str)){
            data.push({title: result[1], time: result[2]});
        }
        //输出结果
        console.log(data);
    </script>

• 输出

Array(2)
0: {title: "肖生克的救赎", time: "上映日期: 1994-09-10"}
1: {title: "阿甘正传", time: "上映日期: 1994-07-06"}
length: 2
__proto__: Array(0)

ES10

Object.fromEntries

<script>
    //二维数组
    //数组变对象
    const result1 = Object.fromEntries([
        ['name', '尚硅谷'],
        ['xueke', 'Java,大数据,前端,云计算']
    ]);
    console.log(result1);
    //Map
    const m = new Map();
    m.set('name', 'ATGUIGU');
    //Map变对象
    const result2 = Object.fromEntries(m);
    console.log(result2);

    //Object.entries ES8
    //对象变数组
    const arr = Object.entries({
        name: "尚硅谷"
    })
    console.log(arr);
</script>

trimStart 与 trimEnd

    <script>    
        // trim
        let str = '   iloveyou   ';

        console.log(str);
        //清除左侧空白
        console.log(str.trimStart());
        //清除右侧空白
        console.log(str.trimEnd());
    </script>

flat 与 flatMap

    <script>
        //flat 平
        //将多维数组转化为低位数组
        const arr1 = [1,2,3,4,[5,6]];
        const arr2 = [1,2,3,4,[5,6,[7,8,9]]];
        //参数为深度 是一个数字
        console.log(arr2.flat(2));

        //flatMap
        const arr3 = [1,2,3,4];
        //map里面的回调函数为数组,rusult会变成二位数组,使用flatMap则可变成一位数组
        const result = arr3.flatMap(item => [item * 10]);
        console.log(result);
    </script>

ES11

私有属性

    <script>
        class Person{
            //公有属性
            name;
            //私有属性
            #age;
            #weight;
            //构造方法
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
//无法直接访问,故使用intro()方法获取
            intro(){
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }

        //实例化
        const girl = new Person('晓红', 18, '45kg');

        // console.log(girl.name);
        // console.log(girl.#age);
        // console.log(girl.#weight);

        girl.intro();
    </script>

Promise.allSettled/all

    <script>
        //声明两个promise对象
        const p1 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve('商品数据 - 1');
            },1000)
        });

        const p2 = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                // resolve('商品数据 - 2');
                reject('出错啦!');
            },1000)
        });

        //调用 allsettled 方法
        //可以单独返回每一个Promise对象的结果
        const result = Promise.allSettled([p1, p2]);
        //调用 all 方法
        //如果有一个Promise对象出错,则报错
        const res = Promise.all([p1, p2]);

        console.log(result);

        console.log(res);

    </script>

String.prototype.matchAll

    <script>
        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>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg

        //调用方法
        const result = str.matchAll(reg);

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

        const arr = [...result];

        console.log(arr);

    </script>

可选链操作符?.

    <script>
        //可选链操作符 ?.
        function main(config){
            // const dbHost = config && config.db && config.db.host;
            const dbHost = config?.db?.host;

            console.log(dbHost);
        }

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

动态 import

• html

 <button id="btn">点击</button>
    <script src="./js/app.js" type="module"></script>

• app.js

// import * as m1 from "./hello.js";
//获取元素
const btn = document.getElementById('btn');

btn.onclick = function(){
    import('./hello.js').then(module => {
        module.hello();
    });
}

• hello.js

export function hello(){
    alert('Hello');
}

BigInt

 //大数值运算
        let max = Number.MAX_SAFE_INTEGER;
        console.log(max);
        console.log(max + 1);
        console.log(max + 2);

        console.log(BigInt(max))
        console.log(BigInt(max) + BigInt(1))
        console.log(BigInt(max) + BigInt(2))