es7新特性随堂笔记

 1.Array.includes(value,index);  数组查找

1.Array.includes(value,index)
/** value:查找的值  index: 查找的下标**/

const arr = ['西游记'、'水浒传'、'三国演义'、'红楼梦']；

console.log(arr.includes('西游记')); // true
console.log(arr.includes('西游记',1)); // false

console.log(arr.includes('大话西游')); // false

对比：
includes:
    (1)、只能做简单的数组对比，复杂的（比如数组对象）是无法进行判断的；
    (2)、返回布尔值，直接判断数组中存不存在这个值；

indexOf:返回索引；

相同：都是===比较；
不同：对NaN的处理，indexOf是-1，includes只是查找NaN

2. x ** y : x的y次方

2. x ** y : x的y次方
console.log(2 ** 10); 2的10次方。// 1024
等同于Math.pow(2,10)

3.async和await

<1>、async,可以不搭配await使用

async function fn(){
    // return ‘硅谷’；// 返回的是一个成功的Promise对象
    // throw new Error('出错啦！')； 返回的是一个失败的Promise
    // 返回的结果如果是一个Promise对象
    return new Promise((resolve,reject) => {
        // resolve('成功的数据')；
        reject(‘失败的数据’);
    })
}
const result = fn();
console.log(result); // 返回一个Promise对象

// 调用then方法
result.then(value => {
    console.log(value); // 打印成功内容
},reason => {
    console.warn(reason); // 打印出失败的警告
})

<2>、await必须搭配async使用
// 创建promise对象
const p = new Promise((resolve,reject) => {
    resolve('用户数据')；
})
async function main() {
    // 利用try ... catch 捕获失败数据
    try{
        let result = await p;
        console.log(result)； // 用户数据
    }catch(e){
        console.log(e); // 失败信息
    }
    
}
main();

4.[es8] 对象方法扩展 => Object.keys、Object.values、Object.entries

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

// 获取对象所有的键
console.log(Object.keys(school));  // ['name','cities','xueke']

// 获取对象所有的值
console.log(Object.values(school)); // [硅谷',['北京','上海','深圳'],['前端',' Java','大数据','运维']]

// entries => 返回键值对形式，方便map遍历
console.log(Object.entries(school)); // [{'name'=>'硅谷'},{'cities'=>['北京','上海','深圳']},{'xueke':['前端',' Java','大数据','运维']}]

const m = new Map(Object.entries(school));
console.log(m.get('name')); // '硅谷'

5.正则扩展-命名捕获分组 [?<key>]

// 声明一个字符串
let str = '<a href="http://www.baidu.com">百度</a>';

// 提取url与标签文本
const reg = /a href="(.*)">(.*)<\/a>/;

// 执行 - 正则写法
const result = reg.exec(str);
console.log(result); // ['<a href="http://www.baidu.com">百度</a>','http://www.baidu.com','百度']
console.log(result[1]); // http://www.baidu.com

// 命名捕获分组处理
const reg = /a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result); // ndex:['<a href="http://www.baidu.com">百度</a>','http://www.baidu.com','百度'],groups:{url:'http://www.baidu.com',text:'百度'}
console.log(result.groups); // {url:'http://www.baidu.com',text:'百度'}

6.正则扩展-反向断言

// 声明字符串
let str = 'jsdhjs8565hdj你知道吗jd5啦啦啦';

// 正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(reg);
console.log(result); // ['5']


// 反向断言
const reg = /(?<=吗)\d+/;
const result = reg.exec(result);
console.log(result); // ['5']

7.正则扩展-dotAll模式

// 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>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s;
let result;
let data = []; // 输出数组
while(result = reg.exec(reg)){
    console.log(result); // ['<li>...</li>...<li>...</li>','肖生克的救赎','上映日期：1994-09-10'];['<li>...</li>...<li>...</li>','阿甘正传','上映日期：1994-07-06'];
    data.push({title:result[1],time:result[2]});
}

console.log(data); // [{title:'生克的救赎',time:'上映日期：1994-09-10'},{title:'肖阿甘正传',time:'上映日期：1994-07-06'}]

8.[es10] Object.fromEntries 将二维数组转为对象

