プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • JavaScript
  • 【JavaScript】文字列クラス(String)、数値関連クラス(「Math」、「Nu…
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【JavaScript】文字列クラス(String)、数値関連クラス(「Math」、「Number」)、コレクションクラス(Map、Set)

05.02

  • miyabisan2
  • コメントを書く

この記事は3分で読めます

Stringクラス

repeat関数

連続した文字列を出力させる事ができます。

1
2
let str = '!';
console.log(str.repeat(5)); //!!!!!

含むか判定するビルドイン関数

includes関数

文字列を含んでいたらtrue、含んでいなかったらfalseが返ります。従来のJavaScriptで言えばindexOfでも同じ事ができますがより数字でなくBooleanが返って来るのでより直感的に処理する事が可能です。

1
2
3
4
let str = "abcde";
let str2 = "bc";
let hantei = str.includes(str2);
hantei; //true

startsWith関数

先頭から文字列を検索して含んでいたらtrueを返します。

1
2
3
4
let str = "abcde";
let str2 = "ab";
let hantei = str.startsWith(str2);
hantei; //true

endsWith関数

文末から文字列を検索して含んでいたらtrueを返します。

1
2
3
4
let str = "abcde";
let str2 = "de";
let hantei = str.endsWith(str2);
hantei; //true

Mathクラス

trunc関数

小数点以下を切り捨てる事が可能です。

1
2
3
4
let a = -10.13;
let b = 5.23;
console.log(Math.trunc(a)); // -10
console.log(Math.trunc(b)); // 5

sign関数

プラスか、0か、マイナスかを判定して返します。

1
2
3
console.log(Math.sign(23));   //1
console.log(Math.sign(0));     //0
console.log(Math.sign(-10)); //-1

Numberクラス

isNaN関数

変数の値がNaNかを判定します。

1
2
3
4
let i;
i++;
i;  //NaN
console.log(Number.isNaN(i)); //true

isFinite関数

変数がInfinity(無限大)かどうか判定します。

1
2
3
let i = 1 / 0;
i; //Infinity
console.log(Number.isFinite(i)); //false

isSafeInteger関数

安全な整数かどうかをチェックする事ができます。

1
2
3
4
5
console.log(Number.isSafeInteger(10)); //true
console.log(Number.isSafeInteger(0));  //true
console.log(Number.isSafeInteger(-3)); //true
console.log(Number.isSafeInteger(-3.3)); //false
console.log(Number.isSafeInteger(NaN)); //false

Set

下記のように定義します。sizeプロパティを使えばサイズを取得する事ができます。

1
2
3
4
5
6
let set1 = new Set([1, 2, 3, 3]);
let set2 = new Set("アイウエオウ");
console.log(set1); //Set { 1, 2, 3 }
console.log(set2); //Set { 'ア', 'イ', 'ウ', 'エ', 'オ' }
console.log(set1.size); //3
console.log(set2.size); //5

特徴

  • 重複した値を持つ事ができない。
  • 「キー」と「バリュー」で値が管理される。

キーの取得

キーはkeysメソッドを使えばIteratorとして取得する事ができるので配列に分割代入をすることも可能です。

1
2
3
4
5
6
let set1 = new Set([1, 2, 3, 3]);
console.log(set1.keys()); // { [Iterator] }
let [a, b, c] = set1.keys();
console.log(a); //1
console.log(b); //2
console.log(c); //3

バリューの取得

バリューもvaluesメソッドを使えばIteratorと取得できキーと同じように配列に分割代入する事が可能です。

1
2
3
4
5
6
let set1 = new Set("アイウエオ");
console.log(set1.values()) // { [Iterator] }
let [a, b, c] = set1.values();
console.log(a); //ア
console.log(b); //イ
console.log(c); //ウ

下記のように「for of」や「forEach」を使ってもバリューの値を取得する事が可能です。

1
2
3
4
5
6
7
8
let set1 = new Set("アイウエオ");
for (let i of set1) {
  console.log(i); //ア イ ウ エ オ
}
 
set1.forEach(a => {
  console.log(a); //ア イ ウ エ オ
})

バリューの追加

addメソッドを使用すればセットの末尾にバリューを追加する事が可能です。

1
2
3
4
5
6
let set1 = new Set([1, 2]);
set1.add(3);
let [a, b, c] = set1.values();
a; //1
b; //2
c; //3

バリューの削除

deleteメソッドを使えばバリューをピンポイントで削除する事が可能です。

1
2
3
4
let set1 = new Set([1, 2, 3]);
console.log(set1); // Set { 1,2,3 }
set1.delete(2);
console.log(set1); // Set { 1,3 }

clearメソッドを使えば全てのバリューを削除する事が可能です。

1
2
3
let set1 = new Set([1, 2, 3]);
set1.clear();
console.log(set1); // Set {}

特定のバリューを保持しているかチェックする。

特定の値を保持しているかチェックする場合はhasメソッドを使います。

1
2
let set1 = new Set([1, 2, 3]);
console.log(set1.has(2)); //true

Map

基本的には、オブジェクトの上位互換になります。ES6から追加されました。

Mapとオブジェクトの違い

キーの順番が同じ

定義順を固定できます。オブジェクトだとランダムになってしまいます。

キーのデータ型が異なる

オブジェクトの場合は「文字列」か「シンボル」が基本になりますが、Mapの場合はキーの選択肢が非常に増えます。

  • 文字列
  • 数値
  • NaN
  • Infinity
  • undefined
  • bool
  • オブジェクト

データのアクセス方法が異なる

オブジェクトの場合は「for in」文が基本ですが、Mapの場合は「for of」や「各種メソッド(keys,values,entries)」等で柔軟にデータへアクセスする事が可能になります。Iterableなのでforループで回すことが可能です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let map1 = new Map([[1, "a"], [2, "b"], [3, "c"]]);
for (let i of map1.keys()) {
  console.log(i); //1 2 3
}
 
for (let i of map1.values()) {
  console.log(i); //a b c
}
 
for (let i of map1.entries()) {
  console.log(i); // [1,'a'] [2,'b'] [3,'c']
}
 
for (let [key, value] of map1) {
  console.log(key); // 1 2 3
  console.log(value); // a b c
}
 
map1.forEach((value, key) => {
  console.log(key); // 1 2 3
  console.log(value); // a b c
})

メモリをあまり消費しない

Mapでは余計なメソッドやプロパティは保持しておらずあまりメモリを消費しません。(オブジェクトだとプロトタイプチェーンでプログラマが設定したキー以外のプロパティがある。)

mapを作成する。

Mapを使うときはMapクラスをnewしてコンストラクタとして配列を渡します。getメソッドで値を取得、setメソッドで末尾に値を設定する事ができます。

1
2
3
4
let map1 = new Map([[1, "a"], [2, "b"], [3, "c"]]);
console.log(map1.get(2)); //b
map1.set(4, "d");
console.log(map1); //Map { 1 => 'a', 2 => 'b', 3 => 'c', 4 => 'd' }

サイズを取得

1
console.log(map1.size); //4

値を削除する。

1
2
3
4
map1.delete(3);
console.log(map1); //Map { 1 => 'a', 2 => 'b', 4 => 'd' }
map1.clear();
console.log(map1); //Map {}

値を含んでいるかチェックする。

1
console.log(map1.has(2)); //true

WeakMapやWeakSetとは?

Mapの機能限定版です。弱いMapや弱いSetという事です。通常のSetやMapと異なりオブジェクト({})を代入する事ができます。keyに指定可能な型はObject型のみになります。

1
2
3
4
let wmap = new WeakMap();
let obj = { "a": 1 };
wmap.set(obj, 1);
console.log(wmap.get(obj)); //1

他にも下記のようなメソッドを持っています。

  • hasメソッド
  • deleteメソッド

関数のガーベージコレクションで破棄される。

下記のように関数の即時呼び出しを実行した後にWeakMapの場合はJavaScriptのガーベージコレクションで開放されてしまいます。

1
2
3
4
5
6
7
8
9
let map = new Map();
let wmap = new WeakMap();
(function () {
  map.set(3, 5);
  wmap.set({ 3: "b" });
}())
//ガーベージコレクション後
console.log(map); // Map { 3 => 5 }
console.log(wmap); // WeakMap {}

スポンサーリンク
  • 2020 05.02
  • miyabisan2
  • コメントを書く
  • JavaScript
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2020 05.03

    【JavaScript】非同期関数(「async」、「await」)について

  2. 2020 05.09

    【JavaScript】配列の便利メソッド「forEach」について

  3. 2022 09.26

    【JavaScript】「JavaScriptエンジン」、「ブラウザのWeb API」など

  4. 2018 06.17

    【JavaScript】「関数」の特徴(「高階関数」も含めて)

  5. 2020 02.29

    【webpack】設定の基本や「loader(ローダー)」について

  6. 2022 09.28

    【JavaScript】「関数オブジェクト」、「関数式」、「ファクトリ関数」、「コンストラクタ関数」、「アロー関数」

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【JavaScript】「シンボル」、「イテレーター」…

【JavaScript】非同期関数(「async」、「…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • cursor
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー