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
ES7 - 11新特性总结的更多相关文章
- C++ 11学习和掌握 ——《深入理解C++ 11:C++11新特性解析和应用》读书笔记(一)
因为偶然的机会,在图书馆看到<深入理解C++ 11:C++11新特性解析和应用>这本书,大致扫下,受益匪浅,就果断借出来,对于其中的部分内容进行详读并亲自编程测试相关代码,也就有了整理写出 ...
- C++11新特性总结 (二)
1. 范围for语句 C++11 引入了一种更为简单的for语句,这种for语句可以很方便的遍历容器或其他序列的所有元素 vector<int> vec = {1,2,3,4,5,6}; ...
- C++11新特性总结 (一)
1. 概述 最近在看C++ Primer5 刚好看到一半,总结一下C++11里面确实加了很多新东西,如果没有任何了解,别说自己写了,看别人写的代码估计都会有些吃力.C++ Primer5是学习C++1 ...
- C++ 11 新特性
C++11新特性: 1.auto 2.nullptr 3.for 4.lambda表达式 5.override ...
- [转载] C++11新特性
C++11标准发布已有一段时间了, 维基百科上有对C++11新标准的变化和C++11新特性介绍的文章. 我是一名C++程序员,非常想了解一下C++11. 英文版的维基百科看起来非常费劲,而中文版维基百 ...
- 在C++98基础上学习C++11新特性
自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...
- ES7的新特性
ES7的新特性 ES7 特性: 1.Array.prototype.includes2.Exponentiation Operator(求幂运算) 一,Array.prototype.includes ...
- C++11新特性——range for
很多编程语言都有range for语法功能,自C++11起,终于将这个重要功能加入C++标准中.range for语句,可以方便的遍历给定序列中的每个元素并对其执行某种操作. 1.基本语法 for(d ...
- C++11新特性——大括号初始化
C++11之前,C++主要有以下几种初始化方式: //小括号初始化 string str("hello"); //等号初始化 string str="hello" ...
随机推荐
- 几个概念讲解Xaas
saas:software as a service SaaS平台是运营saas软件的平台.SaaS提供商为企业搭建信息化所需要的所有网络基础设施及软件.硬件运作平台,并负责所有前期的实施.后期的维 ...
- 一文搞懂Cookie,Session,Token,JWT
HTTP协议是无状态的,无状态意味着,服务器无法给不同的客户端响应不同的信息.这样一些交互业务就无法支撑了.Cookie应运而生. Cookie 通过F12开发者工具,先瞅瞅Cookie的颜值 从图中 ...
- 基于bellman-ford算法使用队列优化的spfa求最短路O(m),最坏O(n*m)
acwing851-spfa求最短路 #include<iostream> #include<cstring> #include<algorithm> #inclu ...
- 从零搭建Spring Boot脚手架(7):Elasticsearch应该独立服务
1. Spring Data Elasticsearch Spring Data Elasticsearch是Spring Data项目的子项目,提供了Elasticsearch与Spring的集成. ...
- LDA主题模型困惑度计算
对于LDA模型,最常用的两个评价方法困惑度(Perplexity).相似度(Corre). 其中困惑度可以理解为对于一篇文章d,所训练出来的模型对文档d属于哪个主题有多不确定,这个不确定成都就是困惑度 ...
- Kafka消费与心跳机制
1.概述 最近有同学咨询Kafka的消费和心跳机制,今天笔者将通过这篇博客来逐一介绍这些内容. 2.内容 2.1 Kafka消费 首先,我们来看看消费.Kafka提供了非常简单的消费API,使用者只需 ...
- 【记】《.net之美》之读书笔记(一) C#语言基础
前言 工作之中,我们习惯了碰到任务就直接去实现其业务逻辑,但是C#真正的一些基础知识,在我们久而久之不去了解巩固的情况下,就会忽视掉.我深知自己正一步步走向只知用法却不知原理的深渊,所以工作之余,一直 ...
- NMAP类型题目 (escapeshellarg,escapeshellcmd使用不当)
[BUUCTF 2018]Online Tool 给出了源码 审计 <?php if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $_SERVER[' ...
- 创建Maven项目中的几个问题
一.用eclipse创建maven的web项目,需手动添加WEB-INF文件夹及其web.xml配置文件 二.设置编译版本1.8 在pom.xml中设置 1 <build> 2 <! ...
- Python-信号量和线程池-semaphore ThreadPollExector
信号量 其实本质上是锁,Lock是单锁,信号量是指定多把锁,也就是说通过信号量指定多个数线程可以访问相同资源,一般情况下读操作可以有多个,但写操作同时只有一个 信号量模块 semaphore # 使用 ...