4 个鲜为人知的 JavaScript 实用技巧

在 JavaScript 的广阔世界中，总有一些隐藏的宝藏技巧等待着被发现。以下将为您揭示 4 个鲜为人知但极为实用的 JavaScript 技巧，帮助您提升编程效率和代码质量。

技巧一：使用解构赋值简化对象操作

解构赋值是 JavaScript 中一项强大的特性。以往，当我们从一个对象中获取属性值时，可能会这样写：

const user = { name: 'John', age: 30 };
const name = user.name;
const age = user.age;

而使用解构赋值，可以更简洁地实现：

const { name, age } = user;

这样不仅使代码更简洁易读，还能提高开发效率。

技巧二：利用可选链操作符避免错误

在访问对象的深层属性时，若不确定中间的属性是否存在，以往可能需要进行多层的条件判断。现在，通过可选链操作符 ?. 可以更优雅地处理：

const user = { address: { city: 'New York' } };
const city = user?.address?.city;

如果中间的某个属性不存在，不会抛出错误，而是返回 undefined。

技巧三：使用空值合并操作符设置默认值

在给变量赋值时，如果变量的值为 null 或 undefined，我们通常会使用 || 来设置默认值。但 || 存在一个问题，当变量的值为 false、0 等假值时，也会使用默认值。而空值合并操作符 ?? 则只在值为 null 或 undefined 时才使用默认值：

const num = null;
const defaultNum = num?? 10;

技巧四：使用代理对象实现数据监听

通过 Proxy 对象，可以创建一个代理来监听对目标对象的操作，实现数据的动态监听和响应：

const target = { name: 'Alice' };
const handler = {
  set(obj, prop, value) {
    console.log(`设置了属性 ${prop} 的值为 ${value}`);
    obj[prop] = value;
    return true;
  }
};
const proxy = new Proxy(target, handler);
proxy.name = 'Bob';

掌握这些鲜为人知的 JavaScript 实用技巧，将为您的开发工作带来更多的便利和效率。不断探索和学习新的技巧，能让您在 JavaScript 的编程之旅中更加得心应手。