JavaScriptセットの使い方

May 22, 2023 am 09:56 AM

JavaScript は動的言語であり、その柔軟性により、HTML および CSS と並んで Web 開発の 3 つの最も基本的な要素の 1 つとなっています。 JavaScript では、set は、任意の型の一意の値を格納できる、非常に一般的に使用されるデータ構造です。次に、JavaScript セットの使い方と機能について説明します。

1. セットの作成

JavaScript では、次のメソッドを使用してセットを作成できます:

const set = new Set();
ログイン後にコピー

これにより、空のセットが作成されます。配列をセットに変換することもできます:

const arr = [1, 2, 3, 3, 4];
const set = new Set(arr); //这将创建一个唯一的值集合:{1, 2, 3, 4}
ログイン後にコピー

2. Set に値を追加します

Set では、add() メソッドを使用して一意の要素をそれに追加します。追加された要素が Set 内にすでに存在する場合、追加されません。

const set = new Set();
set.add("hello");
set.add("world");
console.log(set); //输出Set("hello", "world")
ログイン後にコピー

3. Set からの値の削除

Set から値を削除するには、delete() メソッドを使用できます。値が存在しない場合、delete() メソッドも false を返します。

const set = new Set();
set.add("hello");
set.add("world");
set.delete("world");
console.log(set); //输出 Set("hello")
ログイン後にコピー

clear() メソッドを使用して Set 全体をクリアすることもできます:

const set = new Set();
set.add("hello");
set.add("world");
set.clear();
console.log(set); //输出 Set()
ログイン後にコピー

4. Set のトラバース

JavaScript では、for-of ループを使用できます。セットを横断します。 Set では重複した値が許可されないため、for-of ループは自動的に重複した値をスキップします。

const set = new Set([1, 2, 3]);
for (const item of set) {
  console.log(item);
}
ログイン後にコピー

出力結果は次のとおりです:

1
2
3
ログイン後にコピー

for-of ループに加えて、forEach() メソッドを使用して Set を走査することもできます。これにより、セット内の各要素が反復処理され、その要素に対してコールバック関数が実行されます。

const set = new Set([1, 2, 3]);
set.forEach((item) => {
  console.log(item);
});
ログイン後にコピー

5. Set の一般的なメソッド

JavaScript では、Set には一般的に使用されるメソッドが多数あります。一般的に使用されるメソッドのいくつかを次に示します:

  1. has() メソッド : Set に特定の値が含まれているかどうかを確認します。
const set = new Set([1, 2, 3]);
console.log(set.has(2)); //输出 true
console.log(set.has(4)); //输出 false
ログイン後にコピー
  1. size 属性: セット内の要素の数を返します。
const set = new Set([1, 2, 3]);
console.log(set.size); //输出 3
ログイン後にコピー
  1. keys() メソッド: セット内のすべての要素のキー名を返します。
const set = new Set([1, 2, 3]);
console.log(set.keys()); //输出 SetIterator {1, 2, 3}
ログイン後にコピー
  1. values() メソッド: Set 内のすべての要素の値を返します。
const set = new Set([1, 2, 3]);
console.log(set.values()); //输出 SetIterator {1, 2, 3}
ログイン後にコピー
  1. entries() メソッド: Set 内のすべての要素のキーと値のペアを返します。
const set = new Set([1, 2, 3]);
console.log(set.entries()); //输出 SetIterator { [1, 1], [2, 2], [3, 3] }
ログイン後にコピー

6. Set と Array の間の変換

JavaScript では、Set を配列に、または配列を Set に変換できます。以下に 2 つの変換方法があります:

  1. セットを配列に変換:
const set = new Set([1, 2, 3]);
const arr = Array.from(set);
console.log(arr); //输出 [1, 2, 3]
ログイン後にコピー
  1. 配列をセットに変換:
const arr = [1, 2, 3];
const set = new Set(arr);
console.log(set); //输出 Set(3) {1, 2, 3}
ログイン後にコピー

7 Set

Set の使用シナリオは、重複した値を削除するために使用でき、データを処理するときに非常に便利です。たとえば、データベースから結果を取得する場合、結果には重複する値が含まれる可能性があるため、Set を使用して重複する値を削除できます。

Set はあらゆる種類のデータを保存することもできます。これにより、多くのシナリオで使用できるようになります。たとえば、多数の値を保存する必要がある場合、Set を使用して値を保存できます。

つまり、Set は JavaScript の非常に便利なデータ構造であり、多くのシナリオで役割を果たすことができます。 Set の基本的な使用法を学ぶことで、Web 開発で JavaScript をより効果的に使用できるようになります。

以上がJavaScriptセットの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

怠zyなロードの概念を説明してください。 怠zyなロードの概念を説明してください。 Mar 13, 2025 pm 07:47 PM

怠zyなロードの概念を説明してください。

React和解アルゴリズムはどのように機能しますか? React和解アルゴリズムはどのように機能しますか? Mar 18, 2025 pm 01:58 PM

React和解アルゴリズムはどのように機能しますか?

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? UseEffectとは何ですか?副作用を実行するためにどのように使用しますか? Mar 19, 2025 pm 03:58 PM

UseEffectとは何ですか?副作用を実行するためにどのように使用しますか?

JavaScriptでカリーはどのように機能し、その利点は何ですか? JavaScriptでカリーはどのように機能し、その利点は何ですか? Mar 18, 2025 pm 01:45 PM

JavaScriptでカリーはどのように機能し、その利点は何ですか?

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか? Mar 18, 2025 pm 01:44 PM

JavaScriptの高次関数とは何ですか?また、より簡潔で再利用可能なコードを書くためにどのように使用できますか?

各ライフサイクル方法の目的とそのユースケースを説明します。 各ライフサイクル方法の目的とそのユースケースを説明します。 Mar 19, 2025 pm 01:46 PM

各ライフサイクル方法の目的とそのユースケースを説明します。

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか? Mar 18, 2025 pm 01:57 PM

Reactのパフォーマンス最適化手法(メモ化、コード分割、怠zyな読み込み)とは何ですか?

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか? Mar 19, 2025 pm 03:59 PM

usecontextとは何ですか?コンポーネント間で状態を共有するためにどのように使用しますか?

See all articles