每天3分钟，重学ES6-ES12(一)字面量的增强 解构
每天3分钟，重学ES6-ES12(一)字面量的增强 解构
虎妞先生
发布于 2022-10-27 19:54:35
发布于 2022-10-27 19:54:35
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
为什么学习ES6
嗯～ES6的语法相信大家都烂熟于心，已经在开发中日常使用
我知道屏幕前的大漂亮，大帅比肯定都会了。
但是我还是得写，原因你懂的，请看文章第一句。
如果你已经会了，可以点开不看。
如果你还不会，点开请先点赞。
前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是字面量的增强和解构。
字面量的增强
- ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals(增强对象字面量)。
- 字面量的增强主要包括下面几部分:
- 属性的简写:Property Shorthand
- 方法的简写:Method Shorthand
- 计算属性名:Computed Property Names
var name = "yz"
var age = 24
var obj = {
// 1.property shorthand(属性的简写)
// es5
name:name,
// es6
age,
// 2.method shorthand(方法的简写)
// es5
foo: function() {
console.log(this)
},
// es6
bar() {
console.log(this)
},
baz: () => {
console.log(this)
},
// 3.computed property name(计算属性名)
[name + 123]: 'hehehehe'
}
obj.baz()
obj.bar()
obj.foo()
// obj[name + 123] = "hahaha"
console.log(obj)计算属性名 定义对象key的时候加上[]，可以动态定义对象名 []
解构Destructuring
概述
- ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。
- 我们可以划分为:数组的解构和对象的解构。 数组结构
- 数组的解构:
- 基本解构过程
- 顺序解构
- 解构出数组
- 默认值
var names = ["abc", "cba", "nba"]
// var item1 = names[0]
// var item2 = names[1]
// var item3 = names[2]
// 对数组的解构: []
var [item1, item2, item3] = names
console.log(item1, item2, item3)
// 打印 abc cba nba
// 解构后面的元素
var [, , itemz] = names
console.log(itemz)
// 打印 nba
// 解构出一个元素,后面的元素放到一个新数组中
var [itemx, ...newNames] = names
console.log(itemx, newNames)
// 打印 abc ['cba', 'nba']
// 解构的默认值
var [itema, itemb, itemc, itemd = "aaa"] = names
console.log(itemd)
// 打印 aaa
对象的解构
- 对象的解构:
- 基本解构过程
- 任意顺序
- 重命名
- 默认值
var obj = {
name: "yz",
age: 25,
height: 180
}
// 对象的解构: {}
var { name, age, height } = obj
console.log(name, age, height)
// 打印 yz 25 180
var { age } = obj
console.log(age)
// 打印 25
var { name: newName } = obj
console.log(newName)
// 打印 yz
var { address: newAddress = "北京市" } = obj
console.log(newAddress)
// 打印 北京市
function foo(info) {
console.log(info.name, info.age)
}
foo(obj)
// 打印 yz 25
function bar({name, age}) {
console.log(name, age)
}
bar(obj)
// 打印 yz 25应用场景
解构目前在开发中使用是非常多的:
比如在开发中拿到一个变量时，自动对其进行解构使用;
比如对函数的参数进行解构;
let obj1 = {
name:'yz',
age:24
}
function test(obj){
// es5
console.log(obj.name,obj.age)
// es6
const {name,age} = obj
console.log(name,age)
}
test(obj1)总结
字面量的增强 方便我们写对象属性和方法时，少写代码
解构 方便我们更容易的处理对象数组的属性，少写代码
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录