华山资源网

ES10 特性的完整指南小结
网络编程 2024/11/16 佚名
3 1

本篇文章主要介绍了ES10 特性的完整指南，分享给大家，具体如下：

ES10 特性的完整指南小结

ES10 还只是一个草案。但是除了 Object.fromEntries 之外，Chrome 的大多数功能都已经实现了，为什么不早点开始探索呢"text-align: center">ES10 特性的完整指南小结

BigInt -任意精度整数

BigInt 是第七种 原始类型。

BigInt 是一个任意精度的整数。这意味着变量现在可以 表示²"htmlcode"> 

const b = 1n; // 追加 n 以创建 BigInt

在过去，不支持大于 9007199254740992 的整数值。如果超过，该值将锁定为 MAX_SAFE_INTEGER + 1:

const limit = Number.MAX_SAFE_INTEGER;
"9007199254740991"); // initialize with "string"
"color: #ff0000">typeof





typeof 10;
"htmlcode">



10n === BigInt(10);
"htmlcode">



200n / 10n
"htmlcode">



-100n
"text-align: left">string.prototype.matchAll()


如果您运行谷歌搜索JavaScript string match all，第一个结果将是这样的：如何编写正则表达式“match all”？


最佳结果将建议 String.match 与正则表达式和 /g 一起使用或者带有 /g 的 RegExp.exec 或者带有 /g 的 RegExp.test 。


首先，让我们看看旧规范是如何工作的。


带字符串参数的 String.match 仅返回第一个匹配：





let string = 'Hello';
let matches = string.match('l');
console.log(matches[0]); // "l"





结果是单个 "l"（注意：匹配存储在 matches[0] 中而不是 matches）


在“hello”中搜索 "l" 只返回 "l"。


将 string.match 与 regex 参数一起使用也是如此：


让我们使用正则表达式 /l/ 找到字符 串“hello” 中的 “l” 字符：





let string = "Hello";
let matches = string.match(/l/);
console.log(matches[0]); // "l"





添加 /g 混合





let string = "Hello";
let ret = string.match(/l/g); // (2) [“l”, “l”];






很好，我们使用 < ES10 方式得到了多个匹配，它一直起作用。


那么为什么要使用全新的 matchAll 方法呢"text-align: center">ES10 特性的完整指南小结


这里创建了 match.groups.color 和 match.groups.bird ：





