Javascript 中的一些好用的方法

JavaSript中冷门但有用的方法

在JavaScript中,有一些冷门但强大且有用的数据结构用法。这些用法可能在日常开发中不太常见,但在特定情况下可以提供更优雅的解决方案。

WeakMap 和 WeakSet:

  • WeakMapWeakSet 是弱引用版本的 MapSet。它们对于存储对象引用并允许垃圾回收非常有用。在这些集合中,对象是弱引用的,这意味着如果没有其他引用,它们将被垃圾回收。
javascript 复制代码
const weakMap = new WeakMap();
const key = { id: 1 };
weakMap.set(key, 'value');

#Proxy 对象:

  • Proxy 对象允许拦截并自定义对象上的操作,包括属性查找、赋值、删除等。这使得你可以实现元编程,即编写可以操作其他代码行为的代码。
javascript 复制代码
const handler = {
  get: function(target, prop) {
    return prop in target ? target[prop] : 'Not found';
  }
};

const proxyObj = new Proxy({ name: 'John' }, handler);
console.log(proxyObj.name); // 输出: 'John'
console.log(proxyObj.age);  // 输出: 'Not found'

Symbol 和 Symbol.iterator:

  • Symbol 是一种新的基本数据类型,它创建一个独一无二的值。它与迭代器一起使用时,可以使对象可迭代。
javascript 复制代码
const mySymbol = Symbol('mySymbol');
const obj = { [mySymbol]: 'Hello' };

for (const key in obj) {
  console.log(key); // 无输出,因为 Symbol 不可枚举
}

const iterator = obj[Symbol.iterator]();
console.log(iterator.next().value); // 输出: 'Hello'

Array Buffer 和 Typed Arrays:

  • ArrayBuffer 和 Typed Arrays 允许你直接处理二进制数据,对于处理像图像、音频等复杂数据非常有用。
javascript 复制代码
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
view[0] = 42;
console.log(view[0]); // 输出: 42

Promise.race() 和 Promise.allSettled():

  • Promise.race() 返回一旦任意一个 promise 解决或拒绝就立即解决或拒绝。Promise.allSettled() 在所有给定的 promise 解决或拒绝后解决,返回一个包含每个 promise 结果的数组。
javascript 复制代码
const promise1 = new Promise(resolve => setTimeout(resolve, 1000, 'One'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 500, 'Two'));

Promise.race([promise1, promise2])
  .then(result => console.log(result)) // 输出: 'Two'

Promise.allSettled([promise1, promise2])
  .then(results => console.log(results))
  // 输出: [{status: 'fulfilled', value: 'One'}, {status: 'rejected', reason: 'Two'}]

URLSearchParams:

  • URLSearchParams 对象用于处理 URL 查询参数。它提供了一组方法,使你能够方便地解析和构造 URL 查询参数。
javascript 复制代码
const urlParams = new URLSearchParams('key1=value1&key2=value2');
console.log(urlParams.get('key1')); // 输出: 'value1'

BigInt:

  • BigInt 是 JavaScript 中表示任意精度整数的新类型。它对处理超出 Number 类型范围的整数非常有用。
javascript 复制代码
const bigIntValue = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);
console.log(bigIntValue.toString()); // 输出: '9007199254740992'

Intl 对象:

  • Intl 对象提供了对国际化(Internationalization)功能的支持,包括日期、时间、数字和货币的格式化。
javascript 复制代码
const number = 1234567.89;
const formattedNumber = new Intl.NumberFormat('en-US').format(number);
console.log(formattedNumber); // 输出: '1,234,567.89'

Array.flat() 和 Array.flatMap():

  • flat() 方法用于将嵌套数组展平一层,而 flatMap() 可以在映射后再展平。
javascript 复制代码
const nestedArray = [1, [2, [3, [4]]]];
const flatArray = nestedArray.flat(2);
console.log(flatArray); // 输出: [1, 2, 3, [4]]

const mappedFlatArray = nestedArray.flatMap(value => value * 2);
console.log(mappedFlatArray); // 输出: [2, 4, 6, 8]

Object.seal() 和 Object.freeze():

  • Object.seal(obj) 用于封闭一个对象,阻止添加新属性并将所有当前属性标记为不可配置。Object.freeze(obj) 则冻结一个对象,阻止添加、删除或更改对象的属性。
javascript 复制代码
const sealedObject = Object.seal({ key: 'value' });
sealedObject.newKey = 'newValue'; // 不起作用,因为对象被封闭

const frozenObject = Object.freeze({ key: 'value' });
frozenObject.newKey = 'newValue'; // 不起作用,因为对象被冻结
相关推荐
2401_857600956 分钟前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600956 分钟前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL7 分钟前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据7 分钟前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
2402_8575834917 分钟前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
web150850966411 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
Yvemil71 小时前
《开启微服务之旅:Spring Boot Web开发举例》(一)
前端·spring boot·微服务
java_heartLake1 小时前
Vue3之性能优化
javascript·vue.js·性能优化
TodoCoder1 小时前
【编程思想】CopyOnWrite是如何解决高并发场景中的读写瓶颈?
java·后端·面试
Swift社区1 小时前
HarmonyOS 实践 - 设计模式在代码中的作用
javascript