[javascript] ObjectとArrayの小技集

Arrayから空の要素を除く

example.js

const array = ["foo", "boo", "", "bar"];
const newArray = array.filter(Boolean); //["foo", "boo", "bar"]

const paragraph = `これは一行目です
これは二行目です

これは三行目です
これは四行目です
`;
const sentences = paragraph.split("\n").filter(Boolean);
// ["これは一行目です", "これは二行目です", "これは三行目です", "これは四行目です"]

このコード行は、JavaScriptにおいて配列から「falsy」(偽と評価される) 値を取り除く簡潔な方法を示しています。ここで使用されている .filter() メソッドは、配列の各要素に対してテスト関数を実行し、その関数が true を返した要素のみからなる新しい配列を生成します。

ObjectのキーをArrayにする

このコードスニペットでは、users という名前のオブジェクトが定義されており、その中に taro、jiro、hanako という3つのプロパティがあります。各プロパティ（またはキー）は、それぞれ異なるユーザーを表しており、各ユーザーには gender（性別）と hobby（趣味）という2つのプロパティがあります。

example.js

const users = {
 taro: {
   gender: "男",
   hobby: "水泳",
 },
 jiro: {
   gender: "男",
   hobby: "読書",
 },
 hanako: {
   gender: "女",
   hobby: "カラオケ",
 },
};

このオブジェクトに対して Object.keys(users); を実行すると、users オブジェクトのトップレベルのキー（プロパティ名）のみが含まれた配列が返されます。この場合、トップレベルのキーは taro、jiro、hanako です。したがって、このメソッドの出力は ["taro", "jiro", "hanako"] となります。

example.js

Object.keys(users);
// output: ["taro", "jiro", "hanako"]

Objectからキーを指定して、Arrayを抽出する

このコードスニペットでは、items という名前の配列が定義されており、その中に3つのオブジェクトが含まれています。各オブジェクトには id と name という2つのプロパティがあります。

example.js

const items = [
 { id: 1, name: "アイテム1" },
 { id: 2, name: "アイテム2" },
 { id: 3, name: "アイテム3" },
];

この配列に対して map() メソッドを使用しています。map() メソッドは、配列の各要素に対して与えられた関数を実行し、その結果からなる新しい配列を生成します。この場合、各 item オブジェクトに対してアロー関数 (item) => item.name が実行されます。この関数は各オブジェクトの name プロパティの値を返します。

example.js

items.map((item) => item.name);
// output: ["アイテム1", "アイテム2", "アイテム3"]

ネストされたキーを更新

このコードスニペットは、school というオブジェクトが定義されており、その中には学校の名前、校長、住所、そして2つの学部（science と arts）が含まれています。各学部には、学部長とコースのリストがあります

example.js

const school = {
  name: "東京高校",
  head: "井上",
  address: "東京都新宿区",
  departments: {
    science: {
      head: "田中",
      courses: ["物理学", "化学", "生物学"],
    },
    arts: {
      head: "佐藤",
      courses: ["文学", "歴史", "美術"],
    },
  },
};

setNestedKey 関数は、オブジェクト (json)、更新したいキー (key)、そしてそのキーに設定したい新しい値 (value) を引数として受け取ります。この関数は、与えられたオブジェクト内のすべてのレベルで指定されたキーを探し、見つかった場合はその値を新しい値で更新します。関数は再帰的に定義されており、オブジェクト内のオブジェクト（ネストされたオブジェクト）に対しても同様の操作を行います。

example.js

const setNestedKey = (
  json: { [key: string]: any },
  key: string,
  value: string
) => {
  for (const k in json) {
    if (k === key) {
      json[k] = value;
    } else if (typeof json[k] === "object") {
      setNestedKey(json[k], key, value);
    }
  }
};

この関数を school オブジェクトに対して setNestedKey(school, "head", "小林"); として実行すると、school オブジェクト内のすべての "head" キー（校長と学部長）の値が "小林" に更新されます。つまり、school オブジェクトの head、departments.science.head、および departments.arts.head の各プロパティが "小林" に変更されます。

example.js

setNestedKey(school, "head", "小林");

Objectは空か判定する

if(空のobject)はtrueが返却されるので判定できません

example.ts

const obj = {};

if (Object.keys(obj).length === 0) {
  console.log("空");
} else {
  console.log("中身あり");
}

shift()とpop()を使う

shift() メソッドは、配列の先頭から要素を削除し、その要素を返します。

example.ts

let numbers = [1, 2, 3, 4, 5];
let firstElement = numbers.shift();

console.log(firstElement);  // 出力: 1
console.log(numbers);       // 出力: [2, 3, 4, 5]

pop() メソッドは、配列の末尾から要素を削除し、その要素を返します。

example.ts

let numbers = [1, 2, 3, 4, 5];
let lastElement = numbers.pop();

console.log(lastElement);  // 出力: 5
console.log(numbers);       // 出力: [1, 2, 3, 4]