JavaScript中的new map()和new set()使用详细(new map()和new set()的区别)

简介:

  • new Map():  在JavaScript中,new Map()用于创建一个新的 Map 对象。Map 对象是一种键值对的集合,其中的键是唯一的,值可以重复。

  • new Set():   在JavaScript中, new Set() 是用来创建一个新的 Set 对象的语法。Set 对象是一种集合,其中的值是唯一的,没有重复的值。 new Set() 可以用来创建一个空的 Set 对象,在创建时传入一个数组或类数组对象,Set 会自动去除重复的值。

 new Map()

一、new Map()  基本特性

  1. new Map() 是用来创建一个新的 Map 对象的构造函数。Map 对象保存键值对,并记住键的原始插入顺序。这意味着你可以迭代 Map 对象,按键的插入顺序获取键值对。

  2. Map 对象与普通的对象(使用字符串作为键)不同,因为 Map 可以使用任何类型作为键(包括函数、对象或任何原始值),而不仅仅是字符串或符号。

二、相关方法

  • 1. set(key, value) : 向 Map 对象中添加一个键值对。
  • 2. get(key) : 获取指定键对应的值。
  • 3. has(key) : 判断 Map 对象中是否存在指定的键。
  • 4. delete(key) : 删除指定键及其对应的值。
  • 5. size : 返回 Map 对象中键值对的数量。
  • 6. clear() : 清空 Map 对象中的所有键值对。
  • 7. keys() : 返回一个包含 Map 对象中所有键的迭代器。
  • 8. values() : 返回一个包含 Map 对象中所有值的迭代器。
  • 9. entries() : 返回一个包含 Map 对象中所有键值对的迭代器。

三、基本使用

// 创建一个新的Map对象  
let myMap = new Map();  
  
// 1、添加键值对  
myMap.set('name', 'Alice');  
myMap.set('age', 25);  
  
// 2、获取值  
console.log(myMap.get('name')); // 输出: "Alice"  
  
// 3、检查键是否存在  
console.log(myMap.has('age')); // 输出: true  
  
// 4、删除键值对  
myMap.delete('name');  
console.log(myMap.has('name')); // 输出: false  

// 5、获取Map的大小  
console.log(myMap.size); // 输出: 1  
  
// 6、清空Map  
myMap.clear();  
console.log(myMap.size); // 输出: 0  
  
// 7、遍历键  
for (let key of myMap.keys()) {  
  console.log(key); // 输出: "age"  
}  
  
// 8、遍历值  
for (let value of myMap.values()) {  
  console.log(value); // 输出: 25  
}  
  
// 9、遍历键值对  
for (let [key, value] of myMap.entries()) {  
  console.log(`Key: ${key}, Value: ${value}`); // 输出: Key: age, Value: 25  
}  

new Set()

一、new Set()  基本特性

  1. 唯一性:在 Set 中,每个值只出现一次,可以实现简单的数组去重,即使是两个完全相同的对象,它们在 Set 中也只会被存储一次。
  2. 无序性:Set 中的元素没有特定的顺序。

二、相关方法

  1. add(value): 向 Set 对象中添加一个值。如果值已存在,则不会进行任何操作。
  2. delete(value): 从 Set 对象中删除一个值。如果值存在,则删除并返回 true;否则,返回 false
  3. has(value): 返回一个布尔值,表示 Set 对象中是否包含指定的值。
  4. clear(): 清空 Set 对象,移除所有元素。

三、基本使用

let setData = new Set();  
  
// 添加元素  
setData .add(1);  
setData .add(2);  
setData .add(3); 
console.log(setData); // setData { 1, 2 ,3 }  

// 删除元素  
setData.delete(2);  
console.log(setData); // Set { 1, 3 }  

  
// 检查元素是否存在  
console.log(setData.has(1)); // true  
console.log(setData.has(4)); // false  
  
// 遍历元素  
setData.forEach(value => console.log(value));  
// 输出:  
// 1  
// 3

// 清空集合  
setData.clear();  
console.log(setData.size);    // 输出: 0,因为集合已被清空


//在创建 Set 时直接传入一个可迭代对象(如数组),来初始化 Set:
let set = new Set([1, 2, 2, 3, 4, 4]);  
//简单数组去重
console.log(set); // Set { 1, 2, 3, 4 }

  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
