JavaScript 高阶函数快速入门

[复制链接]

下载APP可以快速和圈友联系

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
把函数以数据的形式去利用,并解锁一些强大的形式。

JavaScript 高阶函数快速入门-1.jpg

高阶函数

接管和/或返回别的一个函数的函数被称为高阶函数

之所所以高阶,是由于它并非字符串、数字或布尔值,而是从更高条理来操纵函数。标致的元。

利用 JavaScript 中的函数,你可以
    将它们存储为变量 在数组中利用它们 将它们指定为工具属性(方式) 将它们作为参数停止传递 将它们从其他函数中返回

就像一切的其他数据一样。这是关键地点。

函数操纵数据

字符串是数据
sayHi = (name) => `Hi, ${name}!`;
result = sayHi('User');
console.log(result); // 'Hi, User!'

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

布尔型是数据
getClearance = (allowed) => allowed ?
'Access granted' :
'Access denied';
result1 = getClearance(true);
result2 = getClearance(false);
console.log(result1); // 'Access granted'
console.log(result2); // 'Access denied'


工具是数据
getFirstName = (obj) => obj.firstName;
result = getFirstName({
firstName: 'Yazeed'
});
console.log(result); // 'Yazeed'


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

这5品种型是一切支流说话中的一等百姓。

是什么使他们成为一等百姓的?你可以传递它们,将它们存储在变量和数组中,将它们用作计较的输入。你可以像利用任何数据一样去利用它们。

函数也可以作为数据的形式去用

JavaScript 高阶函数快速入门-2.jpg

在javascript中把函数用作数据的4种方式:
    把它们看成参数传给别的函数 把他们设定成工具属性 保存在数组中 把它们设为变量的形式

作为参数的函数
isEven = (num) => num % 2 === 0;
result = [1, 2, 3, 4].filter(isEven);
console.log(result); // [2, 4]

看看 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 的成果。并控制台中输出它。

JavaScript 高阶函数快速入门-3.jpg

add10 是一个函数,它接管一个 y 并返回 x + y。在你供给 y 以后,它会顿时计较并返回你所要的终极成果。

JavaScript 高阶函数快速入门-4.jpg

更高的可重用性

高阶函数的最大益处能够是更高的可重用性。没有它,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 < users.length; i++) {
const name = getName(users);
usernames.push(name);
}
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

大概我们可以这样做!
usernames = users.map(getName);
console.log(usernames);
// ["Yazeed", "Sam", "Bill"]

Filter

在没有高阶函数的天下中,我们照旧需要循环来重新实现 filter 的功用。
startsWithB = (string) => string
.toLowerCase()
.startsWith('b');
namesStartingWithB = [];
for (let i = 0; i < users.length; i++) {
if (startsWithB(users.name)) {
namesStartingWithB.push(users);
}
}
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

大概我们可以这样做!
namesStartingWithB = users
.filter((user) => startsWithB(user.name));
console.log(namesStartingWithB);
// [{ "name": "Bill", "age": 20 }]

Reduce

是的,reduce......没有更高阶的功用,实现不了那末多很酷的工具!!
total = 0;
for (let i = 0; i < users.length; i++) {
total += users.age;
}
console.log(total);
// 75

这个怎样样?
totalAge = users
.reduce((total, user) => user.age + total, 0);
console.log(totalAge);
// 75

总结
    字符串、数字、bool、数组和工具可以存储为变量,数组和属性或方式。 JavaScript 以不异的方式处置函数。 这答应在其他函数上运转别的一个函数:高阶函数。 Map、filter 和 reduce 是典型的例子 —— 而且使变更、搜索和列表求和等常见形式加倍轻易!

链接:https://juejin.im/post/5c920f22f265da60f41cac63

作者:疯狂的技术宅
温馨提示:
好向圈www.kuaixunai.com是一个专业经验分享交流平台,你可以在这里发布专业经验,也可以发布需求与服务,禁止带推广链接、联系方式、违法词等,违规将封禁账号。 下载好向圈客户端可以随时随地交流经验,也可以和圈友发起聊天成为好友哦!
回复

使用道具 举报

已有(2)人评论

跳转到指定楼层
123471342 发表于 2020-4-24 18:38:57
感觉js好难啊
回复

使用道具 举报

亦欢咯咯j 发表于 2020-4-24 18:44:31
转发了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本圈子积分规则