ES2019新特性你知道哪些？

最新推荐文章于 2024-06-18 00:30:00 发布
最新推荐文章于 2024-06-18 00:30:00 发布
阅读量2.3k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/100088462
版权

编者按：本文译者奇舞团前端开发工程师刘冰晶。

随着ES2019新增特性的发布，ECMAScript标准又迎来了更新。

如今，这些特性已经可以用在node、Chrome、FireFox以及Safari中。如果想要在旧的浏览器中使用这些新特性，我们可以使用Babel进行转换。

下面一起来看下有哪些新鲜好用的特性吧！

Object.fromEntries

ES2017引入了Object.entries, 这个方法可以将对象转换为数组，如下所示：

let students = {

  amelia: 20,

  beatrice: 22,

  cece: 20,

  deirdre: 19,

  eloise: 21

}


Object.entries(students)

// [

// [ 'amelia', 20 ],

// [ 'beatrice', 22 ],

// [ 'cece', 20 ],

// [ 'deirdre', 19 ],

// [ 'eloise', 21 ]

// ]

这个功能相当好用，因为它允许对象使用数组原型中内置的众多函数，比如map, filter、reduce等。但是遗憾的是，如果想要把结果再次转化为对象，就需要手动写一些代码来处理。

 
  
let students = {
 
  
  amelia: 20,
 
  
  beatrice: 22,
 
  
  cece: 20,
 
  
  deirdre: 19,
 
  
  eloise: 21
 
  
}
 
  

 
  
// convert to array in order to make use of .filter() function
 
  
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
 
  
  return age >= 21
 
  
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]
 
  

 
  
// turn multidimensional array back into an object
 
  
let DrinkingAgeStudents = {}
 
  
for (let [name, age] of overTwentyOne) {
 
  
    DrinkingAgeStudents[name] = age;
 
  
}
 
  
// { beatrice: 22, eloise: 21 }
 
 
 
 
Object.fromEntrie正是为解决这种重复工作而设计的，有了它你就可以用更为简洁的代码，在对象使用数组原型的方法了。
 
 
 
  
 
  
let students = {
 
  
  amelia: 20,
 
  
  beatrice: 22,
 
  
  cece: 20,
 
  
  deirdre: 19,
 
  
  eloise: 21
 
  
}
 
  

 
  
// convert to array in order to make use of .filter() function
 
  
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
 
  
  return age >= 21
 
  
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]
 
  

 
  
// turn multidimensional array back into an object
 
  
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne);
 
  
// { beatrice: 22, eloise: 21 }
 
 
 
 
但需要注意的是，数组和对象是不同的数据格式，某些特定的情况下会造成数据丢失，下面的代码中，存在重复key的情况：
 
 
 
  
 
  
let students = [
 
  
  [ 'amelia', 22 ],
 
  
  [ 'beatrice', 22 ],
 
  
  [ 'eloise', 21],
 
  
  [ 'beatrice', 20 ]
 
  
]
 
  

 
  
let studentObj = Object.fromEntries(students);
 
  
// { amelia: 22, beatrice: 20, eloise: 21 }
 
  
// dropped firs
 
 
 
 
因此在使用这个方法时要明确其潜在的副作用。
 
 
Object.fromEntries的支持情况
 
 
ChromeFirefoxSafariEdge
756712.1--
 
 
Array.prototype.flat
 
 
多维数组是一种常见的数据格式，特别是在进行数据检索的时候。将多维数组打平是个常见的需求。通常我们能够实现，但是不够优雅。
 
 
下面的代码，在进行map之后产生了多维数组，我们想要将其打平
 
 
 
  
 
  
let courses = [
 
  
  {
 
  
    subject: "math",
 
  
    numberOfStudents: 3,
 
  
    waitlistStudents: 2,
 
  
    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
 
  
  },
 
  
  {
 
  
    subject: "english",
 
  
    numberOfStudents: 2,
 
  
    students: ['Wilson', 'Taylor']
 
  
  },
 
  
  {
 
  
    subject: "history",
 
  
    numberOfStudents: 4,
 
  
    students: ['Edith', 'Jacob', 'Peter', 'Betty']
 
  
  }
 
  
]
 
  

 
  
