JavaScript配列操作のまとめチートシート

初期化

//空の配列を作成
let ary1=[];
console.log(ary1); //[]
let ary2= new Array();
console.log(ary2); //[]

 //初期値を持つ配列を作成
let ary3=['a','b','c',4];
console.log(ary3); //['a', 'b', 'c', 4]
let ary4= new Array('a','b','c',4);
console.log(ary4); //['a', 'b', 'c', 4]

要素の取得

let ary1 = ['a', 'b', 'c'];
 //先頭の要素を取得
console.log(ary1[0]); //a
//2番目の要素を取得
console.log(ary1[1]); //b
//末尾の要素を取得
console.log(ary1[ary1.length-1]); //c
//条件に一致した最初のデータを取得
let ary2=[1,2,3,4,5];
console.log(ary2.find(n=>n>3));  //4

要素の追加

//先頭に追加
let ary1 = ['a', 'b', 'c'];
ary1.unshift('d');
console.log(ary1); //['d','a','b','c'];
//末尾に追加
let ary2 = ['a', 'b', 'c'];
ary2.push('d');
console.log(ary2); //['a','b','c','d'];
//指定した位置に挿入
let ary3 = ['a', 'b', 'c'];
ary3.splice(2,0,'d');
console.log(ary3);  //['a','b','d','c']

要素の削除

//先頭を削除
let ary1 = ['a', 'b', 'c'];
ary1.shift();
console.log(ary1); //['b','c'];
//末尾を削除
let ary2 = ['a', 'b', 'c'];
ary2.pop();
console.log(ary2); //['a','b'];
//指定した位置から削除
let ary3 = ['a', 'b', 'c'];
ary3.splice(1,1); //2番目の要素を1つ削除
console.log(ary3);  //['a','c']

配列の複製

let arr1=[1,2,3,4];
let arr2=arr1.concat(); //concat
let arr3=arr1.slice();  //slice
let arr4=[...arr1];  //スプレッド構文
console.log(arr2); //[1,2,3,4]
console.log(arr3); //[1,2,3,4]
console.log(arr4); //[1,2,3,4]
//【NG例】arr5の変更がarr1にも反映される
let arr5=arr1;
arr5[2]=5;
console.log(arr5); //[1, 2, 5, 4]
console.log(arr1); //[1, 2, 5, 4]

配列の結合

let arr1=[1,2];
let arr2=[3,4];

let arr3=arr1.concat(arr2); //concat
let arr4=[...arr1, ...arr2]; //スプレッド構文
//push 新しい配列は作成せずarr1にarr2を結合
Array.prototype.push.apply(arr1,arr2);

console.log(arr3);  //[1, 2, 3, 4]
console.log(arr4);  //[1, 2, 3, 4]
console.log(arr1);  //[1, 2, 3, 4]

配列を空にする

 //-- 空配列を設定 --
let arr=[1,2,3,4];
arr=[];
console.log(arr); //[]
 //-- lengthを使用 --
arr=[1,2,3,4];
arr.length=0; 
console.log(arr); //[]
//-- spliceを使用 --
arr=[1,2,3,4];
arr.splice(0, arr.length); 
console.log(arr); //[]

配列要素の置換

//2番目の要素から2個置換
let arr1=['a','b','c','d'];
arr1.splice(1, 2, 'e','f'); 
console.log(arr1); //['a', 'e', 'f', 'd']

//「splice」または「map」で検索して置換
let arr2=['a','b','c','d'];
arr2.splice(arr2.indexOf('b'), 1, 'e');
console.log(arr2); //['a', 'e', 'c', 'd']
let arr3=['a','b','c','d'];
arr3=arr3.map(s=> s == 'b' ? 'e' : s);
console.log(arr3); //['a', 'e', 'c', 'd']

map

const arr1=[1,2,3,4,5];
const arr2=arr1.map(num=>num * 2);

console.log(arr1); //[1,2,3,4,5]
console.log(arr2); //[2,4,6,8,10]

全要素に処理を行い、新たな配列を返す

filter

const arr1=[1,2,3,4,5];
const arr2=arr1.filter(num=>num > 3);

console.log(arr1); //[1,2,3,4,5]
console.log(arr2); //[4,5]

全要素に処理を行い、条件を満たした配列を返す

find

const arr1=[1,2,3,4,5];
const val=arr1.find(num=>num > 3);

console.log(arr1); //[1,2,3,4,5]
console.log(val); //4

全要素に処理を行い、条件を満たした最初の値を返す

reduce

const arr1=[1,2,3,4,5];
const sum=arr1.reduce(
  (prev, current) => prev + current, 0
);

console.log(arr1); //[1,2,3,4,5]
console.log(sum); //15

全要素に処理を行い、単一の値を返す(0は初期値)

every

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

console.log(arr.every(num=>num > 3)); 
// false
console.log(arr.every(num=>num < 6)); 
// true

全要素が条件を満たしているか検証する

some

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

console.log(arr.some(num=>num > 3)); 
// true
console.log(arr.some(num=>num > 6)); 
// false

少なくとも１つの要素が条件を満たしているか検証する