要素の抽出・削除・書き換えなどの配列操作(JavaScript)

## 配列から重複した値を削除する

```jsx

const fruits = ["banana", "apple", "apple", "orange", "grape", "apple"];

// fromを使う方法
const uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits)

// ...を使う方法
const uniqueFruits2 = [...new Set(fruits)];
console.log(uniqueFruits2)

// 共に ["banana", "apple", "orange", "grape"]

// 従来の方法(おすすめしない)
const result = fruits.filter((x, i, self) => {
  return self.indexOf(x) === i;
});
console.log(result);
```

[Array.from詳細](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

[new Set詳細](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)

## 配列の中で特定のkey:valueだけを取得する

```jsx
const friends = [
  { name: 'John', age: 22 },
  { name: 'Peter', age: 23 },
  { name: 'Mark', age: 24 },
  { name: 'Maria', age: 22 },
  { name: 'Monica', age: 21 },
  { name: 'Martha', age: 19 },
]

const friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames);

// 従来の方法(おすすめしない)
const friendsNames = friends.map((friend) => {
	return friend.name
})
console.log(friendsNames);
```

## 配列で何らかのデータで埋めたい場合

```jsx
const array1 = [1, 2, 3, 4];

// 配列のindex2~4を0で埋める
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]

// 配列のindex2以降を0で埋める
console.log(array1.fill(5, 2));
// [1, 2, 5, 5]

// 配列の全てを6で埋める
console.log(array1.fill(6));
// [6, 6, 6, 6]
```

## 2つの配列から共通項を抽出する

```jsx
const numOne = [0, 2, 4, 6, 8, 8];
const numTwo = [1, 2, 3, 4, 5, 6];
const duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // [2, 4, 6]
```

## 配列の中からfalsyな値を取り除く

```jsx
const mixedArr = [0, "blue", "", NaN, 9, true, undefined, "white", false];
const trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns ["blue", 9, true, "white"]
```

## 配列の中の数字を全て足す

```jsx
const nums = [1, 5, 2, 6];
const sum = nums.reduce((x, y) => x + y);
console.log(sum); // 14
```

## 配列を1つのオブジェクトにする

```jsx
const data = [
  { name: 'Taro', age: 20 },
  { name: 'Hanako', age: 25 },
  { name: 'Tom', age: 30 }
];

const result = data.reduce((prev, current) => {
  prev[current.name] = current.age;
  return prev;
}, {});

console.log(result); // {Taro: 20, Hanako: 25, Tom: 30}
```

## 配列を1つのindex{key:value}のオブジェクトにする

```jsx
const data = [
  { name: 'Taro', age: 20 },
  { name: 'Hanako', age: 25 },
  { name: 'Tom', age: 30 }
];
const result = data.reduce((prev, current, index) => ({
...prev, [index]: current}), 
{});

console.log(result)

/* 
{
  0: {
    age: 20,
    name: "Taro"
  },
  1: {
    age: 25,
    name: "Hanako"
  },
  2: {
    age: 30,
    name: "Tom"
  }
} */
```

## 配列の中で特定のkey:valueだけを取得する

```jsx
const data = [
  { id: 1, name: 'Taro', age: 20, country: 'Japan'},
  { id: 2, name: 'Yan', age: 30, country: 'China'},
  { id: 3, name: 'Bob', age: 40, country: 'America'},
];

const result = data.reduce((prev, current) => {
  const { name, country } = current;
  prev.push({ name, country });
  return prev;
}, []);

const result2 = data.map((data) => {
  return {
    name: data.name,
    country: data.country,
  }
})

console.log(result);
console.log(result2);

/* 共に
[{
  country: "Japan",
  name: "Taro"
}, {
  country: "China",
  name: "Yan"
}, {
  country: "America",
  name: "Bob"
}] */
```

## 配列の中で条件にあったものだけを抽出する

```jsx
const accounts = [
  { id: 1, firstName: 'taro',    lastName: 'sato',      age: 10, sex: 'male' },
  { id: 2, firstName: 'jiro',    lastName: 'suzuki',    age: 28, sex: 'male' },
  { id: 3, firstName: 'saburo',  lastName: 'takahashi', age: 19, sex: 'male' },
  { id: 4, firstName: 'hanako',  lastName: 'tanaka',    age: 10, sex: 'female' },
  { id: 5, firstName: 'sachiko', lastName: 'kobayashi', age: 20, sex: 'female' }
];

// accounts をもとにして、未成年男性のフルネームを配列で取得したい
// 期待する結果 ["taro sato", "saburo takahashi"]

const result= accounts.filter(data => data.age < 20 && data.sex === 'male')
  .map(data => `${data.firstName} ${data.lastName}`);
  console.log(result)
```


参考記事

[https://qiita.com/rana_kualu/items/24e5b6009ad831102db4](https://qiita.com/rana_kualu/items/24e5b6009ad831102db4)
[https://kde.hateblo.jp/entry/2018/10/13/065738#配列をオブジェクトにする](https://kde.hateblo.jp/entry/2018/10/13/065738#%E9%85%8D%E5%88%97%E3%82%92%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E3%81%99%E3%82%8B)
[https://chaika.hatenablog.com/entry/2019/05/07/083000](https://chaika.hatenablog.com/entry/2019/05/07/083000)
[https://ics.media/entry/200825/](https://ics.media/entry/200825/)