JSONと配列操作

JS

オブジェクト

オブジェクトはキーと値が波かっこ { } で囲まれたもの。

キーと値はコロン : で区切り、ペアはカンマ , で区切ります。

{
    "key1": "value1",
    "key2": "value2",
    "key3": {
        "nestedKey": "nestedValue"
    }
}

配列

配列は角かっこ [ ] で囲まれ、各要素はカンマ , で区切ります。

[
    "value1",
    "value2",
    {
        "nestedKey": "nestedValue"
    }
]

JSON.stringify()

JSON.stringify()はJavaScriptオブジェクトをJSON文字列に変換します。

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30,"city":"New York"}"

JSON.parse()

JSON.parse()は、JASON文字列をJavaScriptオブジェクトに変換します。

const jsonString = '{"name":"John","age":30,"city":"New York"}';
const obj = JSON.parse(jsonString);
console.log(obj);//{name: 'John', age: 30, city: 'New York'}
console.log(obj.name); // "John"
console.log(obj.age); // 30
console.log(obj.city); // "New York"

array.sort()

配列の並べ替えについて。

array.sort()の注意点は2つ。

  • 元の配列を書き換える
  • 文字列で比較する

これらのarray.sort()の特徴を加味して、

  • 元の配列を書き換える →  slice()を使って元の配列を書き換えないようにする
  • 文字列で比較する →  数値の比較関数を使って数値比較にする
const numbers = [10, 2, 5, 1];
numbers.sort()//出力: [1, 10, 2, 5](文字列で並び替え)
const sortedNumbers = numbers.slice().sort((a, b) => a - b);//昇順に並べ替え(降順ならb-a)
console.log(sortedNumbers); // 出力: [1, 2, 5, 10](数値で並び替え)
console.log(numbers); // 出力: [10, 2, 5, 1](numbers は変更されていない)

array.slice()

array.slice()メソッドは、

配列の一部を取り出して新しい配列を作成するためのメソッドです。

このメソッドは元の配列を変更せず、指定された範囲の要素を含む新しい配列を返します。

const newArray = array.slice(startIndex, endIndex);

注意しないといけないのは、

取り出される範囲は、startIndexからendIndexの一つ前の位置までというところです。

const fruits = ["apple", "banana", "cherry", "date", "fig"];

const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 出力: ["banana", "cherry", "date"]

const slicedFruits2 = fruits.slice(2);
console.log(slicedFruits2); // 出力: ["cherry", "date", "fig"]

console.log(fruits); // 元の配列は変更されない: ["apple", "banana", "cherry", "date", "fig"]

array.splice()

array.splice()メソッドは、

配列の中の要素を削除または置換し、必要に応じて新しい要素を追加します。

splice()も破壊的に変更するので、元の配列が変更されます。

array.splice(startIndex, deleteCount, item1, item2, ...);

startIndex ・・・操作を開始するインデックス。この位置から要素を削除または置換します。

deleteCount ・・・削除する要素の数。0の場合は削除されず、新しい要素が追加されます。

item1, item2, …・・・追加する要素。削除した位置に挿入されます。

const fruits = ['apple', 'banana', 'cherry', 'date', 'fig'];

// インデックス1から2つの要素を削除する
const removed = fruits.splice(1, 2);
console.log(removed); // 出力: ["banana", "cherry"]
console.log(fruits);  // 出力: ["apple", "date", "fig"]

// インデックス2の位置に"orange"を挿入する
fruits.splice(2, 0, 'orange');
console.log(fruits); // 出力: ["apple", "date", "orange", "fig"]

// インデックス0から1つの要素を削除し、その位置に"grape", "kiwi"を挿入する
fruits.splice(0, 1, 'grape', 'kiwi');
console.log(fruits); // 出力: ["grape", "kiwi", "date", "orange", "fig"]

重複を削除して並び替える

new Set()

まずは重複を削除する

 const mySet = new Set([3, 1, 1, 2, 2, 3]);
 console.log(mySet);//Set { 3, 1, 2 }

これを配列にして昇順に並び替える

const mySetData = Array.from(mySet).sort((a, b) => a - b);
console.log(mySetData);//[1, 2, 3]