配列の基本
0から始まる数字（添え字、インデックス）によってアクセスする。
- 順序を持っている（オブジェクトのプロパティとは違う）
JavaScriptの配列には異なる型の要素を入れることができる
- 配列リテラルは
[]を使って表現される。
lengthというプロパティーで配列の要素を知ることができる- 配列の最後の要素の添え字よりも大きな数字を使って代入を行うと、配列が自動的に大きくなり、値が指定されていない要素には
undefinedが暗黙のうちに代入される。
Arrayコンストラクタを使うこともできる（しかしあまり使われない。）
配列要素の操作
- 配列の要素を変更してしまうメソッド（破壊的なメソッド）と新しい配列を返すメソッドがある。
先頭・最後の要素に対する操作
| 配列arrの先頭の要素 |
配列arrの最後の要素 |
| arr[0] |
arr[arr.length-1] |
| メソッド |
機能 |
返却値 |
備考 |
| push |
配列の最後に要素を追加する |
変更後の配列の長さ |
配列そのものを変更する |
| pop |
配列の最後の要素を削除する |
削除された要素 |
配列そのものを変更する |
| unshift |
配列の先頭に要素を追加する |
変更後の配列の長さ |
配列そのものを変更する |
| shift |
配列の先頭の要素を削除する |
削除された要素 |
配列そのものを変更する |
複数要素の追加
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| concat |
複数の要素を配列に追加する |
追加する要素 |
配列のコピー |
破壊なし |
- 引数の個数は任意
- 引数に配列をセットすると、配列を分解して元の配列の最後に追加する
- ただし、引数の配列の要素が配列の場合、内側の配列は分解しない
let before = [1,2,3];
console.log(before);
let after = before.concat(4,5,6);
console.log(after);
after = before.concat([4,5,6]);
console.log(after);
after = before.concat([4,5],6);
console.log(after);
after = before.concat([4,5],[6,7]);
console.log(after);
after = before.concat([4,5,[6,7]]);
console.log(after);
部分配列
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| slice |
既存の配列の
一部を切りだす |
①：切り出す開始位置
②：終了位置 |
配列のコピー |
破壊なし |
- 第二引数で指定された要素の直前までを切り出す
- 第二引数を指定しない場合は、最後の文字まで切り出す
- 引数に負の値をセットすると、最後の要素から数える
let before = [1,2,3,4,5];
console.log(before);
let after = before.slice(3);
console.log(after);
after = before.slice(2,4);
console.log(after);
after = before.slice(-2);
console.log(after);
after = before.slice(1,-2);
console.log(after);
after = before.slice(-2,-1);
console.log(after);
途中の要素の削除や途中の要素への追加
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| splice |
指定した位置の
要素（複数可）を削除し、
新たな要素を追加する |
①：変更開始位置
②：削除する要素の数（0指定可）
③～：追加する要素 |
取り除かれた要素の配列 |
配列そのものを変更する |
let arr = [1,5,7];
console.log(arr);
let res = arr.splice(1,0,2,3,4);
console.log(arr);
console.log(res);
res = arr.splice(5,0,6);
console.log(arr);
console.log(res);
res = arr.splice(1,2);
console.log(arr);
console.log(res);
res = arr.splice(2,1,"a","b",);
console.log(arr);
console.log(res);
配列内の要素の削除や置換
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| copyWithin |
指定した位置に
指定した位置の要素をコピーする
（上書きする） |
①：コピー先開始位置
②：コピー元
（③：コピーを終了する場所） |
新たに生成された配列 |
配列そのものを変更する |
- 第二引数、第三引数には負の値を指定することがあできる。
- 配列の要素数は変化しない
- コピー元データのサイズが大きく、上書き対象が存在しない場合は、はみ出た部分のみが無視される。
let origin = [1,2,3,4];
let after = origin.copyWithin(1,2);
console.log(origin);
console.log(after);
after = origin.copyWithin(2,0,2);
console.log(origin);
console.log(after);
after = origin.copyWithin(0,-3,-1);
console.log(origin);
console.log(after);
let origin2 = [1,2,3,4,5,6,7,8,9];
let after2 = origin2.copyWithin(6,0,6);
console.log(origin2);
console.log(after2);
let origin3 = [1,2,3,4,5,6,7,8,9];
let after3 = origin3.copyWithin(4,5,8);
console.log(origin3);
console.log(after3);
配列を特定の値で埋める
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| fill |
複数の要素の値を一度に指定する |
①：要素にセットしたい値
（②：開始位置）
（③：終了する場所） |
新たに生成された配列 |
配列そのものを変更する |
- 第二引数、第三引数には負の値を指定することがあできる。
- 配列の要素数は変化しない
- コピー元データのサイズが大きく、上書き対象が存在しない場合は、はみ出た部分のみが無視される。
let origin = new Array(5).fill(1);
console.log(origin);
let after = origin.fill("a");
console.log(origin);
console.log(after);
after = origin.fill("b",1);
console.log(origin);
console.log(after);
after = origin.fill("c",2,4);
console.log(origin);
console.log(after);
after = origin.fill(5.5,-4);
console.log(origin);
console.log(after);
after = origin.fill("e",-3,-1);
console.log(origin);
console.log(after);
逆転とソート
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| reverse |
配列の要素を逆転させる |
ー |
新たに生成された配列 |
配列そのものを変更する |
let origin = [1,2,3,4,5];
console.log(origin);
let after = origin.reverse();
console.log(origin);
console.log(after);
after = origin.reverse();
console.log(origin);
console.log(after);
| メソッド |
機能 |
引数 |
返却値 |
備考 |
| sort |
配列の要素を並べ替える |
ー |
新たに生成された配列 |
配列そのものを変更する |
sortの結果は昇順となる？
- 降順が取得したい場合は
sortの結果に対してreverseを実施する
let origin = [5,3,2,4,1];
console.log(origin);
let after = origin.sort();
console.log(origin);
console.log(after);
origin.reverse();
console.log(origin);
console.log(after);
- 一般的にオブジェクトもプロパティを指定して並び替えることが可能らしいが、
Chromeで以下のコードを実施してみたところ変化がなかった
let origin = [{name:"Satoshi"},{name:"Takeshi"},{name:"Akira"},{name:"Koji"}];
console.log(origin);
origin.sort((a,b) => a.name > b.name);
console.log(origin);
origin.sort((a,b) => a.name[1] > b.name[1]);
console.log(origin);
検索
indexOf（指定した値と最初に一致する要素の添え字番号を返す）、
lastIndexOf（指定した値と最後に一致する要素の添え字番号を返す）
| メソッド |
indexOf、（lastIndexOf） |
| 内容 |
指定した値と最初（最後）に一致した要素の添え字の番号を返却 |
| 比較方法 |
厳密比較 |
| 該当あり時の動作 |
添え字の番号を返却 |
| 該当なし時の動作 |
-1を返却 |
| オプション |
検索開始位置を指定することができる |
const o = {name:"Takeshi"};
const arr = [true,5,8,"2","4","f","G",[1,2],o,null,,true,false,5,8,"2"];
console.log(arr.indexOf(5))
console.log(arr.indexOf("f"))
console.log(arr.indexOf(4))
console.log(arr.indexOf("4"))
console.log(arr.indexOf({name:"Takeshi"}))
console.log(arr.indexOf(o))
console.log(arr.indexOf([1,2]))
console.log(arr.indexOf(null))
console.log(arr.indexOf(false))
console.log(arr.indexOf(undefined))
console.log(arr.indexOf(true))
console.log(arr.lastIndexOf(5))
console.log(arr.lastIndexOf("f"))
findIndex（指定した条件と最初に一致した要素の添え字の番号を返却）
| メソッド |
findIndex |
| 内容 |
指定した条件と最初に一致した要素の添え字の番号を返却 |
| 比較方法 |
関数内で指定 |
| 該当あり時の動作 |
添え字の番号を返却 |
| 該当なし時の動作 |
-1を返却 |
const arr = [{id:5,name:"Takeshi"},{id:7,name:"Hanako"}];
console.log(arr.findIndex(o => o.id === 7));
console.log(arr.findIndex(o => o.name === "Hanako"));
console.log(arr.findIndex(o => o === 7));
console.log(arr.findIndex(o => o === "Hanako"));
console.log(arr.findIndex(o => o === {id:7,name:"Hanako"}));
console.log(arr.findIndex(o => o == {id:7,name:"Hanako"}));
console.log(arr.findIndex(o => o === arr[1]));
console.log(arr.findIndex(o => o.id === 7));
console.log(arr.findIndex(o => o.id === "7"));
console.log(arr.findIndex(o => o.id == "7"));
find（指定した条件と最初に一致した要素を返却）
| メソッド |
find |
| 内容 |
指定した条件と最初に一致した要素を返却 |
| 比較方法 |
関数内で指定 |
| 該当あり時の動作 |
要素自体が返却される |
| 該当なし時の動作 |
undefinedを返却 |
| オプション |
第二引数：添え字
第三引数：配列全体 |
const arr = [{id:5,name:"Takeshi"},{id:7,name:"Hanako"}];
console.log(arr.find(o => o.id === 7));
console.log(arr.find(o => o.id === 6));
添え字を条件(処理の実態)で使用する例
const arr = [1,18,16,5,25,16,10,3,49,9];
console.log(arr.find((x,i) => i>2 && Number.isInteger(Math.sqrt(x))));
関数呼び出し時にthisの内容を指定する例
class Person{
constructor(name){
this.name = name;
this.id =Person.nextId++;
}
}
Person.nextId = 0;
const a = new Person("一郎"),
b = new Person("次郎"),
c = new Person("三郎"),
d = new Person("四郎");
const arr = [a,b,c,d];
console.log(arr.find((p) => p.id === c.id));
console.log(arr.find(function (p) { return p.id === this.id}, c));
some（指定した条件と一致する要素の有無の判定を実施する）
| メソッド |
some |
| 内容 |
指定した条件と一致する要素が一つ以上存在することの判定を実施する |
| 比較方法 |
関数内で指定 |
| 該当あり時の動作 |
trueが返却される |
| 該当なし時の動作 |
falseを返却 |
const arr = [5,7,10,11,19];
console.log(arr.some(x => x%2 === 0));
console.log(arr.some(x => Number.isInteger(Math.sqrt(x))));
every（すべての要素が指定した条件を満たすかの判定を実施する）
| メソッド |
every |
| 内容 |
すべての要素が指定した条件を満たすかの判定を実施する |
| 比較方法 |
関数内で指定 |
| 該当あり時の動作 |
trueが返却される |
| 該当なし時の動作 |
falseを返却 |
const arr = [4,6,16,36];
console.log(arr.every(x => x%2 === 0));
console.log(arr.every(x => Number.isInteger(Math.sqrt(x))));
mapとfilter
map（配列内の要素を変換する）
| メソッド |
map |
| 内容 |
配列内の要素を変換する |
| 変換方法 |
関数内で指定 |
| レスポンス |
新しい配列（コピー）が返却される |
const lineup = [{type:"iPhone",price:54800},{type:"Android",price:49800}];
const types = lineup.map(x => x.type);
console.log(types);
const prices = lineup.map(x => x.price);
console.log(prices);
const lineup2 = lineup.map(x => ({
type:x.type,
price:x.price*0.8,
}));
console.log(lineup2);
添え字を処理の実態で使用する例
const types = ["iPhone","Android"];
const prices = [54800,49800];
const lineup =types.map((x,i) => ({
type: x,
price: prices[i],
}));
console.log(lineup);
filter（配列から要素を取り去る）
| メソッド |
filter |
| 内容 |
配列内の要素を削除する |
| 変換方法 |
関数内で指定 |
| レスポンス |
新しい配列（コピー）が返却される |
const cards = [];
const suits = ["ハート","ダイヤ","クラブ","スペード"];
for(let suit of suits){
for(let i= 1;i<=13;i++){
cards.push({
suit:suit,
number:i,
})
}
}
console.log(cards);
const selected = cards.filter(card => card.number === 2);
console.log(selected);
const selected2 = cards.filter(card => card.number === 1).map(x => ({suit:x.suit,number:"A"}));
console.log(selected2);
reduce（全要素に対する処理を実施した最終結果を返す）
| メソッド |
reduce |
| 内容 |
全要素に対する処理を実施した最終結果（任意の値）を返す |
| 変換方法 |
関数内で指定 |
| レスポンス |
任意の値が返却される |
| 補足 |
返却値の型は、関数内で何をセットするかで決まる |
| 補足 |
アキュムレータの初期値は第二引数で指定可能 |
const arr = [1,2,3,4,5,6,7,8,9,10];
const sum = arr.reduce((a,x) => a += x,0);
console.log(sum);
const ave= arr.reduce((a,x) => a += x,0)/arr.length;
console.log(ave);
const arr2= arr.reduce((a,x) => a.concat(x+10),[]);
console.log(arr2);
※ concatは新しい配列を返します。Pushは新しい配列の要素数を返します。
配列関連のメソッドと削除された要素、定義されていない要素
map,filter,reduceの注意点
- 未定義の要素に対しては関数が呼び出されない
- 削除済みの要素に対しては関数が呼び出されない
const arr = Array(5).map(function(x){return 5});
console.log(arr);
const arr2 = [1,2,3,4,5];
delete arr2[2];
const result = arr2.map(x => 0);
console.log(result);
join（配列の要素を一つの文字列に連結する）
| メソッド |
join |
| 内容 |
配列の要素を一つの文字列に連結する |
| 変換方法 |
関数内で指定 |
| レスポンス |
任意の値が返却される |
| 補足 |
区切り文字は第一引数で指定する
（未指定(=デフォルト)の区切り文字は,） |
|
null、undefinedは空文字になる |
const arr = [1,null,3,undefined,5,true,7,false,9,"Hello","World"];
let result = arr.join();
console.log(result);
result = arr.join("");
console.log(result);
result = arr.join(" ");
console.log(result);
result = arr.join("--");
console.log(result);
参考文献