let courseStudents = courses.map(course => course.students)
 
  
// [
 
  
// [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
 
  
// [ 'Wilson', 'Taylor' ],
 
  
// [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
 
  
// ]
 
  

 
  
[].concat.apply([], courseStudents) // we're stuck doing something like this
 
 
 
 
下面我们使用Array.prototype.flat进行数组打平，这个方法支持传入打平深度做为参数：
 
 
 
  
 
  
let courseStudents = [
 
  
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
 
  
  [ 'Wilson', 'Taylor' ],
 
  
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
 
  
]
 
  

 
  
let flattenOneLevel = courseStudents.flat(1)
 
  
console.log(flattenOneLevel)
 
  
// [
 
  
// 'Janet',
 
  
// 'Martha',
 
  
// 'Bob',
 
  
// [ 'Phil', 'Candace' ],
 
  
// 'Wilson',
 
  
// 'Taylor',
 
  
// 'Edith',
 
  
// 'Jacob',
 
  
// 'Peter',
 
  
// 'Betty'
 
  
// ]
 
  

 
  
let flattenTwoLevels = courseStudents.flat(2)
 
  
console.log(flattenTwoLevels)
 
  
// [
 
  
// 'Janet', 'Martha',
 
  
// 'Bob', 'Phil',
 
  
// 'Candace', 'Wilson',
 
  
// 'Taylor', 'Edith',
 
  
// 'Jacob', 'Peter',
 
  
// 'Betty'
 
  
// ]
 
 
 
 
在不提供参数的时候，默认打平参数是1：
 
 
 
  
 
  
let courseStudents = [
 
  
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
 
  
  [ 'Wilson', 'Taylor' ],
 
  
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
 
  
]
 
  

 
  
let defaultFlattened = courseStudents.flat()
 
  
console.log(defaultFlattened)
 
  
// [
 
  
// 'Janet',
 
  
// 'Martha',
 
  
// 'Bob',
 
  
// [ 'Phil', 'Candace' ],
 
  
// 'Wilson',
 
  
// 'Taylor',
 
  
// 'Edith',
 
  
// 'Jacob',
 
  
// 'Peter',
 
  
// 'Betty'
 
  
// ]
 
 
 
 
需要注意，上面的示例中，数组并不是被完全打平的。默认情况下，这个方法并不是贪婪方法， 也就是说，如果在不知道数组深度未知的情况下，想要完全打平需要传入Infinity作为参数。
 
 
 
  
 
  
let courseStudents = [
 
  
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
 
  
  [ 'Wilson', 'Taylor' ],
 
  
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
 
  
]
 
  

 
  
let alwaysFlattened = courseStudents.flat(Infinity)
 
  
console.log(alwaysFlattened)
 
  
// [
 
  
// 'Janet', 'Martha',
 
  
// 'Bob', 'Phil',
 
  
// 'Candace', 'Wilson',
 
  
// 'Taylor', 'Edith',
 
  
// 'Jacob', 'Peter',
 
  
// 'Betty'
 
  
// ]
 
 
 
 
不过你要小心， 当数组深度完全未知的情况下， 冒然"贪婪"进行数组打平操作可能不是一个很好的选择。
 
 
Array.prototype.flat的支持情况
 
 
ChromeFirefoxSafariEdge
756712--
 
 
Chrome AndroidFirefox AndroidiOS SafariIE MobileSamsung internetAndroid Webview
756712.1----67
 
 
Array.prototype.flatMap
 
 
有了flat方法，那自然有其兄弟方法Array.prototype.flatMap。看下面一个例子，当我们想要在数组里面插入一些元素，我们原先可能是这么操作的：
 
 
 
  
 
  
let grades = [78, 62, 80, 64]
 
  

 
  
