# JavaScript　基礎編４（学習日：9/14）（配列）
## 配列
### 配列の基礎
概念としてはJavaと同一である。
分割代入は可能である。
記述方法を中心にまとめる。

const array1 = [1,2,3]
const array2 = []
const matrix = [["a","b"],["c","d"]]//2次元配列
console.log(array1[0])//=>1
console.log(array1[3])//=>undefined

//配列であるかを判定する（Array.isArrayメソッド）
console.log(Array.isArray(array1))//=>true

### インデックス

//インデックスを取得する
const index1 = array1.indexOf(2)//=>1
const index2 = array1.indexOf(4)//=>-1（存在しない）
//インデックスから値を呼び出す
console.log(array1[index1]);//=>2

### 要素取得の応用

//キー値がcolorの値が複数存在する場合
const colors = [
    { "color": "red" },
    { "color": "green" },
    { "color": "blue" }
];
// `color`プロパティが"blue"のオブジェクトのインデックスを取得（findIndexメソッド）
const indexOfBlue = colors.findIndex((obj) => {
    return obj.color === "blue";
    
// `color`プロパティが"blue"のオブジェクトを取得（Array#findメソッド） 
const blueColor = colors.find((obj) => {
    return obj.color === "blue";
    
    const array = ["A", "B", "C", "D", "E"];
// インデックスの範囲を決めて取り出す（Array#sliceメソッド）
console.log(array.slice(1, 4)); // => ["B", "C", "D"]
console.log(array.slice(-1));//=>["E"]　-を付けると逆順
console.log(array.slice(1, 1);//=>[]　第1引数>=第2引数の場合、空配列を返す。
if (array.includes("C")){
//　配列に指定要素が含まれるかの検索＜ES2016以降＞
    console.log("配列にJavaScriptが含まれている");
}

// `color`プロパティが"blue"のオブジェクトにあるかどうかを判定する（Array#someメソッド）
const isIncludedBlueColor = colors.some((obj) => {
    return obj.color === "blue";
});

### 配列の追加と削除

 const array = ["B", "C"];
//配列の末尾に追加
array.push("D");
//配列の末尾を削除
array.pop("D");
//配列の先頭に追加
array.unshift("A");
//配列の先頭を削除
array.shift("A");

### 配列同士の結合

 const array1 = ["A", "B", "C"];
 const array2 = ["D", "E", "F"];
//配列の結合
array1.concat(array2);
//任意の要素の作成
array2.concat("G");
console.log(array1); // => ["A", "B", "C", "D", "E", "F"]
console.log(array2); // => ["D", "E", "F", "G"]


//配列の展開
const array2 = ["D", "E", "F"];
//concat構文での展開
const array = ["A", "B", "C"].concat array2;
//Spread構文＜ES2015＞（上と同じ処理を行う）
const array = ["A", "B", "C", ...array2];

console.log(array); // => ["A", "B", "C", "D", "E", "F"]

//多次元配列のフラット化＜ES2019＞
const array = [[["A"], "B"], "C"];
console.log(array.flat(Infinity)); // => ["A", "B", "C"]

### 配列から要素を削除する

//要素の削除　array.splice(インデックス, 削除する要素数, ...追加する要素);
const array1 = ["A", "B", "C", "D", "E", "F"]
//配列array1から"E","F"を削除
array1.splice(4,2);
//配列array1から"D","E","F"を削除し、"Z"を追加
array1.splice(3,3,"Z");
//配列array1の要素をすべて削除
array1.splice(0,array1.length);
array1.length = 0;

const array1 = ["A", "B", "C", "D", "E", "F"]
console.log(array1.length); // => 6
// 新しい配列で変数を上書き
array1 = [];
console.log(array1.length); // => 0

### 破壊的メソッドと非破壊的メソッド
* 破壊的メソッド
配列オブジェクトそのものの変更や、変更箇所の配列を参照するメソッド等が含まれる。（例 push, pop, splice, sort, shift, unshift等)
意図せず配列を壊してしまう可能性があるため、慎重なコード作成や注意書き等が必要である。
* 非破壊的メソッド
配列をコピーしてからの変更や、コピー先の配列を参照するメソッド等が含まれる。(例 concat, slice)

### 反復処理と高階関数
* forEach
配列の要素を先頭から順番に反復する。
* map
配列の要素を先頭から順番に反復し、コールバック関数に送る。その後コールバック関数が返した値から新たに配列を返す。
* filter
配列の要素を先頭から順番に反復し、コールバック関数に送る。その後コールバック関数がtrueを返した値のみを取り出し、新たに配列を返す。
* reduce
配列の要素を先頭から順番に反復し、コールバック関数に送る。その後コールバック関数が1つの累積値を返す。
### メソッドチェーンと高階関数
メソッドの返り値に応じて新たにメソッドを呼び出す連鎖的なパターンのことである。
途中の一時的な変数を省略可能となり、データの柔軟な加工が可能となる。
（例）

const array = ["a"].concat("b").concat("c");
console.log(array); // => ["a", "b", "c"]

###### tags: `JavaScript`