JavaScript#JavaScript#ES6#学习笔记
JavaScript 入门第十二天:ES6 常用语法整理
复习对象简写、解构、扩展运算符、箭头函数、Set 和 Map,把新语法放回实际数据处理场景。
2 分钟阅读
第十二天集中整理 ES6 中最常用的语法。它们不是为了写得更花,而是让数据读取、函数传参和不可变更新更直接。
对象简写与解构
变量名和属性名相同时可省略重复部分;对象方法也可以使用简写:
const name = 'Myth'
const site = {
name,
greet() {
return `欢迎来到 ${this.name}`
},
}
解构能从对象或数组中取出需要的部分:
const { title, author = '匿名' } = post
const [first, second] = items
解构不是深拷贝,取到嵌套对象时仍是同一引用。默认值只会在对应值为 undefined 时生效。
扩展运算符用于展开和复制
... 可以把数组展开为参数或新数组元素,也可以复制对象第一层属性:
const nextItems = [...items, newItem]
const updatedUser = { ...user, nickname: '新名字' }
这类写法很适合表达“不修改旧值,创建一个带变化的新值”,但嵌套对象仍需单独展开对应层级。
箭头函数适合简短回调
箭头函数可以省略 function,单一表达式会隐式返回结果:
const squared = numbers.map((number) => number * number)
它没有自己的 this,会捕获外层作用域的 this。因此对象需要依靠动态 this 的普通方法时,通常仍使用方法简写或普通函数。
Set、Map 与迭代
Set 存储不重复的值,适合去重;Map 用键值对存储数据,键可以是对象等任意值:
const uniqueTags = [...new Set(tags)]
const scores = new Map()
scores.set('小林', 95)
for...of 可遍历数组、字符串、Set 和 Map 等可迭代对象。今天的练习让我意识到,新语法的选择仍要从数据形状出发:需要什么结果、是否保留原值、回调是否需要自己的 this。