es6学习之map和set

lvzishen 发布于2019-08-23 16:48 / 1084人阅读

摘要：和定义一组键值对的集合它是一组键值对的数据结构，由于之前的键必须是字符串。

Map和Set Map 定义：一组键值对的集合

它是一组键值对的数据结构，由于之前javascript的键（key）必须是字符串。为了使键可以是多种类型的于是在最新的es6中引入了map这种数据结构，这样可以加快查询速度，类似于查字典

方法和属性

var m = map() //空map
m.set("学生年龄",6 ) //添加一对新的key-value
m.has("学生年龄") //是否存在key学生年龄 true
m.get("学生年龄") //拿到值 6
m.delete("学生年龄") // 删除key学生年龄
m.clear()    //清除所有成员 没有返回值
m.size() // 返回map结构的成员总数 1

需要注意的是如果多次对相同key值插入value，前一次的value值会被覆盖

map中的键实际是对内存地址的引用，举例说明

var k1 = 222；
var k2 = 222；
map
.set(k1, 123);
.set(k2, 222);

map.get(k1); // 123    
map.get(k2); // 222

因此如果键值是对象的话就算值相同也是两个不同的键，如果是简单类型的话（number，boolean，string），只要值相等，就是同一个键，0和-0也被map视为同一键，NaN也是同一键

遍历map的方法

keys（）：返回键名的遍历器

values（）：返回键值的遍历器

entries（）：返回所有成员的遍历器

forEach（）：遍历所有map成员

map遍历的顺序就是插入的顺序

使用实例

var m = new map(
    ["F", "no"],
    ["t", "yes"]
);

for(let key of map.keys()) {
    console.log(key);
}
// f,t

for(let key of map.values()) {
    console.log(key);
}
// no, yes

for(let key of map) {
    console.log(key[0], key[1]);
}
// f no
// t yes

map.forEach( res => {
    console.log(res[0], res[1]);
});
// f no
// t yes

forEach方法还可以接受第二个参数，用来绑定this。

类型转换

[ ] map如何转换为数组

运用扩展运算符可以很方便的转换

var m = map;
m.set("a", 1);
m.set("b", 2);

[...map];
// [["a",1], ["b",2]];

[ ] 数组转换为map

new Map([[true, 7], [{foo: 3}, ["abc"]]])
// Map {true => 7, Object {foo: 3} => ["abc"]}

[ ] map转化为对象

如果键都是字符串

function mapToObj(strMap) {
    let obj = Object.create(null);
    for(let [k,v] of strMap) {
        obj[k] = v
    }
    return obj;
}

let map = new Map().set("yes",111);
mapToObj(map);
// {yes: 111};

[ ] 对象转为map

function objToMap(obj) {
    let map = new Map();
    for(let k of obj.keys()) {
        map.set(k.obj[k]);
    }
    return map;
}

objToStrMap({yes: true, no: false});
// [ [ "yes", true ], [ "no", false ] ]

[ ] map转化为json

如果map键名都是字符串的话，可以转化为对象json

function mapToJson(strMap) {
    return JSON.stringify(mapToObj(strMap)); // map转化为对象在转化为json    
}

let map = new Map().set("yes", 111);
strMapToJson(myMap)
// "{"yes":true,"no":false}"

如果键名时非字符串的话，转化为数组json

function mapToJson1(strMap) {
    return JSON.stringify([...strMap]); //map转化为数组在转化为数组json
}

let myMap = new Map().set(true, 7).set({foo: 3}, ["abc"]);
mapToArrayJson(myMap)
// "[[true,7],[{"foo":3},["abc"]]]"

json转化为map同理只是return的是JSON.parse()方法也分为键名是字符串和非字符串

Set 特点

类型于数组。但是它的成员值都是唯一的，可以用来做数组去重

构造函数

var a = new Set([1,2,2,3,4,555,5,5,6]);
[...a];
// [1,2,3,4,555,6];

这是一个数组去重的例子在set内部如果有两个NAN会去掉一个

方法

add（value）: 添加值返回set结构本身

delete（value）：删除某个值返回布尔值表示是否删除成功

has（value）：返回布尔值表示该值是否为set的成员

clear（）：清除所有成员

数组去重的两种方法

var arr = [1,2,3,4,4,5];
var aSet = new Set(arr);
[...aSet];
//[1,2,3,4,5] 

var bSet = new Set(arr);
arr = Array.from(bSet); // [1,2,3,4,5]

由于set的keys（）和values（）完全一样所以无法通过set[xxx]的方式找到其内部的值，

遍历set的方法

keys（）：返回键名和遍历器

values（）：返回键值和遍历器

entires（）：返回键值对的遍历器

forEach（）：使用回调函数遍历每个成员

  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"]

forEach对空数组不会执行回调函数

云服务器 GPU云服务器学习之substr() 深度学习之概要 webrtc学习之九 linux学习之centos

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103305.html

ES6学习之 -- 解构（使数据访问更便捷）

摘要：数组的解构赋值规定允许按照一定模式，从数组和对象中提取值对变量进行赋值，我们称之为解构。的规则是，只要有可能导致解构的歧义，就不得使用圆括号。数组的解构赋值 ES6规定：允许按照一定模式，从数组和对象中提取值对变量进行赋值，我们称之为解构。以前赋值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允许以下这种做法 let [a, b, c] = ...

mrcode 2019-08-21 18:32 评论0 收藏0
ES6学习之 -- Set数据结构

摘要：类似于数组，但是中不存在重复元素。可以接受一个数组或者其他具有接口的数据结构作为参数从上面的代码可以看出有去重的功能。去重还有另一个方法将数据结构的数据转换成数组。清除实例的指定成员。返回一个布尔值，表示某个值是否在实例之中。 Set Set类似于数组，但是Set中不存在重复元素。Set可以接受一个数组（或者其他具有itarable接口的数据结构）作为参数 const set = ne...

wawor4827 2019-08-21 18:34 评论0 收藏0
Vim入门学习之二(cheat sheet)

摘要：有种东西学了记不住，是正则表达式，就是了。最近在用写个，我一个按键盘的，又没什么太多的闲钱去购买高大上的，不得已开始用上了学的好多遍都没学会的。有10种东西学了记不住，00是正则表达式，10就是Vim了。最近在用python写个side project，我一个按键盘的，又没什么太多的闲钱去购买高大上的IDE，不得已开始用上了学的好多遍都没学会的Vim。Vim有多牛X，随便问一个代码...

Shimmer 2019-07-31 10:49 评论0 收藏0
Vim入门学习之二(cheat sheet)

摘要：有种东西学了记不住，是正则表达式，就是了。最近在用写个，我一个按键盘的，又没什么太多的闲钱去购买高大上的，不得已开始用上了学的好多遍都没学会的。有10种东西学了记不住，00是正则表达式，10就是Vim了。最近在用python写个side project，我一个按键盘的，又没什么太多的闲钱去购买高大上的IDE，不得已开始用上了学的好多遍都没学会的Vim。Vim有多牛X，随便问一个代码...

muzhuyu 2019-06-28 10:13 评论0 收藏0
Java 容器学习之 HashMap

摘要：底层的数据结构就是数组链表红黑树，红黑树是在中加进来的。负载因子哈希表中的填满程度。前言把 Java 容器的学习笔记放到 github 里了，还在更新~其他的目前不打算抽出来作为文章写，感觉挖的还不够深，等对某些东西理解的更深了再写文章吧Java 容器目录如下： Java 容器一、概述二、源码学习 1. Map 1.1 HashMap 1.2 LinkedHashM...

Alex 2019-08-15 18:01 评论0 收藏0