JavaScript 고차 함수에 대한 자세한 소개(코드 포함)

이 글은 JavaScript 고차 함수(코드 포함)에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

함수를 데이터로 사용하고 강력한 패턴을 잠금해제하세요.

고차 함수

다른 함수를 받아들이거나 반환하는 함수를 고차 함수라고 합니다.

가 고차인 이유는 문자열, 숫자 또는 부울 값이 아니라 더 높은 수준의 기능을 작동하기 때문입니다. 아름다운 메타.

JavaScript에서 함수를 사용하면

• 변수로 저장하고
• 배열로 사용하고
• 객체 속성(메서드)으로 할당하고
• 매개변수로 전달하고
• 다른 함수에서 전달합니다. 함수는 반환합니다.
다른 모든 데이터와 마찬가지로

. 이것이 핵심입니다.

함수는 데이터에서 작동합니다

String은 data

sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

Number는 data

double = (x) => x * 2;
result = double(4);
console.log(result); // 8

Boolean은 data

getClearance = (allowed) => allowed ?
  'Access granted' :
  'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'

Object는 data

getFirstName = (obj) => obj.firstName;
result = getFirstName({
  firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'

Array는 data

len = (array) => array.length;
result = len([1, 2, 3]);
console.log(result); // 3

이 5가지 유형은 모두 주류 언어 중 하나입니다. .

무엇이 그들을 일류 시민으로 만드는가? 이를 전달하고, 변수와 배열에 저장하고, 계산의 입력으로 사용할 수 있습니다.

모든 데이터

처럼 사용할 수 있습니다.

함수는 데이터로도 사용할 수 있습니다.

JavaScript에서 함수를 데이터로 사용하는 4가지 방법:

다른 함수에 매개변수로 전달

객체 속성으로 설정
1. 배열에 저장
2. 변수로 설정
4. 함수를 매개변수로

isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]

filter가 isEven을 사용하여 디지털로 유지할 항목을 결정하는 방법을 살펴보세요. isEven은 다른 함수

의 매개변수

인 함수입니다.

filter 是如何用 isEven 来决定保留哪些数字的？ isEven是一个函数，是另一个函数的参数。

它由每个数字的 filter 调用，并使用返回值 true 或 false 来确定这个数字是否应该保留或丢弃。

返回函数

add = (x) => (y) => x + y;

add 需要两个参数，但不是一次全部提供。这是一个只需要 x 的函数，它返回一个只需要y的函数。因为 JavaScript 允许函数成为返回值 —— 就像字符串、数字、布尔值那样。

如果你愿意，仍然可以立即提供 x 和 y，并进行双重调用

result = add(10)(20);
console.log(result); // 30

或者先 x 后 y：

add10 = add(10);
result = add10(20);
console.log(result); // 30

让我们回过头来看最后一个例子。 add10 是用一个参数调用 add 的结果。并控制台中输出它。

add10 是一个函数，它接受一个 y 并返回 x + y。在你提供 y 之后，它会马上计算并返回你所要的最终结果。

更高的可重用性

高阶函数的最大好处可能是更高的可重用性。没有它，JavaScript 数组的主要方法 —— map，filter 和 reduce 将不存在！

这是一个用户列表。我们将对他们的信息进行一些计算。

users = [{
  name: 'Yazeed',
  age: 25
}, {
  name: 'Sam',
  age: 30
}, {
  name: 'Bill',
  age: 20
}];

Map

如果没有高阶函数，我们需要用循环来模仿 map 的功能。

getName = (user) => user.name;
usernames = [];
for (let i = 0; i <p>或者我们可以这样做！</p><pre class="brush:php;toolbar:false">usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在没有高阶函数的世界中，我们仍然需要循环来重新实现  filter각 숫자에 대해 filter에 의해 호출되며 반환 값 true 또는 false를 사용하여 숫자를 유지할지 아니면 버려야 할지 결정합니다. .

반환 함수

startsWithB = (string) => string
  .toLowerCase()
  .startsWith('b');
namesStartingWithB = [];
for (let i = 0; i <h4>
<code>add</code>에는 두 개의 매개변수가 필요하지만 한 번에 모두 필요하지는 않습니다. 이는 <code>x</code>만 취하고 <code>y</code>만 취하는 함수를 반환하는 함수입니다. JavaScript를 사용하면 함수가 문자열, 숫자, 부울과 마찬가지로 반환 값이 될 수 있기 때문입니다. </h4><p>원하는 경우 <code>x</code> 및 <code>y</code>를 즉시 제공하고 </p><pre class="brush:php;toolbar:false">namesStartingWithB = users
  .filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

🎜또는 x를 먼저 두 번 호출한 다음 를 호출할 수 있습니다. >y : 🎜rrreee🎜마지막 예시로 돌아가겠습니다. add10은 하나의 인수로 add를 호출한 결과입니다. 그리고 콘솔에 출력합니다. 🎜🎜🎜🎜add10은 y를 받아들이고 x + y를 반환하는 함수입니다. y를 제공하면 원하는 최종 결과를 즉시 계산하여 반환합니다. 🎜🎜🎜🎜더 높은 재사용성🎜🎜고차 함수의 가장 큰 이점은 아마도 더 높은 재사용성일 것입니다. 이것이 없었다면 주요 JavaScript 배열 메소드인 map, filter 및 reduce는 존재하지 않았을 것입니다! 🎜🎜사용자 목록입니다. 우리는 그들의 정보에 대해 몇 가지 계산을 할 것입니다. 🎜rrreee🎜Map🎜🎜고차 함수가 없으면 루프를 사용하여 map의 기능을 모방해야 합니다. 🎜rrreee🎜 아니면 우리가 할 수 있어요! 🎜rrreee🎜Filter🎜🎜고차 함수가 없는 세상에서도 filter의 기능을 다시 구현하려면 루프가 필요합니다. 🎜rrreee🎜 아니면 우리가 할 수 있어요! 🎜rrreee🎜Reduce🎜🎜예, 감소합니다... 고차 함수 없이는 이렇게 많은 멋진 것들을 얻을 수 없습니다!!

위 내용은 JavaScript 고차 함수에 대한 자세한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!