首页 > 编程语言 >JavaScript进阶17笔记

JavaScript进阶17笔记

时间:2023-06-26 16:35:11浏览次数:40  
标签:Map Set 进阶 17 sayings 对象 JavaScript Object mySet

带键的集合

这一章介绍由 key 值标记的数据容器;Map 和 Set 对象承载的数据元素可以按照插入时的顺序被迭代遍历。

 

映射

Map对象

ECMAScript 2015 引入了一个新的数据结构来将一个值映射到另一个值。一个Map对象就是一个简单的键值对映射集合,可以按照数据插入时的顺序遍历所有的元素。

下面的代码演示了使用Map进行的一些基本操作。你可以使用for...of循环来得到所有的[key, value]

var sayings = new Map();
sayings.set('dog', 'woof');
sayings.set('cat', 'meow');
sayings.set('elephant', 'toot');
sayings.size; // 3
sayings.get('fox'); // undefined
sayings.has('bird'); // false
sayings.delete('dog');
sayings.has('dog'); // false

for (var [key, value] of sayings) {
 console.log(key + ' goes ' + value);
}
// "cat goes meow"
// "elephant goes toot"

sayings.clear();
sayings.size; // 0

 

ObjectMap的比较

一般地,objects会被用于将字符串类型映射到数值Object允许设置键值对、根据键获取值、删除键、检测某个键是否存在。而Map具有更多的优势。

  • Object 的键均为 String 类型,在 Map 里键可以是任意类型。

  • 必须手动计算Object的尺寸,但是可以很容易地获取使用Map的尺寸。

  • Map的遍历遵循元素的插入顺序。

  • Object有原型,所以映射中有一些缺省的键。(可以用 map = Object.create(null) 回避)。

这三条提示可以帮你决定用Map还是Object

  • 如果键在运行时才能知道,或者所有的键类型相同,所有的值类型相同,那就使用Map

  • 如果需要将原始值存储为键,则使用Map,因为Object将每个键视为字符串,不管它是一个数字值、布尔值还是任何其他原始值。

  • 如果需要对个别元素进行操作,使用Object

 

WeakMap对象

WeakMap对象也是键值对的集合。它的键必须是对象类型,值可以是任意类型。它的键被弱保持,也就是说,当其键所指对象没有其他地方引用的时候,它会被 GC 回收掉。WeakMap提供的接口与Map相同。

Map对象不同的是,WeakMap的键是不可枚举的。不提供列出其键的方法。列表是否存在取决于垃圾回收器的状态,是不可预知的。

WeakMap对象的一个用例是存储一个对象的私有数据或隐藏实施细节。

对象内部的私有数据和方法被存储在WeakMap类型的privates变量中。所有暴露出的原型和情况都是公开的,而其他内容都是外界不可访问的,因为模块并未导出privates对象。

const privates = new WeakMap();

function Public() {
 const me = {
   // Private data goes here
};
 privates.set(this, me);
}

Public.prototype.method = function () {
 const me = privates.get(this);
 // Do stuff with private data in `me`...
};

module.exports = Public;

 

集合

 

Set对象

Set对象是一组值的集合,这些值是不重复的,可以按照添加顺序来遍历。

这里演示了Set的基本操作

var mySet = new Set();
mySet.add(1);
mySet.add("some text");
mySet.add("foo");

mySet.has(1); // true
mySet.delete("foo");
mySet.size; // 2

for (let item of mySet) console.log(item);
// 1
// "some text"

 

数组和集合的转换

可以使用Array.from展开操作符来完成集合到数组的转换。同样,Set的构造器接受数组作为参数,可以完成从ArraySet的转换。需要重申的是,Set对象中的值不重复,所以数组转换为集合时,所有重复值将会被删除。

Array.from(mySet);
[...mySet2];

mySet2 = new Set([1,2,3,4]);

 

ArraySet的对比

一般情况下,在 JavaScript 中使用数组来存储一组元素,而新的集合对象有这些优势:

  • 数组中用于判断元素是否存在的indexOf 函数效率低下。

  • Set对象允许根据值删除元素,而数组中必须使用基于下标的 splice 方法。

  • 数组的indexOf方法无法找到NaN值。

  • Set对象存储不重复的值,所以不需要手动处理包含重复值的情况。

 

