Vue--set和map_vue map转数组-程序员宅基地

技术标签: javascript高级 es5/es6  

1.set
2.map
含义:Javascript的对象 (Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。
ES6提供了Map数据结构,它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。

const m = new Map();
const o = {p : 'Hello World'};
m.set(o,'content');
document.writeln(m.get(o));
document.writeln(m.has(o));
document.writeln(m.delete(o));
document.writeln(m.has(o));

这里写图片描述

const map = new Map([
    ['name','张三'],
    ['title','Author']
]);
console.log('map = ',map);
console.log(`map.size = ${map.size}`);
console.log(`map.has('name') = ${map.has('name')}`);
console.log(`map.get('name') = ${map.get('name')}`);
console.log(`map.has('title') = ${map.has('title')}`);
console.log(`map.get('title') = ${map.get('title')}`);

这里写图片描述

实例的属性和操作方法
(1)size属性
size属性返回Map结构的成员总数。

const map = new Map();
map.set('foo',true);
map.set('bar',false);
document.writeln(map.size);         //  2

(2)set(key,value)
set方法设置键名key对应的键值为value,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成改建。

const m = new Map();
m.set('edition',6);             //..键是字符串
m.set(262,'standard');          //..键是数值
m.set(undefined,'nah');         //..键是undefined
console.log(m);

这里写图片描述
set方法返回的是当前的Map对象,因此可以采用链式写法。

let map = new Map()
    .set(1,'a')
    .set(2,'b')
    .set(3,'c');
    console.log(map);

这里写图片描述
(3)get(key)
get方法读取key对象的键值,如果找不到key,返回undefined。

const m = new Map();
const hello = function(){
    console.log('hello');};
m.set(hello,'Hello ES6!');                      //..键是函数
console.log(m);
console.log(m.get(hello));

这里写图片描述

(4)has(key)
has方法返回一个布尔值,表示某个键是否在当前Map对象之中。
const m = new Map();
m.set('edition',6);
m.set(262,'standard');
m.set(undefined,'nah');

console.log(m.has('edition'));                       //..true
console.log(m.has('years'));                      //..false
console.log(m.has(262));                       //..true
console.log(m.has(undefined));                       //..

(5)delete(key)
delete方法删除某

const m = new Map();
m.set(undefined,'nah');
console.log(m.has(undefined));                                   //  true

m.delete(undefined);
console.log(m.has(undefined));                                  //  false */

(6)cleart()
clear方法清除所有成员,没有返回值

let map = new Map();
map.set('foo',true);
map.set('bar',false);
document.writeln(map.size);                         //  2
map.clear();
document.writeln(map.size);                         //  0 */

遍历方法
Map结构原生提供三个遍历器生成函数和一个遍历方法。
keys():返回键名的遍历器。
values():返回键值的遍历器
entries:返回所有成员的遍历器
forEach():遍历的Map的所欲成员

const map = new Map([
    ['F','no'],
    ['T','yes']
]);

for(let key of map.keys()){
    console.log(key);
}

for(let value of map.values()){
    console.log(value);
}

for(let item of map.entries()){
    console.log(item[0],item[1]);
}

// 或者
for(let [key,value] of map.entries()){
    console.log(key,value);
}

// 等同于使用map.entries()
for(let [key,value] of map){
    console.log(key,value);
}

这里写图片描述

map结构转为数组结构,比较快速的方法是使用扩展运算符(…)。

这里写代码片const map = new Map([
    [1,'one'],
    [2,'two'],
    [3,'three'],
]);

console.log([...map.keys()]);
console.log([...map.values()]);
console.log([...map.entries()]);
console.log(...map);

这里写图片描述

结合数组的map方法,filter方法,可以实现Map的遍历和过滤

const map0 = new Map().set(1,'a').set(2,'b').set(3,'c');
const map1 = new Map(
    [...map0].filter(([k,v]) => k < 3)
);
console.log(map1);

const map2 = new Map(
    [...map0].map(([k,v]) => [k * 2,'_' + v])
);

console.log(map2);

这里写图片描述

此外,Map还有一个forEach方法,与数组的forEach方法类似,也可以实现遍历

const map = new Map().set(1,'a').set(2,'b').set(3,'c');
map.forEach(function(value,key,map){
    console.log("Key:%s,Value:%s",key,value);
});

这里写图片描述

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

const map = new Map().set(1,'a').set(2,'b').set(3,'c');
const reporter = {
    report : function(key,value){
    
        console.log("Key:%s,Value:%s",key,value);
    }
};

map.forEach(function(value,key,map){
    
    this.report(key,value);
},reporter);

这里写图片描述

与其他数据结构的互相转换
(1)Map转为数组
使用扩展运算符(…)。

const myMap = new Map().set(true,7).set({foo:3},['abc']);
console.log([...myMap]);

这里写图片描述

(2)数组转为Map
将数组传入Map构造函数,就可以转为Map。

console.log(new Map([
    [true,7],
    [{foo:3},['abc']]
]));

这里写图片描述

(3)Map转为对象
如果所有Map的键都是字符串,它可以无损地转为对象。如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。

function strMapToObj(strMap){
    
    // Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的_proto_
    let obj = Object.create(null);
    for(let [k,v] of strMap){
        obj[k] = v;
    }
    return obj;
}

const myMap = new Map()
        .set('yes',true)
        .set('no',false);
let obj = strMapToObj(myMap);
console.log(obj);

这里写图片描述

(3)对象转为Map

function objToMap(obj){
    
    let strMap = new Map();
    for(let k of Object.keys(obj)){
        strMap.set(k,obj[k]);
    }
    return strMap;
}
console.log(objToMap({yes:true,no:false}));

这里写图片描述

(5)Map转为JSON
Map转为JSON要区分两种情况。一种情况是,Map的键名都是字符串,这时可以选择转为对象 json。

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

  function strMapToJson(strMap){
    
      return JSON.stringify(strMapToObj(strMap));
  }

  let myMap = new Map().set('yes',true).set('no',false);
  console.log(strMapToJson(myMap));

这里写图片描述

另一种情况是,Map的键名有非字符串,这时可以选择转为数组JSON。

function mapToArrayJson(map){
    
    console.log([...map]);
    return JSON.stringify([...map]);
}

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

这里写图片描述

JSON转为Map
JSON转为Map,正常情况下,所有键名都是字符串

function objToStrMap(obj) {
    
    let strMap = new Map();
    for (let k of Object.keys(obj)) {
      strMap.set(k, obj[k]);
    }
    return strMap;
  }

  function jsonToStrMap(jsonStr){
    
    return objToStrMap(JSON.parse(jsonStr));
  }

console.log( jsonToStrMap('{"yes":true,"no":false}'));

这里写图片描述

但是,有一种特殊情况,整个JSON就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为Map。这往往是Map转为数组JSON的逆操作。

function jsonToMap(jsonStr){
    
    let obj = JSON.parse(jsonStr);
    console.log('obj = ',obj);
    return new Map(obj);
}
console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]'));

