首页 >> js开发 >> jsES11屡试不爽的新特性,你用上了几个js大全
jsES11屡试不爽的新特性,你用上了几个js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
ES11规范于今年的年初完成，引入了许多新标准，本文讲着重研究下其中几个实用且有趣的新标准特性抢先知：特性抢先知：特性抢先知：
私有变量
Promise.allSettled
BigInt 全新的数据类型
Nullish Coalescing Operator 空位合并运算符
Optional Chaining Operator 可选链运算符
Dynamic Import 动态导入
String.prototype.matchAll 新增matchAll
globalThis 新增全局对象
Module Namespace Exports 导入特定命名空间
私有变量Promise.allSettledBigInt 全新的数据类型Nullish Coalescing Operator 空位合并运算符Optional Chaining Operator 可选链运算符Dynamic Import 动态导入String.prototype.matchAll 新增matchAllglobalThis 新增全局对象Module Namespace Exports 导入特定命名空间私有变量私有变量私有变量严格限制一些用于内部使用的Class变量，只需要在变量前 添加# ，就可以使其成为私有变量，并且无法在class外部直接访问添加#下面我们以一个简单的
class Hero {
#aggressivity = 0
constructor (aggressivity){
this.#aggressivity = aggressivity
}
getHurt(){
return this.#aggressivity
}
setAggressivity(aggressivity){
this.#aggressivity = aggressivity
}
}
const shooter = new Hero(100)
let hurt = shooter.getHurt()
console.log(hurt) //100
console.log(shooter.#aggressivity) //Error : Uncaught SyntaxError: Private field '#aggressivity' must be declared in an enclosing class
class Hero {
#aggressivity = 0
constructor (aggressivity){
this.#aggressivity = aggressivity
}
getHurt(){
return this.#aggressivity
}
setAggressivity(aggressivity){
this.#aggressivity = aggressivity
}
}
const shooter = new Hero(100)
let hurt = shooter.getHurt()
console.log(hurt) //100
console.log(shooter.#aggressivity) //Error : Uncaught SyntaxError: Private field '#aggressivity' must be declared in an enclosing class上面代码我们会发现，无法直接进行访问#aggressivity,将抛出异常只能通过class里进行访问，可通过统一class的公共方法进行统一修改假设目前射手携带了 狂暴 技能，提升了 10%伤害 ，我们可以通过setAggressivity来修改攻击力狂暴10%伤害
let aggressivity = parseInt(hurt * 1.1)
shooter.setAggressivity(aggressivity)
console.log(shooter.getHurt()) // 110
let aggressivity = parseInt(hurt * 1.1)
shooter.setAggressivity(aggressivity)
console.log(shooter.getHurt()) // 110Promise.allSettledPromise.allSettledPromise.allSettled谈及这个新特性之前，我们先简单回顾下 Promise.all 以及 Promise.race ,推测下为什么需要 Promise.allSettled 这个新特性Promise.allPromise.racePromise.allSettledPromise.all：可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})Promise.race:返回一个promise，一旦某个Promise触发resolve或者reject，就直接返回该promise结果状态
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
//输出 "two" 因为promise2返回结果比promise1快
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
//输出 "two" 因为promise2返回结果比promise1快有时候我们可能需要知道所有的结果做一些操作，并不关心其执行结果是否成功，在没有Promise.allSettled之前，我们需要自己实现，可通过如下 实现Promise.allSettled实现Promise.allSettled
let allSettled = (funcArr) => {
return new Promise((resolve) => {
let sttled = 0
let result = []
for(let index = 0;index
const element = funcArr[index]
element
.then(res => {
result[index] = {
status: 'fulfilled',
value: res
}
})
.catch(err => {
result[index] = {
status: 'rejected',
reason: err
}
})
.finally(() => { ++sttled === funcArr.length && resolve(result) })
}
})
}
//使用
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
allSettled(promises).then(res => {
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]
let allSettled = (funcArr) => {
return new Promise((resolve) => {
let sttled = 0
let result = []
for(let index = 0;index
const element = funcArr[index]
element
.then(res => {
result[index] = {
status: 'fulfilled',
value: res
}
})
.catch(err => {
result[index] = {
status: 'rejected',
reason: err
}
})
.finally(() => { ++sttled === funcArr.length && resolve(result) })
}
})
}
//使用
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
allSettled(promises).then(res => {
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]而Promise.allSettled新特性出来后，我们可以直接使用而不需要单独去实现了
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
Promise.allSettled(promises).then(res =>{
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
Promise.allSettled(promises).then(res =>{
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]返回结果里会将返回一个数组，包含了所有成功与失败的结果，数组每项为对象，均含有 status 属性，对应fulfilled和rejected。status当状态为 fulfilled 时，代表着成功，包含一个 value ，代表着成功的结果fulfilledvalue当状态为 rejected 时，代表着失败，包含一个 reason ，代表着失败的原因rejectedreasonBigIntBigIntBigIntJS中缺少显式整数类型常常令人困惑。许多编程语言支持多种数字类型，如浮点型、双精度型、整数型和双精度型，但JS却不是这样。在JS中，按照IEEE 754-2021标准的定义，所有数字都以双精度 64位浮点格式 表示。64位浮点格式在此标准下，无法精确表示的非常大的整数将自动四舍五入。确切地说，JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
console.log(9999999999999999);
//10000000000000000
console.log(9999999999999999);
//10000000000000000JS 提供 Number.MAX_SAFE_INTEGER 常量来表示 最大安全整数， Number.MIN_SAFE_INTEGER 常量表示最小安全整数：Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER
// 注意最后一位的数字
const A = Number.MAX_SAFE_INTEGER + 1
const B = Number.MAX_SAFE_INTEGER + 2
console.log(Number.MAX_SAFE_INTEGER) //9007199254740991
console.log(A) //9007199254740992
console.log(B) //9007199254740992
console.log(A === B) //true
// 注意最后一位的数字
const A = Number.MAX_SAFE_INTEGER + 1
const B = Number.MAX_SAFE_INTEGER + 2
console.log(Number.MAX_SAFE_INTEGER) //9007199254740991
console.log(A) //9007199254740992
console.log(B) //9007199254740992
console.log(A === B) //true当数据超出范围就会失去精度，达不到我们预期的结果。BigInt横空出世，可以在标准JS中执行对大整数的算术运算，不必担心精度损失风险创建BigInt数据类型的方式非常简单，在整数后面追加 n 即可，或者 通过BigInt()进行创建实例n通过BigInt()进行创建实例
const bigint = 999999999999999999n
const bigintByMethod = BigInt('999999999999999999')
console.log(bigint) //999999999999999999n
console.log(bigintByMethod) //999999999999999999n
console.log(bigint === bigintByMethod) //true
//布尔值
console.log(BigInt(true)) //1n
console.log(BigInt(false)) //0n
console.log(typeof bigint) //"bigint"
const bigint = 999999999999999999n
const bigintByMethod = BigInt('999999999999999999')
console.log(bigint) //999999999999999999n
console.log(bigintByMethod) //999999999999999999n
console.log(bigint === bigintByMethod) //true
//布尔值
console.log(BigInt(true)) //1n
console.log(BigInt(false)) //0n
console.log(typeof bigint) //"bigint" BigInt 与 Number是两种数据类型，无法进行运算，可以进行大小比较
console.log(88n == 88) //true
console.log(88n === 88) //false
console.log(88n+1) //Error =>Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
console.log(88n == 88) //true
console.log(88n === 88) //false
console.log(88n+1) //Error =>Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversionsBigInt之间， 除了一元加号（+）运算符 外，其他均可用于BigInt除了一元加号（+）运算符
console.log(1n + 2n) //3n
console.log(1n - 2n) //-1n
console.log(+ 1n) //Uncaught TypeError: Cannot convert a BigInt value to a number
console.log(- 1n) //-1n
console.log(10n * 20n) //200n
console.log(23n%10n) //3n
console.log(20n/10n) //2n
......
console.log(1n + 2n) //3n
console.log(1n - 2n) //-1n
console.log(+ 1n) //Uncaught TypeError: Cannot convert a BigInt value to a number
console.log(- 1n) //-1n
console.log(10n * 20n) //200n
console.log(23n%10n) //3n
console.log(20n/10n) //2n
......
需要注意的是， 除法运算符会自动向下舍入到最接近的整数除法运算符会自动向下舍入到最接近的整数
console.log(25n / 10n) //2n
console.log(29n / 10n) //2n
console.log(25n / 10n) //2n
console.log(29n / 10n) //2n最后还有个注意点就是，Boolean类型和BigInt类型的转换时，处理方式和Number类型，只要 不是0n，BigInt就被视为true不是0n，BigInt就被视为true
if (5n) {
// 这里代码块将被执行
}
if (0n) {
// 这里代码块不会执行
}
if (5n) {
// 这里代码块将被执行
}
if (0n) {
// 这里代码块不会执行
}Nullish Coalescing Operator 空位合并运算符Nullish Coalescing Operator 空位合并运算符Nullish Coalescing Operator 空位合并运算符新增一个逻辑运算符??，处理null和undefined，工作原理与逻辑or（ || ）类似，但是与此相反||如果为真即返回左侧值，否则返回右侧
0 || 5 // return 5
"" || 5 // return 5
"前端公虾米" || 'V5' //return "前端公虾米"
0 || 5 // return 5
"" || 5 // return 5
"前端公虾米" || 'V5' //return "前端公虾米"??如果为null或者undefined，即返回右侧，否则返回左侧
0 ?? 5 //return 0
"" ?? 5 //return ""
null ?? 5 // return 5
undefined ?? 5 // return 5
false ?? 5 //return false
NaN ?? 5 // return NaN
0 ?? 5 //return 0
"" ?? 5 //return ""
null ?? 5 // return 5
undefined ?? 5 // return 5
false ?? 5 //return false
NaN ?? 5 // return NaN在使用该??运算符时，需要注意的是
不可与其他运算符组合使用，例如&&、||
但若使用括号包裹则可以组合使用
不可与其他运算符组合使用，例如&&、||但若使用括号包裹则可以组合使用
"前端公虾米" || undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
"前端公虾米" && undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
("前端公虾米" || undefined) ?? "(๑•̀ㅂ•́)و✧" //"前端公虾米"
("前端公虾米" && null) ?? "一起学习" //"一起学习"
"前端公虾米" || undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
"前端公虾米" && undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
("前端公虾米" || undefined) ?? "(๑•̀ㅂ•́)و✧" //"前端公虾米"
("前端公虾米" && null) ?? "一起学习" //"一起学习"Optional Chaining Operator 可选链运算符Optional Chaining Operator 可选链运算符Optional Chaining Operator 可选链运算符日常开发中，不少开发者会碰到Cannot read property XXX of undefined，抛出无法从未定义的数据中读取某个字段可选链运算符在查找嵌套对象时，找到链中的第一个 undefined 或者 null 后会立即终止，并返回 undefined ，而不会不断向下查找而导致抛错undefinednullundefined
const obj = {
foo: {
bar: {
baz: 42,
},
},
}
console.log(obj.fo.bar.baz) //Uncaught TypeError: Cannot read property 'bar' of undefined
在诸如此类的对象里，我们通常进行数据安全检查来访问嵌套对象，否则将抛错
if(obj&&obj.foo&&obj.foo.bar){
console.log(obj.foo.bar.baz) // 42
}
const obj = {
foo: {
bar: {
baz: 42,
},
},
}
console.log(obj.fo.bar.baz) //Uncaught TypeError: Cannot read property 'bar' of undefined
在诸如此类的对象里，我们通常进行数据安全检查来访问嵌套对象，否则将抛错
if(obj&&obj.foo&&obj.foo.bar){
console.log(obj.foo.bar.baz) // 42
}在可选链运算符可使用的现在，我们只需这样进行属性的读取
console.log(obj?.foo?.bar?.baz) //42
console.log(obj.foo.bar?.baz) //42
console.log(obj?.foo?.bar?.baz) //42
console.log(obj.foo.bar?.baz) //42Dynamic Import 动态导入Dynamic Import 动态导入Dynamic Import 动态导入在标准的import导入中，是静态导入的，所有被导入的模块是在加载时就被编译的，无法按需编译。当我们需要条件导入的时候，都只能使用 require() .require()但现在，我们有办法改善此类情况了，因为动态导入可以有效的减少未使用代码的编译，可以提高首屏加载速度，按需加载。那么，为什么我们需要动态导入呢？
静态导入消耗加载时间，很多模块并非首屏需要渲染
静态导入会在导入时消耗大量内存
可能会存在有些模块在加载时不存在
减少一些有条件依赖的副作用
静态导入消耗加载时间，很多模块并非首屏需要渲染静态导入会在导入时消耗大量内存可能会存在有些模块在加载时不存在减少一些有条件依赖的副作用
//通用导入方式
import("/module/sneaker/test.js")
.then(module => {
//模块相关操作
})
//await
const getModule = await import("/module/sneaker/test.js")
//通过async await
const getUserInfo = async (hasLogin) => {
if(!hasLogin){
const user = await import("/module/sneaker/user.js")
user.getInfo()
}
}
//通用导入方式
import("/module/sneaker/test.js")
.then(module => {
//模块相关操作
})
//await
const getModule = await import("/module/sneaker/test.js")
//通过async await
const getUserInfo = async (hasLogin) => {
if(!hasLogin){
const user = await import("/module/sneaker/user.js")
user.getInfo()
}
}matchAllmatchAllmatchAll基于String原型上的一个新方法，允许我们匹配一个字符串和一个正则表达式，返回值是所有匹配结果的迭代器。可以通过 for...of 遍历或者 操作符... 、 Array.from 将结果迭代器转换成数组for...of操作符...Array.from
const string = 'Hello Sneaker,Where is the library?'
const regex = /[A-W]/g
const matches = string.matchAll(regex)
console.log(...matches)
//["H", index: 0, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["S", index: 6, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["W", index: 14, input: "Hello Sneaker,Where is the library?", groups: undefined]
const string = 'Hello Sneaker,Where is the library?'
const regex = /[A-W]/g
const matches = string.matchAll(regex)
console.log(...matches)
//["H", index: 0, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["S", index: 6, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["W", index: 14, input: "Hello Sneaker,Where is the library?", groups: undefined] globalThisglobalThisglobalThis这是为了提供一种访问全局对象的标准方法。在浏览器中，我们可以使用 window/self/frames 来访问全局对象，但对于Web Workers只能使用 self ，Node中又完全不同，需要使用 global 。window/self/framesselfglobal在 globalThis 成为标准之前，获取全局对象我们可能需要这么做globalThis
const globalObj = (()=>{
if(self) return self
if(window) return window
if(global) return global
throw new Error('Sorry!No global obj found')
})
const globalObj = (()=>{
if(self) return self
if(window) return window
if(global) return global
throw new Error('Sorry!No global obj found')
})
//Browser
globalThis === window //true
//Webworker
globalThis === self //true
//Node
globalThis === global //true
//Browser
globalThis === window //true
//Webworker
globalThis === self //true
//Node
globalThis === global //true从此实现全局对象的大一统！Module Namespace Exports 导入特定命名空间Module Namespace Exports 导入特定命名空间Module Namespace Exports 导入特定命名空间
export * as ns from './module
//等同于
import * as ns from './module'
export {ns}
export * as ns from './module
//等同于
import * as ns from './module'
export {ns}导入特定命名空间实则并没有导入模块，只是对模块进行转发，导致在此模块中不可直接使用此模块参考
ecma-262
MDN
ecma-262MDN最后最后最后特性很多但有的很有趣，比如可选链和空位合并运算符，屡试不爽，至于有多爽，你试了才知道。新特性平常不写还是容易忽略淡忘的，建议平常可以下意识的经常回顾运用，一起学习一起成长。
私有变量
Promise.allSettled
BigInt 全新的数据类型
Nullish Coalescing Operator 空位合并运算符
Optional Chaining Operator 可选链运算符
Dynamic Import 动态导入
String.prototype.matchAll 新增matchAll
globalThis 新增全局对象
Module Namespace Exports 导入特定命名空间
私有变量Promise.allSettledBigInt 全新的数据类型Nullish Coalescing Operator 空位合并运算符Optional Chaining Operator 可选链运算符Dynamic Import 动态导入String.prototype.matchAll 新增matchAllglobalThis 新增全局对象Module Namespace Exports 导入特定命名空间私有变量私有变量私有变量严格限制一些用于内部使用的Class变量，只需要在变量前 添加# ，就可以使其成为私有变量，并且无法在class外部直接访问添加#下面我们以一个简单的
class Hero {
#aggressivity = 0
constructor (aggressivity){
this.#aggressivity = aggressivity
}
getHurt(){
return this.#aggressivity
}
setAggressivity(aggressivity){
this.#aggressivity = aggressivity
}
}
const shooter = new Hero(100)
let hurt = shooter.getHurt()
console.log(hurt) //100
console.log(shooter.#aggressivity) //Error : Uncaught SyntaxError: Private field '#aggressivity' must be declared in an enclosing class
class Hero {
#aggressivity = 0
constructor (aggressivity){
this.#aggressivity = aggressivity
}
getHurt(){
return this.#aggressivity
}
setAggressivity(aggressivity){
this.#aggressivity = aggressivity
}
}
const shooter = new Hero(100)
let hurt = shooter.getHurt()
console.log(hurt) //100
console.log(shooter.#aggressivity) //Error : Uncaught SyntaxError: Private field '#aggressivity' must be declared in an enclosing class上面代码我们会发现，无法直接进行访问#aggressivity,将抛出异常只能通过class里进行访问，可通过统一class的公共方法进行统一修改假设目前射手携带了 狂暴 技能，提升了 10%伤害 ，我们可以通过setAggressivity来修改攻击力狂暴10%伤害
let aggressivity = parseInt(hurt * 1.1)
shooter.setAggressivity(aggressivity)
console.log(shooter.getHurt()) // 110
let aggressivity = parseInt(hurt * 1.1)
shooter.setAggressivity(aggressivity)
console.log(shooter.getHurt()) // 110Promise.allSettledPromise.allSettledPromise.allSettled谈及这个新特性之前，我们先简单回顾下 Promise.all 以及 Promise.race ,推测下为什么需要 Promise.allSettled 这个新特性Promise.allPromise.racePromise.allSettledPromise.all：可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})Promise.race:返回一个promise，一旦某个Promise触发resolve或者reject，就直接返回该promise结果状态
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
//输出 "two" 因为promise2返回结果比promise1快
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
//输出 "two" 因为promise2返回结果比promise1快有时候我们可能需要知道所有的结果做一些操作，并不关心其执行结果是否成功，在没有Promise.allSettled之前，我们需要自己实现，可通过如下 实现Promise.allSettled实现Promise.allSettled
let allSettled = (funcArr) => {
return new Promise((resolve) => {
let sttled = 0
let result = []
for(let index = 0;index
const element = funcArr[index]
element
.then(res => {
result[index] = {
status: 'fulfilled',
value: res
}
})
.catch(err => {
result[index] = {
status: 'rejected',
reason: err
}
})
.finally(() => { ++sttled === funcArr.length && resolve(result) })
}
})
}
//使用
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
allSettled(promises).then(res => {
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]
let allSettled = (funcArr) => {
return new Promise((resolve) => {
let sttled = 0
let result = []
for(let index = 0;index
const element = funcArr[index]
element
.then(res => {
result[index] = {
status: 'fulfilled',
value: res
}
})
.catch(err => {
result[index] = {
status: 'rejected',
reason: err
}
})
.finally(() => { ++sttled === funcArr.length && resolve(result) })
}
})
}
//使用
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
allSettled(promises).then(res => {
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]而Promise.allSettled新特性出来后，我们可以直接使用而不需要单独去实现了
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
Promise.allSettled(promises).then(res =>{
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]
const promises = [
Promise.reject('c'),
Promise.resolve('a'),
Promise.resolve('b'),
];
Promise.allSettled(promises).then(res =>{
console.log(res)
})
// 打印结果
// [{"status":"rejected","reason":"c"},
// {"status":"fulfilled","value":"a"},
// {"status":"fulfilled","value":"b"}]返回结果里会将返回一个数组，包含了所有成功与失败的结果，数组每项为对象，均含有 status 属性，对应fulfilled和rejected。status当状态为 fulfilled 时，代表着成功，包含一个 value ，代表着成功的结果fulfilledvalue当状态为 rejected 时，代表着失败，包含一个 reason ，代表着失败的原因rejectedreasonBigIntBigIntBigIntJS中缺少显式整数类型常常令人困惑。许多编程语言支持多种数字类型，如浮点型、双精度型、整数型和双精度型，但JS却不是这样。在JS中，按照IEEE 754-2021标准的定义，所有数字都以双精度 64位浮点格式 表示。64位浮点格式在此标准下，无法精确表示的非常大的整数将自动四舍五入。确切地说，JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
console.log(9999999999999999);
//10000000000000000
console.log(9999999999999999);
//10000000000000000JS 提供 Number.MAX_SAFE_INTEGER 常量来表示 最大安全整数， Number.MIN_SAFE_INTEGER 常量表示最小安全整数：Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER
// 注意最后一位的数字
const A = Number.MAX_SAFE_INTEGER + 1
const B = Number.MAX_SAFE_INTEGER + 2
console.log(Number.MAX_SAFE_INTEGER) //9007199254740991
console.log(A) //9007199254740992
console.log(B) //9007199254740992
console.log(A === B) //true
// 注意最后一位的数字
const A = Number.MAX_SAFE_INTEGER + 1
const B = Number.MAX_SAFE_INTEGER + 2
console.log(Number.MAX_SAFE_INTEGER) //9007199254740991
console.log(A) //9007199254740992
console.log(B) //9007199254740992
console.log(A === B) //true当数据超出范围就会失去精度，达不到我们预期的结果。BigInt横空出世，可以在标准JS中执行对大整数的算术运算，不必担心精度损失风险创建BigInt数据类型的方式非常简单，在整数后面追加 n 即可，或者 通过BigInt()进行创建实例n通过BigInt()进行创建实例
const bigint = 999999999999999999n
const bigintByMethod = BigInt('999999999999999999')
console.log(bigint) //999999999999999999n
console.log(bigintByMethod) //999999999999999999n
console.log(bigint === bigintByMethod) //true
//布尔值
console.log(BigInt(true)) //1n
console.log(BigInt(false)) //0n
console.log(typeof bigint) //"bigint"
const bigint = 999999999999999999n
const bigintByMethod = BigInt('999999999999999999')
console.log(bigint) //999999999999999999n
console.log(bigintByMethod) //999999999999999999n
console.log(bigint === bigintByMethod) //true
//布尔值
console.log(BigInt(true)) //1n
console.log(BigInt(false)) //0n
console.log(typeof bigint) //"bigint" BigInt 与 Number是两种数据类型，无法进行运算，可以进行大小比较
console.log(88n == 88) //true
console.log(88n === 88) //false
console.log(88n+1) //Error =>Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
console.log(88n == 88) //true
console.log(88n === 88) //false
console.log(88n+1) //Error =>Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversionsBigInt之间， 除了一元加号（+）运算符 外，其他均可用于BigInt除了一元加号（+）运算符
console.log(1n + 2n) //3n
console.log(1n - 2n) //-1n
console.log(+ 1n) //Uncaught TypeError: Cannot convert a BigInt value to a number
console.log(- 1n) //-1n
console.log(10n * 20n) //200n
console.log(23n%10n) //3n
console.log(20n/10n) //2n
......
console.log(1n + 2n) //3n
console.log(1n - 2n) //-1n
console.log(+ 1n) //Uncaught TypeError: Cannot convert a BigInt value to a number
console.log(- 1n) //-1n
console.log(10n * 20n) //200n
console.log(23n%10n) //3n
console.log(20n/10n) //2n
......
需要注意的是， 除法运算符会自动向下舍入到最接近的整数除法运算符会自动向下舍入到最接近的整数
console.log(25n / 10n) //2n
console.log(29n / 10n) //2n
console.log(25n / 10n) //2n
console.log(29n / 10n) //2n最后还有个注意点就是，Boolean类型和BigInt类型的转换时，处理方式和Number类型，只要 不是0n，BigInt就被视为true不是0n，BigInt就被视为true
if (5n) {
// 这里代码块将被执行
}
if (0n) {
// 这里代码块不会执行
}
if (5n) {
// 这里代码块将被执行
}
if (0n) {
// 这里代码块不会执行
}Nullish Coalescing Operator 空位合并运算符Nullish Coalescing Operator 空位合并运算符Nullish Coalescing Operator 空位合并运算符新增一个逻辑运算符??，处理null和undefined，工作原理与逻辑or（ || ）类似，但是与此相反||如果为真即返回左侧值，否则返回右侧
0 || 5 // return 5
"" || 5 // return 5
"前端公虾米" || 'V5' //return "前端公虾米"
0 || 5 // return 5
"" || 5 // return 5
"前端公虾米" || 'V5' //return "前端公虾米"??如果为null或者undefined，即返回右侧，否则返回左侧
0 ?? 5 //return 0
"" ?? 5 //return ""
null ?? 5 // return 5
undefined ?? 5 // return 5
false ?? 5 //return false
NaN ?? 5 // return NaN
0 ?? 5 //return 0
"" ?? 5 //return ""
null ?? 5 // return 5
undefined ?? 5 // return 5
false ?? 5 //return false
NaN ?? 5 // return NaN在使用该??运算符时，需要注意的是
不可与其他运算符组合使用，例如&&、||
但若使用括号包裹则可以组合使用
不可与其他运算符组合使用，例如&&、||但若使用括号包裹则可以组合使用
"前端公虾米" || undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
"前端公虾米" && undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
("前端公虾米" || undefined) ?? "(๑•̀ㅂ•́)و✧" //"前端公虾米"
("前端公虾米" && null) ?? "一起学习" //"一起学习"
"前端公虾米" || undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
"前端公虾米" && undefined ?? "Sneaker" //Uncaught SyntaxError: Unexpected token '??'
("前端公虾米" || undefined) ?? "(๑•̀ㅂ•́)و✧" //"前端公虾米"
("前端公虾米" && null) ?? "一起学习" //"一起学习"Optional Chaining Operator 可选链运算符Optional Chaining Operator 可选链运算符Optional Chaining Operator 可选链运算符日常开发中，不少开发者会碰到Cannot read property XXX of undefined，抛出无法从未定义的数据中读取某个字段可选链运算符在查找嵌套对象时，找到链中的第一个 undefined 或者 null 后会立即终止，并返回 undefined ，而不会不断向下查找而导致抛错undefinednullundefined
const obj = {
foo: {
bar: {
baz: 42,
},
},
}
console.log(obj.fo.bar.baz) //Uncaught TypeError: Cannot read property 'bar' of undefined
在诸如此类的对象里，我们通常进行数据安全检查来访问嵌套对象，否则将抛错
if(obj&&obj.foo&&obj.foo.bar){
console.log(obj.foo.bar.baz) // 42
}
const obj = {
foo: {
bar: {
baz: 42,
},
},
}
console.log(obj.fo.bar.baz) //Uncaught TypeError: Cannot read property 'bar' of undefined
在诸如此类的对象里，我们通常进行数据安全检查来访问嵌套对象，否则将抛错
if(obj&&obj.foo&&obj.foo.bar){
console.log(obj.foo.bar.baz) // 42
}在可选链运算符可使用的现在，我们只需这样进行属性的读取
console.log(obj?.foo?.bar?.baz) //42
console.log(obj.foo.bar?.baz) //42
console.log(obj?.foo?.bar?.baz) //42
console.log(obj.foo.bar?.baz) //42Dynamic Import 动态导入Dynamic Import 动态导入Dynamic Import 动态导入在标准的import导入中，是静态导入的，所有被导入的模块是在加载时就被编译的，无法按需编译。当我们需要条件导入的时候，都只能使用 require() .require()但现在，我们有办法改善此类情况了，因为动态导入可以有效的减少未使用代码的编译，可以提高首屏加载速度，按需加载。那么，为什么我们需要动态导入呢？
静态导入消耗加载时间，很多模块并非首屏需要渲染
静态导入会在导入时消耗大量内存
可能会存在有些模块在加载时不存在
减少一些有条件依赖的副作用
静态导入消耗加载时间，很多模块并非首屏需要渲染静态导入会在导入时消耗大量内存可能会存在有些模块在加载时不存在减少一些有条件依赖的副作用
//通用导入方式
import("/module/sneaker/test.js")
.then(module => {
//模块相关操作
})
//await
const getModule = await import("/module/sneaker/test.js")
//通过async await
const getUserInfo = async (hasLogin) => {
if(!hasLogin){
const user = await import("/module/sneaker/user.js")
user.getInfo()
}
}
//通用导入方式
import("/module/sneaker/test.js")
.then(module => {
//模块相关操作
})
//await
const getModule = await import("/module/sneaker/test.js")
//通过async await
const getUserInfo = async (hasLogin) => {
if(!hasLogin){
const user = await import("/module/sneaker/user.js")
user.getInfo()
}
}matchAllmatchAllmatchAll基于String原型上的一个新方法，允许我们匹配一个字符串和一个正则表达式，返回值是所有匹配结果的迭代器。可以通过 for...of 遍历或者 操作符... 、 Array.from 将结果迭代器转换成数组for...of操作符...Array.from
const string = 'Hello Sneaker,Where is the library?'
const regex = /[A-W]/g
const matches = string.matchAll(regex)
console.log(...matches)
//["H", index: 0, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["S", index: 6, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["W", index: 14, input: "Hello Sneaker,Where is the library?", groups: undefined]
const string = 'Hello Sneaker,Where is the library?'
const regex = /[A-W]/g
const matches = string.matchAll(regex)
console.log(...matches)
//["H", index: 0, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["S", index: 6, input: "Hello Sneaker,Where is the library?", groups: undefined]
//["W", index: 14, input: "Hello Sneaker,Where is the library?", groups: undefined] globalThisglobalThisglobalThis这是为了提供一种访问全局对象的标准方法。在浏览器中，我们可以使用 window/self/frames 来访问全局对象，但对于Web Workers只能使用 self ，Node中又完全不同，需要使用 global 。window/self/framesselfglobal在 globalThis 成为标准之前，获取全局对象我们可能需要这么做globalThis
const globalObj = (()=>{
if(self) return self
if(window) return window
if(global) return global
throw new Error('Sorry!No global obj found')
})
const globalObj = (()=>{
if(self) return self
if(window) return window
if(global) return global
throw new Error('Sorry!No global obj found')
})
//Browser
globalThis === window //true
//Webworker
globalThis === self //true
//Node
globalThis === global //true
//Browser
globalThis === window //true
//Webworker
globalThis === self //true
//Node
globalThis === global //true从此实现全局对象的大一统！Module Namespace Exports 导入特定命名空间Module Namespace Exports 导入特定命名空间Module Namespace Exports 导入特定命名空间
export * as ns from './module
//等同于
import * as ns from './module'
export {ns}
export * as ns from './module
//等同于
import * as ns from './module'
export {ns}导入特定命名空间实则并没有导入模块，只是对模块进行转发，导致在此模块中不可直接使用此模块参考
ecma-262
MDN
ecma-262MDN最后最后最后特性很多但有的很有趣，比如可选链和空位合并运算符，屡试不爽，至于有多爽，你试了才知道。新特性平常不写还是容易忽略淡忘的，建议平常可以下意识的经常回顾运用，一起学习一起成长。
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
