ES7 - 11新特性总结

es7

　　1 Array.prototype.includes　　之前都是使用indexOf判断，没有返回-1，现在includes更加方便

　　　　Includes　　方法用来检测数组中是否包含某个元素，返回boolean值

　　　　let arr = [1, 2, 3, 4, 5];

　　　　arr.includes(1);// true

　　　　arr.includes(6);// false

　　2 指数操作符 **，用来实现幂运算，功能与 Math.pow 结果相同

　　　　2 ** 10;// 2 的 10 次方，与 Math.pow(2, 10); 结果相同，都是 1024

es8

　　async 和 await　　这两种语法结合，可以让异步代码像同步代码一样

　　　　async 是 异步 的简写，await 可以认为是 async wait 的简写，await 理解为等待一个异步方法执行完成

　　　1 async 函数的返回值为 promise 对象

　　　　promise 对象的结果是由 async 函数执行的返回值决定

　　　　// 方法前面加上一个 async ，就变成了一个async函数了，
　　　　// 只要返回值不是一个promise对象，返回值就是一个成功的promise对象，参考promise
　　　　// 返回的是一个promise对象，该promise返回成功，则async函数返回成功，该promise返回失败，则async返回失败
　　　　async function fn(){
　　　　　　// return '晚上要学习';
　　　　　　return new Promise((resolve, reject)=>{
　　　　　　　　resolve('成功');
　　　　　　　　// reject('失败');
　　　　　　})
　　　　}
　　　　const result = fn();
　　　　console.log(result);// 可以看到返回值是要给promise对象
　　　　result.then(value =>{
　　　　　　console.log('返回成功');
　　　　}, reason =>{
　　　　　　console.log('返回失败');
　　　　})

　　　2 await 表达式

　　　　await 必须写在 async 函数中

　　　　await 右侧的表达式一般为 promise 对象

　　　　await 返回的是 promise 成功的值

　　　　await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理

　　　　// 创建一个 promise 对象
　　　　const p = new Promise((resolve, reject) =>{
　　　　　　// resolve('成功');
　　　　　　reject('失败');
　　　　})
　　　　// await 要放在 async 中
　　　　async function fn(){
　　　　　　try{
　　　　　　　　let result = await p;// await 返回结果就是 promise 对象返回成功的值
　　　　　　　　console.log(result);// 成功
　　　　　　} catch (e) {// 在 catch 中可以获取promise对象状态为失败的值
　　　　　　　　console.log(e);// 失败
　　　　　　}
　　　　}
　　　　fn();// 调用函数

　　　3 async 和 await 结合 在 vue 中结合 axios 使用（异步请求同步化）

　　　　1. 在不同情况下发送请求，做相同的处理

　　　　export default{
　　　　　　name: 'test',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　tableData: []
　　　　　　　　}
　　　　　　},
　　　　　　created() {
　　　　　　　　this.getTableData();
　　　　　　},
　　　　　　methods: {
　　　　　　　　handleSearch(){// 在create 中的请求结果和在这个方法中的处理结果相同
　　　　　　　　　　this.getTableData();
　　　　　　　　},
　　　　　　　　async getTableData(){
　　　　　　　　　　try {
　　　　　　　　　　　　let res = await axios.get(url)
　　　　　　　　　　　　this.tableData = res.data;
　　　　　　　　　　} catch (err) {
　　　　　　　　　　　　console.log('请求出错');
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}

　　　　2.在不容情况下的请求，做不同的处理

　　　　export default{
　　　　　　name: 'test',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　tableData: []
　　　　　　　　}
　　　　　　},
　　　　　　async created() {
　　　　　　　　try{
　　　　　　　　　　let res = await this.getTableData();
　　　　　　　　　　this.tableData = res.data;
　　　　　　　　}catch(err){
　　　　　　　　　　console.log('请求出错');
　　　　　　　　}
　　　　　　},
　　　　　　methods: {
　　　　　　　　async handleSearch(){
　　　　　　　　　　try {
　　　　　　　　　　　　let res = await this.getTableData();
　　　　　　　　　　　　this.tableData = res.data;
　　　　　　　　　　} catch(err) {
　　　　　　　　　　　　console.log('请求出错');
　　　　　　　　　　}
　　　　　　　　　　this.getTableData();
　　　　　　　　},
　　　　　　　　getTableData(){
　　　　　　　　　　return new Promise((resolve, reject) =>{
　　　　　　　　　　　　axios.get(url);
　　　　　　　　　　}).then(res=>{
　　　　　　　　　　　　resolve(res);
　　　　　　　　　　}).catch(err=>{
　　　　　　　　　　　　reject(err);
　　　　　　　　　　})
　　　　　　　　}
　　　　　　}
　　　　}

