javascript - 增强 Vanilla JS 功能

Question

我有一个具有属性的对象。这些属性可能存在也可能不存在。

为了能够访问属性，我按如下方式工作:

myData.properties.find(p => p.name == 'target').value = 'Foo';

现在 myData 可能根本没有名称为 target 的属性。因此，我想扩展 Array.prototype.find() 函数来创建缺失的元素。

Array.prototype.findOrCreate()

它应该稍后可用:

myData.properties.findOrCreate(p => p.name == 'target', { name: 'target', value: '' });

但是，我不知道如何处理这个函数。

我不是在这里寻找解决方案(我什至问这里没有人提供解决方案)，而是我实现它时的必要理论。

在 PHP 中，我会查看函数定义并扩展它。但是，我找不到 Array.prototype.find() 的函数定义。 .

Answer 1

不需要扩展数组原型(prototype)(因为这会导致冲突和向前兼容性问题)。相反，您可以创建一个单独的函数，以数组作为输入来执行此操作。如果 .find() 返回 undefined<，您可以将 .find() 与条件 (?) 运算符一起使用以默认值:

const findOrCreate = (arr, f, def) => {
  const res = arr.find(f);
  return res === undefined ? def : res;
}

const data = [{name: 'foo', value: 1}, {name: 'bar', value: 1}];
const obj = findOrCreate(data, p => p.name === 'xyz', { name: 'target', value: '' });
console.log(obj);

或者，如果您支持 ES2020，则可以使用 nullish coalescing operator (??) 像这样:

const findOrCreate = (arr, f, def) => arr.find(f) ?? def;

const data = [{name: 'foo', value: 1}, {name: 'bar', value: 1}];
const obj = findOrCreate(data, p => p.name === 'xyz', { name: 'target', value: '' });
console.log(obj); // {name: "target", value: ""}