这里写图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zjsfdx/article/details/80307917

智能推荐

查找(顺序查找、二分查找、插值查找)_插值查找什么时候坏-程序员宅基地

文章浏览阅读3w次,点赞9次,收藏40次。查找定义:根据给定的某个值,在查找表中确定一个其关键字等于给定值的数据元素(或记录)。查找表按照操作方式来分有两大种:静态查找表和动态查找表。动态查找表:在查找过程中同时插入查找表中不存在的数据元素,或者从查找表中删除已经存在的某个数据元素。1. 顺序查找/* 顺序查找,a为数组,n为要查找的数组元素个数,key为要查找的关键字*/int Sequential_Sear_插值查找什么时候坏

python人脸识别用什么库_基于Python的人脸识别库:离线识别率高达99.38%,无敌-程序员宅基地

文章浏览阅读435次。数据测试库Labeled Faces in the Wild:http://vis-www.cs.umass.edu/lfw/模型提供了一个简单的face_recognition命令行工具让用户通过命令就能直接使用图片文件夹进行人脸识别操作。注意:不管你是为了Python就业还是兴趣爱好,记住:项目开发经验永远是核心,如果你没有2020最新python入门到高级实战视频教程,可以去小编的Pyt..._python人脸识别的库

java htmlparser 使用教程_HtmlParser基础教程-程序员宅基地

