< Back to Posts

Practice for Array in JavaScript

メモ

削除はspliceを使用する。spliceは元々は既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更することができる。

  • Joining arrays together using concat()
  • Filling an array using fill()
  • Using slice() to slice an array
    • Returns a shallow copy of the array from start to end (end not included)
  • Adding/removing elements at the end — push() and pop()
  • Adding/removing elements at the start — unshift() and shift()
  • Adding/removing elements at an arbitrary index — splice()
  • Reversing an array using reverse()
  • Finding the index of an element using indexOf() and lastIndexOf()
  • Existential and universal quantification using some() and every()
  • Filtering items via filter()
  • Joining array elements using join()
  • Mapping to a new array via map()

グルーピング

ES2024でObject.groupByが追加された。


type TPeople = {
    age: number;
}

const people: TPeople[] = [
    {
        age: 24
    }, 
    {
        age: 13
    },
    {
        age: 67
    }
]

console.log(Object.groupBy(people, (person) => person.age >= 20 ? "adult" : "young"))

console.log(people.reduce<{"adult": TPeople[]; "young": TPeople[]}>((acc, person) => {
    if(person.age >= 20) {
        acc["adult"].push(person)
        return acc
    } else {
        acc["young"].push(person)
        return acc
    }
}, { adult: [], young: []}))

console.log(people.reduce<{"adult": TPeople[]; "young": TPeople[]}>((acc, person) => {
    const key = person.age >= 20 ? "adult" : "young";
    (acc[key]).push(person)
    return acc

}, { adult: [], young: []}))

問題①

次の配列の長さを取得してください。

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

// 期待する出力
5

arr.length

問題②

次の配列の最初の要素を取得してください。

const arr = [10, 20, 30];

// 期待する出力
10

arr.at(0)

問題③

次の配列の最後の要素を取得してください。

const arr = [10, 20, 30];

// 期待する出力
30

arr.at(-1)

問題④

次の配列に新しい要素を追加してください。

const arr = [1, 2, 3];

// 期待する出力
[1, 2, 3, 4]

arr.push(4)

問題⑤

次の配列から特定の要素を削除してください。

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

// 期待する出力
[1, 2, 4]

arr.splice(2, 1)

問題⑥

次の配列のすべての要素をループして表示してください。

const arr = ['a', 'b', 'c'];

// 期待する出力
a
b
c

for (const char of arr) {
    console.log(char)
}

問題⑦

次の配列の特定の要素(例えば3)が存在するか確認してください。

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

// 期待する出力
true または false

arr.includes(3)

問題⑧

次の配列を逆順にしてください。

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

// 期待する出力
[4, 3, 2, 1]

arr.reverse()
arr.sort((a, b) => b - a)

問題⑨

次の配列のすべての要素を結合して文字列にしてください。

const arr = ['Hello', 'World'];

// 期待する出力
"HelloWorld"

arr.join('')

問題⑩

次の配列の特定の要素(例えばbanana)のインデックスを取得してください。

const arr = ['apple', 'banana', 'cherry'];

// 期待する出力
1

arr.indexOf('banana')
arr.findIndex((char) => char === "banana")

問題⑪

次の配列の要素をソートしてください。

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

// 期待する出力
[1, 2, 3, 4]

arr.sort((a, b) => a - b)

問題⑫

次の配列の重複を削除してください。

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

// 期待する出力
[1, 2, 3, 4]

arr.filter((value, index, self) => self.indexOf(value) === index)
Array.from(new Set(arr))

問題⑬

次の配列のすべての要素を大文字に変換してください。

const arr = ['hello', 'world'];

// 期待する出力
['HELLO', 'WORLD']

arr.map((char) => char.toUpperCase())

問題⑭

次の配列のすべての要素を小文字に変換してください。

const arr = ['HELLO', 'WORLD'];

// 期待する出力
['hello', 'world']

arr.map((char) => char.toLowerCase())

問題⑮

次の配列の合計を計算してください。

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

// 期待する出力
15

arr.reduce((acc, curr) => acc + curr, 0)

問題⑯

次の配列の平均を計算してください。

const arr = [10, 20, 30];

// 期待する出力
20

arr.reduce((acc, curr) => acc + curr, 0) / arr.length

問題⑰

次の配列の最大値を取得してください。

const arr = [5, 1, 8, 3];

// 期待する出力
8

Math.max(...arr)

問題⑱

次の配列の最小値を取得してください。

const arr = [5, 1, 8, 3];

// 期待する出力
1

Math.min(...arr)

問題⑲

次の配列の要素をフィルタリングしてください。例えば偶数をフィルタリングした場合は[2, 4]となる。

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