const string = 'black*raven lime*parrot white*seagull';
const regex = /("htmlcode">



// Match all occurrences of the letters: "e" or "l" 
let iterator = "hello".matchAll(/[el]/);
for (const match of iterator)
 console.log(match);





这一次你可以跳过 /g， .matchall 方法不需要它，结果如下:




[ 'e', index: 1, input: 'hello' ] // Iteration 1

[ 'l', index: 2, input: 'hello' ] // Iteration 2

[ 'l', index: 3, input: 'hello' ] // Iteration 3




使用 .matchAll() 捕获组示例：


.matchAll 具有上面列出的所有好处。它是一个迭代器，可以用 for…of 循环遍历它,这就是整个语法的不同。





const string = 'black*raven lime*parrot white*seagull';
const regex = /("text-align: left">动态导入


现在可以将导入分配给变量：





element.addEventListener('click', async() => {
 const module = await import(`./api-scripts/button-click.js`);
 module.clickEvent();
})






Array.flat()


扁平化多维数组：





let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();    // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();  // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);  // [1,2,3,4,5,6,7,8,9,10,11,12]





Array.flatMap()





let array = [1, 2, 3, 4, 5];
array.map(x => [x, x * 2]);


let array = [1, 2, 3, 4, 5];
array.map(x => [x, x * 2]);





结果：




[Array(2), Array(2), Array(2), Array(2), Array(2)]

0: (2) [1, 2]

1: (2) [2, 4]

2: (2) [3, 6]

3: (2) [4, 8]

4: (2) [5, 10]




使用 flatMap 方法：





array.flatMap(v => [v, v * 2]);
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]






Object.fromEntries()


将键值对列表转换为对象:





let obj = { apple : 10, orange : 20, banana : 30 };
let entries = Object.entries(obj);
entries;
(3) [Array(2), Array(2), Array(2)]
 0: (2) ["apple", 10]
 1: (2) ["orange", 20]
 2: (2) ["banana", 30]
let fromEntries = Object.fromEntries(entries);
{ apple: 10, orange: 20, banana: 30 }





String.trimStart() 与 String.trimEnd()





let greeting = "  Space around  ";
greeting.trimEnd(); // "  Space around";
greeting.trimStart(); // "Space around  ";






格式良好的 JSON.stringify()


此更新修复了字符 U+D800 到 U+DFFF 的处理，有时可以进入 JSON 字符串。 这可能是一个问题，因为 JSON.stringify 可能会将这些数字格式化为没有等效 UTF-8 字符的值, 但 JSON 格式需要 UTF-8 编码。


解析方法使用格式良好的JSON字符串，如:





'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string





注意，要创建正确 JSON 格式的字符串，绝对需要在属性名周围加上双引号。缺少或任何其他类型的引号都不会生成格式良好的JSON。





'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format string





JSON 字符串格式与 Object Literal 不同，后者看起来几乎一样，但可以使用任何类型的引号括住属性名，也可以包含方法(JSON格式不允许使用方法):





let object_literal = { property: 1, meth: () => {} };





不管怎样，一切似乎都很好。第一个示例看起来是兼容的。但它们也是简单的例子，大多数情况下都能顺利地工作!


U+2028 和 U+2029 字符


问题是， ES10 之前的 EcmaScript 实际上并不完全支持 JSON 格式。前 ES10 时代不接受未转义行分隔符 U+2028 和段落分隔符 U+2029 字符:


ES10 特性的完整指南小结


ES10 特性的完整指南小结


对于 U+D800 - U+DFFF 之间的所有字符也是如此


如果这些字符潜入 JSON 格式的字符串(假设来自数据库记录)，你可能会花费数小时试图弄清楚为什么程序的其余部分会产生解析错误。


因此，如果你传递 eval 这样的字符串 “console.log(' hello ')”，它将执行 JavaScript语句 (通过尝试将字符串转换为实际代码),也类似于 JSON.parse 将处理你的 JSON 字符串的方式。


稳定的 Array.prototype.sort()


V8 之前的实现对包含10个以上项的数组使用了一种不稳定的快速排序算法。


一个稳定的排序算法是当两个键值相等的对象在排序后的输出中出现的顺序与在未排序的输入中出现的顺序相同时。


但情况不再是这样了，ES10 提供了一个稳定的数组排序:





var fruit = [
 { name: "Apple",  count: 13, },
 { name: "Pear",  count: 12, },
 { name: "Banana",  count: 12, },
 { name: "Strawberry", count: 11, },
 { name: "Cherry",  count: 11, },
 { name: "Blackberry", count: 10, },
 { name: "Pineapple", count: 10, }
];
// 创建排序函数:
let my_sort = (a, b) => a.count - b.count;
// 执行稳定的ES10排序:
let sorted = fruit.sort(my_sort);
console.log(sorted);





控制台输出(项目以相反的顺序出现):


ES10 特性的完整指南小结


新的Function.toString()


函数是对象，并且每个对象都有一个 .toString() 方法，因为它最初存在于Object.prototype.toString() 上。 所有对象（包括函数）都是通过基于原型的类继承从它继承的。


这意味着我们以前已经有 funcion.toString() 方法了。


但是 ES10 进一步尝试标准化所有对象和内置函数的字符串表示。 以下是各种新案例：


典型的例子:





function () { console.log('Hello there.'); }.toString();





控制台输出(函数体的字符串格式:)





"htmlcode">



Number.parseInt.toString();
"htmlcode">



function () { }.bind(0).toString();
"htmlcode">



Symbol.toString();
"htmlcode">



function* () { }.toString();
"htmlcode">



Function.prototype.toString.call({});
"





可选的 Catch Binding


在过去，try/catch 语句中的 catch 语句需要一个变量。 try/catch 语句帮助捕获终端级别的错误:





try {
 // Call a non-existing function undefined_Function
 undefined_Function("I'm trying");
}
catch(error) {
 // Display the error if statements inside try above fail
 console.log( error ); // undefined_Function is undefined
}





在某些情况下，所需的错误变量是未使用的:





try {
 JSON.parse(text); // <--- this will fail with "text not defined"
 return true; <--- exit without error even if there is one
}
catch (redundant_sometmes) <--- this makes error variable redundant
{
 return false;
}





编写此代码的人通过尝试强制 true 退出 try 子句。但是，这并不是实际发生的情况





(() => {
 try {
  JSON.parse(text)
  return true
 } catch(err) {
  return false
 }
})()
=> false





在 ES10 中，捕获错误的变量是可选的


现在可以跳过错误变量:





try {
 JSON.parse(text);
 return true;
}
catch
{
 return false;
}





目前还无法测试上一个示例中的 try 语句的结果，但一旦它出来，我将更新这部分。


标准化 globalThis 对象


这在ES10之前， globalThis 还没有标准化。


在产品代码中，你可以自己编写这个怪物，在多个平台上“标准化”它:





var getGlobal = function () {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};





但即使这样也不总是奏效。因此，ES10 添加了 globalThis 对象，从现在开始，该对象用于在任何平台上访问全局作用域:





// 访问全局数组构造函数
globalThis.Array(0, 1, 2);
"color: #ff0000">Symbol.description


description 是一个只读属性，它返回 Symbol 对象的可选描述。





let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
symObj.description; // "My Symbol"





Hashbang 语法


也就是 unix 用户熟悉的 shebang。它指定一个解释器(什么将执行JavaScript文件"htmlcode">



$ ./index.js





代替





$ node index.js





ES10类:private、static 和 公共成员


新的语法字符 #octothorpe（hash tag）现在用于直接在类主体的范围内定义变量，函数，getter 和 setter ......以及构造函数和类方法。


下面是一个毫无意义的例子，它只关注新语法:





class Raven extends Bird {
#state = { eggs: 10};
// getter
 get #eggs() { 
  return state.eggs;
 }
// setter
 set #eggs(value) {
  this.#state.eggs = value;
 }
#lay() {
  this.#eggs++;
 }
