ES6 の新機能 - JavaScript の Set 型および WeakSet 型データ構造の詳細なコードの紹介-jsチュートリアル-php.cn

ご覧のとおり、上記の 4 つの繰り返しでは 1 つだけが

ホームページ

ウェブフロントエンド

jsチュートリアル

ES6 の新機能 - JavaScript の Set 型および WeakSet 型データ構造の詳細なコードの紹介

黄舟

Mar 07, 2017 pm 02:15 PM

ES6 は新しいデータ構造

Set を提供します。Set オブジェクトは配列ではなく、保存されたすべての値は一意、Chrome ブラウザー>38 およびFF> 13 および nodeJS は、Set を適切にサポートしています。次のコードの一部は、コンソールにコピーして直接実行できます。

Set インスタンスを作成する基本的な方法は次のとおりです。

let set = new Set(); //或者 new Set(null);
console.log(set);

ログイン後にコピー

ご覧のとおり、上記の 4 つの繰り返しでは 1 つだけが

set

に保存されるため、Set オブジェクトを使用して配列を重複排除することもできます。 NaN が繰り返されると、Set はそれが A NaN

(実際には NaN!=NaN) であるとみなします

;インスタンス Set の後のオブジェクトには、次の

プロパティとメソッドがあります

:property

Set.prototypeSet。プロトタイプ.サイズ

メソッド

Set.prototype.add()
Set.prototype.clear()
Set.prototype.delete()

Set.prototype.entries()

Set.prototype.forEach() Set.prototype.has() Set.prototype.values()

Set.prototype[@@iterator]()

Set
実際、配列を使用してこのタイプのデータ構造を直接シミュレートできます。上記のリストの
メソッド
と
プロパティ
の一部は、元のものと比較することはできず、Setインスタンスの[Symbol.species]がポイントする実装できないものもあります。

配列を使用 Set コンストラクターをシミュレートします:

let set = new Set([1,2,3,4,4,4,4,4]);
console.log( Array.from(set) ); //输出：[ 1, 2, 3, 4 ]

ログイン後にコピー

Set インスタンス属性: size 属性: サイズはこの Set の長さを指しますconstructor 属性: この属性は Set コンストラクターを指します。このコードで十分です。 Implement (new Set).constructor === Set //Output: trueSet インスタンスメソッド:

add メソッド、セットにデータを追加します。

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    "use strict";
    class Set {
        //对_set进行去重;
        static refresh () {
            let _this = this;
            let __set = []
            this._set.forEach(function(obj) {
                if( __set.indexOf(obj) === -1 && obj!=undefined) {
                    __set.push(obj);
                }
            });
            _this._set =__set;
            this.size = _this._set.length;
        }
        constructor(arg) {
            this.size = 0;
            this[Symbol.species] = this;
            this._set = Array.isArray(arg)&&arg||[];
            Set.refresh.call(this)
        }
        add (obj) {
            this._set.push(obj);
            Set.refresh.call(this)
            return this;
        }
        clear () {
            this._set.length = 0;
            return this;
        }
        delete (obj) {
            if( this._set.indexOf(obj)!=-1 ) {
                this._set[this._set.indexOf(obj)] = undefined;
            };
            Set.refresh.call(this);
            return this;
        }
        /**
         * @desc
         * @return Entries [[],[],[],[]]
         * */
                entries () {
            let result = [];
            this.forEach(function(key, value) {
                result.push([key,value]);
            });
            return result;
        }
        has () {
            if( this._set.indexOf(obj)!=-1 ) return true;
        }
        keys () {
            return this[Symbol.iterator]();
        }
        values () {
            return this[Symbol.iterator]();
        }
        //直接使用数组的forEach方便啊;
        forEach (fn, context) {
            let _this = this;
            this._set.forEach((value) => fn.call(context||value, value, value, _this) );
        }
        //必须支持生成器的写法;
    *[Symbol.iterator] (){
        let index = 0;
        let val = undefined;
        while(index<this.size) {
        val = this._set[index];
        yield  val;
        index++;
    }
    }
    }
    var set = new Set([0,0]);
    //对Set进行基本的操作;
    set.add(1).add(2).add(3).add({1:1})
    set.delete(1);
    set.add(1);
    //使用Set的forEach方法;
    set.forEach(function(key,value,s){console.log(key,value,s,"this")},{this:"this"})
    //检测生成器是否正常运行;
    for(let s of set) {
        console.log(s)
    }
    //因为这个对象有Symbol.iterator， 所以使用扩展符也是好使的；
    console.log([...set]);
</script>
</body>
</html>

ログイン後にコピー

clear メソッド、セット内のデータを削除します。

<script>
    Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3]
</script>

ログイン後にコピー

entries メソッド:

let set = (new Set([1,2,3,4]));
set.clear();
Array.from(set);

ログイン後にコピー

forEach メソッド: set の forEach には 2 つのパラメーターがあります。最初のパラメーターは関数であり、2 番目のパラメーターはオプションです。2 番目のパラメーターが渡される場合、これが渡される 2 番目のパラメーターになります。

