지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > ES6 새로운 기능 - JavaScript의 Set 및 WeakSet 유형 데이터 구조에 대한 자세한 코드 소개

ES6 새로운 기능 - JavaScript의 Set 및 WeakSet 유형 데이터 구조에 대한 자세한 코드 소개

黄舟
풀어 주다： 2017-03-07 14:15:21
원래의
1309명이 탐색했습니다.

ES6에서는 새로운 데이터 구조인 Set을 제공합니다. Set 객체는 배열이 아니며 객체 또는 기본 유형을 저장하는 데 사용할 수 있습니다. ​​유일한 Chrome 브라우저>38 및 FF>13과 nodeJS는 Set을 잘 지원합니다. 다음 코드 중 일부는 콘솔에 복사할 수 있습니다.

Set 인스턴스를 생성하는 기본 방법은 다음과 같습니다.

let set = new Set(); //或者 new Set(null);
console.log(set);
로그인 후 복사

또는 다음과 같습니다.

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

보시다시피 위에서 반복된 4번만 저장됩니다. set One에서는 Set 개체를 사용하여 배열을 중복 제거할 수 있습니다.

Set을 사용하여 NaN을 저장하고 정의되지 않은 경우도 있습니다. , Set은 NaN이 하나만 있다고 생각할 것입니다(실제로는 NaN!=NaN);

인스턴스 Set 이후의 개체에는 다음과 같은 속성 및 메서드가 있습니다:

속성

Set.prototype
Set.prototype.size

방법

Set. 프로토타입.add()
설정.prototype.clear()
Set.prototype.delete()
Set.prototype.entries()
Set.prototype.forEach()
설정. 프로토타입.has()
Set.prototype.values()
Set.prototype[@@iterator]()

Set실제로 이러한 유형의 데이터 구조를 배열으로 시뮬레이션합니다. 원본과 비교할 수는 없지만 위 목록의 메서드 및 속성 중 일부만 시뮬레이션할 수 있습니다. 또한 실현할 수 없는 기능도 있습니다. Set 인스턴스의 [Symbol.species]는 자신을 가리키지만 크롬에는 [Symbol.species] 같은 것이 없습니다...)

배열을 사용하세요 Set 생성자를 시뮬레이션하려면: 

<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>
로그인 후 복사

인스턴스 속성 설정:

size 속성 :size는 이 Set의 길이를 나타내며 배열의 길이와 동일한 효과가 있습니다. "
constructor 속성: 이 속성은 Set 생성자를 가리키며 이 코드를 구현할 수 있습니다(새 Set).constructor === Set //출력: true

Set 인스턴스 메서드:

add 메소드, 세트에 데이터 추가; 

<script>
    Array.from((new Set([1,2])).add(3)); // 输出：[1, 2, 3]
</script>
로그인 후 복사

clear 메소드, 세트의 데이터 지우기 

let set = (new Set([1,2,3,4]));
set.clear();
Array.from(set);
로그인 후 복사

delete 메소드, 세트에서 지정된 데이터 삭제: 

let set = (new Set([1,2,3,4]));
set.delete(1);
Array.from(set); //输出：[2, 3, 4]
로그인 후 복사

항목 방법: 

let set = (new Set([1,2,3,4]));
Array.from(set.entries());
로그인 후 복사

forEach 방법: set의 forEach에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 함수이고 두 번째 매개변수는 필요하지 않습니다. 두 번째 매개변수가 전달되면 함수의 컨텍스트 this는 다음과 같습니다. 전달하는 두 번째 매개변수: 

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

출력:

에는 이 집합이 지정된 값을 가지고 있는지 확인하고 false 또는 true를 반환하는 메서드가 있습니다. 🎜>

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

keys 메서드와 value() 메서드는 모두 반복자를 반환합니다. 

<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>
로그인 후 복사

@@iterator() 메서드는 @iterator 메서드가 set의 기본 반복자입니다.

<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>
로그인 후 복사

실제로 set[Symbol.iterator]를 재정의할 수 있지만 Impact 세트의 키와 값 메서드에는 영향을 미치지 않습니다.

전체 데모:

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()方法，手动去获取每一个值;
로그인 후 복사

Set의 실제 사용:

교집합과 합집합을 편리하게 수행하려면 set을 사용하세요.

합집합을 찾으면 두 가지 이상의 해결책이 제공될 수 있습니다. 

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)));
}
로그인 후 복사

이 방법으로 교차점을 얻습니다. 

var intersect = (set1, set2) => {
    //return [x for (x of set1) if (set2.has(x))]; 这种写法完全不行嘛....
    var resultSet = new Set();
    for(let set of set1) {
        if(set2.has(set)) {
            resultSet.add(set);
        };
    };
    return resultSet;
};
로그인 후 복사

다음 코드는 더 짧고 멋지네요. 이 메서드는 http://es6.ruanyifeng.com/#docs/set-map;

var intersect = (set1, set2) => {
    return new Set([...set1].filter(x => set2.has(x)));
}
console.log(intersect(new Set([1,2,3,4]), new Set([2,3,4,5]))); //输出：Set {2,3,4}
로그인 후 복사
에서 제공됩니다.

약하게 참조됨

WeakSet

WeakSet 객체는 객체 값의 모음이며, 그 안의 각 객체 값은 WeakSet의 요소만 저장할 수 있습니다. 객체 유형 (예: Object, Array , Function 등), WeakSet<🎜의 약한 참조 포함 >, 다른 객체가 해당 객체를 참조하지 않으면 해당 객체는 자동으로 재활용됩니다. 

<script>
    console.log(new WeakSet([{},[],()=>({1:1})]));
</script>
로그인 후 복사
WeakSet 객체에는 세 가지 메서드만 있습니다. 크기 속성이 없습니다.

  • weakSet.has();

  • 객체에 참조가 없는 경우 WeakSet은 개체는 참조되지 않은 개체가 차지한 메모리를 회수합니다. 다음 데모를 실행한 후 잠시 후(제 크롬 브라우저

    10S에서 효과를 볼 수 있습니다) 콘솔을 다시 살펴보세요. 

    <script>
var ws = new WeakSet()
var obj = {}; ws.add(obj);
ws.add([])
setInterval(()=>{
    console.log(ws);
},1000)
</script>
    로그인 후 복사
    weakSet
  • 은 DOM 노드를 저장하는 데 사용할 수 있습니다. 노드가 삭제되면

    weakSet의 내용은 이 노드에 대한 다른 참조가 없으면 재활용됩니다.

    위 내용은 ES6의 새로운 기능인 JavaScript의 Set 및 WeakSet 유형 데이터 구조에 대한 코드와 기타 관련 내용에 대한 자세한 소개입니다. PHP 중국어 웹사이트를 참고하세요. (m.sbmmt.com)!

관련 라벨：
ES6，JavaScript，WeakSet
원천：php.cn
이전 기사：코드를 더욱 깔끔하게 만들기 위해 JavaScript에서 바인딩() 메서드를 사용하는 방법에 대한 자세한 소개 다음 기사：ES6 새로운 기능: JavaScript의 Reflect 객체 코드에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2184
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2331
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1961
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1845
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1897
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