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)); // falseconsole.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#weightconstructor(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); // 9007199254740992console.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

es7新特性随堂笔记相关推荐

ES6-Promise简介、ES7 新特性及ES8新特性-async和await
目录 ES6-Promise Promise简介 Promise.prototype.then方法 Promise.prototype.catch方法 ES7 新特性 Array.prototype. ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
ES7新特性01-ES7新特性
ES7新特性01-ES7新特性文章目录 ES7新特性01-ES7新特性 includes **(幂运算) <!DOCTYPE html> <html lang="en&q ...
ECMA 2016(ES7)新特性
ECMA 2016(ES7)新特性 Array.prototype.includes():判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false. 幂运算符**: a ** ...
ES7新特性_介绍--JavaScript_ECMAScript_ES6-ES11新特性工作笔记047
然后我们来看es7中的两个新特性首先来看第一个,用来判断,数组中是否包含某个元素 mingzhu.includes('') 可以看到其实就是数组对象.includes 可以看到包含返回true 不包 ...
ECMAScript 2016(ES7)新特性简介
简介自从ES6(ECMAScript 2015)在2015年发布以来,ECMAScript以每年一个版本的速度持续向前发展.到现在已经是ECMAScript 2020了. 每个版本都有一些新的特性, ...
api es7 删除所有数据_【译】ECMAScript 2016 (ES7) 新特性一览
本文回答了关于下一版 JavaScript(ECMAScript 2016)的以下几个问题: 谁在设计? 如何设计? 会有什么特性? 本文会持续更新以及时反馈最新进展. 1.谁在设计 ECMAScri ...
ES6/ES7新特性
ES6 一.let const let 声明的变量只在代码块内有效 for循环的计数器适合用let命令不存在变量提升.–即var变量在声明之前就能使用,值为undefine.let不允许暂时性死区 ...
Javascript 之 ES7 新特性详解
ES7+ES8 前言本篇文章主要介绍ES7+ES8的一些新功能,并结合ES6的一些API做出了相应的比较. ES7 1.Array.prototype.includes() includes()作用 ...
js es5,es6,es7 新特性
es5 不允许使用未声明的变量不允许删除变量或对象.函数不允许变量重名不允许使用八进制不允许使用转义字符不允许对只读属性赋值不允许对一个使用getter方法读取的属性进行赋值不允许删除一 ...

es7新特性随堂笔记

es7新特性随堂笔记相关推荐

最新文章

热门文章