男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript オブジェクトにループ処理(おまけ: 文字列の操作)

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.6 f:id:TomozQ:20201109220419j:plain

JavaScript備忘録 Vol.9

目次
  • Object.keys( )
  • 変数
  • 文字列の操作




今回もJavaScriptの記事になっています。

Object.keys( )

例えば、オブジェクトのプロパティを全て取り出したいとします。

ですがオブジェクトにはforEach( )を使うことができません。

なので、一旦キーを配列として取得し、その配列に対してforEach( )を使う必要があります。

手順をみていきましょう。

const prices = {
    orange: 100, 
    apple: 200,
};

こんなオブジェクトがあったとします。

まずは

Object.keys( )を使い、キーを配列として取得します。

どうするかというと

const prices = {
  orange: 100, 
  apple: 200,
};

console.log(Object.keys(prices));

この様に

Object.keys(オブジェクト名)としてあげることで、キーを配列として取得することができます。 f:id:TomozQ:20201109215446p:plain

ではこれを応用して、配列に対しforEach( )を回して要素を一つずつ出力します。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(key);
});

結果はこうです。

f:id:TomozQ:20201109215434p:plain pricesキーを配列にして、keysという定数に代入します。
その後、keysという配列にforEach(key)を回し、要素分だけ値を出力しています。

ではついでに値も出力しましょう。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(`Key: ${key}, Value: ${prices.key}`);
});

としたいところですが、これだと・・・

f:id:TomozQ:20201109215423p:plain undifinedになってしまいます。
これはkeyが文字列で取得されているからですね。
なのでもう一つの記法のオブジェクト['キー']を使用してあげます。

console.log(`Key: ${key}, Value: ${prices[key]}`);

としてあげます。 f:id:TomozQ:20201109215405p:plain

さらにこのオブジェクトが一つの箱だったとして、他の果物が入っている箱も加え、一つの配列として管理したいとします。

配列がお店、オブジェクトがお店に並んでいる、果物が入った箱だと考えてみましょう。

const store = [
  {orange: 100, apple: 200},
  {grape: 300, pineapple: 400},
  {strawberry 500, melon: 200},
];

では各値(今回の場合は各金額)にアクセスしたい場合を考えてみましょう。

例えばmelonの金額を取り出したい場合

const store = [
    {orange: 100, apple: 200},
    {grape: 300, pineapple: 400},
    {strawberry: 500, melon: 600},
  ];
  
  console.log(store[2].melon);

この様に

配列[index番号].キー

としてあげることで取得することができます。

f:id:TomozQ:20201109215327p:plain


変数

JavaScriptを使う上での注意事項です。

JavaScriptには大きく分けて単純なデータ型と複雑なデータ型があります。

下記の様に分けられますね。

単純なデータ型
数値 文字列 真偽値 undifined Null
複雑なデータ型
配列 オブジェクト


この二つですが、変数を代入したときの挙動が異なるので見ていきましょう。


単純なデータ型

では例文

let x = 3;
let y = x;

x = 6;

console.log(x);
console.log(y);

f:id:TomozQ:20201109215312p:plain x6y3と出力されましたね。

流れを追ってみると

  1. xに3を代入...xの値は3
  2. yにxを代入...yの値は3
  3. xに6を代入...xの値は6

最終的に出力されるのは

x6y3ですね。

複雑なデータ型

では上のコードを配列に変えて見てみましょう。

let x = [3, 4];
let y = x;

x[0] = 6;

console.log(x);
console.log(y);

今度は結果を見る前に考えてみましょう。

  1. xに[3,4]という配列を代入...xは[3,4]
  2. yにxを代入...yは[3,4]
  3. x[0]として、配列xの一番目の値に6を代入...xは[6,4]

上の単純なデータ型と同じ様に考えれば、最終的に出力されるのは

x[6, 4]y[3, 4]ですね。

では結果をみてみましょう

f:id:TomozQ:20201109215258p:plain x, yとも[6, 4]となっていますね。

単純なデータ型については解説は不要ですね。

では複雑なデータ型はどうなっているのでしょうか?

x = [3, 4]とするとコンピューター上のどこかに[3, 4]という配列が作成されそこにxという名前がつきます。
次にy = xとすると、xの値がyに代入されるのではなく、xの値がどこに格納されているのかという情報が作られyという名前がつきます。
よって、x[0] = 6とするとy[6, 4]となるわけです。

複雑なデータ型はデータ量が大きくなることがあるため、丸々コピーしてシステムに負荷をかけない様にこの様な仕組みになっているみたいですね。


ちなみに、配列の値そのものをコピーしたい場合には

let x = [3, 4];
let y = [...x];

x[0] = 6;

console.log(x);
console.log(y);

の様にスプレッド演算子を使えば値を丸々コピーすることができます。

f:id:TomozQ:20201109215244p:plain


文字列の操作

おまけ?

文字列を操作してみましょう!

サクッといきますね

const str = 'Fresh';

console.log(str.length);

f:id:TomozQ:20201109215232p:plain 文字列.lengthとすることで文字列の長さを取得できます。



const str = 'Fresh';

console.log(str.substring(1, 3));

f:id:TomozQ:20201109215216p:plain substring(開始位置, 終了位置)としてあげることでその部分の文字を取得することができます。

今回の場合は

文字列も0から始まるので...Fresh1番目であるrから終了位置である3(s)の手前までとなるのでreが出力されてますね。



const str = 'Fresh';

console.log(str[1]);

f:id:TomozQ:20201109215206p:plain

この様に配列の様に文字を取得することもできます。

ただ、これは値が取得できるだけで配列と同じ様に使うことはできません。

const str = 'Fresh';
str[1] = 'g';

console.log(str);

この様に代入を使用としても

f:id:TomozQ:20201109215156p:plain

読み込み専用だよ、というエラーが出てしまいます。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!