ES6 새로운 기능 - JavaScript의 Set 및 WeakSet 유형 데이터 구조에 대한 자세한 코드 소개-JS 튜토리얼-php.cn

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

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

인스턴스 속성 설정:

Set 인스턴스 메서드:

WeakSet

집

웹 프론트엔드

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

로그인 후 복사

또는 다음과 같습니다.

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 중국어 웹사이트를 참고하세요. (www.php.cn)!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7471

Cakephp 튜토리얼

1377

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

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: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 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 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.

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 유형 데이터 구조에 대한 자세한 코드 소개

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

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

인스턴스 속성 설정:

Set 인스턴스 메서드:

WeakSet

핫 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 버전

뜨거운 주제