Comparative introduction to Set and Map in es6 (with code)
This article brings you a comparative introduction to Set and Map in es6 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Set
1. add() method and size attribute
{ let list = new Set(); // add()方法向Set数据添加元素 list.add(5); list.add(7); // size属性返回数据的长度 console.log(list.size); // 2 let arr = [1, 2, 3, 4, 5]; let set = new Set(arr); console.log(set, set.size); // Set(5) {1, 2, 3, 4, 5} 5 }
2.Set elements must Is the only one
{ let list = new Set(); list.add(1); list.add(2); list.add(1); // 重复元素不会添加进去 console.log(list); // Set(2) {1, 2} // 数组去重 let arr = [1, 2, 3, 1, '2']; let list2 = new Set(arr); console.log(list2); // Set(4) {1, 2, 3, "2"} }
3.has(),delete(),clear()
{ let arr = ['add', 'delete', 'clear', 'has']; let list = new Set(arr); console.log(list.has('add')); // true list.delete('add'); console.log(list); // Set(3) {"delete", "clear", "has"} list.clear(); console.log(list); // Set(0) {} }
4.Set traversal
{ let arr = ['add', 'delete', 'clear', 'has']; let list = new Set(arr); // Set结构的数据,key和value是同一个值 for (let value of list) { console.log('value', value); // 'add' 'delete' 'clear' 'has' } for (let key of list.keys()) { console.log('keys', key); // 'add' 'delete' 'clear' 'has' } for (let value of list.values()) { console.log('values', value); // 'add' 'delete' 'clear' 'has' } for (let [key, value] of list.entries()) { console.log('entries', key, value); } list.forEach(function (item) { console.log(item); // 'add' 'delete' 'clear' 'has' }); }
WeakSet
The difference between WeakSet and Set:
The elements of WeakSet can only be objects, not numerical values, strings, or Boolean values. ...
The objects in WeakSet are all weak references, and the garbage collection mechanism does not consider WeakSet's reference to the object. The references in WeakSet are not counted in the garbage collection mechanism, so they will not cause memory leaks. Therefore, WeakSet is suitable for temporarily storing a group of objects and storing information bound to the objects. As long as these objects disappear externally, their references in WeakSet will automatically disappear.
{ let weakList = new WeakSet(); let arg = {name: 'hhh'}; weakList.add(arg); // WeakSet的元素只能是对象 // weakList.add(2); // Uncaught TypeError: Invalid value used in weak set console.log(weakList); // WeakSet {{name: 'hhh'}} // 注意:WeakSet没有size属性,没有clear方法,不能遍历。其他的用法和Set相同 }
Map
1.set() method and get() method
{ let map = new Map(); let arr = ['123']; // Map的key可以是任意数据类型 map.set(arr, 456); // map.set(key, value),这里用数组作为key,添加一个值为456的元素 console.log(map.get(arr)); // 456 }
2.Map Another way to define
{ let map = new Map([['a', 123], ['b', 456]]); // 接收一个数组作为参数,数组的每一项为:[key,value] console.log(map); // Map(2) {"a" => 123, "b" => 456} console.log(map.size); // 2 console.log(map.has('b')); // true map.delete('a'); console.log(map); // Map(1) {"b" => 456} map.clear(); console.log(map); // Map(0) {} }
WeakMap
The difference between WeakMap and Map:
The key of WeakMap can only be an object
The objects referenced by the key names of WeakMap are weak references, and the garbage collection mechanism does not consider references to this object. (Note that WeakMap only weakly references the key name, not the key value. The key value is still a normal reference.) Basically, if you want to add data to the object and do not want to interfere with the garbage collection mechanism, you can use WeakMap.
{ let weakmap = new WeakMap(); let o = {}; weakmap.set(o, 123); console.log(weakmap.get(o)); // 123 // 注意:WeakMap没有size属性,没有clear方法,不能遍历。类似于Set与WeakSet的区别 }
Comparison of Set, Map and Array, Object
Comparison of Map and Array
{ // 数据结构横向对比,增 查 改 删 let map = new Map(); let array = []; // 增 map.set('t', 1); array.push({'t': 1}); console.log(map, array); // {"t" => 1} [{'t': 1}] // 查 let map_exist = map.has('t'); let array_exist = array.find(item => item.t); console.log(map_exist, array_exist); // true {t: 1} // 改 map.set('t', 2); array.forEach(item => item.t ? item.t = 2 : ''); console.log(map, array); // {"t" => 2} [{'t': 2}] // 删 map.delete('t'); let index = array.findIndex(item => item.t); array.splice(index, 1); console.log(map, array); // {} [] }
Comparison of Set and Array
{ let set = new Set(); let array = []; let item = {'t': 1}; // 增 set.add(item); array.push(item); console.log(set, array); // {{'t': 1}} [{'t': 1}] // 查 let set_exist = set.has(item); let array_exist = array.find(item => item.t); console.log(set_exist, array_exist); // true {t: 1} // 改 set.forEach(item => item.t ? item.t = 2 : ''); array.forEach(item => item.t ? item.t = 2 : ''); console.log(set, array); // {{'t': 2}} [{'t': 2}] // 删 set.forEach(item => item.t ? set.delete(item) : ''); let index = array.findIndex(item => item.t); array.splice(index, 1); console.log(set, array); // {} [] }
Comparison of Map, Set and Object
{ let item = {t: 1}; let map = new Map(); let set = new Set(); let obj = {}; // 增 map.set('t', 1); set.add(item); obj['t'] = 1; console.log(obj, map, set); // {t: 1} Map(1) {"t" => 1} Set(1) {{t: 1}} // 查 console.log(map.has('t'), set.has(item), 't' in obj); // true true true // 改 map.set('t', 2); item.t = 2; obj['t'] = 2; console.log(obj, map, set); // {t: 2} Map(1) {"t" => 2} Set(1) {{t: 2}} // 删 map.delete('t'); set.delete(item); delete obj['t']; console.log(obj, map, set); // {} Map(0) {} Set(0) {} }
Recommendation:
-
Use map first instead of array, especially for complex data structures
Consider data uniqueness, use set, abandon array and obj
The above is the detailed content of Comparative introduction to Set and Map in es6 (with code). For more information, please follow other related articles on the PHP Chinese website!

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version
Useful JavaScript development tools