ホームページ > 記事 > ウェブフロントエンド > ES6 の新機能 - JavaScript の Set 型および WeakSet 型データ構造の詳細なコードの紹介

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

黄舟オリジナル: 2017-03-07 14:15:211243ブラウズ

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 までご連絡ください。

前の記事：JavaScript での binding() メソッドを使用してコードをクリーンにする方法の詳細な紹介次の記事：JavaScript での binding() メソッドを使用してコードをクリーンにする方法の詳細な紹介

続きを見る

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

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

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

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))); }

関連記事

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

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

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

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))); }

関連記事

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))); }