(Day29) ES6 - 解构赋值

前言

解构赋值是 ES6 新增语法糖,若要使用阵列、物件中的值,来见新的变数/常数,可以使用解构赋值的方法,来快速建立。

阵列解构

阵列解构主要是根据阵列中的顺序,再对应的顺序建立变数/常数,便可直接获得阵列中的值。
比如过去要获得阵列的值会这样写:

const array = [1,2]
const a = array[0]
const b = array[1]

而现在可使用解构:

const [a,b] = [1,2]
console.log(a, b) // 1, 2

关於阵列解构还有其他特殊用法,这边举出几个较容易使用到的:

// 先建立变数,後赋值
let a, b
[a, b] = [1,2]
console.log(a,b) // 1, 2

//搭配展开运算子
const [ a, b, ...c ] = [1,2,3,4,5]
console.log(a,b) // 1, 2, [3, 4, 5]

// 跳过部分值
const [a, ,c] = [1,2,3]
console.log(a,c) //1, 3

物件解构

物件要使用解构会和阵列不同,阵列主要是按照顺序获得值,而物件要使用解构则是要让,变数名称和物件属性一致才可以取得物件的值,比如:

const school = {
	name:'Taipei University',  
	classes: { 
		teacher: 'Alex',
		student:['Kevin','Clara','Rose']
	},
}
const { teacher, student } = school.classes

上面范例就是透过解构,直接将 school.classes 中的 teacherstudent 属性中的值变成对应的常数,由於我们现在很常会使用到 Ajax 来获得後端传来的物件,因此这个写法使到频率其实满高的,而当然物件解构也有一些特殊用法,这边举出几个较容易使用到的:


// 使用 : 替换解构赋值的名称,让变数/常数改为新名称。
const school = {
	name:'Taipei University',  
	classes: { 
		teacher: 'Alex',
		student:['Kevin','Clara','Rose']
	},
}
const { name: schoolName } = school 
console.log(schoolName) // Taipei University

// 使用 展开运算子 解构物件
const obj = { a:1, b:2, c:3, d:4, e:5 }
const { a,b,...arg } = obj
console.log(a,b,arg) //1, 2, {c: 3, d: 4, e: 5}

// 透过函式参数解构物件,获得物件中的值。
const school = {
	name:'Taipei University',  
	classes: { 
		teacher: 'Alex',
		student:['Kevin','Clara','Rose']
	},
}

function getTeacher({ classes : { teacher }}){
	return teacher 
}
console.log(getTeacher(school)) //Alex

解构赋值预设值

而解构赋值其实也和函式参数一样,也能设定预设值,不论是物件见或是阵列,都可以使用 = 运算子,为解构赋值新增的变数/常数 设定预设值,以避免解构赋值时没有正确获得值。

//未解构赋值设定预设值
const [a, b, c = 3] = [1, 2]
console.log(a, b, c) // 1, 2, 3https://ithelp.ithome.com.tw/articles/10274861/draft

const school = {
	name:'Taipei University',  
	classes: { 
		teacher: 'Alex',
		student:['Kevin','Clara','Rose']
	},
}
const { teacher ,student , address = '新北市三峡区大学路151号' } = school.classes

参考文献


<<:  [Day14] LDAP Injection

>>:  day14_Linux Arm 的音乐之旅

Day29物件导向

物件导向程序设计可以看作一种在程序中包含各种独立而又互相呼叫的物件思想,当我们提到物件导向的时候,它...

Day 6 一样的风格,不一样的体验 - 澳洲跟印度 气象局官网分析

看完了印度整体的网页规划,这个时候我会做一点竞品分析,不免俗的先去看看其他人怎麽做这个产品,毕竟踩在...

好记性的浏览器:localStorage

谈这个主题之前,我们先来回忆一下日常的场景,你来到桃子购物网站,选了你要的商品往下卷动网页,结果竟...

[Day 26] Node thread pool 1

前言 回顾昨天提到, pending 阶段处理 polling 得来的事件, 且调用特定的 call...

[Day10] 建立订单交易API_3

笔者在这一章节,进行sign及取得iv的实作 首先由Sign开始,在[Day4] API开发规格书中...