let curved = grades.map(grade => [grade, grade + 7])
 
  
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]
 
  

 
  
let flatMapped = [].concat.apply([], curved) // now flatten, could use flat but that didn't exist before either
 
  
// [
 
  
// 78, 85, 62, 69,
 
  
// 80, 87, 64, 71
 
  
// ]
 
 
 
 
使用Array.prototype.flat，我们可以这样实现：
 
 
 
  
 
  
let grades = [78, 62, 80, 64]
 
  

 
  
let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
 
  
// [
 
  
// 78, 85, 62, 69,
 
  
// 80, 87, 64, 71
 
  
// ]
 
 
 
 
但是这只是个相对比较好的做法，那有人就会想到，如果把它内置到数组原型上岂不更棒？下面我们使用flatmap改写下：
 
 
 
  
 
  
let grades = [78, 62, 80, 64]
 
  

 
  
let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
 
  
// [
 
  
// 78, 85, 62, 69,
 
  
// 80, 87, 64, 71
 
  
// ]
 
 
 
 
还记得Array.prototype.flat默认情况下只打平一层吗？实际上flatMap是综合了map和flat的操作，所以它也只能打平一层。
 
 
 
  
 
  
let grades = [78, 62, 80, 64]
 
  

 
  
let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
 
  
// [
 
  
// 78, [ 85 ],
 
  
// 62, [ 69 ],
 
  
// 80, [ 87 ],
 
  
// 64, [ 71 ]
 
  
// ]
 
 
 
 
Array.prototype.flatmap的支持情况
 
 
ChromeFirefoxSafariEdge
756712--
 
 
Chrome AndroidFirefox AndroidiOS SafariIE MobileSamsung internetAndroid Webview
756712.1----67
 
 
String.trimStart 和 String.trimEnd
 
 
ES2019中另一个优秀的新特性是为一些字符串方法的取了别名，让其含义更为明确。比如说，以前我们使用的String.trimRight和String.trimLeft
 
 
 
  
 
  
let message = " Welcome to CS 101 "
 
  
message.trimRight()
 
  
// ' Welcome to CS 101'
 
  
message.trimLeft()
 
  
// 'Welcome to CS 101 '
 
  
message.trimRight().trimLeft()
 
  
// 'Welcome to CS 101'
 
 
 
 
这些方法都很实用，但是为了让其更为符合其语义，即移除开头和结尾的空格，我们改为使用String.trimStart 和 String.trimEnd。
 
 
 
  
 
  
let message = " Welcome to CS 101 "
 
  
message.trimEnd()
 
  
// ' Welcome to CS 101'
 
  
message.trimStart()
 
  
// 'Welcome to CS 101 '
 
  
message.trimEnd().trimStart()
 
  
// 'Welcome to CS 101'
 
 
 
 
String.trimStart和String.trimEnd的支持情况
 
 
ChromeFirefoxSafariEdge
756712--
 
 
可选的catch绑定
 
 
在ES2019中，try-catch语句中的参数变为了一个可选项。以前我们写catch语句时，必须传递一个异常参数。这就意味着，即便我们在catch里面根本不需要用到这个异常参数也必须将其传递进去。
 
 
 
  
 
  
try {
 
  
  let parsed = JSON.parse(obj)
 
  
} catch(e) {
 
  
  // ignore e, or use
 
  
  console.log(obj)
 
  
}
 
 
 
 
而现在，如果我们在catch语句里面不使用这个变量时，我们就不用传递它了。
 
 
 
  
 
  
try {
 
  
  let parsed = JSON.parse(obj)
 
  
} catch {
 
  
  console.log(obj)
 
  
}
 
 
 
 
 可选catch绑定的支持情况
 
 
