JavaScript replacement 6: key value vs. data

Time:2021-1-19

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

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

JavaScript replacement 6: key value vs. data

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-infor-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

JavaScript replacement 6: key value vs. data

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:forEachfor-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

Recommended Today

Rust programming video tutorial (Advanced) – 024_ 3 syntax of all modes 3

Video address Headline address:https://www.ixigua.com/i677586170644791348…Station B address:https://www.bilibili.com/video/av81202308/ Source address GitHub address:https://github.com/anonymousGiga/learn_rus… Explanation content 1. Ignore values in mode(1) Use_ Ignore entire valueexample: fn foo(_: i32, y: i32) { println!(“This code only uses the y parameter: {}”, y); } fn main() { foo(3, 4); } Note: placeholders are used for parameters in the function, mainly when implementing […]