JavaScriptの勉強07【分割代入って何なん？】

前回の記事 micche-labo.hatenablog.com

配列まで学んだJavaScript。
そろそろ何か作りたいがもう少し基礎の勉強を。

ということで出てきた「分割代入」。

またしてもなんじゃそりゃ？ってなったんで記録。

はじめに

このシリーズはjavascriptを触ったことのない初心者が勉強のために記事にまとめて、頭の中を整理しよう！というシリーズです。

ためになるかはわかりませんが、同じく初心者の方は一緒にがんばりましょう！
玄人の方はどうぞ温かい目で見守っていてください。

なにか間違い・助言あれば、ご教授おねがいします。

勉強方法：Chromeのデベロッパーツールでコンソールを開いて実行。

基本のこと

配列は[]でくくる。
オブジェクトは{}でくくる。

分割代入とは、2つ以上の値をもつ配列・及びオブジェクトからそれぞれの値に代入して使えるよっていうシステム。

たとえば…

りんご🍎とバナナ🍌

をそれぞれ

aとbに代入

すると、

りんご🍎はa、バナナ🍌はbとして取り出せるよ〜〜ってこと。

配列を分割代入〜数値編

とりあえず、aとbにそれぞれ数字を代入。
テンプレートリテラルの形で文にしてます。

テンプレートリテラルとは micche-labo.hatenablog.com

const [a,b] = [1,2];

console.log(`aには${a}、bには${b}が代入されています。`);
// aには1、bには2が代入されています。

数字として認識されているかの確認

typeof a //'number'
typeof b //'number'

されていた。

配列を分割代入〜文字編

今度はaとbにそれぞれ「あ」「い」を代入。

const [a,b] = ['あ','い'];
//文字として認識されているか確認
typeof a//'string'
typeof b//'string'

//コンソールに表示してみる
console.log(`aには${a}、bには${b}が代入されています。`);
//aにはあ、bにはいが代入されています。

きちんとできていた。

分割代入で○番目の要素だけ抜きだすには

2番目と4番目を抜き出したい時

const num = [1,2,3,4];
const [,x,,y]=num;

console.log(`数字の2番目は${x}となり、数字の4番目は${y}となる。`);

//結果=>数字の2番目は2となり、数字の4番目は4となる。

1行目の配列に対応する箇所に、2行目で何かしらの文字を入れる。（上の例でいくと、xとy。）
抜き出さない箇所は、,で区切るだけで何も入れない。

例えば1番目と2番目を抜き出したいなら[x,y,,,]。
わかりやすいように空白を挟んでもいいかもしれない。
[x, y , , ,]のように。

その文字を使う時に抜き出せば、代入した数字が反映されている。

テンプレートリテラルを使用した書き方をするなら、
上記の例のように
`数字の2番目は${x}となり、数字の4番目は${y}となる。`
とする。

使わないなら
'数字の2番目は'+x+'となり、数字の4番目は'+y+'となる。';
とする。

普通にこれを使用して計算式もかける。

x+y // 6

x*y // 8

1つ目の要素はx、2つ目以降yに代入

x,...yでOK。

const num = [1,2,3,4];
const [x, ...y] = num;

console.log(`初めの数字は${x}です。残りの数字は${y}です。`);
// 結果=>初めの数字は1です。残りの数字は2,3,4です。

どんだけ配列内が増えても書き方は同じ。

const num = [1,2,3,4,5,6,7,8,9,10];
const [x,...y] = num;
console.log(`初めの数字は${x}です。残りの数字は${y}です。`);

//結果=>初めの数字は1です。残りの数字は2,3,4,5,6,7,8,9,10です。

オブジェクトの分割代入

オブジェクトは{}でくくる。

const obj = {x:1,y:2};
const{x,y}=obj;
console.log(`xは${x}、yは${y}です。`);
//結果=>1 xは1、yは2です。

数値でなく、文字列を入れた場合。
さらにそれぞれりんごはA、みかんはOで呼べるよう設定。

const fruits = {apple:'りんご',orange:'みかん'};
const {apple:A,orange:O} = fruits;
console.log(`appleは${A}、orangeは${O}です。`);

//結果=>appleはりんご、orangeはみかんです。

孫プロパティを分割代入で取得する

//オブジェクト作成
const shop = {
name: 'スーパーみっちぇ',
category: 'スーパー',
address: {
street: '1丁目3番地',
city: 'みっちぇタウン',
country: '日本',
},
};

//分割代入
const {name, address:{city, street}, category} = shop;

console.log(`${name}という${category}は${city}${street}にあります。`);
//結果=>スーパーみっちぇというスーパーはみっちぇタウン1丁目3番地にあります。

この時のaddress:は、何かを代入しているわけではない。
よって、addressを取り出そうとしてもエラーである。

`${address}`
Uncaught ReferenceError: address is not defined
    at <anonymous>:1:1

エラーが返る。

さらに深い階層のプロパティを参照

オブジェクト作成。

const obj = {
name:'みっちぇのブログ',
category:{
tips:{
thema:'テーマ制作',
css:'CSS',
},
none:'未分類'},
};

代入。

const {name, category:{ tips:{ thema, css}, none} } = obj;

取り出す。

console.log(`${name}のカテゴリーは、${thema}と${css}と${none}があります。`)
//結果=>みっちぇのブログのカテゴリーは、テーマ制作とCSSと未分類があります。

category:もtips:も参照するために書いてるだけ。代入の対象にはならないので、取り出そうとしても取り出せない。

休憩

今日はここまで！！！

いろんなサイトを巡りながら勉強しています。

さてさて明日は大雨・暴風らしいので、家に引きこもって引き続き勉強していきたいと思います。