js Map对象的用法，长度 |
您所在的位置：网站首页 › jsmap函数的用法 › js Map对象的用法，长度 |
js Map对象的用法，长度
|
参考地址 js Map对象的用法 第一篇： Map： Map是一组键值对的结构，具有极快的查找速度。 举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array： var names = ['Michael', 'Bob', 'Tracy'];var scores = [95, 75, 85];给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。 如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下： var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法： var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set('Bob', 59);m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67m.delete('Adam'); // 删除key 'Adam'm.get('Adam'); // undefined由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉： var m = new Map();m.set('Adam', 67);m.set('Adam', 88);m.get('Adam'); // 88Set： Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。 要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set： var s1 = new Set(); // 空Setvar s2 = new Set([1, 2, 3]); // 含1, 2, 3重复元素在Set中自动被过滤： var s = new Set([1, 2, 3, 3, '3']);s; // Set {1, 2, 3, "3"}注意数字3和字符串'3'是不同的元素。 通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果： s.add(4);s; // Set {1, 2, 3, 4}s.add(4);s; // 仍然是 Set {1, 2, 3, 4}通过delete(key)方法可以删除元素： var s = new Set([1, 2, 3]);s; // Set {1, 2, 3}s.delete(3);s; // Set {1, 2}小结Map和Set是ES6标准新增的数据类型，请根据浏览器的支持情况决定是否要使用 第二篇： 定义：键/值对的集合。 语法：mapObj = new Map()备注：集合中的键和值可以是任何类型。如果使用现有密钥向集合添加值，则新值会替换旧值。 属性：下表列出了 Map 对象的属性和描述。 构造函数 指定创建映射的函数。Prototype — 原型 为映射返回对原型的引用。size 返回映射中的元素数。 方法：下表列出了 Map 对象的方法和描述。 clear 从映射中移除所有元素。delete 从映射中移除指定的元素。forEach 对映射中的每个元素执行指定操作。get 返回映射中的指定元素。has 如果映射包含指定元素，则返回 true。set 添加一个新建元素到映射。toString 返回映射的字符串表示形式。valueOf 返回指定对象的原始值。下面的示例演示如何将成员添加到 Map，然后检索它们。 var m = new Map();m.set(1, "black");m.set(2, "red");m.set("colors", 2);m.set({x:1}, 3); m.forEach(function (item, key, mapObj) { document.write(item.toString() + "");}); document.write("");document.write(m.get(2)); // Output:// black// red// 2// 3//// red 第三篇：ES6入门 ES6的Set和Map数据结构 ： Set和Map主要的应用场景在于数组去重和数据存储， Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构 集合 集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组 ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值 Set 本身是一个构造函数，用来生成 Set 数据结构 这里说的Set其实就是我们所要讲到的集合，先来看下基础用法 const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {console.log(i); // 2 3 5 4}// 去除数组的重复成员let array = [1,2,1,4,5,3];[...new Set(array)] // [1, 2, 4, 5, 3]Set实例的属性和方法 Set的属性： size：返回集合所包含元素的数量 Set的方法： keys()：返回一个包含集合中所有键的数组 values()：返回一个包含集合中所有值的数组 entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了) forEach()：用于对集合成员执行某种操作，没有返回值 add(value)：向集合添加一个新的项 delete(value)：从集合中移除一个值 has(value)：如果值在集合中存在，返回true,否则false clear(): 移除集合里所有的项 操作方法 遍历方法 创建一个集合 function Set(arr = []) { // 可以传入数组let items = {};this.size = 0; // 记录集合中成员的数量}module.exports = Set;复制代码这里用{}对象来表示集合，也是因为对象不允许一个键指向两个不同的属性，保证了集合里的元素都是唯一的 接下来，就需要按照ES6中Set类的实现，添加一些集合的操作方法了 has方法 首先要实现的是has方法，因为在add和delete等其他方法中都会被调用，下面来看一下它的实现 function Set() {let items = {};this.size = 0;// has(val)方法this.has = function(val) {// 对象都有hasOwnProperty方法，判断是否拥有特定属性return items.hasOwnProperty(val);};}复制代码add方法 接下来要实现add方法 // add(val)方法this.add = function(val) {if (!this.has(val)) {items[val] = val;this.size++; // 累加集合成员数量return true;}return false;};复制代码对于给定的val，可以检测是否存在于集合中 如果不存在，就添加到集合中，返回true 如果存在，就直接返回false，不做任何操作 delete和clear方法 继续写着，这回把两个都写上 // delete(val)方法this.delete = function(val) {if (this.has(val)) {delete items[val]; // 将items对象上的属性删掉this.size--;return true;}return false;};// clear方法this.clear = function() {items = {}; // 直接将集合赋一个空对象即可this.size = 0;};复制代码在delete方法中，判断val是否存在于集合中，如果存在就直接从集合中删掉，返回true 以上完成的都是操作方法，下面我们再来实现一下遍历方法 keys、values方法 这两个方法我们可以放在一起来实现，因为通过ES6对Object的扩展可以轻松实现对应的方法，下面看一下具体实现，上代码： // keys()方法this.keys = function() {return Object.keys(items); // 返回遍历集合的所有键名的数组};// values()方法this.values = function() {return Object.values(items); // 返回遍历集合的所有键值的数组};复制代码使用一下看看 // set.jsconst Set = require('./Set.js'); // 导入写好的Set类let set = new Set();set.add(1);set.add(3);set.add(2);console.log(set.keys()); // [ '1', '2', '3' ]console.log(set.values()); // [ 1, 2, 3 ]复制代码这里我们看到和ES6中的Set有点区别，因为Object的这几个方法都是按照数值大小，从小到大遍历的数组，所以大家知道这一点比较好，具体实现还是有些不同的，哈哈 forEach方法 ES6中Set结构的实例上带的forEach方法，其实和数组的forEach方法很相似，只不过Set结构的键名就是键值，所以第一个参数与第二个参数的值永远都是一样的 下面就按照实现数组的forEach方法，我们来完成Set的forEach方法 // forEach(fn, context)方法this.forEach = function(fn, context = this) {for (let i = 0; i console.log(key + ' : ' + value)); // 1:1, 3:3, 4:4let arr = set.values(); // [ 1, 3, 4 ]arr = new Set(arr.map(x => x * 2)).values();console.log(arr); // [ 2, 6, 8 ]复制代码基本上实现了Set结构的方法，不过，发现一个问题，那就是每次添加一个元素都要add这样写起来确实好麻烦，Set是可以接收一个数组作为参数的，那么我们把这个也实现一下 function Set(arr = []) { // 传入接受的数组，如果没有传指定一个空数组做为初始值let items = {};this.size = 0;// has方法this.has = function (val) {return items.hasOwnProperty(val);};// add方法this.add = function (val) {// 如果没有存在items里面就可以直接写入if (!this.has(val)) {items[val] = val;this.size++;return true;}return false;};arr.forEach((val, i) => { // 遍历传入的数组this.add(val); // 将数组里每一项值添加到集合中});// 省略...}复制代码再来看看现在能不能支持传入的数组了 // 间接使用map和filterconst Set = require('./Set.js');let arr = new Set([1, 2, 3]).values();m = new Set(arr.map(x => x * 2));f = new Set(arr.filter(x => x>1));console.log(m.values()); // [ 2, 4, 6 ]console.log(f.values()); // [ 2, 3 ]// 数组去重let arr2 = new Set([3, 5, 2, 1, 2, 5, 5]).values();console.log(arr2); // [ 1, 2, 3, 5 ]复制代码现在我们有了一个和ES6中非常类似的Set类实现。如前所述，也可以用数组替代对象，存储元素。喜欢动手的同学们，之后也可以去尝试一下 除此之外，Set还可以实现并集(union),交集(intersect),差集(difference) 做事还是要做全套的，我们也一一来实现一下吧 union并集和intersect交集 并集的数学概念，集合A和集合B的并集，表示为A∪B 交集的数学概念，集合A和集合B的交集，表示为A∩B 如图所示：
现在先来实现union方法 // 并集this.union = function (other) {let union = new Set();let values = this.values();for (let i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |