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'; // 不起作用,因为对象被冻结
相关推荐
惜.己4 分钟前
Jmeter中的配置原件(四)
java·前端·功能测试·jmeter·1024程序员节
EasyNTS5 分钟前
无插件H5播放器EasyPlayer.js网页web无插件播放器vue和react详细介绍
前端·javascript·vue.js
老码沉思录10 分钟前
React Native 全栈开发实战班 - 数据管理与状态之Zustand应用
javascript·react native·react.js
老码沉思录15 分钟前
React Native 全栈开发实战班 :数据管理与状态之React Hooks 基础
javascript·react native·react.js
guokanglun29 分钟前
Vue.js动态组件使用
前端·javascript·vue.js
Go4doom32 分钟前
vue-cli3+qiankun迁移至rsbuild
前端
-seventy-41 分钟前
Ajax 与 Vue 框架应用点——随笔谈
前端
我认不到你1 小时前
antd proFromSelect 懒加载+模糊查询
前端·javascript·react.js·typescript
集成显卡1 小时前
axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)
前端·ajax·json
scc21401 小时前
spark的学习-06
javascript·学习·spark