当前位置：首页 > news >正文

分享几个我珍藏的JS冷门但实用的技巧

news 2025/11/19 20:01:22

作为一名前端开发者，我在日常工作中发现了一些不太常见但极其实用的JavaScript技巧。这些技巧帮我解决了不少棘手问题，今天就来分享给大家。

1. 使用 `??=` 进行逻辑空赋值

你可能熟悉 ||=，但 ??= 才是更精准的选择。它只在变量为 null 或 undefined 时才赋值：

// 传统写法
let user = { name: "小明" };
if (user.age === null || user.age === undefined) {user.age = 18;
}// 使用 ??=
user.age ??= 18; // 仅在 age 为 null 或 undefined 时赋值

与 ||= 不同，??= 不会在值为 0、false 或空字符串时覆盖，这在实际开发中更加安全。

2. 利用 `Intl` 对象进行本地化处理

处理日期、数字和货币格式化时，Intl 对象是我的秘密武器：

// 数字格式化
const number = 1234567.89;
console.log(new Intl.NumberFormat('zh-CN').format(number)); // "1,234,567.89"// 货币格式化
console.log(new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(number)
); // "¥1,234,567.89"// 相对时间格式化（这个特别实用）
const rtf = new Intl.RelativeTimeFormat('zh-CN', { numeric: 'auto' });
console.log(rtf.format(-1, 'day')); // "昨天"
console.log(rtf.format(5, 'hour')); // "5小时后"

3. 使用 `flatMap` 进行过滤和映射

我经常用 flatMap 来替代 filter + map 的组合，代码更简洁：

const numbers = [1, 2, 3, 4, 5];// 传统方式：筛选偶数并加倍
const result1 = numbers.filter(n => n % 2 === 0).map(n => n * 2);// 使用 flatMap：一步到位
const result2 = numbers.flatMap(n => n % 2 === 0 ? [n * 2] : []
);console.log(result1); // [4, 8]
console.log(result2); // [4, 8] 结果相同！

4. 标签模板字面量的妙用

除了基本的字符串插值，标签模板还能做很多有趣的事情：

// 简单的SQL转义（注意：生产环境请使用专业库）
function sql(strings, ...values) {return strings.reduce((result, str, i) => {const value = values[i] !== undefined ? `'${String(values[i]).replace(/'/g, "''")}'` : '';return result + str + value;}, '');
}const userId = 123;
const userName = "O'Reilly";
const query = sql`SELECT * FROM users WHERE id = ${userId} AND name = ${userName}`;
console.log(query); 
// "SELECT * FROM users WHERE id = '123' AND name = 'O''Reilly'"

5. 使用 `Proxy` 实现优雅的对象监听

Proxy 让我能够创建具有自定义行为的对象：

function createObservable(target, callback) {return new Proxy(target, {set(obj, prop, value) {const oldValue = obj[prop];obj[prop] = value;callback(prop, oldValue, value);return true;}});
}const user = createObservable({ name: "小明" }, (prop, oldVal, newVal) => {console.log(`属性 ${prop} 从 ${oldVal} 变为 ${newVal}`);
});user.name = "小红"; // 控制台输出: "属性 name 从 小明 变为 小红"
user.age = 18;     // 控制台输出: "属性 age 从 undefined 变为 18"

6. 利用 `WeakMap` 实现私有属性

在ES6类中实现真正的私有属性：

const privateData = new WeakMap();class Person {constructor(name, age) {// 将私有数据存储在WeakMap中，键为当前实例privateData.set(this, { name, age });}getName() {return privateData.get(this).name;}getAge() {return privateData.get(this).age;}
}const person = new Person("小明", 25);
console.log(person.getName()); // "小明"
console.log(person.name);      // undefined - 真正私有的！

7. 使用 `Array.from` 进行复杂数组操作

Array.from 的第二个参数是个映射函数，功能强大：

// 创建数字序列
const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);console.log(range(5, 10)); // [5, 6, 7, 8, 9, 10]// 创建字母序列
const alphabet = (start, end) => Array.from({ length: end.charCodeAt(0) - start.charCodeAt(0) + 1 }, (_, i) => String.fromCharCode(start.charCodeAt(0) + i));console.log(alphabet('A', 'F')); // ['A', 'B', 'C', 'D', 'E', 'F']

8. 使用 `Object.fromEntries` 进行对象转换

这个方法是 Object.entries 的逆操作，非常适合数据转换：

// 将URL查询参数转换为对象
const queryString = "name=小明&age=25&city=北京";
const searchParams = new URLSearchParams(queryString);
const queryObject = Object.fromEntries(searchParams);
console.log(queryObject); 
// { name: "小明", age: "25", city: "北京" }// 数组转对象
const pairs = [['width', 100], ['height', 200]];
const dimensions = Object.fromEntries(pairs);
console.log(dimensions); // { width: 100, height: 200 }