JavaScript replacement 6: key value vs. data

Introduction

The data structure of “key value pair” is basically used before{}There is a more suitable choice in the new specification.

LastJavaScript replacement 5: function nesting。

• Origin
• My GitHub

Es5 mode

Basic Usage

use{}Store key value pairs. Only two types of keys are supported:StringandSymbol 。

const obj1 = {1:'1'};
const obj2 = {'name':'Tom'};
const mark = Symbol('age');
const obj3 = {[mark]:19};
console.log(obj1);
console.log(obj2);
console.log(obj3);

result

aboveobj1Although the key name of is a number, it will be converted to a string.

operation

Add / modify

Add and modify usage.or[]How to do this:

const obj = {};
obj.name = 'Tom';
obj['name'] = 'Jim';

aboutSymbolKey value of type, must use[]It’s the best way.

read

Similar to adding.or[]How to do this:

const mark = Symbol('age');
const obj = {name:'Tom',};
obj[mark] = 19;
console.log(obj.name);
console.log(obj[mark]);

delete

Delete usedeleteOperator:

const mark = Symbol('age');
const obj = {name:'Tom',};
obj[mark] = 19;
delete obj.name;
delete obj[mark];
console.log(obj);

ergodic

The common traversal methods are as follows:for-in ，for-of ：

let obj = {name:'Tom',1:'1'};
const mark = Symbol('age');
obj[mark] = 19;
for (const ele of Object.keys(obj)) {
  console.log(ele);
}

// 1
// name

The key of this data structure is unordered. In addition, if the key isSymbolType, cannot be traversed.

Es2015 + mode

In order to solve the problem of key types mentioned above, map data structure is provided in es2015 +. Map structure provides value value correspondence, which is more suitable for storing key value pairs.

Basic Usage

const m = new Map([
  [1,'1'],
  ['name','Tom'],
  [Symbol('age'),19],
  [{other:'play'},'basketball'],
]);
console.log(m);
console.log(m.size);

result

Basic attributes of map data structuresizeIs the total number of members.

operation

Add / modify

set(key, value)Method setting keykeyThe corresponding value isvalue, and returns the entire map structure, so it can be called chain. IfkeyIf it already exists, the key value will be updated.

const m = new Map();
m.set(1,'1').set('name','Tom');
const mark = Symbol('age');
m.set(mark,19);
const obj = {other:'play'};
m.set(obj,'basketball');
console.log(m);

read

get(key)Method readkeyThe corresponding value, if not foundkey, backundefined 。

const m = new Map([
  ['name','Tom'],
]);
const mark = Symbol('age');
m.set(mark,19);

console.log(m.get('name'));
console.log(m.get(mark));

delete

delete(key)Method delete keykeyIf the deletion is successfultrueOtherwise, returnfalse 。

const m = new Map([
  ['name','Tom'],
]);

const result = m.delete('name');
console.log(result) // true
console.log(m.delete('age')) // false

other

• has(key): to determine whether there is a keykey 。
• clear(): clear all members.

ergodic

The common traversal methods are as follows:forEach ，for-of ：

const m = new Map([
  ['name','Tom'],
  [1,'1'],
  [Symbol('age'),19],
  [{other:'play'},'basketball'],
]);
for (const ele of m.keys()) {
  console.log(ele);
}

// name
// 1
// Symbol(age)
// {other: "play"}

The key names are ordered,SymbolType can also be traversed to.

difference

dimension	Map	Object
Unexpected key	By default, there are no keys, only explicitly inserted keys.	The key name on the prototype chain may conflict with the set key name.
Type of key	The key can be any value.	The key must be a string or symbol.
Key order	Order	disorder
Key statistics	Get it through the size attribute	To calculate manually
iteration	Maps can be iterated directly.	In some way (e.g Object.keys (obj)) can be iterated only after processing.
performance	It performs better in the scene of frequent addition and deletion of key value pairs.	In the scenario of frequent addition and deletion of key value pairs, no optimization is made.

reference material

• Map MDN
• WeakMap MDN
• Map