2022/10/21 (更新日: 2022/10/24)

分割代入について

JavaScript

配列

const[a,b,c] = ['配列1', '配列2', '配列3'];
console.log(a) // 配列1

代入時に変数名を決める

オブジェクト

const{ x, z }　 = {x: 'オブジェクト1', y: 'オブジェクト2', z: 'オブジェクト3'};
console.log(x) // オブジェクト1
console.log(z) // オブジェクト3

代入時には元オブジェクトのキーを指定する（プロパティ名と一致させる必要がある）

変数名変えたい場合↓

const{x: hoge, z: foo} = {x: 'オブジェクト1', y: 'オブジェクト2', z: 'オブジェクト3'};
console.log(hoge) // オブジェクト1

使い所

↓関数に渡すとき

const arry = ['yusuke', 37, 'men'];
// そのまま
const fnAry = (arry) => {
	console.log(arry[0]) // yusuke
	console.log(arry[1]) // 37
	console.log(arry[2]) // men
}
// 分割代入
const fnAry = ([name, age, gender]) => {
	console.log(name) // yusuke
	console.log(age) // 37
	console.log(gender) // men
}

const obj = {name:'yusuke', age:37, gender:'men');
// そのまま
const fnObj = (obj) => {
	console.log(obj.name) // yusuke
	console.log(obj.age) // 37
	console.log(obj.gender) // men
}
// 分割代入
const fnObj = ({name, age, gender}) => {
	console.log(name) // yusuke
	console.log(age) // 37
	console.log(gender) // men
}

• Tweet