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'; // 不起作用,因为对象被冻结
相关推荐
C语言魔术师17 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
小周不摆烂22 分钟前
探索JavaScript前端开发:开启交互之门的神奇钥匙(二)
javascript
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?1 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
我想学LINUX2 小时前
【2024年华为OD机试】 (A卷,100分)- 微服务的集成测试(JavaScript&Java & Python&C/C++)
java·c语言·javascript·python·华为od·微服务·集成测试
screct_demo3 小时前
詳細講一下在RN(ReactNative)中,6個比較常用的組件以及詳細的用法
javascript·react native·react.js
DogDaoDao7 小时前
leetcode 面试经典 150 题:有效的括号
c++·算法·leetcode·面试··stack·有效的括号
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
CodeClimb9 小时前
【华为OD-E卷 - 第k个排列 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu