Loading
  • LIGHT

  • DARK

ROUTE

ルートゼロの
アクティビティ

JavaScriptの配列・JSON・map・Map:データ操作術

6

1. 配列とは?

let fruits = ["りんご", "バナナ", "オレンジ"];
fruits[1] = "ぶどう";
console.log(fruits); // ["りんご", "ぶどう", "オレンジ"]

2. 配列の便利なメソッド

fruits.push("みかん");
console.log(fruits); // ["りんご", "ぶどう", "オレンジ", "みかん"]
fruits.pop();
console.log(fruits); // ["りんご", "ぶどう", "オレンジ"]
fruits.shift();
console.log(fruits); // ["ぶどう", "オレンジ"]
fruits.unshift("いちご");
console.log(fruits); // ["いちご", "ぶどう", "オレンジ"]
console.log(fruits.join(", ")); // "いちご, ぶどう, オレンジ"

3. JSONとは?

{
  "name": "田中太郎",
  "age": 25,
  "isStudent": true
}
[
  { "name": "田中太郎", "age": 25 },
  { "name": "佐藤花子", "age": 28 },
  { "name": "鈴木一郎", "age": 22 }
]
let fruits = ["りんご", "バナナ", "オレンジ"];

{
  "fruits": ["りんご", "バナナ", "オレンジ"]
}

4. JavaScriptとJSONの相互変換

let user = { name: "田中太郎", age: 25, isStudent: true };
let userJSON = JSON.stringify(user);
console.log(userJSON); // '{"name":"田中太郎","age":25,"isStudent":true}'
let jsonString = '{"name":"田中太郎","age":25,"isStudent":true}';
let userObj = JSON.parse(jsonString);
console.log(userObj); // { name: '田中太郎', age: 25, isStudent: true }

5. map()メソッドと配列の違い

let fruits = ["りんご", "バナナ", "オレンジ"];
let uppercaseFruits = fruits.map(function(fruit) {
  return fruit.toUpperCase();
});
console.log(uppercaseFruits); // ["りんご", "バナナ", "オレンジ"]が大文字に変換された新しい配列が出力される。

6. Mapオブジェクトとは?

let userMap = new Map();
userMap.set("name", "田中太郎");
userMap.set("age", 25);
userMap.set("isStudent", true);

console.log(userMap); // Map(3) { "name" => "田中太郎", "age" => 25, "isStudent" => true }
console.log(userMap.get("name")); // "田中太郎"

7. まとめ

もっとルートゼロを知りたいなら

DISCOVER MORE