has メソッド、has は、このセットが指定された値を持つかどうかを判断し、false または true を返します。

let set = (new Set([1,2,3,4]));
set.delete(1);
Array.from(set); //输出：[2, 3, 4]

ログイン後にコピー

Keys メソッドとvalues() メソッドは、どちらのメソッドも反復子を返します。 , @iterator メソッドは set のデフォルトのイテレータです。

let set = (new Set([1,2,3,4]));
Array.from(set.entries());

ログイン後にコピー

実際、set[Symbol.iterator] をオーバーライドできますが、set のキーと値のメソッドには影響しません。

デモ全体:

<script>
let set = (new Set([1,2,3,4]));
set.forEach(function() {
    console.log(arguments);
    console.log(this)
},"1111");
</script>

ログイン後にコピー

Set の実際の使用法:

set を使用すると、交差と結合を簡単に実行できます:

結合を見つけます。2 つ以上の解を与えることができます:

<script>
let set = (new Set([1,2,3,4]));
console.log(set.has(1)) //输出：true;
console.log(set.has(5)) //输出：false
</script>

ログイン後にコピー

この交差を取得する方法は、配列の交差を見つけるのと似ています。

<script>
let set = new Set([1,2,3,4]);
console.log(set.keys());
console.log(set.values());

var keys = set.keys();
for(let key of keys) {
    console.log(key);
};
</script>

ログイン後にコピー

次のコードは短くてとてもクールです。このメソッドは http://es6 .ruanyifeng.com/#docs/set-map;

<script>
let set = new Set([1,2,3,4]);
let setIner = set[Symbol.iterator]();
console.log(setIner.next().value) //输出：1
console.log(setIner.next().value) //输出：2
console.log(setIner.next().value) //输出：3
console.log(setIner.next().value) //输出：4
</script>

ログイン後にコピー

弱参照

WeakSet

オブジェクトはコレクションです。 WeakSet は、

Object

、

Array

、

Function

などの

オブジェクトタイプ

の要素を

WeakSet

で格納できます。弱い参照の場合、メモリリークを心配する必要はありません。他のオブジェクトがそのオブジェクトを参照しない場合、このオブジェクトはガベージコレクションメカニズムによって自動的にリサイクルされます。

var mySet = new Set();
//往mySet里面添加数据， 1 ， 5
mySet.add(1);
mySet.add(5);
mySet.add("some text");
//添加对象
var o = {a: 1, b: 2};
mySet.add(o);

mySet.has(1); // 返回：true
mySet.has(3); // 返回：false
mySet.has(5);              // 返回：true
mySet.has(Math.sqrt(25));  // 返回：true
mySet.has("Some Text".toLowerCase()); // t返回：rue
mySet.has(o); // 返回：true

mySet.size; // 4

mySet.delete(5); // 从mySet里面删除5
mySet.has(5);    // 输出：false, 5 已经被删除了

mySet.size; // 现在的长度为：3

// 通过 for...or循环获取数据;
// 输出: 1, "some text"
for (let item of mySet) console.log(item);

// 输出: 1, "some text"
for (let item of mySet.keys()) console.log(item);

// 输出: 1, "some text"
for (let item of mySet.values()) console.log(item);

// 输出: 1, "some text"， 对于Set来说：key和value是一样的
for (let [key, value] of mySet.entries()) console.log(key);

// 把迭代器转化为数组的第一种方式；
var myArr = [v for (v of mySet)]; // [1, "some text"]
// 把迭代器转化为数组的第二种方式；
var myArr = Array.from(mySet); // [1, "some text"]
// 也可以用next()方法，手动去获取每一个值;

ログイン後にコピー

WeakSet オブジェクトには 3 つのメソッドしかありません。オブジェクトにはサイズ属性がありません。オブジェクトがそうなった場合参照がない場合、WeakSet オブジェクトは参照なしでオブジェクトが占有しているメモリを再利用します。次のデモを実行してから、しばらくしてから (Chrome ブラウザーで効果を確認できます

10S) コンソールを見てください。再度:

var union = (setA, setB) => {
    //[...setA]这种方式目前只有babel才支持
    return new Seet([...setA,...setB]);
};
var union = (setA, setB) => {
    return new Set(Array.from(setA).concat(Array.from(setB)));
}

ログイン後にコピー

weakSet は、weakSet にノードへの他の参照がない場合、DOM ノードを保存するために使用できます。その場合、一定期間内にメモリがリサイクルされます。上記は、ES6 の新機能 - JavaScript の Set および WeakSet タイプのデータ構造のコードの詳細な紹介です。さらに関連するコンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7399

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles

ES6 の新機能 - JavaScript の Set 型および WeakSet 型データ構造の詳細なコードの紹介

ご覧のとおり、上記の 4 つの繰り返しでは 1 つだけが

<script> Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3] </script>
ログイン後にコピー

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

ES6 の新機能 - JavaScript の Set 型および WeakSet 型データ構造の詳細なコードの紹介

ご覧のとおり、上記の 4 つの繰り返しでは 1 つだけが

<script> Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3] </script>ログイン後にコピー

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

<script> Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3] </script>
ログイン後にコピー