(function(a){a.N={VERSION:"4.1.0",ROOT_URL:a.L_ROOT_URL||function(){var a=document.getElementsByTagName("script"),b=/\/?newmap[\-\._]?([\w\-\._]*)\.js\??/,c,d,e,f;for(c=0,d=a.length;c<d;c++){e=a[c].src,f=e.match(b);if(f)return f[1]==="include"?"../../dist/":e.replace(b,"")+"/"}return""}(),noConflict:function(){return a.N=this._original,this},_original:a.N}})(this),NUtil={extend:function(a){var b=Array.prototype.slice.call(arguments,1);for(var c=0,d=b.length,e;c2?Array.prototype.slice.call(arguments,2):null;return function(){return a.apply(b,c||arguments)}},tryFuncs:function(){var a=null;for(var b=0,c=arguments.length;b<c;b++){var d=arguments[b];try{a=d();break}catch(e){}}return a},getParameterString:function(a){var b=[];for(var c in a){var d=a[c];if(d!=null&&typeof d!="function"){var e;if(typeof d=="object"&&d.constructor==Array){var f=[],g;for(var h=0,i=d.length;h<i;h++)g=d[h],f.push(encodeURIComponent(g===null||g===undefined?"":g));e=f.join(",")}else e=encodeURIComponent(d);b.push(encodeURIComponent(c)+"="+e)}}return b.join("&")},containsStr:function(a,b){return a.indexOf(b)!=-1},getParameters:function(a){a=a===null||a===undefined?window.location.href:a;var b="";if(NUtil.containsStr(a,"?")){var c=a.indexOf("?")+1,d=NUtil.containsStr(a,"#")?a.indexOf("#"):a.length;b=a.substring(c,d)}var e={},f=b.split(/[&;]/);for(var g=0,h=f.length;g<h;++g){var i=f[g].split("=");if(i[0]){var j=i[0];try{j=decodeURIComponent(j)}catch(k){j=unescape(j)}var l=(i[1]||"").replace(/\+/g," ");try{l=decodeURIComponent(l)}catch(k){l=unescape(l)}l=l.split(","),l.length==1&&(l=l[0]),e[j]=l}}return e},urlAppend:function(a,b){var c=a;if(b){var d=(a+" ").split(/[?&]/);c+=d.pop()===" "?b:d.length?"&"+b:"?"+b}return c},upperCaseObject:function(a){var b={};for(var c in a)b[c.toUpperCase()]=a[c];return b},createUrlObject:function(a,b){b=b||{};if(!/^\w+:\/\//.test(a)){var c=window.location,d=c.port?":"+c.port:"",e=c.protocol+"//"+c.host.split(":").shift()+d;if(a.indexOf("/")===0)a=e+a;else{var f=c.pathname.split("/");f.pop(),a=e+f.join("/")+"/"+a}}b.ignoreCase&&(a=a.toLowerCase());var g=document.createElement("a");g.href=a;var h={};h.host=g.host.split(":").shift(),h.protocol=g.protocol,b.ignorePort80?h.port=g.port=="80"||g.port=="0"?"":g.port:h.port=g.port==""||g.port=="0"?"80":g.port,h.hash=b.ignoreHash||g.hash==="#"?"":g.hash;var i=g.search;if(!i){var j=a.indexOf("?");i=j!=-1?a.substr(j):""}return h.args=NUtil.getParameters(i),h.pathname=g.pathname.charAt(0)=="/"?g.pathname:"/"+g.pathname,h},stamp:function(){var a=0,b="_newmap_id";return function(c){return c[b]=c[b]||"_newmap_id_"+ ++a,c[b]}}(),requestAnimFrame:function(){function a(a){window.setTimeout(a,1e3/60)}var b=window.requestAnimationFrame||
JavaScriptMap是一种数据结构,它可以将键值对存储在一个对象,其键和值可以是任何类型的数据。Map使用方法非常简单,可以使用new操作符和Map构造函数来创建一个新的Map对象。例如: ``` let map = new Map(); ``` 上面的代码创建了一个新的空Map对象。我们可以使用set方法向Map对象添加新的键值对,例如: ``` map.set('name', '张三'); map.set('age', 18); ``` 上面的代码向Map对象添加了两个键值对:'name'对应的值为'张三','age'对应的值为18。我们也可以使用get方法获取Map对象的某个键对应的值,例如: ``` console.log(map.get('name')); // 输出:张三 console.log(map.get('age')); // 输出:18 ``` 上面的代码分别输出了Map对象'name'和'age'对应的值。我们还可以使用has方法检查某个键是否存在于Map对象,例如: ``` console.log(map.has('name')); // 输出:true console.log(map.has('gender')); // 输出:false ``` 上面的代码分别检查了Map对象是否存在'name'和'gender'这两个键。我们还可以使用delete方法删除Map对象的某个键值对,例如: ``` map.delete('age'); console.log(map.get('age')); // 输出:undefined ``` 上面的代码删除了Map对象'age'对应的键值对,并使用get方法检查该键是否存在于Map对象(输出结果为undefined,表示该键不存在)。 综上所述,Map对象提供了一种灵活的存储键值对的方式,可以方便地进行添加、删除、查找等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北城笑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值