React学習過程で出てきたJSメソッド

※現在、途中経過の記事です

動画教材やChat GPTに質問する過程で出てきたJSのメソッド

• crypto.randomUUID
• Math.round
• toUpperCase
• navigator.clipboard.writeText
• Array.isArray
• find
• includes
• some
• every
• flatMap
• new Set
• Object.entries
• localStorage

crypto.randomUUID();

整数の乱数生成。新しいidの生成などに便利

example.js

const arr = [
  {id: 1, name: 'Satoshi'},
  {id: 2, name: 'Kasumi'},
  {id: 3, name: 'Takeshi'}
]
const newMember = {id: crypto.randomUUID(), name: 'O-kido'};

const newArr = [...array, newMember];

Math.round

数値を四捨五入

example.js

const num = 1192.4;

//↓ 結果は1192
console.log(Math.roudom(num));

toUpperCase

小文字を大文字にする

example.js

const str = 'kamakura';

//↓ 結果はKAMAKURA
console.log(str.toUpperCase());

navigator.clipboard.writeText

クリップボードにコピー

example.js

const btn = document.getElementById('btn');
const text = document.getElementById('text');

btn.addEventListener('click', () => {
    navigator.clipboard.witeText(text.textContent);
})

Array.isArray

配列かどうかを確かめる。

example.js

const str = "string";
const arr = ["str", "num"];

//↓ 結果はnull
Array.isArray(str);
//↓ 結果はture
Array.isArray(arr);

find

条件に合致した最初の一件を返す

example.js

const shocker = [
  {name: '本郷猛', type: 'kamenrider'},
  {name: '一文字隼人', type: 'kamenrider'},
  {name: 'クモ男', type: 'kaijin'},
]

shocker.find(one => one.type === 'kamenrider');
//↓ 結果は
{name: '本郷猛', type: 'kamenrider'}

includes

配列にそれがあるかを確かめる。絞り込み検索の実装に便利

example.js

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

//↓ 結果はture
arr.includes("banana");

every

全部trueならture。全部一致しなければならない。AND検索の実装に便利

example.js

const arr = [1,2,3];

//↓ 結果はture
arr.every(n => n > 0);

some

一つでもtrueならture。一つだけでも一致すればOK。AND検索の実装に便利

example.js

const arr = [1,2,3];

//↓ 結果はture
arr.some(n => n > 1);

flatMap

配列を一つの配列にまとめる。

example.js

const profiles = [
  {
    name: "Shimiken",
    age: 46,
    absolute: ["hentai", "unchi", "waki", "muscle"]
  },
  {
    name: "Genjin",
    age: 46,
    absolute: ["hentai", "newhalf"]
  },
  {
    name: "Chocoball",
    age: 59,
    absolute: ["hentai", "muscle"]
  },
];

profiles.map(ab => ab.absolute);
profiles.flatMap(ab => ab.absolute);

//↓ mapの結果 配列の中に配列
[
  ["hentai", "unchi", "waki", "muscle"],
  ["hentai", "newharf"],
  ["hentai", "muscle"]
]
//↓ flatMapの結果 一つのなだらかな配列
["hentai", "unchi", "waki", "muscle", "hentai", "newharf", "hentai", "muscle"]

new Set

重複を消す。Setはオブジェクトとして返すので、スプレット構文を使うことによって配列にしなおしている

example.js

const arr = ["unco", "unchi", "unco", "unpi"];
[...new Set(arr)];

//↓ 結果は
["unco", "unchi", "unpi"]

Object.entries

オブジェクトを配列にする。オブジェクトをmapやfilterで回したいときに便利

example.js

const obj = {
  1: "unco",
  2: "unchi",
  3: "unpi"
}

Object.entries(obj);

//↓ 結果は
[
  [1: "unco"],
  [2: "unchi"],
  [3: "unpi"]
]

localStorage

ブラウザにデータを保存する機能。文字列しか保存できない。

setItem ← 保存
getItem ← 取得
stringify ← 文字列に変換
parse ← 文字列から元の形式へ

example.js

//↓ 保存名、JSON形式の文字列に変換
localStorage.setItem('data', JSON.stringify(data));

//↓ 保存したものを取り出す
const saved = localStorage.getItem(data);

//↓ 保存したものをJSON形式から元の形に戻す
console.log(JSON.parse(saved));