学习ES6-11的第一天
一、ES6
1.1let关键字四大特性
1.2let点击变色小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.item{
width: 200px;
height: 100px;
border: 1px solid red;
margin: 0 5px;
float: left;
}
</style>
</head>
<body>
<h2>点击切换颜色案例</h2>
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<script>
// let item = document.getElementsByClassName('item');
// for(var i = 0; i < item.length; i++){
// item[i].οnclick=function(){
// this.style.background='pink';
// }
// }
// console.log(i); //i的值最后增加到3了如果这里使用item[i]做事件就会报错
let item = document.getElementsByClassName('item');
for(let i = 0; i < item.length; i++){
item[i].onclick=function(){
item[i].style.background='pink';
}
}
//因为let具有块级作用域，不像var那样有全局作用域
//执行代码的大致样式
// {
// let i = 0
// {
// item[i].οnclick=function(){
// item[i].style.background='pink';
// 这里执行向外层去找i=0，不像var那样找到一个3
// }
// }
// {
// let i = 1
// //-------
// }
// {
// let i = 2
// //----------
// }
</script>
1.3const关键字五大特性
最后一个只是修改了地址里面的值并没有修改地址所以不会报错
1.4解构赋值
<script>
//数组
const str = ['zhangshan','lisi','wangermazi'];
let [zhang,li,wang] = str;
console.log(zhang);
console.log(li);
console.warn('---------------------');
//对象
const duixiang = {
name:'houwang',
age:18,
kk:function(){
console.log('猴王爱吃香蕉');
}
}
let {name,age,kk} = duixiang;
console.log(name);
kk();
</script>
1.5模板字符串
1.6对象的简化写法
<script type="text/javascript">
let name = 'houwang';
let age = function(){
console.log('我的年龄18岁');
}
//ES6之前的写法
// let duixiang = {
// name:name,
// age:age,
// kk:function(){
// console.log('这是ES6前面的写法');
// }
// }
/**ES6写法**/
let duixiang = {
name,
age, //重名既可省略
kk(){
console.log('ES6新写法');
}
}
console.log(duixiang);
</script>
1.7箭头函数
1.7.1箭头函数中this是静态的，始终指向函数声明作用域下的this的值
<script>
//1.箭头函数中this是静态的，始终指向函数声明作用域下的this的值
function getName1(){
console.log(this.name);
}
var getName2 = () => {
console.log(this.name);
}
window.name='houwang';
const name = {
name:'猴子爷爷'
}
// getName1(); //均指向houwang
// getName2(); //均指向houwang
//使用call改变
getName1.call(name);
getName2.call(name);
</script>
1.7.2不能构造实例化对象，不能使用arguments变量
1.7.3demo01点击方块两秒变色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<script>
let div = document.getElementsByTagName('div');
//以前的写法
// div[0].οnclick=function(){
// var that = this;
// setTimeout(function(){
// that.style.background='pink';
// },2000);
// }
//箭头函数中this是静态的，始终指向函数声明作用域下的this的值
div[0].onclick=function(){
setTimeout(() => {
this.style.background='pink';
},2000);
}
</script>
1.7.4demo02从数组中返回偶数
<script>
var str = [2,3,5,8,10];
//filter方法筛选数组 返回true进行保留
//之前的方法
// var arr = str.filter(function(item){
// if(item % 2===0){
// return true;
// }else{
// return false;
// }
// })
var arr = str.filter(item => item % 2 === 0);
console.log(arr);
</script>
1.8给函数参数赋初始值
<script>
function add(a,b,c=240){
return a+b+c;
}
console.log(add(5,5)); //输出250
console.log(add(5,5,15)); //输出25，15替换了c默认值
console.warn(' ');
//与解构赋值结合
//以前的写法
// function jiegou(options){
// console.log(options.user);
// console.log(options.user);
// console.log(options.password);
// }
function jiegou({url='127.0.0.1',user,password}){
console.log(url);
console.log(user);
console.log(password);
}
//传了url替换掉url默认值
jiegou({url:'localhost',user:'root',password:'123456'})
</script>
1.9rest参数
<script>
//ES6中新增rest参数，用来获取函数的实参，替代arguments
//ES5写法
function date1(){
console.log(arguments);
}
date1('重庆','高等','猴王');
//ES6写法
function date2(...agrs){
console.log(agrs);
}
date2('重庆','高等','猴王');
</script>
两者不同点就是ES5的是一个对象，ES6是一个数组
二、ES6
2.1扩展运算符
2.1.1扩展运算符介绍
<script>
var str = ['重庆','高等','猴王'];
function houwang(){
console.log(arguments);
}
houwang(str); //['重庆','高等','猴王']
houwang(...str); //'重庆','高等','猴王'
</script>
注：ES5是只有一个参数数组，ES6有三个参数
2.1.2扩展运算符应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script>
//1.数组的合并
var houhome = ['猴子','猴王'];
var fenghuang = ['曾毅','玲花'];
// //ES5的写法
// var str1 = houhome.concat(fenghuang);
//ES6的写法
var str2 = [...houhome,...fenghuang];
console.log(str2);
//2.数组的克隆 //注意如果数组中的数据是引用数据类型则是浅拷贝
var houhomecopy = [...houhome];
console.log(houhomecopy);
//3.将伪数组转化成真正的数组
var div = document.querySelectorAll('div');
console.log(div); //伪数组
console.warn(' ');
div2 = [...div];
console.log(div2);
</script>
2.2Symbol介绍与创建
2.2.1介绍
<script>
//这个字符串猴王只是做个描述 实际跟注释的差不多
var s1 = Symbol('猴王');
console.log(s1,typeof s1);
var s2 = Symbol('猴王');
console.warn(s1 === s2);
//symbol.for访问的是一个全局的symbol表，如果有了就访问对应对象，没有就重新创建
var s3 = Symbol.for('猴王');
console.log(s3,typeof s3);
var s4 = Symbol.for('猴王');
console.warn(s3 === s4);
</script>
2.2.2往对象里面添加值demo01
var obj = {
name:'俄罗斯方块',
top:function(){
console.log('我可以快速向上移动');
},
down:function(){
console.log('我可以快速向下移动');
}
}
//例如我们这里有一个obj对象 我们向里面添加top和down这两个方法
//但我们不确定这里面有没有这个两个方法 为避免破坏里面的数据使用Symbol
//1.先声明一个对象
var methods = {
top:Symbol(),
down:Symbol()
}
//2.安全快速高效的添加进去这两个方法
obj[methods.top]=function(){
console.log('我可以快速向上移动');
}
obj[methods.down]=function(){
console.log('我可以快速向下移动');
}
console.log(obj);
2.2.3往对象里面添加值demo02
let youxi = {
name:'狼人杀',
[Symbol('say')]:function(){
console.log('我可以发言');
},
[Symbol('zibao')]:function(){
console.log('我可以自爆');
}
}
console.log(youxi);
2.2.4Symbol内置值
2.3迭代器
2.3.1for in和for of循环
<script>
var houhome = ['猴子','猴儿','猴王'];
//result保存的是键值
for(let result of houhome) console.log(result);
//result保存的是键名（我理解为下标）
for(let result in houhome) console.log(result);
</script>
2.3.2遍历原理
<script>
var houhome = ['猴子','猴儿','猴王'];
//Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。
var iterator = houhome[Symbol.iterator]();
console.log(iterator);
console.warn(iterator.next());
console.warn(iterator.next());
console.warn(iterator.next());
console.warn(iterator.next()); //done为真，表示遍历完成
</script>
2.3.3自定义遍历数据
<script>
var banji = {
name:'花果山',
arr:[
'houwang',
'houer',
'houba',
'houye'
],
[Symbol.iterator](){
let index = 0;
let _this = this;
return {
next:function(){
if(index < _this.arr.length){
let result = {value:_this.arr[index],done:false};
index++;
return result;
}else{
return {value:undefined,done:true};
}
}
}
}
}
for(let v of banji){
console.log(v);
}
</script>
2.4生成器
2.4.1函数声明及调用
next分割
<script type="text/javascript">
//yield函数代码的分隔符 通过next方法来控制代码执行
function * gen(){
console.log('我是第1个');
yield '1'
console.log('我是第2个');
yield '2'
console.log('我是第3个');
yield '3'
console.log('我是第4个');
}
let iterator = gen();
iterator.next();
console.log('-----------');
iterator.next();
iterator.next();
iterator.next();
</script>
每次调用的函数结果是yield的自变量的值
<script type="text/javascript">
//yield函数代码的分隔符 通过next方法来控制代码执行
function * gen(){
//console.log('我是第1个');
yield '111'
//console.log('我是第2个');
yield '222'
//console.log('我是第3个');
yield '333'
//console.log('我是第4个');
}
let iterator = gen();
console.log(iterator.next());
console.log('-----------');
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
</script>
2.4.2生成器函数的参数
gen调用可以传入参数
next方法可以传入实参
注：第n次调用传入的实参将作为第n-1个yield的整体返回结果
<script>
function * gen(arg){
console.log(arg);
let one = yield 111;
console.warn(one);
let two = yield 222;
console.log(two);
let three = yield 333;
console.log(three);
}
let iterator = gen('gen传入的参数');
console.log(iterator.next('传入却没有输出'));
console.log(iterator.next('AAA')); //第二次调用传入的实参将作为第一次yield返回的结果
console.log(iterator.next('BBB')); //这次调用将作为第二次yield整体的返回结果
console.log(iterator.next('CCC'));
</script>
2.4.3生成器的实例demo01（回调地狱）
回调地狱典型案例
<script>
// 一秒后输出111，再过一秒输出222，再过一秒输出333
//回调地狱
setTimeout(() => {
console.log(111);
setTimeout(() => {
console.log(222);
setTimeout(() => {
console.log(333);
},1000)
},1000)
},1000)
</script>
咱们使用gen生成器函数来安排他
<script>
let one = () => {
setTimeout(() => {
console.log(111);
//执行完毕后自动执行下一个
iterator.next();
},1000)
}
let two = () => {
setTimeout(() => {
console.log(222);
//执行完毕后自动执行下一个
iterator.next();
},1000)
}
let three = () => {
setTimeout(() => {
console.log(333);
},1000)
}
function * gen(){
yield one();
yield two();
yield three();
}
let iterator = gen();
iterator.next();
</script>
2.4.4生成器的实例demo02
<script>
//获取用户数据传给订单数据再查询商品数据
let user = () => {
setTimeout(() => {
let data = '1用户数据'
//这是第二次调用next会作为第一次yield的整体返回结果
iterator.next(data);
},1000)
}
let getOrder = () => {
setTimeout(() => {
let data = '2订单数据'
iterator.next(data);
},1000)
}
let getGoods = () => {
setTimeout(() => {
let data = '3商品数据'
iterator.next(data);
},1000)
}
function * gen(){
let one = yield user();
console.log(one);
let two = yield getOrder();
console.log(two);
let three = yield getGoods();
console.log(three);
}
let iterator = gen();
iterator.next();
</script>
2.5set集合
2.5.1集合介绍和api
<script>
let s = new Set();
console.log(s,typeof s);
let s1 = new Set(['1','2','3','1'])
//自带去重功能
console.log(s1);
//检测长度
console.log(s1.size);
//分割
console.warn('');
//新增
s1.add('4');
console.log(s1);
//删除
s1.delete('4');
console.log(s1);
//检测有没有当前元素
console.log(s1.has('5'));
//清空
s1.clear();
console.log(s1);
</script>
2.5.2集合基操
<script>
var arr1 = [1,2,3,4,5,4,3,2,1];
var arr2 = [3,4,5,8,9];
//1.数组去重
//不使用三个点转换为数组，这里得到的是一个对象
let result1 = [...new Set(arr1)];
console.log(result1);
console.warn('-----------');
//2.求arr1和arr2的交集
//先去重减少空间复杂度
// let result2 = [...new Set(arr1)].filter(item => {
// let s2 = new Set(arr2);
// if(s2.has(item)) return true;
// return false
// })
//简化19-23行代码
let result2 = [...new Set(arr1)].filter(item => new Set(arr2).has(item));
console.log(result2);
console.warn('-----------');
//3.求arr1和arr2并集 合并再去重
let result3 = [...new Set([...arr1,...arr2])];
console.log(result3);
console.warn('-----------');
//4.差集 arr1和arr2的差集就是在arr1里面有arr2里面没有的集合2
//就是并集取反
let result4 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)));
console.log(result4);
</script>
2.6map
2.6.1map介绍和api
<script>
var m = new Map();
//1.增加元素 键名,键值
m.set('name','猴王');
m.set('change',function(){
console.log('猴王可以改变你~~~');
});
let obj = {
address:'花果山'
}
//键名obj是一个对象，键值是一个数组
m.set(obj,['水帘洞','白骨精','牛魔王'])
console.log(m);
console.warn('-------------------')
//2.size
console.log(m.size);
//3.删除
//console.log(m.delete('name'));
//4.遍历
for(let result of m ){
console.warn(result);
}
//5.清空
m.clear()
console.log(m);
</script>
2.7Class类基操
2.7.1Class初体验
<script>
//ES5前写法
function HUAWEI(brand,price){
//对实例对象做初始化
this.brand=brand;
this.price=price;
}
//添加方法
HUAWEI.prototype.call = function(){
console.log('我可以打电话');
}
let huawei = new HUAWEI('华为','5999');
huawei.call();
console.log(huawei);
//Class写法
class ONEPLUS{
constructor(brand,price){
this.brand=brand;
this.price=price;
}
call(){
console.log('我可以打电话');
}
}
let oneplus = new ONEPLUS('1+','4999');
console.log(oneplus);
</script>
2.7.2Class的静态成员介绍
<script>
//实例对象和函数对象是不相通的
function HUAWEI(){
}
//brand和price是属于函数对象的 这样的属性称之为静态成员
HUAWEI.brand = '华为';
HUAWEI.price = function(){
console.log('我的价格是 5999');
}
HUAWEI.prototype.size = '6.72inch';
let huawei = new HUAWEI();
console.log(huawei.size);
console.log(huawei.brand);
//huawei.price(); //报错 实例对象访问不到函数对象的属性和方法
class ONEPLUS{
//静态属性
static name='1+'
price(){
console.log('我的价格是 4999');
}
}
let oneplus = new ONEPLUS();
console.log(oneplus.name);
console.log(ONEPLUS.name);
oneplus.price()
</script>
2.7.3继承
<script type="text/javascript">
class Person{
constructor(age,sex){
this.age = age;
this.sex = sex;
}
call(){
console.log('我会打人');
}
}
class Son extends Person{
constructor(age,sex,city){
super(age,sex);
this.city = city;
}
}
let son = new Son('18','男','花果山');
console.log(son);
son.call();
</script>
2.7.4get和set
<script>
class Houwang{
get age(){
console.log('我不知道我多少岁');
return '18';
}
set city(value){
console.log('我住'+value);
}
}
let houwang = new Houwang();
console.log(houwang.age); //age属性的值就是方法的返回值
houwang.city='花果山'
</script>
2.8数值扩展和对象扩展
2.8.1数值扩展
<script type="text/javascript">
//1.Number.EPSILON
//Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，
//就可以认为已经没有意义了，即不存在误差了
console.log('javascript中最小精度为:'+Number.EPSILON);
function main(a,b){
if(a-b < Number.EPSILON) return true;
return false
}
console.log(0.1+0.2 == 0.3);
console.log(main(0.1+0.2,0.3));
console.warn('---------------------')
//2.Number.isFinite 检测是不是一个有限数值
console.log(Number.isFinite(100));
console.log(Number.isFinite(100/0));
console.log(Number.isFinite(Infinity)); //Infinity表示无穷
console.warn('--------------------')
//3.Number.isNaN 检测是不是一个NaN
console.log(Number.isNaN(123));
//4.Number.parseInt和Number.parseFloat截断字符串
console.log(Number.parseInt('1314520love'));
console.log(Number.parseFloat('3.1415926神奇数字'));
console.warn('--------------------')
//5.Number.isInteger判断是不是一个整数
console.log(Number.isInteger(555));
console.log(Number.isInteger(5.55));
//6.Math.trunc抹掉小数部分
console.log(Math.trunc(3.1415926));
console.warn('--------------------')
//7.Math.sign判断一个数是正数(1),零(0),负数(-1)
console.log(Math.sign(100));
console.log(Math.sign(0));
console.log(Math.sign(-100));
</script>
2.8.2对象扩展
<script>
//1.Object.is判断两个值是否相等
console.log(Object.is(100,100));
console.log(Object.is(NaN,NaN));
console.log(NaN === NaN); //NaN与任何数值做比较都是false
console.warn('---------------');
//2.Object.assign对象合并 有的属性后面那个覆盖前面那个
let configOne = {
url:'127.0.0.1',
name:'root',
user:'root',
password:'123456',
}
let configTwo ={
url:'localhost',
user:'admin',
password:'cqhg'
}
console.log(Object.assign(configOne,configTwo));
console.warn('---------------');
//3.Object.setPrototypeOf设置和获取原型
let objOne = {
name:'猴王'
}
let objTwo = {
city:'花果山'
}
//设置objOne的原型有objTwo
Object.setPrototypeOf(objOne,objTwo);
console.log(objOne);
//获取
console.log(Object.getPrototypeOf(objOne));
</script>
2.9模块化
2.9.1暴露数据三种方式
2.9.2导入数据三种方式
模块化
三、ES6
3.1bable模块化代码转换（解决兼容性问题）
1.初始化
npm init --yes
安装（-D开发依赖）
npm i babel-cli babel-preset-env browserify -D
2.代码转换（局部安装的命令前要使用npx）
// 原文件路径 （可选参数） 需要转换到的文件目录 （必加参数）
npx babel ES6/20模块化基操/20原文件js -d ES6/20模块化基操/21babel打包js --presets=babel-preset-env
3.打包
//注意路径
npx browserify ES6/20模块化基操/21babel打包js/20模块化基操app.js -o ES6/20模块化基操/21babel打包js/bundle.js
此时已经多了一个bundle.js文件
4.准备工作完成我们的代码已经能跑了
5.当我们修改了原文件app.js的内容需要重新进行转换和打包
四、ES7
4.1查找数组元素存在，和幂运算
<script type="text/javascript">
//查找数组存在某元素不 跟indexOf有点儿类似
var arr = ['猴王','猴子','猴儿'];
console.log(arr.includes('猴王'));
console.log(arr.includes('猴爸'));
console.warn('-------');
// **幂运算
console.log(2**10);
//Math的幂运算
console.log(Math.pow(2,10));
</script>
五、ES8
5.1async和await
参见csdnPromise
5.2对象方法扩展
<script>
var obj = {
name:'houwang',
arr:['猴王','猴子','猴儿']
}
//获取键名
console.log(Object.keys(obj));
//获取键值
console.log(Object.values(obj));
</script>
<script>
var obj = {
name:'houwang',
arr:['猴王','猴子','猴儿']
}
//返回的是一个数组，而每一个成员又是一个数组
//数组第一个值是键名，第二个是键值
console.log(Object.entries(obj));
//创建map
var m = new Map(Object.entries(obj));
console.log(m);
console.log(m.get('name'));
</script>
<script>
var obj = {
name:'houwang',
arr:['猴王','猴子','猴儿']
}
//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(obj));
// 第一个参数原型对象设置为null 第二个参数描述对象
const objone = Object.create(null,{
name:{
//设置值
value:'houwang',
//属性特征
writable:false, ///是否可写
configuarble:true, //是否可以删除
enumerable:true //是否可以枚举
}
})
objone['name']="666" //重写name值失败
console.log(objone);
</script>
六、ES9
6.1rest参数
<script>
function kk({name,password,...arr}){
console.log(name);
console.log(password);
console.log(arr);
}
kk({
name:'admin',
password:'123456',
type:'master',
port:'3306',
url:'localhost'
})
</script>
6.2扩展运算符（对象的合并）
<script>
var houzi = {
q:'我可以偷桃子'
}
var houwang = {
w:'我可以吃香蕉'
}
var houmu = {
e:'我可以生猴子'
}
const huaguoshan = {...houzi,...houwang,...houmu};
console.log(huaguoshan);
</script>
6.3正则扩展（捕获命名）
<script>
let str = '<a href="www.baidu.com">百度</a>'
//提取域名和文字 ?<变量名> .*通配符 \用于转义
var reg = /<a href="(?<url>.*)">(?<wangzhi>.*)<\/a>/;
const result = reg.exec(str);
console.log(result);
console.log(result.groups.url);
</script>
6.4正则扩展（反向断言：根据前后面的东西做唯一识别）
<script>
var str = 'ffgf567快快快555没有了'
//1.正向断言 取‘没有了’前面的数字
var reg1 = /\d+(?=没有了)/;
const result1 = reg1.exec(str);
console.log(result1);
//反向断言
var reg2 = /(?<=快)\d+/;
const result2 = reg2.exec(str)
console.log(result2);
</script>
6.5正则扩展（dotAll模式）
<script>
let str = ` <ul>
<li>
<a>铠甲勇士</a>
<p>上市时间:2012-10-15</p>
</li>
<li>
<a>刑天铠甲</a>
<p>上市时间:2013-08-30</p>
</li>
</ul>`;
//dot . 元字符 除了换行符以外的任意单个字符
// 普及一哈：贪婪匹配多个，非贪婪带问号，匹配一个，
// ?防止贪婪 模式修正符g全局匹配 模式修正符s，.将匹配任意字符
var reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
//循环处理将数据保存好
let data = [];
let result;
while(result = reg.exec(str)){
console.log(result);
data.push({title:result[1],time:result[2]});
}
console.log(data);
</script>
七、ES10
7.1对象扩展方法（二维数组转化为对象）
<script>
var arr = [['name','猴王,猴子,猴儿'],['number','1,2,3']];
console.log(arr);
let result1 = Object.fromEntries(arr)
console.log(result1);
var m = new Map();
m.set('name','猴王');
console.log(m);
let result2 = Object.fromEntries(m)
console.log(result2);
</script>
<script>
//ES8对象转换为二维数组
const arr = Object.entries({
name:'猴王,猴子',
city:'花果山'
})
console.log(arr);
</script>
7.2字符串扩展方法（清除左右空格）
<script>
let arr = ' 5201314 '
console.warn(arr);
console.log(arr.trim()); //左右
console.log(arr.trimEnd()); //右
console.log(arr.trimStart()); //左
</script>
7.3数组扩展方法（维度降低）
<script>
//1.flat多维数组转换为一维数组
let arrOne = [1,2,3,4,[5,6]]; //二位数组
console.log(arrOne);
//数字1表示深度
console.log(arrOne.flat(1));
let arrTwo = [1,2,3,4,[5,6,[7,8,9]]]; //三位数组
//数字2表示深度
console.log(arrTwo.flat(2));
console.warn('------------')
//2.flatmap
let arrThree = [1,2,3,4];
let result1 = arrThree.map(item => [item * 10])
console.log(result1); //这里得到是一个二维数组
//相当于flat和map的操作结合
let result2 = arrThree.flatMap(item => [item * 10])
console.log(result2);
</script>
7.4获取Symbol描述字符串
<script>
var m = Symbol('猴王')
console.log(m.description);
</script>
八、ES11
8.1私有属性
<script>
//私有属性只可以在类内部可以访问 其他地方访问不了
class Gril{
//公有属性
name;
//私有属性
#age;
#naizi;
constructor(name,age,naizi){
this.name = name;
this.#age = age;
this.#naizi = naizi;
}
intro(){
console.log(gril.name);
console.log(gril.#age);
console.log(gril.#naizi);
}
}
let gril = new Gril('小鑫',20,'C');
gril.intro();
// console.log(gril.name); //正常访问
// console.log(gril.#age); //直接报错
// console.log(gril.#naizi); //直接报错
</script>
8.2Promise.allSeetled()
<script>
//1.返回的结果始终是成功的 成功的值是Promise对象和状态
const p1 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('成功')
},1000)
})
const p2 = new Promise((resolve,reject) => {
setTimeout(() => {
reject('失败')
},1000)
})
const result = Promise.allSettled([p1,p2]);
console.log(result);
</script>
8.3字符串扩展（数据批量提取）
<script>
let str = ` <ul>
<li>
<a>铠甲勇士</a>
<p>上市时间:2012-10-15</p>
</li>
<li>
<a>刑天铠甲</a>
<p>上市时间:2013-08-30</p>
</li>
</ul>`;
var reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs
const result = str.matchAll(reg);
console.log(result);
// //两种方法均可
console.log([...result]);
// for(let v of result){
// console.log(v);
// }
</script>
8.4可选链操作符
<script>
function main(config){
//以前的写法
//const result = config && config.db && config.db.url;
const result = config?.db?.url;
console.log(result);
}
main({
db:{
user:'root',
url:'127.0.0.1'
}
})
</script>
8.5动态import
8.6Bigint类型（超大数值运算）
<script>
let n = 521n;
console.log(n,typeof(n));
let n1 = 88;
console.log(BigInt(n1));
//js能运算的最大数值
let max = Number.MAX_SAFE_INTEGER;
console.warn(max);
console.log(max+1);
console.log(max+10000+'运算错误的');//无效果
console.log(BigInt(max)+BigInt(10000));
</script>
扫一扫
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
