Category: Javascript
在 JavaScript 中处理数字和日期输入的更好方法
valueAsNumber 你的代码可能像这样： 这很好，但实际上有一种更好的方法来读取数字值。 但是这个部分： 但是从IE10时代开始，我们就有了更好的方法来获取和设置数字值: 上述问题的更好解决方案可能是这样的: 你同样可以查询一个 DOM 节点并使用它: 而且，重要的是，你也可以给它赋值 一个小问题 valuseAsNumber的类型始终是数字。这意味着如果没有为输入设置当前值，你将得到NaN。 是的，一个有趣的JavaScript 问题。因此，在将valueAsNumber写入需要实际数字的位置之前，一定要检查它是否为NaN valueAsDate 对于日期输入，我们还可以得到一个方便的valueAsDate属性: 或者纯 JavaScript 同样，也可以给它赋值： 这次没有陷阱 值得庆幸的是，对于valueAsDate，当输入为空时，我们得到的是null。 浏览器支持 即使这可能是你第一次了解这些属性，但它们已经存在多年了，甚至从IE 10的恐龙时代开始就存在了。
尽量使用 Map 代替 Object
JavaScript 的对象非常棒，它几乎可以做任何事。 但是，因为可以，不意味着必须。 例如, 如果使用对象来存储经常增删的任意键值对，`Map` 是更好的选择。 ## 对象的性能问题 而对于对象，删除操作符的性能很差，`Map` 针对这种情况进行了优化，在某些情况下甚至会更快。 如果你想知道为什么，这与JavaScript虚拟机如何通过假想JS对象的形状来优化它们有关，而 `map` 是专门为 `hashmap` 的用例构建的，其中键是动态的和不断变化的。 除了性能外，`Map` 同时也解决了对象存在的一些问题。 ## 内置 `Key` 问题 最主要的问题是对象预设了大量的内置 Key。 尽管是个空对象，你依然可以访问这些属性，每个还都有值。 仅凭这一点就可以清楚地说明不应该将对象用于任意键值的 `hashmap`，因为它可能会导致一些非常棘手的 `bug`。 ## 迭代尴尬 说到 `JavaScript` 对象处理键的奇怪方式，遍历对象充满了陷阱。 例如，你应该已经知道不要这样做： 然后，有人可能告诉你可以这样： 但这仍然是一个问题, `myObject.hasOwnProperty` 可以轻松的被重置成任意值。 没有什么都防止谁去做 `myObject.hasOwnProperty = () => explode()` 所以你应该好好收拾一下: 或者你不想代码看起来太乱，你可以用最近心中的 `Object.hasOwn`: 或者干脆放弃使用 `for` 循环，直接使用 `Object.keys` 和 `forEach`. 然而，有了 `Map`，就没有这样的问题了。你可以使用一个标准的 `for`…
在 JavaScript 中深度克隆（Deep Cloning）一个对象
现在，JavaScript 提供了一个底层的方法来深度克隆一个对象， 他就是 structureClone。 structureClone 不但可以复制对象，而且可以复制嵌套的数组，事件，时间对象。 对的， structureClone 不但可以复制上面的内容，还可以作用于： 为什么不用 对象展开？ 重要的是深度复制，如果只是 浅层复制（shallow copy）, 不需要复制嵌套对象或者数组，我们只需要做对象展开。 或者 但是一旦有嵌套，就会有麻烦。 复制对象的修改会改变原来的对象。 可以看到，我们没有完全复制原来的对象。 嵌套的数组依然是原来引用地址。 用 JSON.parse(JSON.stringify(x)) ？ 对的，这是个很好的窍门，而且非常高效。但有一些缺点，structuredClone 解决了。 例如： 这不是我们想要， date 应该是 Date 对象，而不是字符串。这是因为 JSON.stringify 只能处理基础对象，数组和基本类型。其他类型都将被转换，如时间变成字符串， Set 则简单的变成 {}，甚至直接忽略 undefined 和 函数。 例如： 我们还必须删除原来的循环引用, 否则 JSON.stringify 会报错。 因此，如果我们的需求符合它可以做的事情，这个方法可能很好。 _.cloneDeep ? Lodash 的 cloneDeep 函数称为一个通用的解决方案。结果也正如期望的那样。 只有一个问题， 这个包 17.4k（gzipped: 5.3k）。 假设你只导入了这个函数。如果你没有意识到摇树优化并不总是像你希望的那样工作，而是以更常用的方式导入，那么你可能会不小心为这个函数导入25kb的文件。…