WeakSet对象

WeakSet对象是一组对象的集合WeakSet中的对象不重复且不可枚举。

 

Set对象的主要区别有:

  • WeakSets中的值必须是对象类型,不可以是别的类型

  • WeakSet的“weak”指的是,对集合中的对象,如果不存在其他引用,那么该对象将可被垃圾回收。于是不存在一个当前可用对象组成的列表,所以WeakSets不可枚举

 

WeakSet的用例很有限,比如使用 DOM 元素作为键来追踪它们而不必担心内存泄漏。

 

Map的键和Set的值的等值判断

Map的键和Set的值的等值判断都基于same-value-zero algorithm

  • 判断使用与===相似的规则。

  • -0+0相等。

  • NaN与自身相等(与===有所不同)。

标签:Map,Set,进阶,17,sayings,对象,JavaScript,Object,mySet
From: https://www.cnblogs.com/zjy1020/p/17506054.html

相关文章

  • JavaScript进阶16笔记
    集合类JavaScript中没有明确的数组数据类型。但是,你可以使用预定义的Array对象及其方法来处理应用程序中的数组。Array对象具有以各种方式操作数组的方法,例如连接、反转和排序。它有一个用于确定数组长度的属性和用于正则表达式的其他属性。 创建数组以下语句创建了等效......
  • JavaScript进阶19笔记
    使用PromisePromise是一个对象,它代表了一个异步操作的最终完成或者失败。本质上Promise是一个函数返回的对象,我们可以在它上面绑定回调函数,这样我们就不需要在一开始把回调函数作为参数传入这个函数了。假设现在有一个名为createAudioFileAsync()的函数,它接收一些配置和两......
  • JavaScript进阶18笔记.md
    使用对象JavaScript的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合,一个属性包含一个名和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法。除了浏览器里面预定义的那些对象之外,你也可以定义你自己的对象。本章节讲述了怎么使用对象、属性、函数和......
  • JavaScript基础第06天笔记
    1-内置对象1.1内置对象JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象​前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于JS独有的,JSAPI讲解内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基......
  • JavaScript进阶07笔记
    Javascript进阶学习在最新版本的火狐浏览器上才有的功能。火狐浏览器内置的Web控制台非常适合学习JavaScript,Web控制台包含两个输入模式——单行模式、多行模式。单行模式web控制台不仅可以展示当前已加载页面的信息,还包含一个可以在当前页面执行Javascript表达式的命......
  • JavaScript进阶08笔记
    语法和数据类型声明JavaScript有三种声明方式。var声明一个变量,可选初始化一个值。let声明一个块作用域的局部变量,可选初始化一个值。const声明一个块作用域的只读常量。 声明变量你可以用以下三种方式声明变量:使用关键词var。例如varx=42。这个语......
  • JavaScript进阶09笔记
    错误处理异常处理语句你可以用throw语句抛出一个异常并且用try...catch语句捕获处理它。throw语句try...catch语句异常类型JavaScript可以抛出任意对象。然而,不是所有对象能产生相同的结果。尽管抛出数值或者字母串作为错误信息十分常见,但是通常用下列其中一种异......
  • JavaScript学习 -- 高阶函数
    一、普通函数比较大小写声明函数判断大于或小于数组中的某个数letarr=[1,2,3,4,5,6,7,8,9]functionaiyou(a){for(leti=0;i<arr.length;i++){if(arr[i]>a){console.log(arr[i])}}console.log("****************************")}functionbucuo(a){for(......
  • 像大神一样玩转JavaScript
    前言众所周知,JavaScript是一种非常流行的编程语言,它已经成为了网页开发的必备技能。但是,在我们从事JavaScript编程的时候,我们却没有完全发掘和利用它的全部潜力。在本文中,我们将分享一些高级的JavaScript技巧,希望帮助掘友们更好地理解和掌握JavaScript编程。关于JS高级用法在学习Ja......
  • JavaScript、vue、uniapp如何获取本周开始时间和结束时间?
    //获得本周的开始时间: getStartDayOfWeek(time){ letnow=newDate(time);//当前日期 letnowDayOfWeek=now.getDay();//今天本周的第几天 letday=nowDayOfWeek||7; letnowDay=now.getDate();//当前日 letnowMonth=now.getMonth();//......