JavaScript オブジェクトにループ処理(おまけ: 文字列の操作)
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(オブジェクト名)
としてあげることで、キー
を配列として取得することができます。
ではこれを応用して、配列に対しforEach( )を回して要素を一つずつ出力します。
const prices = { orange: 100, apple: 200, }; const keys = Object.keys(prices); keys.forEach(key => { console.log(key); });
結果はこうです。
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}`); });
としたいところですが、これだと・・・
undifined
になってしまいます。
これはkey
が文字列で取得されているからですね。
なのでもう一つの記法のオブジェクト['キー']
を使用してあげます。
console.log(`Key: ${key}, Value: ${prices[key]}`);
としてあげます。
さらにこのオブジェクトが一つの箱だったとして、他の果物が入っている箱も加え、一つの配列として管理したいとします。
配列がお店、オブジェクトがお店に並んでいる、果物が入った箱だと考えてみましょう。
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番号].キー
としてあげることで取得することができます。
変数
JavaScriptを使う上での注意事項です。
JavaScriptには大きく分けて単純なデータ型と複雑なデータ型があります。
下記の様に分けられますね。
数値 | 文字列 | 真偽値 | undifined | Null |
配列 | オブジェクト |
この二つですが、変数を代入したときの挙動が異なるので見ていきましょう。
単純なデータ型
では例文
let x = 3; let y = x; x = 6; console.log(x); console.log(y);
x
は6
、y
は3
と出力されましたね。
流れを追ってみると
- xに3を代入...xの値は3
- yにxを代入...yの値は3
- xに6を代入...xの値は6
最終的に出力されるのは
x
は6
、y
は3
ですね。
複雑なデータ型
では上のコードを配列に変えて見てみましょう。
let x = [3, 4]; let y = x; x[0] = 6; console.log(x); console.log(y);
今度は結果を見る前に考えてみましょう。
- xに[3,4]という配列を代入...xは[3,4]
- yにxを代入...yは[3,4]
- x[0]として、配列xの一番目の値に6を代入...xは[6,4]
上の単純なデータ型と同じ様に考えれば、最終的に出力されるのは
x
は[6, 4]
、y
は[3, 4]
ですね。
では結果をみてみましょう
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);
の様にスプレッド演算子を使えば値を丸々コピーすることができます。
文字列の操作
おまけ?
文字列を操作してみましょう!
サクッといきますね
const str = 'Fresh'; console.log(str.length);
文字列.length
とすることで文字列の長さを取得できます。
const str = 'Fresh'; console.log(str.substring(1, 3));
substring(開始位置, 終了位置)
としてあげることでその部分の文字を取得することができます。
今回の場合は
文字列も0から始まるので...Fresh
の1
番目であるr
から終了位置である3
(s
)の手前までとなるのでre
が出力されてますね。
const str = 'Fresh'; console.log(str[1]);
この様に配列の様に文字を取得することもできます。
ただ、これは値が取得できるだけで配列と同じ様に使うことはできません。
const str = 'Fresh'; str[1] = 'g'; console.log(str);
この様に代入を使用としても
読み込み専用だよ、というエラーが出てしまいます。
今回はここまで
次回は・・・まだまだJS!
それではまた次回!