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

집

웹 프론트엔드

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>
```
은 DOM 노드를 저장하는 데 사용할 수 있습니다. 노드가 삭제되면
weakSet의 내용은 이 노드에 대한 다른 참조가 없으면 재활용됩니다.
위 내용은 ES6의 새로운 기능인 JavaScript의 Set 및 WeakSet 유형 데이터 구조에 대한 코드와 기타 관련 내용에 대한 자세한 소개입니다. PHP 중국어 웹사이트를 참고하세요. (www.php.cn)!

성명

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

관련 기사

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

JavaScript 엔진 이해 : 구현 세부 사항Apr 17, 2025 am 12:05 AM

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.