ChromeFirefoxSafariEdge
756712--
 
 
Function.toString() 的改变
 
 
ES2019中，Function.toString()发生了变化。从前，执行这个方法时，得到的字符串是去空白符号的：
 
 
 
  
 
  
function greeting() {
 
  
  const name = 'CSS Tricks'
 
  
  console.log(`hello from ${name}`)
 
  
}
 
  

 
  
greeting.toString()
 
  
//'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}'
 
 
 
 
而现在，得到的字符串呈现出原本源码的样子。
 
 
 
  
 
  
function greeting() {
 
  
  const name = 'CSS Tricks'
 
  
  console.log(`hello from ${name}`)
 
  
}
 
  

 
  
greeting.toString()
 
  
// 'function greeting() {\n' +
 
  
// " const name = 'CSS Tricks'\n" +
 
  
// ' console.log(`hello from ${name}`)\n' +
 
  
// '}'
 
 
 
 
这简简单单只是一个内部实现方式的改变，但是对于写博客的人来说也许写作从此就会变得轻松很多了。
 
 
 Function.toString()的支持情况
 
 
ChromeFirefoxSafariEdge
756712（部分）17（部分）
 
 
到此为止，就是ES2019新增的主要内容。
 
 
下面的这些其他的新增属性，就留给你自己探索吧：
 
 
  • Symbol description（https://github.com/tc39/proposal-Symbol-description）
  • Sort stability（https://tc39.es/ecma262/#sec-array.prototype.sort）
  • ECMAScript as JSON superset（https://github.com/tc39/proposal-json-superset）
  • JSON.stringify（https://github.com/tc39/proposal-well-formed-stringify）
 
 
祝写码愉快！
 
 
关于奇舞周刊
 
 
《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。
 
 
640?wx_fmt=png
 
 

 


                

        

        

    




    

      

        

            

              
                
                  奇舞周刊
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
ES2019（ES10）新特性

				
			

			

				

					述安的博客
				

				

					01-27
					
					1138
					
				

			

		

		

			
				
对象新增方法：Object.fromEntries()、字符串新增方法：trimStart() 与 trimEnd()、数组新增方法：flat() 与 flatMap()、Symbol新增属性：Symbol.prototype.description

			
		

	



                

              
                



	

		

			

				
					
JavaScript：ES2019 的新特性(译)

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了JavaScript：ES2019 的新特性(译),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	



                


  
              

                


	

		

			

				
					
ES2019 的新特性

				
			

			

				

					weixin_30414245的博客
				

				

					08-12
					
					344
					
				

			

		

		

			
				
JavaScript 不断演变，每次迭代都会得到一些新的内部更新。让我们来看看 ES2019 有哪些新的特性，并加入到我们日常开发中
Array.prototype.flat()
Array.prototype.flat()递归地将嵌套数组拼合到指定深度。默认值为 1，如果要全深度则使用Infinity。此方法不会修改原始数组，但会创建一个新数组:

const arr1 =...

			
		

	





	

		

			

				
					
es6新特性

				
			

			

				

					WF_devil的博客
				

				

					07-19
					
					106
					
				

			

		

		

			
				
es6新特性

let const 与 var 的区别


1: var 声明的变量有变量提升 let  const 没有
2：let 声明为变量 const 为常量
3：const 复制对象或者数组，对象与数组可以被改变便，因为const 保证的指针不变
4：let const 变量 为块级作用域
5：let const 变量不能重复
6: let const 会形成暂时性死区



详细介绍promise

1：因为传统异步是通过回到函数方式结果的，为了解决回调地狱导致代码可读性差，可维护成本，所以有了

			
		

	



		

			
		



	

		

			

				
					
【Elasticsearch】Elasticsearch 字段膨胀不要怕，Flattened 类型解千愁

					
最新发布

				
			

			

				

					九师兄
				

				

					06-18
					
					59
					
				

			

		

		

			
				
