网站首页 > 技术文章 正文
1. Set
基本介绍
Set是ES6新增的一种新的数据结构,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。
基本用法
- 初始化:可以传入一个数组(或其他可迭代对象)作为参数来初始化Set。
- 添加成员:使用add()方法添加成员。
- 删除成员:使用delete()方法删除成员。
- 检查成员:使用has()方法检查某个值是否存在于Set中。
- 清除所有成员:使用clear()方法。
属性与方法
- Set.prototype.constructor:指向Set的构造函数。
- Set.prototype.size:返回Set实例的成员总数。
遍历方法
- keys():返回键名的遍历器。
- values():返回键值的遍历器(由于Set只有键值,所以与keys()相同)。
- entries():返回键值对的遍历器(每个元素是一个数组,包含两个相同的值)。
- forEach():使用回调函数遍历每个成员。
特点
- 成员唯一性:Set中不会有重复的值。
- 插入顺序:Set保持成员的插入顺序。
// 创建一个空的Set
let mySet = new Set();
// 使用add()方法添加成员
mySet.add(1);
mySet.add(2);
mySet.add(2); // 注意:Set中不会有重复的值
// 使用has()方法检查成员是否存在
console.log(mySet.has(1)); // 输出:true
console.log(mySet.has(3)); // 输出:false
// 使用delete()方法删除成员
mySet.delete(2);
console.log(mySet.has(2)); // 输出:false
// 遍历Set
for (let item of mySet) {
console.log(item); // 输出:1(因为2已经被删除)
}
// 使用size属性获取成员总数
console.log(mySet.size); // 输出:1
2. WeakSet
基本介绍
WeakSet是Set的“兄弟”类型,它同样是一种集合数据结构,但有一些特殊的特性和用途。WeakSet 的成员只能是对象和 Symbol 值,而不能是其他类型的值,WeakSet中的“weak”描述的是JavaScript垃圾回收程序对待WeakSet中值的方式。
基本用法
- 初始化:可以使用new关键字实例化一个空的WeakSet,也可以传入一个可迭代对象(其元素必须是对象)来初始化。
- 添加成员:使用add()方法添加成员(只能添加对象)。
- 删除成员:使用delete()方法删除成员。
- 检查成员:使用has()方法检查某个对象是否存在于WeakSet中。
特点
- 成员必须是对象:WeakSet只能存储对象引用,不能存储原始值(如数字、字符串、布尔值)。
- 弱引用:WeakSet中的对象引用是弱引用,这意味着如果没有其他引用指向WeakSet中的对象,这些对象可以被垃圾回收程序回收,相应的引用也会从WeakSet中自动移除。
- 不可遍历:WeakSet没有提供遍历其成员的方法,因为成员随时可能被垃圾回收。
// 创建一个空的WeakSet
let myWeakSet = new WeakSet();
// 创建一些对象
let obj1 = {};
let obj2 = {};
// 使用add()方法添加对象引用
myWeakSet.add(obj1);
myWeakSet.add(obj2);
// 使用has()方法检查对象是否存在
console.log(myWeakSet.has(obj1)); // 输出:true
console.log(myWeakSet.has(obj3)); // 假设obj3是未定义的,输出:false
// 注意:你不能遍历WeakSet,也不能获取其大小(没有size属性)
// 假设没有其他引用指向obj1,那么obj1可能会被垃圾回收,但你不能直接检测它是否被回收
// obj1 = null; // 取消对obj1的引用,但这不会立即触发垃圾回收
3. Map
基本介绍
Map是ES6新增的一种集合类型,为JavaScript带来了真正的键值对存储机制。Map中的键可以是任何数据类型,包括函数、对象或任何原始值。
基本用法
- 初始化:可以传入一个可迭代对象(其元素是键值对)来初始化Map。
- 添加或更新键值对:使用set()方法。
- 获取值:使用get()方法。
- 检查键是否存在:使用has()方法。
- 删除键值对:使用delete()方法。
- 清除所有键值对:使用clear()方法。
属性
- Map.prototype.size:返回Map实例的成员总数。
遍历方法
- keys():返回键的遍历器。
- values():返回值的遍历器。
- entries():返回键值对的遍历器(每个元素是一个数组,包含键和值)。
- forEach():使用回调函数遍历每个键值对。
特点
- 任意键类型:Map的键可以是任意值,包括函数、对象或任何原始值。
- 插入顺序:Map保持键值对的插入顺序。
// 创建一个空的Map
let myMap = new Map();
// 使用set()方法添加键值对
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('a', 3); // 更新键'a'对应的值
// 使用get()方法获取值
console.log(myMap.get('a')); // 输出:3
console.log(myMap.get('c')); // 输出:undefined
// 使用has()方法检查键是否存在
console.log(myMap.has('b')); // 输出:true
// 使用delete()方法删除键值对
myMap.delete('b');
console.log(myMap.has('b')); // 输出:false
// 遍历Map
for (let [key, value] of myMap.entries()) {
console.log(key, value); // 输出:'a' 3
}
// 使用size属性获取键值对总数
console.log(myMap.size); // 输出:1
4. WeakMap
基本介绍
WeakMap是另一种键值对的集合,与Map类似,但有一些重要的区别。WeakMap的键只能是对象引用,且这些键是弱引用的,这有助于解决内存泄漏问题。WeakMap只接受对象(null除外)和 Symbol 值作为键名,不接受其他类型的值作为键名。
基本用法
- 初始化:使用new WeakMap()创建一个新的WeakMap实例。
- 添加键值对:使用set()方法。
- 获取值:使用get()方法。
- 检查键是否存在:使用has()方法。
- 删除键值对:使用delete()方法。
特点
- 弱键引用:WeakMap的键是弱引用的,这意味着如果没有其他引用指向键对象,这些对象可以被垃圾回收程序回收,相应的键值对也会从WeakMap中自动移除。
- 不可遍历:WeakMap没有提供遍历其键值对的方法,因为键随时可能被垃圾回收。
- 私有数据存储:由于WeakMap的键不可遍历,它常被用于存储对象的私有数据,这些数据只能被持有键的特定代码访问。
// 创建一个空的WeakMap
let myWeakMap = new WeakMap();
// 创建一些对象
let obj1 = { id: 1 };
let obj2 = { id: 2 };
// 使用set()方法添加键值对
myWeakMap.set(obj1, 'some data for obj1');
myWeakMap.set(obj2, 'some data for obj2');
// 使用get()方法获取值
console.log(myWeakMap.get(obj1)); // 输出:'some data for obj1'
console.log(myWeakMap.get(obj3)); // 假设obj3是未定义的,输出:undefined
// 注意:你不能遍历WeakMap,也不能获取其大小(没有size属性)
// 假设没有其他引用指向obj1,那么obj1可能会被垃圾回收,但你不能直接检测它是否被回收
// obj1 = null; // 取消对obj1的引用,但这不会立即触发垃圾回收
猜你喜欢
- 2024-11-18 浏览器垃圾回收
- 2024-11-18 JavaScript中各种源码实现(前端面试笔试必备)
- 2024-11-18 2021年要了解的34种JavaScript优化技术
- 2024-11-18 你可能不知道的JS开发技巧
- 2024-11-18 Javascript面试题总结1
- 2024-11-18 深入JavaScript教你内存泄漏如何防范
- 2024-11-18 关于前端174道 JavaScript知识点汇总(一)
- 2024-11-18 前端面试计划(二)ES6
- 2024-11-18 2022前端大厂VUE 面试题
- 2024-11-18 javascript中的内置对象和数据结构
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-