JavaScript 函数的种类 (6大类型)

函数的重要性

在JavaScript中,函数(Function)是个重要的内容,它在开发中会经常被用到。这几年函数式编程越来越火,如React,在React中,一个组件就是一个函数,React许多Hook也是一个函数。

函数的种类

1.Named Functions (具名函数)

具名函数在JavaScript中最常见的定义函数的方法,他使用function关键字定义,后面跟着函数名、小括号(里面写参数)、大括号(里面是函数体,写函数执行的代码)。

js 复制代码
// 定义
function foo () {
	console.log("foo 函数执行了~")
}
// 使用
foo()

2.Anonymous Functions (匿名函数)

匿名函数,顾名思义就是没有名字的函数,它通常用在函数表达式中,或者作为参数传递给其他函数。

js 复制代码
// 定义
const foo = function (name) {
	console.log(`你好${name}!`)
}
// 使用
foo("张翼德") // 你好张翼德

3.IIFE Functions (立即执行函数)

JavaScript函数一般是使用了在执行函数体,而立即使用函数体 (IIFE) 是在创建后立即定义并执行的函数表达式。用于创建私有作用域并避免污染全局命名空间。

js 复制代码
// 定义 => 自使用(不用显性地使用,自己会使用)
(function () {
	const msg = "我乃常山赵子龙!"
	console.log(msg) // 我乃常山赵子龙!
})()

4.Arrow Functions (箭头函数)

箭头函数在ES6中引入,是一种编写函数表达式的简洁方式。它的语法很短,有时候一行代码足以。

  • 当箭头函数只有一个参数的的时候,小括号可以省略不写。

  • 箭头函数函数体只有一行代码并且有返回值时,大括号和return关键字可以省略不写。

js 复制代码
// 定义1
const sayHello = name => {
	console.log(`你好${name}`)
}
// 使用
sayHello("吕布") // 你好吕布


// 定义2
const sum = (num1, num2) => num1 + num2
// 使用
console.log(sum(1, 1)) // 2

5.Higher Order Function (高阶函数)

将一个或多个函数作为参数或返回一个函数的函数称为高阶函数。如:map()filter()reduce()等。

js 复制代码
const list = ["刘备", "关羽", "张飞"]

function findLiu (name) {
	return name === "刘备"
}
// 将普通函数传进去
const newArr1 = list.filter(findLiu)
console.log(newArr1) // ['刘备']

// 将匿名函数传进入
const newArr2 = list.filter(function (name) {
	return name === "关羽"
})
console.log(newArr2) // ['关羽']

// 将箭头函数传进去
const newArr3 = list.filter(name => name === "张飞")
console.log(newArr3) // ['张飞']

6.Constructor Function (构造函数)

构造函数用于创建具有相似属性和方法的对象。 使用new关键字使用它们来创建对象的实例。
构造函数函数名必须使用大写字母开头,这也是JavaScript区分普通函数和构造函数方法。

js 复制代码
// 定义
function Person(name, age) {
	this.name = name
	this.age = age
}
// 使用
const liubei = new Person("刘备", 24)
const guanyu = new Person("关羽", 25)
const zhangfei = new Person("张飞", 20)

console.log(`${liubei.name}${liubei.age}岁!`) // 刘备24岁!
console.log(`${guanyu.name}${guanyu.age}岁!`) // 关羽25岁!
console.log(`${zhangfei.name}${zhangfei.age}岁!`) //张飞20岁!
相关推荐
别拿曾经看以后~8 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试13 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
problc43 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山8 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询