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

相关推荐
计算机程序设计小李同学10 小时前
幼儿园信息管理系统的设计与实现
前端·bootstrap·html·毕业设计
雨季66610 小时前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
tao35566711 小时前
【用AI学前端】HTML-02-HTML 常用标签(基础)
前端·html
2601_9495328411 小时前
Psello HTML Template: A Developer‘s Deep-Dive Review and Guide - Download Free
前端·windows·html·seo·wordpress·gpl
CappuccinoRose11 小时前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局
穿过锁扣的风11 小时前
如何操作HTML网页
前端·javascript·html
San30.11 小时前
从零构建坚固的前端堡垒:TypeScript 与 React 实战深度指南
前端·react.js·typescript
yunhuibin11 小时前
VideoPipe环境搭建及编译ubuntu240403
前端·人工智能
CHANG_THE_WORLD12 小时前
PDF文档结构分析 一
前端·pdf
东东51612 小时前
果园预售系统的设计与实现spingboot+vue
前端·javascript·vue.js·spring boot·个人开发