🦔

JavaScriptのデータ操作を動詞で分類する

2023/12/07に公開

JavaScriptのデータ(配列、オブジェクト、Set、Map、文字列)の操作を動詞で分類した。データの型ごとにまとめるのを横軸とすると、これは縦軸。頭の中に地図をつくるように情報を整理できればと思う。
「足す」「消す」「探す」でまとめた。他にも「変える」「並べる」「分ける」「繰り返す」があると良いかもしれない。追加を検討する。

足す

Array

配列arrに値valを追加する。

return [...arr, val];  // 新しい配列を返す。arrはそのまま。
arr.push(val);     // 最後に足す
arr.unshift(val);  // 最初に足す
arr.splice(3, 0, val);  // indexが3の位置に足す
return(arr);

Object

オブジェクトobjにキーkと値vを追加する。

return {...obj, [k]: v };  // 新しいオブジェクトを返す。objはそのまま。
obj[k] = v;
return obj;

Set

セットsetに値valを追加する。

set.add(val);
return set;

Map

マップmapの値valにデータdataを追加する。

map.set(val, data);
return map;

Setに足すのがaddで、Mapに足すのがset。

String

文字列strに文字列「txt」を追加する。

return str + txt;

消す

Array

配列arrから値valを削除する。

return arr.filter((item) => item !== val);  // arrはそのまま。

配列arrから先頭/末尾を削除する。(これは「分ける」ともとれる)

const arrNew = arr.shift();
return arrNew;  // 先頭の要素
return arr;     // 先頭を削った残り
const arrNew = arr.pop();
return arrNew;  // 末尾の要素
return arr;     // 末尾を削った残り

Object

オブジェクトobjからキー「key」を削除する。

const {key, ...remains} = obj;
return remains;
delete obj[val];
return obj;

Set

セットsetから値valを削除する。

set.delete(val);
return set;

Map

マップmapから値valを削除する。

map.delete(val);
return map;

String

文字列strから文字「txt」を削除する。

return str.replace('txt', '');   // 1つ目だけ
return str.replace(/txt/, '');   // 1つ目だけ
return str.replace(/txt/g, '');  // すべて

文字列strから文字「a」を削除する。

return str.split('').filter((letter) => letter !== 'a').join('');

探す

Array

配列Arrに値valが含まれているか。

return arr.includes(val);
return arr.indexOf(val) !== -1;
return arr.some((item) => item === val);

Object

オブジェクトobjのキーに値valが含まれているか。

return obj.hasOwnProperty(val);
return val in obj;
return obj[val] !== undefined;

hasWonPropertyis は prototype の扱いに違いがある。詳しくはコチラを参照。
https://qiita.com/shuhei/items/dabf0ca097f05264baf9

Set

セットsetに値valが含まれているか。

return set.has(val);

Map

マップmapに値valが含まれているか。

return map.has(val);

String

文字列strに文字列「txt」が含まれているか。

return str.indexOf('txt') !== -1;
return str.includes('txt');
const regexp = new RegExp(/txt/);
return str.search(regexp) !== -1;
return !!str.match(regexp);
return regexp.test(str);
return !!regexp.exec(str);

処理速度は testexec が速い。詳しくはコチラを参照。
https://s8a.jp/javascript-string-includes

Discussion