// 二维数组
// [es8]特性：Object.entries 将对象转为二维数组
const arr = Object.entries({name:'硅谷'});
console.log(arr); // ['name','硅谷']

// [es10] 特性：Object.fromEntries 将二维数组转为对象
const result = Object.fromEntries([
    ['name','硅谷'],
    ['age','30']
]);
console.log(result); // {name:'硅谷',age:'30'}

9.trimStrat 与 trimEnd 清楚左或右的空格

// trim
let str = ' iloveyou ';
console.log(str); // ' iloveyou '
console.log(str.trimStart()); // 'iloveyou '
console.log(str.trimEnd()); // ' iloveyou'

10.symbol.prototype.description 获取symbol的描述

// 创建symbol
let s = Symbol('硅谷');
console.log(s.description); // '硅谷'

11.[es11] 私有属性

class Person{
    // 共有属性
    name;
    // 私有属性
    #age
    #weight
    constructor(name,age,weight) {
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }
    intor {
        console.log(gril.name);
        console.log(gril.#age);
        console.log(gril.#weight);
    }
}

// 实例化
const gril = new Person('小红','18','90');
console.log(gril); // {name:'小红',age:'18',weight:'90'}
console.log(gril.name); // 小红
console.log(gril.#age); // 报错
console.log(gril.#weight); // 报错

console.log(gril.intor); // 小红 18 90

12.Promise.allSettled 其中一个方法报错，也会一直往下执行，并返回结果；

      Promise.all其中一个方法报错都不会往下执行，并抛出报错内容

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

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

// 调用allSettled方法 无论对错都会显示结果；继续往下执行方法，并返回结果
const result = Promise.allSettled([p1,p2]);
console.log(result); // [{status:'fulfilled',value:'商品数据 - 1'},{status:'fulfilled',value:'商品数据 - 2'}]
// p2 -> reject
console.log(result); // [{status:'fulfilled',value:'商品数据 - 1'},{status:'rejected',value:'出错啦！'}]


// Promise.all 全部成功了才会返回值，其中一个报错，返回报错内容；其中一个报错，不会往下执行，抛出报错内容
const res = Promise.all([p1,p2]);
// p2:reject
console.log(res); // 出错啦
console.log(res); // ['商品数据 - 1','商品数据 - 2']

13.String.prototype.matchAll

<ul>
    <li>
        <a>肖生克的救赎</a>
        <a>上映时间：1994-09-10</a>
    </li>
    <li>
        <a>阿甘正传</a>
        <a>上映时间：1994-07-06</a>
    </li>
</ul>

// 声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg;

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

const arr = [...result];
console.log(arr) // ['<li>...</li>...<li>...</li>','肖生克的救赎','上映日期：1994-09-10'];['<li>...</li>...<li>...</li>','阿甘正传','上映日期：1994-07-06'];

14.可选链操作符(?.)

function main(config) {
    // const dbHost = config && config.db && config.db.host;
    const dbHost = config?.db?.host;
    console.log(dbHost); // 192.168.1.100
}
main({
    db:{
        host:'192.168.1.100',
        username:'root'
    },
    cache:{
        host:'192.168.1.200',
        username:'admin'
    }
})

15.动态import => es11

// 元素
<button id="btn"></button>

// 静态引入其他的js
import * as m1 from './hello.js';
// 获取元素
const btn = document.getElementById(btn);
btn.onclick = function() {
    // 动态引入
    import('./hello.js').then(module => {
        console.log(module); // hello方法
        module.hello(); // hello world!!!!
    })
}


// hello.js
funtion hello () {
    console.log('hello world!!!!')
}

16.BigInt 大整形

// 大整形
let n = 512n;
console.log(n,typeof(n)); // BigInt

// 函数
let n = 123;
console.log(BigInt(n)); // 123n

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

console.log(BigInt(max))  // 9007199254740991n
console.log(BigInt(max) + BigInt(1)) // 9007199254740992n
console.log(BigInt(max) + BigInt(2)) // 9007199254740993n

17.绝对全局对象 globalThis

// 作用：对全局对象操作，直接用globalThis
console.log(globalThis); // 指向全局对象window