Flattened 类型的出现，解决了字段膨胀引起的 Mapping 爆炸问题，如果您的生产环境高于7.3版本，有文章开头类似问题，可以小心求证、大胆尝试这种新类型。当然，可行的解决方案就是：dynamic 设置为 false，甚至更为严谨的推荐方式：将 dynamic 设置为 strict。当然，如果是非常复杂的大 bool 检索语句，会导致 Mapping 变得非常复杂甚至会出现字段膨胀的情况。这里要强调的，不管原来内嵌多少个字段，内嵌多少层，有了 Flattend，一下都打平！

			
		

	





	

		

			

				
					
尝鲜 ES2019 的新功能

				
			

			

				

					前端先锋
				

				

					03-13
					
					555
					
				

			

		

		

			
				
ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。
ES10/ES2019 在本次更新中有很大的改进。它引入了一些新的函数和方法，使开发者能够编写更少的代码，并提高工作效率。

			
		

	





	

		

			

				
					
ES新特性

				
			

			

				

					weixin_47412580的博客
				

				

					08-08
					
					112
					
				

			

		

		

			
				
ES新特性

			
		

	





	

		

			

				
					
JavaScript ES2019中的8个新特性详解

				
			

			

				

					10-17
				

			

		

		

			
				
主要介绍了JavaScript ES2019中的8个新特性详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
十分钟教你上手ES2020新特性

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了十分钟教你上手ES2020新特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
ES2020 新特性(种草)

				
			

			

				

					10-15
				

			

		

		

			
				
这篇文章将详细讲解ES2020中引入的三个重要新特性：Promise.allSettled、可选链(Optional chaining)以及空值合并运算符(Nullish coalescing Operator)。  一、Promise.allSettled  Promise.allSettled 解决了原有...

			
		

	





	

		

			

				
					
ES6、ES7、ES8、ES9、ES10新特性一览1

				
			

			

				

					08-08
				

			

		

		

			
				
ECMAScript（简称ES）是JavaScript的标准化规范，由ECMA国际制定，每年都会发布新的版本，引入新的特性和改进。下面将详细讲解ES6、ES7、ES8、ES9以及ES10的主要新特性。  ### ES6（2015）  #### 1. 类（Class） ES6...

			
		

	





	

		

			

				
					
ES2019 中的 8 个新特性

				
			

			

				

					weixin_42437900的博客
				

				

					03-04
					
					523
					
				

			

		

		

			
				
1.可选的 Catch 绑定

能够在不使用 catch 绑定的地方选择性地删除它


try {
  // trying to use a new ES2019 feature
  // which may not be implemented in other browsers
} catch (unused) {
  // revert back to old way
}

现在可以删除未使...

			
		

	





	

		

			

				
					
ES2019-2022实用新特性

				
			

			

				

					qq_45472813的博客
				

				

					08-18
					
					971
					
				

			

		

		

			
				
个人封装常用方法工具包：
https://www.npmjs.com/settings/lihai-js/packages
文章已收录:
https://github.com/lihai-boop/Blog
每日一题，刷出强大:
https://github.com/lihai-boop/Blog/issues

前言

ES2019-2022新特性均再nodeJs，浏览器版本支持环境下演示；如实际操作中报错，请考虑兼容性，推荐使用bebal
文章列举的特性并不是ES2019-2022全部特性，只摘录其..

			
		

	





	

		

			

				
					
ES新特性（ES8~ES11）

				
			

			

				

					d15203845255的博客
				

				

					05-05
					
					395
					
				

			

		

		

			
				
ES6之后的新特性，对于开发代码简洁以及开发效率的提升有很大帮助。

			
		

	





	

		

			

				
					
ES next新特性有哪些？

				
			

			

				

					07-14
				

			

		

		

			
				
ES Next（ECMAScript的下一个版本）是指将要发布的ECMAScript的新特性，以下是一些可能的特性：  1. 可选链操作符（Optional Chaining Operator）：使用问号（`?.`）来访问可能为undefined的属性或调用可能为...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值