// 期待する出力
[2, 4] // 例: 偶数をフィルタリングした場合

arr.filter((value) => value % 2 === 0)

問題⑳

次の配列の要素をマップしてください。

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

// 期待する出力
[2, 4, 6, 8, 10]

arr.map((value) => value * 2)

問題21

次の配列の中で、最も頻繁に出現する要素を取得してください。

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

// 期待する出力
1
回答1
const arr = [1, 2, 3, 1, 2, 1, 4, 5];

const hashmap = arr.reduce((acc, curr) => {
    acc[curr] = (acc[curr] || 0) + 1;
    return acc;
}, {});
回答2
const arr = [1, 2, 3, 1, 2, 1, 4, 5];

const hashmap = new Map()
for (const num of arr) {
    if(!hashmap.get(num)) {
        hashmap.set(num, 0)
    }
    hashmap.set(num, hashmap.get(num) + 1)
}

let maxCount = 0
let mostFrequentElement = null
for (const [key, value] of hashmap.entries()) {
    if(maxCount < value) {
        maxCount = value
        mostFrequentElement = key
    }
}

console.log(`${mostFrequentElement}が${maxCount}個含まれています`)

問題22

次の配列の要素をシャッフルしてください。

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

// 期待する出力
[3, 1, 4, 5, 2] // 出力はランダムです

arr.sort(() => Math.random() - 0.5)

問題23

次の配列の中で、重複を除いた要素を持つ新しい配列を作成してください。

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

// 期待する出力
[1, 2, 3, 4, 5]

arr.filter((value, index, self) => self.indexOf(value) === index)

or

Array.from(new Set(arr))

問題24

次の配列の要素を、指定された数だけ回転させてください。

const arr = [1, 2, 3, 4, 5];
const num = 2; // 回転させる数

// 期待する出力
[3, 4, 5, 1, 2]

arr.slice(num).concat(arr.slice(0, num))

問題25

次の配列の中で、各要素の出現回数をカウントしてください。

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'banana'];

// 期待する出力
{ apple: 2, banana: 3, orange: 1 }

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'banana'];

const hashmap = arr.reduce((acc, curr) => {
    acc[curr] = (acc[curr] || 0) + 1;
    return acc;
}, {});

問題26

次の配列の中で、最長の文字列を取得してください。

const arr = ['short', 'longer', 'longest', 'tiny'];

// 期待する出力
'longest'

arr.reduce((acc, curr) => acc.length > curr.length ? acc : curr, '')

問題27

次の配列の要素を、指定された条件に基づいてグループ化してください。

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

// 期待する出力
{ even: [2, 4, 6], odd: [1, 3, 5] }

arr.reduce((acc, curr) => {
    acc[curr % 2 === 0 ? 'even' : 'odd'].push(curr);
    return acc;
}, { even: [], odd: [] });

問題28

次の配列の要素を、指定された条件に基づいてフィルタリングしてください。

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

// 期待する出力
[1, 2, 3] // 例: 3以下の要素をフィルタリングした場合

arr.filter((value) => value <= 3)

問題29

次の配列の要素を、指定された条件に基づいてマップしてください。

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

// 期待する出力
[1, 4, 9, 16, 25] // 各要素の二乗

arr.map((value) => value * value)

問題30

次の配列の要素を、指定された条件に基づいてソートしてください。

const arr = ['apple', 'banana', 'cherry', 'date'];

// 期待する出力
['apple', 'banana', 'cherry', 'date'] // アルファベット順

arr.sort()

問題31

2つの配列を結合し、重複した値を削除した新しい配列を作成してください。

const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

// 期待する出力
[1, 2, 3, 4, 5, 6]

Array.from(new Set([...array1, ...array2]))

or

array1.concat(array2).filter((value, index, self) => self.indexOf(value) === index)

問題32

配列のすべての要素を 0 に置き換えてください。ただし、元の配列を変更しないようにしてください。

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

// 期待する出力
[0, 0, 0, 0, 0]

arr.map((value) => 0)

or

Array.from(arr).fill(0)

問題33

次の配列の最初の5つの要素を切り出し、新しい配列を作成してください。

const array = [10, 20, 30, 40, 50, 60, 70];

// 期待する出力
[10, 20, 30, 40, 50]

const array = [10, 20, 30, 40, 50, 60, 70];

array.slice(0, 5)

問題34

次の配列に 100 を追加します。配列の末尾に追加した後、さらに末尾の要素を削除してください。

const array = [10, 20, 30, 40];

// 期待する出力
[10, 20, 30, 40]

array.push(100)
array.pop()

