javascript之Map

javascript中的map,我用的不是特别多,倒是Java中的Map或HashMap,经常用。

顺便围绕几个方面介绍一下map?

1.Map对象

Map对象是一种有对应键值对的对象,JS的Object也是键值对的对象。

ES6中的Map相对Object对象有几个区别?
(1)Object对象有原型,也就是说它有默认的key值在对象上面,除非我们使用Object.create(null)创建一个没有原型的对象;
(2)在Object中,只能把String和Symbol作为key值,但是在Map中,key值可以是任何基本类型(String,Number,Boolean,undefined,NaN…),或者对象(Map,Set,Object,Function,Symbol,null…);
(3)通过Map中的size属性,可以很方便地获取Map长度,要获取Object的长度,你只能用别的方法;

Map实例对象的key值可以为一个数组或者一个对象,或者一个函数,比较随意,而且Map对象实例中数据的排序是根据用户push的顺序进行排序的,而Object实例中key,value的顺序则有些规律(它们会先排数字开头的值,然后才是字符串开头的key值);

2.Map实例属性

map.size这个属性和数组的length功能一样,都表示当前实例的长度。

3.Map实例的方法

clear() 删除所有的键值对;
delete(key) 删除指定键;
entries() 返回一个迭代器,迭代器按照对象的插入顺序返回[key,value];
forEach(callback,context) 循环执行函数并把键值对作为参数,context为执行函数的上下文this;
get(key) 返回Map对象key相对的value值;
has(key) 返回布尔值,判断Map对象是否存在指定的key;
keys() 返回一个迭代器,迭代器按照插入的顺序返回每一个key元素;
set(key,value) 给Map对象设置key/value键值对,返回这个Map对象(相对于JavaScript的Set,Set对象添加元素的方法叫add,而Map对象添加元素的方法为set)
iterator 和entireds()方法一样,返回一个迭代器,迭代器按照对象的插入顺序返回[key,value]

代码示例如下(这段与后台交互的代码,主要是为了测试):

<html>
<head>
<script src="jquery-1.8.0.min.js"></script>
</head>
<body>

<script>

$.ajax({
    url:"http://localhost:2019/comments/recentsComments",
    type:"GET",
    contentType: ‘application/json;charset=utf-8‘,
    dataType : ‘json‘,
    success:function(data){

    console.log(data.code);

    var m = new Map();

    m.set("data",data.list);

    console.log(m.get("data"));

    },error:function(){

    }
});

</script>
</body>
</html>

本文主要参考链接如下所示:
ES6新特性:JavaScript中的Map和WeakMap对象:https://www.cnblogs.com/diligenceday/p/5484130.html

原文地址:https://www.cnblogs.com/youcong/p/10503094.html

时间: 2024-10-14 02:23:28

javascript之Map的相关文章

JavaScript实现Map、Reduce和Filter

1. [代码][JavaScript]代码     <script type="text/javascript">// 函数式编程:// 描述我们要做什么,而不是我们如何去做.这意味着我们工作在一个更高的抽象层次.函数式编程将导致更精巧.清晰和令人愉快的代码. // 最基础的forEachfunction forEach(array, action) {for (var i = 0; i < array.length; i++) {action(array[i]);}

用JavaScript写map

<script type="text/javascript"> function Map() { this.elements = new Array(); } //获取MAP元素个数 Map.prototype.size = function() { return this.elements.length; }; //判断MAP是否为空 Map.prototype.isEmpty = function() { return (this.elements.length <

JavaScript创建Map对象(转)

JavaScript 里面本身没有map对象,用JavaScript的Array来实现Map的数据结构. Js代码   /* * MAP对象,实现MAP功能 * * 接口: * size()     获取MAP元素个数 * isEmpty()    判断MAP是否为空 * clear()     删除MAP所有元素 * put(key, value)   向MAP中增加元素(key, value) * remove(key)    删除指定KEY的元素,成功返回True,失败返回False * 

javascript实现map的功能(转载)

/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用element.key,

JavaScript之map与parseInt的陷阱

问题来源 ? 这个问题的来源是学习廖雪峰老师JS教程.问题如下:小明希望利用map()把字符串变成整数,他写的代码很简洁: 'use strict'; var arr = ['1', '2', '3']; var r; r = arr.map(parseInt); console.log(r); // [1, NaN, NaN] 为什么不是[1, 2, 3]?这是因为两个两个函数的定义有冲突.下面详解: map的定义 ? 注意到这个问题的原因是参考了这个国外某博客JavaScript可选参数危险

自定义实现JavaScript的Map对象,修改IE不兼容MAP()的问题

由于IE8及以下版本不支持Map对象,本文为程序猿们提供了有效的解决方法. 本文重写了Map对象,实现了常用的set, get, put, clear, remove, delete, forEach, has, containsKey, isEmpty, size 等方法,使用和声明的方试和正常声明Map对象一样: var map = new Map(); 只需将下面代码拷入<script type="text/javascript"></script>中即可

JavaScript Source Map 详解

上周,jQuery 1.9发布. 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL=jquery.min.map 这就是Source Map.它是一个独立的map文件,与源码在同一个目录下,你可以点击进去,看看它的样子. 这是

(转)JavaScript Source Map 详解

原文链接:http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL=jquery.min.map 这就

javascript模拟map

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

JavaScript中Map和ForEach的区别

译者按: 惯用Haskell的我更爱map. 原文: JavaScript?-?Map vs. ForEach - What's the difference between Map and ForEach in JavaScript? 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的方法:Array.prototype.map()和Array.prototyp