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

相关推荐
心.c1 分钟前
Vue2
前端·javascript·vue.js
蜗牛_snail3 分钟前
Ant Design Vue 之可拖拽对话框
前端·javascript·vue.js
好像是个likun24 分钟前
Echarts的认识和基本用法
前端·javascript·echarts
谢道韫66633 分钟前
权限管理的方法
前端
时间sk1 小时前
HTML——73.button按钮
前端·javascript·html
布兰妮甜1 小时前
使用 Vue CLI 创建 Vue.js 项目的详细指南
前端·vue.js·vue cli
一 乐1 小时前
校园台球|基于SprinBoot+vue的校园台球厅人员与设备管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·校园台球
余道各努力,千里自同风3 小时前
Js中的Object.entries()
开发语言·前端·javascript
明月看潮生7 小时前
青少年编程与数学 02-005 移动Web编程基础 15课题、移动应用开发
前端·青少年编程·编程与数学·移动web
JINGWHALE17 小时前
设计模式 结构型 外观模式(Facade Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·外观模式