【前端,TypeScript】TypeScript速成(七):数组与函数式编程相结合

数组与函数式编程相结合

使用函数式编程遍历数组

一个最简单的例子如下:

typescript 复制代码
const a = [1, 2, 3, 4]

a.forEach(v => {
    console.log(v)
})

由于此处使用了函数式编程,因此我们可以做一些比 console.log 更复杂的事情,比如将 a 中的数据放到另一个数组当中:

typescript 复制代码
const a = [1, 2, 3, 4]

const b: number[] = []
a.forEach(v => {
    b.push(v * v)
    console.log(v)
})

console.log(b)

// output
[LOG]: 1 
[LOG]: 2 
[LOG]: 3 
[LOG]: 4 
[LOG]: [1, 4, 9, 16] 

一个更简洁的写法如下,该方法使用了数组的 map 方法:

typescript 复制代码
const a = [1, 2, 3, 4]

const b = a.map(v => v * v)

console.log(b)

// out
[LOG]: [1, 4, 9, 16] 

数组求平方和

同样可以通过 forEach 方法来对数组进行遍历,并在 forEach 当中使用箭头函数来完成数组求和。

typescript 复制代码
const a = [1, 2, 3, 4]

const b = a.map(v => v * v)
let sum = 0
b.forEach(v => sum += v)
console.log(sum)

另一种方法是使用数组的 reduce 方法:

typescript 复制代码
const a = [1, 2, 3, 4]

const b = a.map(v => v * v)
const sum = b.reduce((s, v) => s + v)
console.log(sum)

reduce 方法传入了一个箭头函数,每一轮的 s + v 将会赋给下一轮的 s,而这一轮的 s 将会赋给下一轮的 v。

相关推荐
程序员猫哥_7 分钟前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞057 分钟前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、13 分钟前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao13 分钟前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
杨超越luckly19 分钟前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强
hedley(●'◡'●)1 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
qq5_8115175151 小时前
web城乡居民基本医疗信息管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
百思可瑞教育1 小时前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
百锦再1 小时前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
CappuccinoRose1 小时前
JavaScript 学习文档(二)
前端·javascript·学习·数据类型·运算符·箭头函数·变量声明