ES6 JavaScript ES6 对象 - React Vernacular Campaign 02

内容目录

序言

上一篇 JavaScript ES6 简介

let, const, var 差异
模板字面
箭头功能

今天，我们将继续介绍 JavaScript ES6 的其他新语法。

对象重构
对象字面增强（OLE）
数组重构
延展运算子（Spread Operator）

ES6 对象重构

去结构化赋值允许我们提取并使用对象的特定值。

我们还可以将其与上一篇文章中提到的箭头函数结合使用，对其进行解构。

不采用解构的情况

				
					const person = { person_name: "Hogan", phone: "0123456789", email: "hoganlin.tech@gmail.com" } const showInfo = () => { console.log(`name: ${person.person_name}\ nphone: ${person.phone}`) } showInfo() //name: Hogan //phone: 0123456789

解构的使用

				
					const person = { person_name: "Hogan", phone: "0123456789", email: "hoganlin.tech@gmail.com" } const showInfo = ({ person_name, phone }) => { console.log(`name: ${ person_name}\nphone: ${phone}`) } showInfo(person) //name: Hogan //phone: 0123456789

ES6 对象字面增强

对象字面增强可以看作是一种反向解构，通过它可以将变量分组为对象。

				
					const person_name = "Hogan"; const phone = "0123456789"; const email = "hoganlin.tech@gmail.com"; const printEmail = () => { console.log(`email: ${person.email}`) } const person = { person_name, phone, email, printEmail } console.log(`name: ${person.person_name}\nphone: ${person.phone}`); person.printEmail(); //name: Hogan / /phone: 0123456789

数组重构

除对象外，数组也可以解构，并可通过逗号获取值。

				
					const [firstName] = ["Hogan", "Pipi", "Fifi", "Bobo"] console.log(firstName) //Hogan const [, , , fourthName] = ["Hogan", "Pipi", "Fifi ", "Bobo"] console.log(fourthName) //Bobo

ES6 扩展操作器

Spread Operator 的语法由三个分句组成....。Spread Operator 可用于实现某些功能，是现代语言中最常用的语法之一。

组合阵列

通过扩展运算符，您可以将 animal1 和 animal2 结合起来，指定它们为动物。

				
					const animal1 = ["cat", "dog"] const animal2 = ["elephant", "zibra"] const animal = [...animal1, ...animal2] console.log(animal); //[ 'cat ', 'dog', 'elephant', 'zibra' ]

Copy Array

在某些情况下，我们可能希望在获取数组值时对其进行修改，因此最好能在这种情况下快速复制数组。例如，如果要获取数组的最后一个值，可以使用扩展运算符。

下面是一个不使用扩展运算符的示例，可以看到程序在执行 reverse() 之后会修改原始数组。

				
					const animal = ["cat", "dog"] const [last] = animal.reverse(); console.log(last); // dog console.log(animal); // [ 'dog', 'cat' ]

另一方面，如果使用伸展运算符，则可以复制一个新数组，而无需修改原来的数组。

				
					const animal = ["cat", "dog"] const [last] = [...animal].reverse(); console.log(last); // dog console.log(animal); // [ 'cat ', 'dog' ]

结论

继上一篇文章介绍 ES6 语法之后，本文将介绍 ES6 中解构、对象增强和扩展操作符的使用，其中解构和扩展操作符在 React 实现中非常常用。

如果您有任何建议或问题，欢迎留言！

如果您喜欢这一系列文章，请不要犹豫，点击 "喜欢 "并分享，让更多人看到它！

引用

https://www.w3schools.com/js/js_es6.asp

https://www.javascripttutorial.net/es6/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

其他文章

React 白皮书活动 01--JavaScript ES6

大公司为何使用 Nx？Monorepo 工具 5 分钟快速构建

你真的了解 Monorepo 吗？5 分钟了解前端大型架构。

什么是 Zustand？React 前端状态管理

序言