JavaScript基礎：配列のよく使うメソッド

#はじめに
配列の操作は普段よく使うので、関連メソッドをまとめてみます。

#配列の重複値を削除
##new setで重複値取り除く

const data = ["four", "one", "two", "three", "one"]

const newData = new Set(data)
console.log(newData)

#配列の値置換
splice() メソッドは、 既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。

const data = ["four", "one", "two", "three", "one"]
data.splice(1, 1, 'one1','one2')
    
console.log(data)

#map、fromメソッドで配列値加工
###fromメソッド
Array.from() メソッドは、配列風オブジェクトや反復可能オブジェクトから、新しい、浅いコピーの Array インスタンスを生成します。

const data = ["1", "2", "3"]
console.log(Array.from(data, x => x + x));

Array ["11", "22", "33"]

###mapメソッド

var arr = [1, 3, 6, 9];
const map = arr.map(x => x ** 2);

console.log(map);

Array [1, 9, 36, 81]

#配列クリア

var arr = [1, 3, 6, 9];
// 長さを0でクリア
arr.length = 0

// 空の配列でリセット
//arr = []
console.log(arr);

Array []

#配列をオブジェクトに変換

var arr = ["one", "two", "three"];
var obj = {...arr}
console.log(obj);

Object { 0: "one", 1: "two", 2: "three" }

#配列に初期値をfill

var arr = new Array(8).fill(100)

console.log(arr)

Array [100, 100, 100, 100, 100, 100, 100, 100]

#配列のマージ

const arr1 = new Array(8).fill(100)
const arr2 = new Array(8).fill(200)
const arr3 = [...arr1, ...arr2]

console.log(arr3)

Array [100, 100, 100, 100, 100, 100, 100, 100, 200, 200, 200, 200, 200, 200, 200, 200]

concatも配列マージできるメソッドです。
concat() メソッドは、配列に他の配列や値をつないでできた新しい配列を返します。

###スプレッド構文
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

#配列の反転

const array1 = ['one', 'two', 'three'];
const reversed = array1.reverse(); 
console.log('reversed: ', reversed);

"reversed: " Array ["three", "two", "one"]

#reduceメソッド
reduce() は配列の各要素に対して（引数で与えられた）reducer 関数を実行して、単一の値にします。

const array = [1, 2, 3, 4];
const total = array.reduce((total, currentValue) => total + currentValue)

console.log(total)

10

#filterメソッド
filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。

const nums = [10, 15, 20, 25];
const oddNums = nums.filter(num => num % 2 == 1)

console.log(oddNums)

Array [15, 25]

#forEach
for句の代わりとしてよく使います。

const array = ['one', 'two', 'three'];

array.forEach(function(element) {
  console.log(element);
});

"one"
"two"
"three"

#sort

// 文字列で昇順にする
const data = ['1', '2', '10', '20'];
data.sort();
console.log(data);

// 数字で昇順にする
const data2 = [1, 2, 10, 20];
data2.sort();
console.log(data2);

// 自分の比較メソッドで降順にする
const data3 = [1, 2, 10, 20];
data3.sort(function(a, b) {
  if (a < b) {
    return 1;
  } else if (a > b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(data3);

Array ["1", "10", "2", "20"]
Array [1, 10, 2, 20]
Array [20, 10, 2, 1]

ほかもいろいろなメソッドがあります。
参考URL
Map: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
Array: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
Set: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

以上