JavaScript find，传递{}和不传递{}有什么区别？

问题描述

我有以下示例。这两个find（）函数都可以工作，但是我不确定第一个带有{}的函数如何传递到回调函数中。

1。如果使用{}，则假定将一个对象传递给find函数，但是如何将“ title”作为对象与值（1.2）进行比较。有人可以解释一下基础知识，参考会更好。

2。我知道第二个查找函数正在传入对象，并且arr.title引用对象'array1'中的值。我是对的吗？

const array1 = [{name:1,title:1.1},{name:2,title:1.2}];

const found = array1.find(({title}) => title ==1.2);
const found2 = array1.find(arr => arr.title ==1.2);

console.log(found);
console.log(found2);

上面的代码的结果是：

> Object { name: 2,title: 1.2 }
> Object { name: 2,title: 1.2 }

解决方法

这与Array.prototype.find无关，而是JavaScript函数参数语法的一般功能。

可以使用对象或数组解构语法定义函数参数。

函数定义

 function f(x) {
   return x.p;
 }
 

声明一个带有一个名为x的清单文件参数的函数。

行为上相同的功能

 function f({p}) {
    return p;
 }

声明一个匿名的清单参数，并提取其p属性。

从调用者的角度来看，这两个函数的行为相同，并且如果传递的第一个参数未定义，则两个函数实际上都将抛出；如果x不具有p属性，则两个函数都将返回undefined。

第二种形式纯粹是在函数实现中使用的语法便利性，用于提取名为p的属性并在没有限定的情况下使用它。

参数解构是JavaScript's general destructuring syntax的实例，它具有其他应用程序，包括变量声明，赋值和提供默认值。

,

如果使用{}，则假定将一个对象传递给find函数...

这是一种称为 destructuring （一种特殊语法）的Javascript魔术。

正在发生的事情：对象的值正由其键解包。

结果：该对象被传递的密钥所破坏。结果就是返回键值的值，就像在find函数中看到的一样。

要更好地理解破坏，您可以阅读here或here

为了更好地了解正在发生的事情，您可能首先必须完全了解find函数及其工作原理。

我知道第二个查找功能正在传递对象...

正在发生的事情：您正在传递所谓的回调。您实际上是在说，对于数组中的每个条目，运行此函数，并根据对回调（您的函数）的求值，将输出提供给我。

结果：这意味着，如果所检查的每个对象的每个标题的标题等于1.2，则在您的回调arr => arr.title ==1.2的情况下，其结果为true，因此该对象为返回。

您可能会发现this和/或this很有帮助。

,

发生的事情是销毁工作：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const { title } = { title: 1.2 };
console.log(title);  // 1.2