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

ES7 - 11新特性总结的更多相关文章

  1. C++ 11学习和掌握 ——《深入理解C++ 11:C++11新特性解析和应用》读书笔记(一)

    因为偶然的机会,在图书馆看到<深入理解C++ 11:C++11新特性解析和应用>这本书,大致扫下,受益匪浅,就果断借出来,对于其中的部分内容进行详读并亲自编程测试相关代码,也就有了整理写出 ...

  2. C++11新特性总结 (二)

    1. 范围for语句 C++11 引入了一种更为简单的for语句,这种for语句可以很方便的遍历容器或其他序列的所有元素 vector<int> vec = {1,2,3,4,5,6}; ...

  3. C++11新特性总结 (一)

    1. 概述 最近在看C++ Primer5 刚好看到一半,总结一下C++11里面确实加了很多新东西,如果没有任何了解,别说自己写了,看别人写的代码估计都会有些吃力.C++ Primer5是学习C++1 ...

  4. C++ 11 新特性

    C++11新特性:          1.auto          2.nullptr          3.for          4.lambda表达式          5.override ...

  5. [转载] C++11新特性

    C++11标准发布已有一段时间了, 维基百科上有对C++11新标准的变化和C++11新特性介绍的文章. 我是一名C++程序员,非常想了解一下C++11. 英文版的维基百科看起来非常费劲,而中文版维基百 ...

  6. 在C++98基础上学习C++11新特性

    自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...

  7. ES7的新特性

    ES7的新特性 ES7 特性: 1.Array.prototype.includes2.Exponentiation Operator(求幂运算) 一,Array.prototype.includes ...

  8. C++11新特性——range for

    很多编程语言都有range for语法功能,自C++11起,终于将这个重要功能加入C++标准中.range for语句,可以方便的遍历给定序列中的每个元素并对其执行某种操作. 1.基本语法 for(d ...

  9. C++11新特性——大括号初始化

    C++11之前,C++主要有以下几种初始化方式: //小括号初始化 string str("hello"); //等号初始化 string str="hello" ...

随机推荐

  1. 科普,想成为厉害的 Java 后端程序员,你需要懂这些

    站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...

  2. 【大数据】MapReduce开发小实战

    Before:前提:hadoop集群应部署完毕. 一.实战科目:做一个Map Reduce分布式开发,开发内容为统计文件中的单词出现次数. 二.战前准备 1.本人在本地创建了一个用于执行MR的的文件, ...

  3. swagger2注解详细说明

    @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...

  4. Redis学习(四)redis发布订阅

    文章更新时间:2020/04/22 一.简介 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. ...

  5. DeRPnStiNK靶机渗透

    DeRPnStiNK靶机渗透 常规的信息搜集 扫到了phpmyadmin以及wordpress并在后台发现弱密码,即admin,admin 这里对wordpress进行了扫描: 扫描插件: searc ...

  6. Java中synchronized关键字理解

    好记性不如烂笔头~~ 并发编程中synchronized关键字的地位很重要,很多人都称它为重量级锁.利用synchronized实现同步的基础:Java中每一个对象都可以作为锁.具体表现为以下三种形式 ...

  7. 分享一些比较好用的(免费)网站及推荐理由 SMARK

    分享一些比较好用的(免费)网站及推荐理由 --By SMARK 资源类 这里面是一些有供下载的资源的网站等 视频 片库 内容怎么样有待考证 蓝光网 看着还行, 打赏收入 预告片世界 还行, 收入有待考 ...

  8. [iTyran原创]iPhone中OpenGL ES显示3DS MAX模型之二:lib3ds加载模型

    [iTyran原创]iPhone中OpenGL ES显示3DS MAX模型之二:lib3ds加载模型 作者:u0u0 - iTyran 在上一节中,我们分析了OBJ格式.OBJ格式优点是文本形式,可读 ...

  9. 【转载】C/走迷宫代码

    1 #include<iostream> 2 #include<windows.h> 3 #include"GotoXY.h" 4 #include < ...

  10. 048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例——阶乘的累加和

    048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例--阶乘的累加和 本文知识点:通过案例练习嵌套循环应用 案例练习--阶乘的累加和 案例题目 ...