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'; // 不起作用,因为对象被冻结
相关推荐
辻戋2 小时前
从零实现React Scheduler调度器
前端·react.js·前端框架
徐同保2 小时前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun3 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp3 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.4 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl6 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫7 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友7 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理9 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻9 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js