カテゴリー
SugiBlog Webデザイナー・プログラマーのためのお役立ちTips

JavaScriptで指定した要素が配列に存在するか調べる

JavaScriptで指定した要素が配列に存在するか調べる方法はいくつかあります。
そのうちの一部を紹介します。

indexOf

引数に指定した値が配列の何番目にあるかをインデックスで返します。

const array = [1, 2, 3];
console.log( array.indexOf(2) );

出力結果

1

結果はインデックスなので、2番目なら1になります。

find (ES2015[ES6])

指定した条件に一致する最初の要素を返します。

const array = [1, 2, 3, 4, 5];

console.log(
    array.find(function(element) {
        return element < 3 // 3より小さい
    })
);

出力結果

1

アロー関数(ES2015[ES6])にするとこんな感じ

array.find((element) => {
    return element < 3 // 3より小さい
})

より短く

array.find(element => element < 3)

続きを読む…»

257 views

JavaScriptで配列の値を合計する

JavaScriptにもPHPのarray_sumみたいな関数があったらな~とずっと思っていました。
ふとまた調べているとそれに近しい感じに出来るメソッドがあったのでご紹介します。

とりあえず配列を用意

const nums = [12, 23, 35, 41, 56, 64, 77];

関数を使った普通のやり方

const sum = function(nums) {
	let total = 0;
	for (let i = 0, len = nums.length; i < len; i++) total += nums[i];
	return total;
};

const total = sum(nums);

console.log({total});

ちなみに出力結果はこの通り

{ total: 308 }

そして調べていて発見したのがArray.reduceメソッドです。
書式:配列名.reduce( コールバック関数(結果の値, 要素の値), [初期値] )
初期値は省略可です。
続きを読む…»

6,787 views

配列内のオブジェクトから指定したプロパティを削除

配列化したオブジェクトの中から指定したプロパティだけを削除する方法。

fruits = [
    {
        name: "apple",
        color: "red",
        quantity: 3,
    },
    {
        name: "orange",
        color: "orange",
        quantity: 6,
    },
    {
        name: "grape",
        color: "purple",
        quantity: 10,
    }
];

ログを出力して中身を確認します。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}

forEachdeleteを使ってquantityプロパティを削除します。

fruits.forEach(element => delete element.quantity);

ログを出力して中身を確認しましょう。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red' },
    { name: 'orange', color: 'orange' },
    { name: 'grape', color: 'purple' }
  ]
}

quantityプロパティだけが削除されました。

プロパティを追加する

先ほどとは逆に、配列化したオブジェクトにプロパティを追加してみましょう。

元のオブジェクト配列

fruits = [
    {
        name: "apple",
        color: "red",
    },
    {
        name: "orange",
        color: "orange",
    },
    {
        name: "grape",
        color: "purple",
    }
];

追加するオブジェクト配列

quantities = [
    {
        quantity: 3
    },
    {
        quantity: 6
    },
    {
        quantity: 10
    }
];

forEachObject.assignを使ってquantityプロパティを追加します。

fruits.forEach((element, index) => Object.assign(element, quantities[index]));

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}
1,226 views

配列やオブジェクトから指定した列の値を取得する

array_columnという関数を使って、配列やオブジェクトから指定した列(カラム)の値を取得することができます。
オブジェクトからも取り出せるのは非常に便利だなと思いました。

以下のような連想配列があったとします。

$ARRAY = [
    [
        "id" => 1,
        "name" => "aiko"
    ],
    [
        "id" => 2,
        "name" => "beta"
    ],
    [
        "id" => 3,
        "name" => "clare"
    ]
];

array_column関数を使ってname列だけを取り出してみます。

$NAME = array_column($ARRAY, "name");

print_r($NAME);

出力結果はこのようになります。

Array
(
    [0] => aiko
    [1] => beta
    [2] => clare
)

オブジェクトの場合

class User
{
    public $username;

    public function __construct(string $username)
    {
        $this->username = $username;
    }
}

$users = [
    new User("user 1"),
    new User("user 2"),
    new User("user 3"),
];

$USER = array_column($users, "username");

print_r($USER);

出力結果

Array
(
    [0] => user 1
    [1] => user 2
    [2] => user 3
)

公式リファレンス:
PHP: array_column – Manual

4,250 views

Javascript 配列

JavaScriptの配列の基本的な使い方

配列の宣言

var array = new Array();

または

var array = [];

例)

var array = new Array("a", "b", "c");
var array = ["a", "b", "c"];

要素の追加

先頭に追加する

var array = ["b", "c"];
array.unshift("a"); //["a", "b", "c"]となる

末尾に追加する

var array = ["a", "b", "c"];
array.push("d"); //["a", "b", "c", "d"]となる

配列の結合

配列を結合し新たな配列を生成します。
(元の配列はそのまま)

var array1 = ["a", "b"];
var array2 = ["c", "d"];

var array = array1.concat(array2); //["a", "b", "c", "d"]となる

続きを読む…»

1,331 views