JavaScript配列に関してよくやることまとめ

JavaScriptの配列に関してよくやることを使いやすいように一つにまとめました。参考サイト

• 配列を作成して値を取得する
  • 配列を作成する
  • 配列の値を取得する
  • 配列の要素数を取得する
• 配列に要素を追加する
  • 配列の末尾に値を追加
  • 配列の先頭に値を追加
  • 配列同士をマージする
• 配列の値を削除する
  • 末尾の値を削除する
  • 先頭の値を削除する
  • 位置を指定して削除する
  • 値を指定して全て削除する
• 配列をループさせる
• 配列に特定の値があるかチェックする
  • 配列に特定の値がいくつあるかチェックする
  • 配列かどうかを判定する
• 文字列と配列を変換する

配列を作成して値を取得する

配列を作成する

let fruits = ['みかん', 'びわ', 'りんご'];

console.log(fruits);
//["みかん", "びわ", "りんご"]
console.log(typeof fruits);
//"object"

配列の値を取得する

let fruits = ['みかん', 'びわ', 'りんご'];

console.log(fruits[0]);
//みかん

var apple = fruits[2];
console.log(apple);
//りんご

配列の要素数を取得する

let fruits = ['みかん', 'びわ', 'りんご'];

console.log(fruits.length);
//3

配列に要素を追加する

配列の末尾に値を追加

let fruits = ['みかん', 'びわ', 'りんご'];

var result = fruits.push('すいか');//末尾に追加

console.log(result);
//4
console.log(fruits);
//["みかん", "びわ", "りんご", "すいか"]

配列の先頭に値を追加

let fruits = ['みかん', 'びわ', 'りんご'];

var result = fruits.unshift('すいか');//先頭に追加

console.log(result);
//4
console.log(fruits);
//["すいか", "みかん", "びわ", "りんご"]

resultには要素数が返ってくる。

配列同士をマージする

let fruits = ['みかん', 'びわ', 'りんご'];
let fruits2 = ['いちご', 'めろん', 'りんご'];

const fruits3 = fruits.concat(fruits2);
console.log(fruits3);
//["みかん", "びわ", "りんご", "いちご", "めろん", "りんご"]

配列の値を削除する

末尾の値を削除する

let fruits = ['みかん', 'びわ', 'りんご'];

var result = fruits.pop();//末尾を削除

console.log(result);
//"りんご"
console.log(fruits);
//["みかん", "びわ"]

先頭の値を削除する

let fruits = ['みかん', 'びわ', 'りんご'];

var result = fruits.shift();//先頭を削除

console.log(result);
//"みかん"
console.log(fruits);
//["びわ", "りんご"]

位置を指定して削除する

let fruits = ['みかん', 'びわ', 'りんご'];

var result = fruits.splice(1, 2);//位置をしていして削除

//splice(開始位置, 要素数)
console.log(result);
//["びわ", "りんご"]
console.log(fruits);
//["みかん"]

値を指定して全て削除する

let fruits = ['みかん', 'びわ', 'りんご', 'みかん', 'びわ'];

function delete_fruit(fruits, fruit) {
  fruits.forEach(function(item, index, array){
    
    var res = fruits.indexOf(fruit);
    if (res !== -1) {
      fruits.splice(res, 1);
    }
  });
}
    
delete_fruit(fruits, 'みかん');
console.log(fruits);
//["びわ", "りんご", "びわ"]

配列をループさせる

forEachでループさせる

let fruits = ['みかん', 'びわ', 'りんご'];

fruits.forEach(function(item, index, array){

  console.log([item, index, array]);
  //["みかん", 0, ["みかん", "びわ", "りんご"]]
  //["びわ", 1, ["みかん", "びわ", "りんご"]]
  //["りんご", 2, ["みかん", "びわ", "りんご"]]
});

mapメソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

let items = [{count: 5},{count: 10},{count: 2},{count: 3},{count: 8}];

var res = items.map(function(item) {
  return item.count * 2;
});

console.log(items);
/* [[object Object] {
  count: 5
}, [object Object] {
  count: 10
}, [object Object] {
  count: 2
}, [object Object] {
  count: 3
}, [object Object] {
  count: 8
}] */

console.log(res);
// [10, 20, 4, 6, 16]

新しい配列を生成しているので、itemsはそのまま残る。

findメソッドは与えられた条件に当てはまる最初の配列を生成する。

let items = [{count: 5},{count: 10},{count: 2},{count: 3},{count: 8}];

var res = items.find(function(item) {
  console.log('count');
  
  return item.count == 2;
});


console.log(res);
/* 
"count"
"count"
"count"

[object Object] {
  count: 2
}
*/

filterメソッドは与えられた条件を配列の全ての要素に対して呼び出し、条件に当てはまる結果から新しい配列を生成する。

let items = [{count: 5},{count: 10},{count: 2},{count: 3},{count: 8}];

var res = items.filter(function(item) {
  console.log('count');
  
  return item.count < 6;
});


console.log(res);
/* 
"count"
"count"
"count"
"count"
"count"

[[object Object] {
  count: 5
}, [object Object] {
  count: 2
}, [object Object] {
  count: 3
}]
*/

reduceメソッドの第一引数totalには初期値0を設定している。全ての要素の値を加算して合計を求めている。

let items = [{count: 5},{count: 10},{count: 2},{count: 3},{count: 8}];

var res = items.reduce(function(total, item) {
  
  return total + item.count;

}, 0);


console.log(res);
/* 
28
*/

配列に特定の値があるかチェックする

let fruits = ['みかん', 'びわ', 'りんご'];

var res = fruits.indexOf('りんご');
console.log(res);
//2

var res2 = fruits.indexOf('いちご');
console.log(res2);
//-1 値がない場合-1が返ってくる

includesで値をチェックする

let fruits = ['みかん', 'びわ', 'りんご'];

var res = fruits.includes('りんご');
var res2 = fruits.includes('めろん');

console.log(res);
//true
console.log(res2);
//false

配列に特定の値がいくつあるかチェックする

let fruits = ['みかん', 'びわ', 'りんご', 'みかん', 'めろん', 'いちご', 'りんご'];

var res = fruits.filter(function(word) {
  return word == 'みかん';
});

console.log(res.length);
//2

配列かどうかを判定する

let fruits = ['みかん', 'びわ', 'りんご', 'みかん', 'めろん', 'いちご', 'りんご'];
console.log(typeof fruits);
//"object"

if (typeof fruits == 'object') {
//配列
} else {
//配列じゃない
}

if (Array.isArray(fruits)) {
//配列
} else {
//配列じゃない
}

文字列と配列を変換する

let fruits = ['みかん', 'びわ', 'りんご', 'みかん', 'めろん', 'いちご', 'りんご'];
console.log(typeof fruits);
//object

let fruits_str = fruits.join(',');
console.log(typeof fruits_str);
//string

console.log(fruits_str);
//"みかん,びわ,りんご,みかん,めろん,いちご,りんご"

let fruits_obj = fruits_str.split(',');
console.log(fruits_obj);
//["みかん", "びわ", "りんご", "みかん", "めろん", "いちご", "りんご"]