Is Set for ES6?

青灯夜游
Release: 2022-05-05 14:37:02
Original
1485 people have browsed it

Set is a new feature of ES6. Set is a new data structure in ES6. It is an ordered list collection, similar to an array, but its member values ​​are unique and there are no duplicate values; the traversal order of set is the insertion order, and set saves a function list When called, the calls are made in the specified order, so the set type is ordered.

Is Set for ES6?

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Set is a new feature of ES6.

Set is a new data structure provided by ES6, which is similar to an array, but the values ​​of the members are unique and there are no duplicate values.

Set itself is a constructor used to generate the Set data structure.

// 创建Set实例
let set1 = new Set();                           // {}
let set2 = new Set([1,2,{name:'杰克'}]);        // {1,2,{name:'杰克'}}
Copy after login

The set type is a new ordered list collection in es6, which contains some independent non-repeating values; the traversal order of set is the insertion order. When a function list saved by set is called, it is in accordance with Calls are made in the specified order, so the set type is ordered.

Add, delete, modify and check the Set

Example of Set regarding the method of adding, deleting, modifying and checking:

  • add()

  • delete()

  • has()

  • clear()

add()

Add a value and return the Set structure itself

When the added instance already exists element, set will not process the addition

s.add(1).add(2).add(2); // 2 is only added once

delete ()

Delete a value and return a Boolean value, indicating whether the deletion is successful

s.delete(1)
Copy after login

has()

Return a Boolean Value, determine whether the value is a member of Set

s.has(2)
Copy after login

clear()

Clear all members, no return value

s.clear()
Copy after login

Set traversal

The methods for traversing Set instances are as follows:

Regarding the traversal methods, they are as follows:

  • keys(): Returns the traverser of key names

  • values(): Returns the traverser of key values ​​

  • entries(): Returns Key-value pair traverser

  • forEach(): Use the callback function to traverse each member

The traversal order of Set is insertion Sequence

The keys method, values ​​method, and entries method return all traverser objects

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
Copy after login

forEach() is used to perform some operation on each member and has no return value. The key values ​​and key names are equal. The same forEach method has a second parameter, which is used to bind the processing function this

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
Copy after login

The expansion operator and the Set structure are combined to achieve array or string deduplication

// 数组
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]
// 字符串
let str = "352255";
let unique = [...new Set(str)].join(""); // ""
Copy after login

Realize union, intersection, and difference set

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// (a 相对于 b 的)差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
Copy after login

Expand knowledge:

  • ##Ordinary array and Set instances Mutual conversion

1. Convert array to Set instance

let arr = [1,2,3];
let set = new Set(arr);// {1,2,3}
Copy after login

2. Convert Set instance to array

let set = new Set([1,2,3]);// {1,2,3}

// 方式一 扩展运算符
let arr = [...set];// [1,2,3]

// 方式二 Array.from方法
let arr = Array.from(set);// [1,2,3]
Copy after login
[Related recommendations:

javascript video tutorialweb front-end

The above is the detailed content of Is Set for ES6?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template