每天3分钟，重学ES6-ES12(一)字面量的增强 解构

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

为什么学习ES6

嗯～ES6的语法相信大家都烂熟于心，已经在开发中日常使用

我知道屏幕前的大漂亮，大帅比肯定都会了。

但是我还是得写，原因你懂的，请看文章第一句。

如果你已经会了，可以点开不看。

如果你还不会，点开请先点赞。

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是字面量的增强和解构。

字面量的增强

• ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals(增强对象字面量)。

• 字面量的增强主要包括下面几部分:

  • 属性的简写:Property Shorthand
  • 方法的简写:Method Shorthand
  • 计算属性名:Computed Property Names

```js 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(计算属性名) }

obj.baz() obj.bar() obj.foo()

// obj[name + 123] = "hahaha" console.log(obj)

``` 计算属性名 定义对象key的时候加上[]，可以动态定义对象名 []

解构Destructuring

概述

• ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。

• 我们可以划分为:数组的解构和对象的解构。

  数组结构

• 数组的解构:

  • 基本解构过程
  • 顺序解构
  • 解构出数组
  • 默认值 ```js 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

```

对象的解构

• 对象的解构:
  • 基本解构过程
  • 任意顺序
  • 重命名
  • 默认值 ```js 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 ```

应用场景

• 解构目前在开发中使用是非常多的:

  • 比如在开发中拿到一个变量时，自动对其进行解构使用;
  • 比如对函数的参数进行解构; js 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)

  总结

字面量的增强 方便我们写对象属性和方法时，少写代码

解构 方便我们更容易的处理对象数组的属性，少写代码