【前端,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。

相关推荐
天黑请闭眼18 分钟前
视频文件上传至服务器后浏览器无法在线播放
前端
一位搞嵌入式的 genius19 分钟前
前端实战开发(四):从迭代器到异步编程:ES6 Generator 全面解析 + 实战问题排查
开发语言·前端·es6·前端实战
拉不动的猪24 分钟前
# 关于初学者对于JS异步编程十大误区
前端·javascript·面试
玖釉-29 分钟前
解决PowerShell执行策略导致的npm脚本无法运行问题
前端·npm·node.js
Larcher1 小时前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐1 小时前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭1 小时前
如何理解HTML语义化
前端·html
jump6802 小时前
url输入到网页展示会发生什么?
前端
诸葛韩信2 小时前
我们需要了解的Web Workers
前端
brzhang2 小时前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构