問題35

次の配列の先頭に 5 を追加し、その後、配列の先頭の要素を削除してください。

const array = [10, 20, 30, 40];

// 期待する出力
[10, 20, 30, 40]

array.unshift(5)
array.shift()

次の配列のインデックス 2 に値 99 を挿入してください。また、インデックス 3 の値を削除してください。

const array = [10, 20, 30, 40, 50];

// 期待する出力
[10, 20, 99, 30, 40]

array.splice(2, 0, 99)
array.splice(3, 1)

問題36

次の配列を逆順に並び替えた新しい配列を作成してください。ただし、元の配列は変更しないでください。

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

// 期待する出力
[5, 4, 3, 2, 1]

array.slice().reverse()

or

[...array].reverse()

or

Array.from(array).reverse()

問題37

次の配列で最初に値 30 が登場するインデックスと、最後に値 30 が登場するインデックスを取得してください。

const array = [10, 20, 30, 40, 30, 50];

// 期待する出力
最初のインデックス: 2
最後のインデックス: 4

array.indexOf(30)
array.lastIndexOf(30)

問題38

次の配列に、値 10 を持つ要素が存在するか確認してください。また、すべての要素が 50 以下であるか確認してください。

const array = [5, 10, 15, 20, 50];

// 期待する出力
存在する: true
すべて50以下: true

array.includes(10)
array.every((value) => value <= 50)

問題39

次の配列から、値が20以上の要素だけを含む新しい配列を作成してください。

const array = [5, 10, 15, 20, 25, 30];

// 期待する出力
[20, 25, 30]

array.filter((value) => value >= 20)

問題40

次の配列のすべての要素を、カンマ , 区切りの文字列に変換してください。

const array = ["apple", "banana", "cherry"];

// 期待する出力
"apple,banana,cherry"

array.join(',')

問題41

次の配列の各要素に 2 を掛けた新しい配列を作成してください。

const array = [1, 2, 3, 4];

// 期待する出力
[2, 4, 6, 8]

array.map((value) => value * 2)

問題42

次の配列に含まれる文字列の長さを、新しい配列として返してください。

const array = ["apple", "banana", "cherry"];

// 期待する出力
[5, 6, 6]

array.map((value) => value.length)

問題43

以下の2つの配列を結合し、その要素をすべて逆順にして、カンマ区切りの文字列を生成してください。

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];

// 期待する出力
"f,e,d,c,b,a"

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];

[...array1, ...array2].sort((a, b) => b.localeCompare(a)).join(',')

問題44

次の配列のインデックス 2 から 4 の間の要素を削除し、新しい配列を作成してください。また、削除された部分の配列を返してください。

const array = [10, 20, 30, 40, 50, 60];

// 期待する出力
新しい配列: [10, 20, 50, 60]
削除された要素: [30, 40]

const array = [10, 20, 30, 40, 50, 60];

const removed = array.splice(2, 2)

console.log(`新しい配列: ${array}`)
console.log(`削除された要素: ${removed}`)

問題45

次の配列のうち、undefined または null の値を取り除いた新しい配列を作成してください。

const array = [10, null, 20, undefined, 30, 40];

// 期待する出力
[10, 20, 30, 40]

array.filter((value) => value !== undefined && value !== null)

問題46

次の配列の各要素を、値とそのインデックスを結合した文字列（例: "apple-0"）に変換してください。

const array = ["apple", "banana", "cherry"];

// 期待する出力
["apple-0", "banana-1", "cherry-2"]

array.map((value, index) => `${value}-${index}`)

問題47

次の配列の最初と最後の要素を削除し、新しい配列を作成してください。

const array = [10, 20, 30, 40, 50];

// 期待する出力
[20, 30, 40]

array.slice(1, -1)

問題48

次の配列を文字列に変換し、要素の間に - を挿入してください。さらに、この文字列を再び配列に戻してください。

const array = [10, 20, 30, 40];

// 期待する出力
文字列: "10-20-30-40"
再構築された配列: ["10", "20", "30", "40"]

const array = [10, 20, 30, 40];

const str = array.join('-')
const newArray = str.split('-')

console.log(`文字列: ${str}`)
console.log(`再構築された配列: ${newArray}`)

Resource

https://github.com/github/eslint-plugin-github/blob/main/docs/rules/array-foreach.mdhttps://github.com/github/eslint-plugin-github/blob/main/docs/rules/array-foreach.md
https://zenn.dev/cybozu_frontend/articles/js_basic_arrayhttps://zenn.dev/cybozu_frontend/articles/js_basic_array
https://ics.media/entry/200825/https://ics.media/entry/200825/