JavaScript find(), в чем разница передачи {} и без {}?

#javascript #reactjs #find #brackets

#javascript #reactjs #Найти #скобки

Вопрос:

У меня есть следующий пример. Обе функции find() работают, но я не уверен, как первая с {} передается в функцию обратного вызова.

1. Если используется {}, я предполагаю, что объект передается в функцию find, но как ‘title’ в качестве объекта может использоваться для сравнения со значениями (1.2). Может кто-нибудь, пожалуйста, объяснить основы, со ссылкой будет еще лучше.

2. Я понимаю, что вторая функция поиска передается в object, а 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 }
  

Комментарии:

1. Проблема решена, для тех, кто хочет знать деструктивное назначение понятнее, чем единственная ссылка, которую они предоставили ниже. Вы можете просмотреть это видео на YouTube: youtube.com/watch?v=-vR3a11Wzt0

Ответ №1:

Это не связано с Array.prototype.find , а скорее является общей особенностью синтаксиса параметров функции JavaScript.

Параметр функции может быть определен с использованием синтаксиса деструктурирования объекта или массива.

Определение функции

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

Объявляет функцию, которая принимает единственный параметр манифеста с именем x .

Поведенчески идентичная функция

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

Объявляет единственный анонимный параметр манифеста и извлекает его свойство p.

С точки зрения вызывающей стороны, обе функции ведут себя одинаково, и действительно, обе выдадут результат, если первый переданный аргумент не определен, и обе вернут значение undefined, если у x нет свойства p и так далее.

Вторая форма — это чисто синтаксическое удобство, используемое в реализации функций для извлечения свойства с именем p и работы с ним без каких-либо оговорок.

Деструктурирование параметров — это пример общего синтаксиса деструктурирования JavaScript, который имеет другие приложения, включая объявления переменных, присвоения и предоставление значений по умолчанию.

Ответ №2:

Если используется {}, я предполагаю, что объект передается в функцию find…

Это некая магия Javascript, называемая деструктурированием, особый синтаксис.

Что происходит: значение объекта / ов распаковывается их ключами.

Результат: объект разрушен переданным ключом. В результате возвращается значение ключа, которое вы видите в своей функции find.

Чтобы лучше понять деструктурирование, вы можете прочитать здесь или здесь

Однако, чтобы лучше понять, что происходит, вам, вероятно, сначала нужно полностью понять функцию find и как она работает.

Я понимаю, что вторая функция поиска передается в object…

Что происходит: Вы передаете то, что известно как обратный вызов. По сути, вы говорите, что для каждой из записей в моем массиве запустите эту функцию и, основываясь на оценке моего обратного вызова (вашей функции), выдайте мне результат.

Результат: Это означает, что если title равен 1.2 для любого / каждого проверяемого объекта, в случае вашего обратного вызова arr => arr.title ==1.2 он примет значение true и, таким образом, объект будет возвращен.

Вы можете найти это и / или это полезным.

Комментарии:

1. Спасибо, он охватил все пункты, включая функцию find, которые не были охвачены другими ответами.

Ответ №3:

Что происходит, так это деструктурирующее присвоение: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

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