Zenn
🔥

JavaScript学習記録 8/24

に公開
JavaScript
tech

配列と文字列を相互に変換するためのjoin()、split()について

例えば、Taro Jiro Saburoの配列をカンマから｜⇦この記号に変えたい場合、
以下のjoin()を使用すると変更が可能。
console.log(names.join('|'))
カンマにしたい場合は、
console.log(names.join())
何もつけず、
TaroJiroSaburoと表示したい場合は、
console.log(names.join(''));
このように記載すれば良い。

    const names = ['Taro', 'Jiro', 'Saburo'];
    //Taro|Jiro|Saburo
    console.log(names.join('|'));
    console.log(names.join());
    console.log(names.join(''));

逆に、配列に変更したい場合はsplit()を使用する。

  const names = 'Taro|Jiro|Saburo';
    console.log(names.split('|'));

この様に記載すれば、要素を配列に変更できる。

forEach()による配列の作成

では、以下の
const prices = [100, 150, 200];
　３つの価格に消費税をかけた場合の数値を出力したい場合、
どのようにしたら良いでしょうか。
以下の様にforEach()を使用して出力が可能です。

const prices = [100 , 150 , 200];

const priceWithTax = [];
prices.forEach((price) =>{
priceWithTax.push(price * 1.1);
});

console.log(priceWithTax);

map()による書き換え

先ほどのforEachの書き方ですが、
map()によってもっと簡潔に書き換えすることが可能です。

   const pricesWithTax = prices.map((price) => {
        return price * 1.1;
    });

    console.log(pricesWithTax)

自分的にはこちらの方が書きやすかったです。

forEach()による配列の作成とfilter()による書き換え。

const prices = [100 , 150 , 200];
上記のプライスの150円以上だけを表示したい場合どうすれば良いでしょう。
まずは、forEach()を使用して出力してみます。

  const prices = [100, 150, 200];
    const priceOver150 = [];
    prices.forEach((price) => {
        if (price >= 150) {
            priceOver150.push(price);
        }
    });

    console.log(priceOver150);

map()のようにfilter()を使用するともっと簡単に記載ができる。
filterには条件に当てはまったものだけを抽出する機能がある。

    const priceOver150 = prices.filter((price) => {
        return price >= 150;
    });

    console.log(priceOver150);

配列の要素を複数の定数に一気に代入するための方法

以下のスコアそれぞれに名前をつけて表示をしたい場合、
const scores = [70, 90, 80, 85];
それぞれに名前をつけて表示することも可能だが、これでは時間がかかってしまう。

const scores = [70, 90, 80, 85];

```js
const scores = [70, 90, 80, 85];
const first = scores[0];
const second = scores[1];
const third = scores[2];
const fourth = scores[3];

console.log(first);
console.log(second);
console.log(third);
console.log(fourth);


その場合、以下の様に書き換えることが可能。

```js
const [first, second, third, fourth] = scores;

はるかに短くて簡単です。
これを、分割代入と呼びます。
ただし、これは配列ではなく、分割代入の記号ということに注意。

分割代入を値の入替えに使うための方法

想定：マップアプリを作成している。
現時点でスタートは東京、ゴールは大阪になっているが、
これを逆にしたい。
尚、元のプログラムは何らかの事情があっていじれないとする。

    let start = 'Tokyo';
    let goal = 'Osaka';

    start = goal; // start = Osaka
    goal = start; // goal = Osaka

    console.log(start);
    console.log(goal);

通常であれば、この様に記載すれば良いのでは？と思うが、
最初のstart = goalでスタートが大阪に変更されており、
goal = start; は既にスタートが大阪に置き換えられてるので
ゴールも大阪になってしまう。

この場合、以下の様に記載することができる。

[goal, start] = [start, goal];

startがgoalに代入され、 goalがstartに代入される。

余った要素をまとめて受け取ることができるレスト構文について

const scores = [70, 90, 80, 85];
この配列の最初だけをfirstに分類し、
他をothersにしたい場合

    const scores = [70, 90, 80, 85];

    const [first, ...others] = scores;
    console.log(first);
    console.log(others);

[first, ...others] = scores;と記載すると７０以外がothersに分類される。

配列から要素を取り出すことができるスプレッド構文について

新しい点数が届いて、
const scores = [70, 90, 80, 85];
上記のスコアに追加したい場合はどうするか？

 const moreScores = [77, 88];
    const scores = [70, 90, 80, 85, ...moreScores];

    const [first, ...others] = scores;
    console.log(first);
    console.log(others);

追加したいスコアをmoreScoresとして、
scoresの中に...と一緒に記載する。
そうすると、othersに分類される。

オブジェクトに対して分割代入、レスト構文、スプレッド構文の使用について

オブジェクトにも分割代入が使用できる。
taro,jiro,saburoの３人のスコアを別々に取り出したい場合、分割代入を使用して取り出せる。

    const scores = {
       taro: 80,
       jiro: 70,
       saburo: 90,
   };
   const { taro, jiro, saburo } = scores;
   console.log(taro);
   console.log(jiro);
   console.log(saburo);

const { taro, jiro, saburo } = scores;
↑で値をそれぞれの定数に代入してくれる。

taroだけ表示したくて、あとはオブジェクトのままで良い場合は以下の様に記載すれば良い。

   // const { taro, jiro, saburo } = scores;
    const { taro, ...others } = scores;
    console.log(taro);
    // console.log(jiro);
    // console.log(saburo);
    console.log(others);

こうすると、コンソールの部分には80と、
{jiro: 70, saburo: 90}と表示される。
↑これはオブジェクトのまま。

次にshiro77点とgoro88点のスコアを追加したい場合



    const moreScores = {
        shiro: 77,
        goro: 88,
    }
    const scores = {
        taro: 80,
        jiro: 70,
        saburo: 90,
        ...moreScores,
    };
    // const { taro, jiro, saburo } = scores;
    const { taro, ...others } = scores;
    console.log(taro);
    // console.log(jiro);
    // console.log(saburo);
    console.log(others);

moreScoreで定義をし、...moteScore（スプレッド構文）を追加すれば良い。

あと少しでJavaScript入門のデータ構造編が終わりそうです！
明日には終わらせて、JavaScript入門 DOM編へ進みたいと思います。
Dom編が終わったらいよいよアウトプットを兼ねて実践しながらコードをたくさん書いて覚えていきたいです。
9月半ばには実践に入れるかな、、、
イギリスから日本への引っ越しでバタバタしてるから勉強時間が今の様に確保するのは難しいだろうし、転職活動も同時進行で進めなければならないので頑張ろう！
とりあえずIT業界に潜り込んで仕事しながら勉強は続けていきたい。
10月には絶対にITパスポート受験して合格する。
TOEICも900点とる！

頑張るぞーーー！

Discussion