目录
序言
上一篇 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 可用于实现某些功能，是现代语言中最常用的语法之一。
组合阵列
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 分钟了解前端大型架构。
简体中文 
繁體中文 
English 
한국어 
日本語 
Español