　　对象方法的扩展

　　　　Object.values()　　返回一个给定对象的所有可枚举属性值的数组

　　　　Object.entries()　　返回一个给定对象自身可遍历属性 [key, value] 的数组

　　　　Object.getOwnPropertyDescriptors()　　返回指定对象所有自身属性的描述对象

　　　　const p = {
　　　　　　LPL: '我们是冠军',
　　　　　　RNG: ['UZI', 'Letme', 'xiaohu', 'MLXG', 'Ming']
　　　　}
　　　　Object.keys(p);// ['LPL','RNG'] 返回key数组
　　　　Object.values(p);// ['我们是冠军', ['UZI', 'Letme', 'xiaohu', 'MLXG', 'Ming']]　　返回值对应的数组
　　　　Object.entries(p);// [['LPL', '我们是冠军'],['RNG', ['UZI', 'Letme', 'xiaohu', 'MLXG', 'Ming']]]　　返回值是一个数组，每个元素也都是一个数组
　　　　Object.getOwnPropertyDescriptors(p);// 返回结果是对象，对象中还是对象，还有别的值，打印看一下

 es9

　　扩展运算符与 rest 参数

　　　　rest 参数与扩展运算符在 es6 中已经引入了，不过 es6 中只是针对数组，对象不行

　　　　在 es9 中为对象提供了像数组一样的 rest 参数和扩展运算符，注意rest参数后面不允许有其他参数

// 使用 rest 参数操作对象，user 是后面没有声明的对象， 注意rest参数后面不能有其他参数
function connect({ RNG, adc, ...user }) {
  console.log(RNG);// 全华班
  console.log(adc);// UZI
  console.log(user);// {UZI: '简自豪', MLXG: '刘世宇'}
}
connect({
  RNG: '全华班',
  adc: 'UZI',
  UZI: '简自豪',
  MLXG: '刘世宇'
})

const ONE = { q: '天音波' }, TEO = { w: '金钟罩' }, THREE = { e: '天雷破' }, FOUR = { r: '猛龙摆尾' };
const MLXG = { ...ONE, ...TEO, ...THREE, ...FOUR };
console.log(MLXG);// {q: "天音波", w: "金钟罩", e: "天雷破", r: "猛龙摆尾"}

 　　

es10

　　对象的扩展方法Object.fromEntries()　　参数是一个二维数组，或者是一个 Map

const rng = Object.fromEntries([['adc', 'UZI'], ['uzi', '简自豪']]);// 这里是二维数组，数组里面套数组
console.log(rng);// {adc: "UZI", uzi: "简自豪"}

const map = new Map();
map.set('adc', 'uzi');
const uzi = Object.fromEntries(map);// 这里是 map 集合，这里查看es8中的Object.entries()方法
console.log(uzi);// {adc: "uzi"}

　　字符串方法扩展 trimStart 和 trimEnd

　　　　trim 是清空字符串两端空格，trimStart 则是清除开始空格，trimEnd 清除结束空格

　　数组方法扩展 flat 与 flatMap

　　　　flat 将数组维度降低，多维数组转换成低维数组

const arr = [1, 2, 5, [6, 7, [8, 9]]];
// 参数是一个数字，表示深度，三维数组变成一维数组，深度为2
console.log(arr.flat(2));// [1, 2, 5, 6, 7, 8, 9]
console.log(arr.flat());// [1, 2, 5, 6, 7, [8, 9]]

