网络编程

ES11屡试不爽的新特性,你用上了几个
网络编程 2024/12/22 佚名
3 2

ES11规范于今年的年初完成，引入了许多新标准，本文讲着重研究下其中几个实用且有趣的新标准

特性抢先知：

  • 私有变量
  • Promise.allSettled
  • BigInt 全新的数据类型
  • Nullish Coalescing Operator 空位合并运算符
  • Optional Chaining Operator 可选链运算符
  • Dynamic Import 动态导入
  • String.prototype.matchAll 新增matchAll
  • globalThis 新增全局对象
  • 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

上面代码我们会发现，无法直接进行访问#aggressivity,将抛出异常

只能通过class里进行访问，可通过统一class的公共方法进行统一修改

假设目前射手携带了 狂暴 技能，提升了 10%伤害 ，我们可以通过setAggressivity来修改攻击力

ES11屡试不爽的新特性,你用上了几个

let aggressivity = parseInt(hurt * 1.1)
shooter.setAggressivity(aggressivity)
console.log(shooter.getHurt()) // 110

Promise.allSettled

谈及这个新特性之前，我们先简单回顾下 Promise.all 以及 Promise.race ,推测下为什么需要 Promise.allSettled 这个新特性

Promise.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) // 失败了，打出 '失败'
})

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快

有时候我们可能需要知道所有的结果做一些操作，并不关心其执行结果是否成功，在没有Promise.allSettled之前，我们需要自己实现，可通过如下 实现Promise.allSettled

let allSettled = (funcArr) => {
 return new Promise((resolve) => {
  let sttled = 0
  let result = []
  for(let index = 0;index<funcArr.length;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"}]

返回结果里会将返回一个数组，包含了所有成功与失败的结果，数组每项为对象，均含有 status 属性，对应fulfilled和rejected。

当状态为 fulfilled 时，代表着成功，包含一个 value ，代表着成功的结果

当状态为 rejected 时，代表着失败，包含一个 reason ，代表着失败的原因

BigInt

JS中缺少显式整数类型常常令人困惑。许多编程语言支持多种数字类型，如浮点型、双精度型、整数型和双精度型，但JS却不是这样。在JS中，按照IEEE 754-2008标准的定义，所有数字都以双精度 64位浮点格式 表示。

在此标准下，无法精确表示的非常大的整数将自动四舍五入。确切地说，JS 中的Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。

console.log(9999999999999999);  //10000000000000000

JS 提供 Number.MAX_SAFE_INTEGER 常量来表示 最大安全整数， Number.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

当数据超出范围就会失去精度，达不到我们预期的结果。

BigInt横空出世，可以在标准JS中执行对大整数的算术运算，不必担心精度损失风险

创建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"

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

BigInt之间， 除了一元加号（+）运算符 外，其他均可用于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(25n / 10n) //2n
console.log(29n / 10n) //2n

最后还有个注意点就是，Boolean类型和BigInt类型的转换时，处理方式和Number类型，只要 不是0n，BigInt就被视为true

if (5n) {
  // 这里代码块将被执行
}

if (0n) {
  // 这里代码块不会执行
}

Nullish Coalescing Operator 空位合并运算符

新增一个逻辑运算符"htmlcode"> 

0 || 5 // return 5
"" || 5 // return 5
"前端公虾米" || 'V5' //return "前端公虾米"

"htmlcode"> 

0 "" ""
null "htmlcode">



"前端公虾米" || undefined "Sneaker" //Uncaught SyntaxError: Unexpected token '"前端公虾米" && undefined "Sneaker" //Uncaught SyntaxError: Unexpected token '"前端公虾米" || undefined) "(" //"前端公虾米"
("前端公虾米" && null) "一起学习" //"一起学习"





Optional Chaining Operator 可选链运算符


日常开发中，不少开发者会碰到Cannot read property XXX of undefined，抛出无法从未定义的数据中读取某个字段


可选链运算符在查找嵌套对象时，找到链中的第一个 undefined 或者 null 后会立即终止，并返回 undefined ，而不会不断向下查找而导致抛错





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"color: #ff0000">Dynamic Import 动态导入


在标准的import导入中，是静态导入的，所有被导入的模块是在加载时就被编译的，无法按需编译。当我们需要条件导入的时候，都只能使用 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()
 }
}





matchAll


基于String原型上的一个新方法，允许我们匹配一个字符串和一个正则表达式，返回值是所有匹配结果的迭代器。


可以通过 for...of 遍历或者 操作符... 、 Array.from 将结果迭代器转换成数组





const string = 'Hello Sneaker,Where is the library"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] 





globalThis


这是为了提供一种访问全局对象的标准方法。


在浏览器中，我们可以使用 window/self/frames 来访问全局对象，但对于Web Workers只能使用 self ，Node中又完全不同，需要使用 global 。


在 globalThis 成为标准之前，获取全局对象我们可能需要这么做





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





从此实现全局对象的大一统！


Module Namespace Exports 导入特定命名空间





export * as ns from './module

//等同于
import * as ns from './module'
export {ns}





导入特定命名空间实则并没有导入模块，只是对模块进行转发，导致在此模块中不可直接使用此模块


参考


    
  
  • ecma-262
    • 
  
  • MDN
    • 



最后


特性很多但有的很有趣，比如可选链和空位合并运算符，屡试不爽，至于有多爽，你试了才知道。新特性平常不写还是容易忽略淡忘的，建议平常可以下意识的经常回顾运用，一起学习一起成长。
标签：
ES11,新特性
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“ES11屡试不爽的新特性,你用上了几个”

暂无“ES11屡试不爽的新特性,你用上了几个”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com