こちらの記事は以下の書籍を参考に執筆しました
javascriptには構造化の概念がサポートされているがその逆の分割のための構文はなかった。
#オブジェクトの分割
まずは簡単な分割の例を見てみる。
let person = {//データ構造を作成
name: 'Tanaka'
}
let {name} = person;//データ構造を分割
console.log(name);//Tanaka
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
まず、オブジェクトリテラルを使ってデータ構造を作成している。これによりプロパティを簡単な方法で指定できる。
sonogo
データ構造の分割をしている。nameプロパティを変数に取り出すための分割分が使用されている。
let person = {//データ構造を作成
name: 'Tanaka',
age:25
}
let {name,age} = person;//データ構造を分割
console.log(name);//Tanaka 25
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
上記では、オブジェクトwから抽出したいフィールドの名前を指定するとフィールドと同じマナエの変数にフィールド値を代入される。
ES5で同じことをするとこうなる。
let name=person.name;
let age=person.age;
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
別名を使用したい場合にはこうする。
let {name:firstName,age:yearOld}=person;
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
これによりfirstNameとyearOldにperson.name、person.ageの値が割り当てられる。
データ構造の構築時とまさに逆であるところがミソ。
##データ構造の異なるレベルのデータの分割
の場合は入れ子に(ネスト)する。
let geoLocation = {
"location": {
"lat": 51.0,
"lng": -0.1
},
"accuracy": 1200.4
}
let {
location: {
lat,
lng
},accuracy
} = geoLocation;
console.log(lat)//51
console.log(lng)//-0.1
console.log(accuracy)//1299.4
console.log(location)//undefined
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
location変数は作成されないことに注意。
このプロパティは調べただけ。
#配列の分割
配列もオブジェクトと同様に逆の構文。
let coords=[51.0,-0.1];
let [lat,lng,]=coords;
console.log(lat);//51.0
console.log(lng);//-0.1
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
オブジェクトはそれらの値をキー(名前)で追跡するため、それらの値は同じキー/名前で抽出しなければならない。
配列は値のインデックスで追跡する。配列を分割するときは変数に割り当てる変数が何を分割するのかを指定する。
##入れ子で分割
配列でも入れ子の分割ができる。
let location = ['str', [1234, 5678]];
let [moji, [suji, suji2]] = location;
console.log(moji) //str
console.log(suji) //1234
console.log(suji2) //5678
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
##使う場面
使う場面として値の入れ替えがある。
if (stop < start) {
//値を入れ替える
let tmp = start;
start = stop;
stop = tmp;
}
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
上の例だと入れ替えるのに一時的な変数を用意しているが、分割を使えばもっと単純になる。
if (stop < start) {
//値を入れ替える
[start, stop] = [stop, start];
}
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
#オブジェクトと配列の分割の組み合わせ
let res = {
num: [51.0, -0.1]
};
let {
num: [ar, ar2]
} = res;
console.log(ar, ar2);
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
上記ではオブジェクトと配列の分割を組み合わせている。これも入れ子の一種。
ここでもnumという変数は作成していない。作成したのはarとar2の2つである。
#分割可能なデータ
オブジェクトの分割は配列を含め、任意のオブジェクトで使用できるが数字は変数名として使えないので、分割代入では別名にする。
const {
0: a,
1: b,
length
} = ['foo', 'bar']
console.log(a)//foo
console.log(b)//bar
console.log(length)//2
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
配列の分割には以下のような用途もできる。
const [one, two, three, ] = 'abc';
console.log(one)//a
console.log(two)//b
console.log(three)//c
出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。
iterableプロトコルを実装しているオブジェクトはすべて配列の分割で分割できる。
#まとめ
- 分割はデータ構造から値を出すためのシュガーシンタックス
- 分割はオブジェクトリテラルと配列リテラルを高文化する問の逆の構文でできる。
- オブジェクトの分割ではプロパティ名を使って値を指定する。
- 配列の分割は、インデックスを使って指定。
- 分割は入れ子も取り出せる