constructor() {
  super();
  this.#lay.bind(this);
 }
#render() {
  /* paint UI */
 }
}





老实说，我认为这会让语言更难读。


代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
华山资源网 Design By www.eoogi.com

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.eoogi.com
                                            
                                                华山资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            120,135影音资源
                                        

                                        

                                            344,641技术资源
                                        

                                        

                                            22,817软件资源
                                        

                                        

                                            435,032站长资源
                                        

                                    

                                

                            

                            
                            
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

                        

                    

                

            

            
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

            

                

                    

                        

                            
更新日志

                        

                        

                            
                        

                    

                

            

            

                

                    友情链接 

                

                    

                        杰晶网络
                        DDR爱好者之家
                        桃源资源网
                        杰网资源
                        富贵资源网
                        南强小屋
                        铁雪资源网
                        幽灵资源网
                        万梅资源网
                        狼山资源网
                        白云岛资源网
                        昆仑资源网
                        相思资源网
                        明霞山资源网
                        内蒙古资源网
                        黑松山资源网
                        茶园资源网
                        饿虎岗资源网
                        大旗谷资源网
                        常春岛资源网
                        岱庙资源网
                        兴国资源网
                        快活林资源网
                        蝙蝠岛资源网
                        帝王谷资源网
                        白云城资源网
                        伏龙阁资源网
                        清风细雨楼
                        天枫庄资源网
                        圆月山庄资源网
                        无争山庄资源网
                        神水资源网
                        移花宫资源网
                        神剑山庄资源网
                        无为清净楼资源网
                        金钱帮资源网
                        丐帮资源网
                        华山资源网
                        极乐门资源网
                        小李飞刀资源网
                        凤求凰客栈
                        风云阁资源网
                        金狮镖局
                        鸳鸯亭资源网
                        千金楼资源网
                        更多链接
                    

                

            

            
华山资源网 Design By www.eoogi.com