0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[javascript] ObjectとArrayの小技集

Last updated at Posted at 2024-04-02

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]
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?