文章浏览阅读97次。1、相关资料官方文档:http://htmlparser.sourceforge.net/samples.htmlAPI:http://htmlparser.sourceforge.net/javadoc/index.html其它HTML 解释器:jsoup等。由于HtmlParser自2006年以后就再没更新,目前很多人推荐使用jsoup代替它。2、使用HtmlPaser的关键步骤(1)通过Pa..._java使用htmlparser

文本相似度分析(基于jieba和gensim)-程序员宅基地

文章浏览阅读829次。基础概念本文在进行文本相似度分析过程分为以下几个部分进行,文本分词语料库制作算法训练结果预测分析过程主要用两个包来实现jieba,gensimjieba:主要实现分词过程gensim:进行语料库制作和算法训练结巴(jieba)分词在自然语言处理领域中,分词和提取关键词都是对文本处理时通常要进行的步骤。用Python语言对英文文本进行预处理时可选择NLTK库,中文文本预处..._python gensim模块和jieba模块的区别

ScrollPic.js—简单易用的图片左右滚动插件-程序员宅基地

文章浏览阅读5.8k次。ScrollPic.js对于一些新手来说是一个很好理解运用的图片左右滚动插件,兼容性较好,可以放心大胆的使用。_scrollpic.js

Java开发实例大全提高篇——操作PDF篇-程序员宅基地

文章浏览阅读275次。第4篇 操作PDF篇 第13章 操作PDF文档 13.1 文档和文档属性 实例380 创建PDF文档 public static void main(String[] args) { try { Document document = n..._java开发实例大全pdf百度云

随便推点

问题三十四:怎么用ray tracing画任意长方体(generalized box)_raycasting编程 长方体-程序员宅基地

文章浏览阅读1k次。34.1 思路分析这个内容书上没有,但是觉得实际应用中的长方体的位置应该是任意的(表面法向量不一定平行坐标轴)。怎么画?1,光线撞击到长方体2,撞击点到光线起点的距离3,撞击点的法向量 怎么确定空间中任意个长方体? 对于前下边的方向向量u(Xu, Yu, Zu)不平行于ZOX平面(即Yu不等于零)的情况:以下六个参数可以确定唯一的空间长方体。_raycasting编程 长方体

C#设置Form隐藏(解决设置Visible属性没有用的情况)_c# form隐藏-程序员宅基地

文章浏览阅读3.7k次。protected override void SetVisibleCore(bool value) { if (!this.IsHandleCreated) { value = false; CreateHandle(); } base.SetVisibleCore(value); }..._c# form隐藏

USB接口IC读写器oem软件_AB密码完整解决方案/读写卡测试程序及源代码/powerbuilder源代码_读写器写入密码-程序员宅基地

文章浏览阅读905次。界面 详细代码如下: $PBExportHeader$w_test.srw$PBExportComments$ST-803U读写器forwardglobal type w_test from windowend typetype cb_5 from commandbutton within w_testend typetype cb_4 from _读写器写入密码

Linux ALSA 之一:ALSA 架构简介-程序员宅基地

文章浏览阅读6.7k次,点赞6次,收藏45次。Linux ALSA 之一:ALSA 架构简介_alsa

JAVA字体颜色背景颜色设置_java setforeground-程序员宅基地

文章浏览阅读3k次,点赞2次,收藏16次。import java.awt.*;   import java.awt.event.*;   public class love extends Frame   {   public static void main(String [] args)   {   lov..._java setforeground

sqlmap之--os-shell_sqlmap --os-shell-程序员宅基地

文章浏览阅读1w次,点赞9次,收藏34次。1、–os-shell原理使用udf提权获取webshell,也是通过into outfile向服务器写入两个文件,一个是可以直接执行系统命令,一个是进行上传文件。–os-shell的执行条件:dbms为mysql,网站必须是root权限攻击者需要知道网站的绝对路径magic_quotes_gpc = off,php主动转移功能关闭2、环境介绍phpstudy+sqlmap3、探测网站根目录python3 sqlmap.py -u "127.0.0.1/sqli-labs-master_sqlmap --os-shell

推荐文章

热门文章

相关标签