サイトアイコン memo-memo

[JavaScript] 配列要素を操作する方法

techback

JavaScriptでは、配列を扱うことが非常に便利です。

配列は、複数の値を一つの変数に格納することができ、効率的なデータ管理に役立ちます。しかし、配列内の要素を操作することが必要な場合もあります。

この記事では、JavaScriptの配列要素を操作する方法について解説します。配列の要素の追加、削除、検索、変更など、さまざまな操作方法を説明します。

宣言時

宣言時に条件付きで要素を追加

条件付きで要素を追加しています。xがyよりも大きい場合は、配列に"x is greater than y"を追加し、それ以外の場合は"x is less than or equal to y"を追加します。

let x = 10;
let y = 20;

let arr = [
"apple",
"banana",
"orange",
x > y ? "x is greater than y" : "x is less than or equal to y"
];

console.log(arr); 
// ["apple", "banana", "orange", "x is less than or equal to y"]

抽出

条件を満たす最初の要素を取得 [find]

const array1 = [
    {
        id:5,
        name:'a',
    },
    {
        id:12,
        name:'b',
    }
];

const result = array1.find(_ => _.id == 5);
console.log(result.name);

> "a"

条件抽出（削除） [filter]

const array1 = [
  {
    id:5,
    name:'a',
  },
  {
    id:12, 
    name:'b',
  }
];

const array2 = array1.filter(_ => _.id==5)

console.log(array2);
// Array [Object { id: 5, name: "a" }]

特定のキー項目のみ抽出

const array = [
  {
    id: 1,
    name: 'a',
  },
  {
    id: 2,
    name: 'b',
  },
  {
    id: 3,
    name: 'c',
  },
]

const names = array.map(_ => _["name"])

console.log(names)
//Array ["a", "b", "c"]

判定

一つでも条件を満たすものがあればTrue [some]

const array1 = [
    {
        id:5,
        name:'a',
    },
    {
        id:12,
        name:'b',
    }
];

const result1 = array1.some(_ => _.id == 5);
console.log(result1);
> true
const result2 = array1.some(_ => _.id == 6);
console.log(result2);
> false

特定の要素が含まれているか [includes]

const status = ['a', 'b', 'c', 'd'];

console.log(status.includes('a'));
// true

console.log(status.includes('x'));
// false

操作

配列の一番最初に要素を追加

const array2 = [
  {
    id:5,
    name:'a',
  },
  {
    id:12,
    name:'b',
  }
];

array2.unshift(
  {
    id: 1,
    name: 'c',
  }
);
console.log(array2);

// > Array [Object { id: 1, name: "c" }, Object { id: 5, name: "a" }, Object { id: 12, name: "b" }]

配列のコピー

const array1 = [ { id:5, name:'a', }, { id:12, name:'b', } ];
const array2 = array1.concat();

slice()メソッドは指定された範囲の要素を取り出し、新しい配列として返します。

元の配列は変更されません。

const array1 = ['a', 'b', 'c', 'd', 'e'];
const array2 = array1.slice(1, 4); // 切り出し
const array3 = array1 // 要注意
const array4 = array1.slice(); //実質コピー扱い

array3.push("Z"); //元のarray1も変更されてしまう

console.log(array1);
> Array ["a", "b", "c", "d", "e", "Z"] 

console.log(array2);
> Array ["b", "c", "d"] 

console.log(array3);
> Array ["a", "b", "c", "d", "e", "Z"] 

console.log(array4);
> Array ["a", "b", "c", "d", "e"]

先頭から特定の要素数のみの配列に変換

sliceメソッドは、指定した範囲の要素を抽出して、新しい配列として返します。下記の例では、selectData.slice(0, 30)とすることで、先頭から30個の要素を持つ新しい配列selectData30を生成しています。また、配列のインデックスは0から始まるため、0から始まる範囲指定を行っています。

// 例として1から100までの配列を想定
const selectData = [1, 2, 3, 4, 5, ..., 100];

// 先頭から30個の要素を持つ配列にする
const selectData30 = selectData.slice(0, 30); 
console.log(selectData30); 
// [1, 2, 3, ..., 30]

キー項目の配列に変換

const dictionary = { id1: "value1", id2: "value2", id3: "value3" };
const idArray = Object.keys(dictionary);

console.log(idArray); 
// ["id1", "id2", "id3"]

特定のキー項目の値のみの配列に変換

const dictionary = [{ id: "value1" }, { id: "value2" }, { id: "value3" }];
const idArray = dictionary.map(item => item.id);

console.log(idArray); 
// ["value1", "value2", "value3"]

 

文字列に変換

カンマ区切りの文字列に変換

Array.join() メソッドは、引数に区切り文字を指定することができます。この場合は、カンマを区切り文字として指定しています。このようにすることで、配列の要素をカンマで区切った文字列に変換することができます。

const fileTypes = ['image/jpeg', 'image/png', 'application/pdf'];
const fileTypeString = fileTypes.join(',');

console.log(fileTypeString); 
// 'image/jpeg,image/png,application/pdf'

 

モバイルバージョンを終了