const arr1 = [1, 2, 3];
const result = arr1.map(i => i * 10);// [10, 20, 30]
const result1 = arr1.map(i => i * 10);// [[10], [20], [30]]
const result11 = arr1.flatMap(i => i * 10);// [10, 20, 30] // 只是这一个功能，降低数组维度

 　　Symbol 扩展 

　　　Symbol.prototype.description

let zn = Symbol('张宁');
console.log(zn.description);// 输出字符串 张宁

 

es11

　　私有属性，声明的标志是一个#

　　　　class Persion{
            // 公有属性
            name;
            // 私有属性，#为私有属性的标志
            #age;
            #weight;
            constructor(name, age, weight){
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
            // 类里面的方法
            say(){
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }
        const boy = new Persion('张宁', 24, '80kg');
        console.log(boy);// Persion {name: "张宁", #age: 24, #weight: "80kg"}
        console.log(boy.name);// 张宁
        console.log(boy.#age);// Private field '#age' must be declared in an enclosing class
        console.log(boy.#weight);// 提示私有属性，只能出现在类里面
        boy.say();// 依次输出 张宁 24 80kg

 　　Promist.allSettled() 方法

// 声明两个promise对象
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功1');
    // reject('失败1');
  }, 1000)
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve('成功2');
    reject('失败2');
  }, 1000)
});

// 两个都成功才会返回成功, 返回数据一个是状态 resolve，
// 一个是值，存在数组中 [{status: "fulfilled", value: "成功1"},{status: "fulfilled", value: "成功2"}],fulfilled表示成功
// 当p2返回错误的时候，result依然返回成功，Promise.allSettled 总是返回成功，
// 当p2返回错误的时候，返回数据一个是状态 resolve，
// 一个是值 [{status: "fulfilled", value: "成功1"},{status: "rejected"reason: "失败2"]
const result = Promise.allSettled([p1, p2]);
// 两个都成功才会返回成功, 返回数据一个是状态 resolve，一个是值在数组中 ['成功1', '成功2']
// 有一个返回失败，就是失败，返回数据一个是状态 rejected，一个是错误的值 失败1
const res = Promise.all([p1, p2]);
console.log(result);
console.log(res);

 　　字符串扩展　　String.prototype.matchAll()

　　　　通过正则表达式获取想要得到的字段

　　可选链操作符　　?.　　判断?前面的值有没有传入，如果传递了，就去读取后面的属性，没有传递就返回 undefined

function main(config) {
  // 当main传递数据的时候，返回 uzi
  console.log(config.rng.adc);
}
main({rng:{adc: 'uzi'}});// main 中传递数据的时候返回 uzi
main();// 什么都不传递的时候报错 Cannot read property 'rng' of undefined


function main1(config) {
  console.log(config?.rng?.adc);
}
main1({rng:{adc: 'uzi'}});// main 中传递数据的时候返回 uzi
main1();// 什么都不传递的时候，返回undefined

 　　动态 import　　就是按需加载，懒加载

　　BigInt 类型

// BigInt 类型  大整型
let n = 510n;
console.log(n, typeof(n));// 510n bigint

let nn = 123;
console.log(BigInt(nn));// 输出 123n  BigInt函数中只能是整数，不能是浮点类型的数

// 大整型主要应用于大数值的运算
let max = Number.MAX_SAFE_INTEGER;// 最大整数
console.log(max);// 9007199254740991
console.log(max + 1);// 9007199254740992
console.log(max + 1);// 9007199254740992  已经不能加上去了
// 可以通过大整型进行计算相加，大整型不能直接与int进行计算，都是大整型才能进行计算
console.log(BigInt(max));// 9007199254740991n
console.log(BigInt(max) + BigInt(1));// 9007199254740992n
console.log(BigInt(max) + BigInt(6));// 9007199254740997n

　　绝对全局对象 globalThis

　　　　之前在javascript在不同环境获取全局对象有不同的方式

　　　　　　node 中 通过 global 

　　　　　　web 中通过 window，self

　　　　现在 globalThis 提供了一个标准的方式来获取不同环境下的全局 this 对象。

　　　　不像 window 或者 self 这些属性，它确保可以在有无窗口的各种环境下正常工作。

　　　　所以，可以放心使用 globalThis，不用担心它的运行环境。全局作用域中的 this 就是globalThis