【JavaScript】オブジェクト型の取り扱い方法を学んでいく

プログラミング初心者の勉強ブログ #101

JavaScriptの「オブジェクト型」の取り扱うために必要なメソッドや書き方についての備忘録です。(splice、forEach、map、filter、スプレッド演算子、分割代入など)

JSの基礎が固まっていない状態でjQueryやってたので改善していきたいと思います。

 

目次

[toc]

 

JavaScriptのオブジェクト型とオブジェクト

JSの「オブジェクト」について学習を進める中で”オブジェクト型”と”オブジェクト”という言葉で異なる使い回しを感じたので、まずはその点について整理します。

データ型としてのオブジェクト

JSにはデータ型として

  • 文字列(string)
  • 数値(number)
  • undefined(undefined)
  • null
  • 真偽値(boolean)
  • オブジェクト(object)

という分類があります。基本のデータ型として文字列や数値がある一方で、データ型としてのオブジェクトは、配列や連想配列など少し複雑な構造をしたデータの総称です。

※JSではnullに対しtypeof関数を当てるとobjectと表示されます。

 

オブジェクト型の一つとしてのオブジェクト

上で書いた通り、JSには複雑なデータを取り扱えるオブジェクト型があります。Rubyで言えば配列やハッシュです。このハッシュデータのことを、JSでは「オブジェクト」という呼ばれ方をされてます。オブジェクト型の基本はこれ、ということなのかよくわかりませんが、学習に当たって説明を読む限りそのような印象を受けます。「オブジェクト型の一つとしてのオブジェクト」という表現が正しいのかは微妙ですが、配列もオブジェクト型に該当するのでこのような表現をしてます。

オブジェクトには基本の書き方があり、

// オブジェクトリテラルの書き方の例
let member = {
  name: 'bob',
  age: 20,
};

ここでは memberという変数にオブジェクトを代入してます。nameとageがキー、bobと20がバリューです。この書き方を「オブジェクトリテラル」と呼びます。

 

オブジェクト型の操作

オブジェクト操作

let member = {
 name: 'bob',
 age: 20,
};

// 呼び出し
console.log(member.name);
# => bob
console.log(member['name']);
# => bob

// キーのみ取得
console.log(Object.keys(member));
# => ["name", "age"]

// バリューのみ取得
console.log(Object.values(member));
# => ["bob", 20]

// どちらも取得
console.log(Object.entries(member));
# => [["name", "bob"], ["age", 20]]

// 再代入
member.age = 30;
console.log(member.age);
# => 30

// 要素の追加
member.email = 'aaa@aaa.com'
console.log(member.email)
# => aaa@aaa.com

// 要素の削除
delete member.name;
console.log(player)
# => age: 20
# => email: aaa@aaa.com

 

splice(配列要素の追加削除)

// 配列を定義
const a = [1, 2, 3];

// a[1]とa[2]の間に4, 5を追加
// 第1引数にインデックス番号、第2引数に削除したい要素の個数、第3引数以降に追加したい要素
a.splice(2, 0, 4, 5);
console.log(a); # => [1, 2, 4, 5, 3]

// a[1]からa[3]を削除
a.splice(1, 3);
console.log(a); # => [1, 3]

 

forEach(繰り返し処理)

// 配列を定義
const a = [1, 2, 3];

// forEachの引数にアロー関数を定義することで繰り返し処理が可能
a.forEach(item => {
 console.log(`${item}`);
});
# => 1
# => 2
# => 3


// indexの付与も可能
a.forEach((item, index) => {
  console.log(`index: ${index}, item: ${item}`);
});
# => index: 0, item: 1
# => index: 1, item: 2
# => index: 2, item: 3

 

map(配列を加工)

// 配列を定義
const a = [1, 2, 3, 4 ,5];

// 配列aの各要素を2倍した物をa2に代入
const a2 = a.map(item => item * 2);
console.log(a2);
# => [2, 4, 6, 8, 10]

 

filter(配列要素を抽出)

// 配列を定義
const a = [1, 2, 3, 4, 5];

// 配列aの偶数のみを取り出してaaに代入
const aa = a.filter(item => item % 2 === 0);
console.log(aa);
# => [2, 4]

 

スプレッド演算子

// 配列を定義
const a = [10, 20];

// スプレッド演算子で配列bを定義
const b = [1, 2, ...a];
console.log(b);
# => [1, 2, 10, 20]

// 引数2つを足す関数sumを定義
const sum = (a, b) => a + b;

// sumの引数として配列aをスプレッド演算子で渡す
console.log(sum(...a));
# => 30

// オブジェクトでも可能
const o1 = {a: 1};
const o2 = {...o1, b: 2};
console.log(o2);
# => {a: 1, b: 2}

 

分割代入

// 配列を定義
const numbers = [1, 2];

// 分割代入
const [a, b] = numbers;
console.log(a);
# => 1
console.log(b);
# => 2


// 配列を定義
const numbers2 = [1, 2, 3, 4, 5];

// スプレッド演算子の活用
const [a2, b2, c2, ...rest] = numbers2;
console.log(a2);
# => 1
console.log(b2);
# => 2
console.log(c2);
# => 3
console.log(rest);
# => [4, 5]


// オブジェクトでも可能
const player = {
  name: 'bob',
  age: 20,
  hp: 100,
  mp: 50,
}
const {name, age, ...points} = player;
console.log(name);
# => bob
console.log(age);
# => 20
console.log(points);
# => [100, 50]

 

 

まとめ

アウトプットこそ至高という考えになり始めているこの頃だが、最近見たあるYouTube動画で、隠れがちだったインプットが再び台頭してくる機会があった。QuizKnockというチャンネルだ。このチャンネルはTBSの「東大王」という番組に出ている東大生が開設していて、主にクイズ動画を投稿している。頭の良い東大生が難しい問題に意味わからないスピードで解答するスゴさは、見ていて面白い。

【東大生検証】Googleの入社試験をガチで解いてみる

上のリンクはGoogle入社試験をクイズ形式で解いていく動画であり、東大生は1問目から即答で正解してくる。動画内で「知識が全てに勝つ」と断言する東大生。「知らない問題は知ってる問題から演繹して考える」「解答は0から生み出すのではなく、自分の中の0.1をたくさん探して作っていくスタイルであるべき」東大に合格したという実績を持つ人間に、自信気に論理的な主張をされたときの説得力である。

「知識=インプット」の構図が正しいか否かは問題の論点になりそうだが、少なくともアウトプットよりはインプットの方が「知識を得る量」に関しては優っていると思う。アウトプット至上主義なるものに陥りかけた自分に、偏った行動や考えはよくないよ、と言われた感じがする。

ものや言葉について細かい定義まで突き止めるような行動を取ってしまうようになりつつある。オブジェクト指向を考えることに時間を多く使うことによって生じてしまった副作用なのかもしれない。「インプットとは」のような、言葉の定義を突き止める作業は、オブジェクトの属性と振る舞いの責任所在を考えることに近いものがある気がする。(考えるだけでオブジェクト指向設計はできない。)

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA