SoFunction
Updated on 2025-04-13

Common methods and operations of set in javascript

Preface

In JavaScript,Setis a built-in data structure for storageUnique valuecollection.SetObjects allow you to store values ​​of any type, whether it is a primitive type or object type. The following isSetCommon methods and operations:

1. Create a Set:

You can passnew Set()To create a new oneSetObject.

const mySet = new Set();

2. Add elements to Set:

use.add()Methods can be used toSetAdd elements to  .

(1);       // Set { 1 }
(5);       // Set { 1, 5 }
(1);       // Set { 1, 5 } (1 already exists and will not be added repeatedly)('hello'); // Set { 1, 5, 'hello' }

3. Check whether there is a certain value in Set:

use.has()Method to check if a value is inSetmiddle.

((1));    // true
((10));   // false

4. Delete the elements in Set:

use.delete()Methods can delete an element.

(5);    // true
(mySet); // Set { 1, 'hello' }

5. Get the size of Set:

use.sizeAttributes can be obtainedSetThe number of elements.

(); // 2

6. Clear Set:

use.clear()Methods can be clearedSetAll elements in  .

();
(); // 0

7. Traversal Set:

You can useforEach()orfor...ofLoop to traverseSet

PS: [1, 2, 3, 'a', 'b'] is an array.

const anotherSet = new Set([1, 2, 3, 'a', 'b']);

// Use forEach to traverse(value => {
  (value);
});

// Use for...of to traversefor (let value of anotherSet) {
  (value);
}

8. Conversion of Set and array:

You can easily putSetConvert to an array, or convert the array toSet

// Set to arrayconst setArray = [...anotherSet]; // [1, 2, 3, 'a', 'b']

// Convert the array to Setconst array = [1, 2, 2, 3, 4];
const arraySet = new Set(array); // Set { 1, 2, 3, 4 }

9. Deduplicate values ​​in the array:

UtilizeSetThe uniqueness of   you can quickly remove duplicates in an array.

const numbers = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3, 4, 5] First convert the data to set, and then convert the set to an array.

The difference between set and map:

1. Storage type:

  • Set: Store onlyUnique value, does not store key-value pairs. Each element is a value and cannot be repeated.

    const mySet = new Set(); 
    (1); 
    (2); 
    (2); // Cannot add duplicate values(mySet); // Set { 1, 2 }
  • Map: What is storedKey-value pairs. Each element has a key and a corresponding value, and the key can be of any type (including objects).

    const myMap = new Map(); 
    ('key1', 'value1'); 
    ('key2', 'value2'); 
    (myMap); // Map { 'key1' => 'value1', 'key2' => 'value2' }

2. Uniqueness of elements:

  • Set: Duplicate values ​​cannot be stored. Set ensures that each element in the collection is unique.

    const set = new Set([1, 1, 2, 3]); 
    (set); // Set { 1, 2, 3 } (1 Will not repeat)
  • Map: The key must be unique, but different keys can correspond to the same value. Repeated values ​​are allowed in the Map, as long as the keys are different.

    const map = new Map(); 
    ('a', 1); 
    ('b', 1); // Same value, different keys(map); // Map { 'a' => 1, 'b' => 1 }

3. Use of keys and values:

  • Set: Only values, no keys. Each value is inSetAll are the only elements.

    const set = new Set([1, 2, 3]); 
    (value => (value)); // The value is traversed
  • Map: Each element has keys and values, use.set(key, value)To add key-value pairs, use.get(key)to get the corresponding value.

    const map = new Map(); 
    ('name', 'Alice'); 
    ('age', 30); 
    (('name')); // 'Alice'

4. Iteration:

  • Set:TravelSetWhen you can only traverse the values.

    const set = new Set([1, 2, 3]); 
    for (let value of set) { 
      (value); // 1, 2, 3 
    }
  • Map:TravelMapYou can traverse keys, values ​​or key-value pairs.

    const map = new Map([['key1', 'value1'], ['key2', 'value2']]); // traversal keyfor (let key of ()) { 
      (key); // key1, key2 
    } // traversal valuefor (let value of ()) { 
      (value); // value1, value2 
    } // traverse key-value pairsfor (let [key, value] of ()) { 
      (key, value); // key1 value1, key2 value2 
    }

5. Method:

  • Set

    • .add(value):TowardsSetAdd value to  .
    • .delete(value):deleteSetvalue in  .
    • .has(value):examineSetIs there a certain value in  ?
    • .clear(): ClearSet
    • .size: ObtainSetSize.
  • Map

    • .set(key, value):TowardsMapAdd key-value pairs to  .
    • .get(key): Get the corresponding value through keys.
    • .delete(key): Delete a key-value pair.
    • .has(key):examineMapIs there a key in it?
    • .clear(): ClearMap
    • .size: ObtainMapSize.

6. Usage scenarios:

  • Set: Suitable for processingUnique value setScenarios such as array deduplication and storing a set of values ​​without duplication.

    const uniqueValues = new Set([1, 2, 2, 3, 4]); // Set { 1, 2, 3, 4 }
  • Map: Suitable for needsKey-value pairsStored scenarios, such as cache, dictionary, associative array, etc.

    const dictionary = new Map(); 
    ('apple', 'A fruit'); 
    ('car', 'A vehicle');

Summarize:

  • SetUsed to store a unique set of values, no keys.
  • MapUsed to store key-value pairs, the key and value can be of any type.

This is the introduction to this article about the common methods and operations of set in JavaScript. For more related content on set usage in JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!