主题
函数
概述
到目前为止，我们已经看到了许多内置的 JavaScript 函数。在本节中，我们将专注于自定义函数。什么是函数？在我们开始制作函数之前，让我们了解什么是函数以及为什么我们需要函数？
函数是一个可重用的代码块或编程语句，旨在执行特定任务。 函数通过 function 关键字声明，后跟名称，再跟括号 ()。括号可以接受参数。如果函数接受参数，它将通过参数调用。函数也可以接受默认参数。要将数据存储到函数中，函数必须返回某些数据类型。要获取值，我们调用或调用函数。
函数使代码：
- 干净且易于阅读
- 可重用
- 易于测试
函数可以通过几种方式声明或创建：
- 声明函数
- 表达式函数
- 匿名函数
- 箭头函数
函数声明
让我们看看如何声明函数以及如何调用函数。
js
//声明一个没有参数的函数
function functionName() {
// 代码在这里
}
functionName() // 通过名称和括号调用函数没有参数和返回值的函数
函数可以在没有参数的情况下声明。
示例：
js
// 没有参数的函数，一个使数字平方的函数
function square() {
let num = 2
let sq = num * num
console.log(sq)
}
square() // 4
// 没有参数的函数
function addTwoNumbers() {
let numOne = 10
let numTwo = 20
let sum = numOne + numTwo
console.log(sum)
}
addTwoNumbers() // 函数必须通过其名称调用才能执行js
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
console.log(fullName)
}
printFullName() // 调用函数返回值的函数
函数也可以返回值，如果函数不返回值，函数的值是 undefined。让我们用 return 重写上面的函数。从现在开始，我们向函数返回值而不是打印它。
js
function printFullName (){
let firstName = 'Asabeneh'
let lastName = 'Yetayeh'
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(printFullName())js
function addTwoNumbers() {
let numOne = 2
let numTwo = 3
let total = numOne + numTwo
return total
}
console.log(addTwoNumbers())带一个参数的函数
在函数中，我们可以传递不同的数据类型（数字、字符串、布尔值、对象、函数）作为参数。
js
// 带一个参数的函数
function functionName(parm1) {
//代码在这里
}
functionName(parm1) // 在调用或调用时需要一个参数
function areaOfCircle(r) {
let area = Math.PI * r * r
return area
}
console.log(areaOfCircle(10)) // 应该用一个参数调用
function square(number) {
return number * number
}
console.log(square(10))带两个参数的函数
js
// 带两个参数的函数
function functionName(parm1, parm2) {
//代码在这里
}
functionName(parm1, parm2) // 在调用或调用时需要两个参数
// 没有参数的函数不接受输入，所以让我们制作一个带参数的函数
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
console.log(sum)
}
sumTwoNumbers(10, 20) // 调用函数
// 如果函数不返回，它不会存储数据，所以它应该返回
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo
return sum
}
console.log(sumTwoNumbers(10, 20))
function printFullName(firstName, lastName) {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))带多个参数的函数
js
// 带多个参数的函数
function functionName(parm1, parm2, parm3,...){
//代码在这里
}
functionName(parm1,parm2,parm3,...) // 在调用或调用时需要三个参数
// 这个函数接受数组作为参数并求和数组中的数字
function sumArrayValues(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
//调用函数
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))带无限数量参数的函数
有时我们不知道用户将传递多少个参数。因此，我们应该知道如何编写可以接受无限数量参数的函数。我们在函数声明（常规函数）和箭头函数之间的做法有显著差异。让我们在函数声明和箭头函数中看到示例。
常规函数中的无限数量参数
函数声明提供了一个函数作用域的 arguments 类数组对象。我们作为参数传递给函数的任何内容都可以从函数内部的 arguments 对象访问。让我们看一个例子
js
// 让我们访问 arguments 对象
function sumAllNums() {
console.log(arguments)
}
sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]js
// 函数声明
function sumAllNums() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173箭头函数中的无限数量参数
箭头函数没有函数作用域的 arguments 对象。要在箭头函数中实现接受无限数量参数的函数，我们使用扩展运算符后跟任何参数名称。我们作为参数传递给函数的任何内容都可以在箭头函数中作为数组访问。让我们看一个例子
js
// 让我们访问 arguments 对象
const sumAllNums = (...args) => {
// console.log(arguments), 在箭头函数中找不到 arguments 对象
// 相反，我们使用一个参数后跟扩展运算符 (...)
console.log(args)
}
sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]js
// 函数声明
const sumAllNums = (...args) => {
let sum = 0
for (const element of args) {
sum += element
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173匿名函数
匿名函数或没有名称的函数
js
const anonymousFun = function() {
console.log(
'I am an anonymous function and my value is stored in anonymousFun'
)
}表达式函数
表达式函数是匿名函数。在我们创建一个没有名称的函数后，我们将其分配给一个变量。要从函数返回值，我们应该调用变量。看下面的例子。
js
// 函数表达式
const square = function(n) {
return n * n
}
console.log(square(2)) // -> 4自调用函数
自调用函数是不需要调用就能返回值的匿名函数。
js
(function(n) {
console.log(n * n)
})(2) // 4, 但是如果我们想要返回并存储数据而不是仅仅打印，我们按如下所示进行
let squaredNum = (function(n) {
return n * n
})(10)
console.log(squaredNum)箭头函数
箭头函数是编写函数的替代方法，但是函数声明和箭头函数有一些细微差别。
箭头函数使用箭头而不是关键字 function 来声明函数。让我们看看函数声明和箭头函数。
js
// 这是我们编写普通或声明函数的方式
// 让我们将这个声明函数更改为箭头函数
function square(n) {
return n * n
}
console.log(square(2)) // 4
const square = n => {
return n * n
}
console.log(square(2)) // -> 4
// 如果我们在代码块中只有一行，可以如下编写，显式返回
const square = n => n * n // -> 4js
const changeToUpperCase = arr => {
const newArr = []
for (const element of arr) {
newArr.push(element.toUpperCase())
}
return newArr
}
const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland']
console.log(changeToUpperCase(countries))
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]js
const printFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`
}
console.log(printFullName('Asabeneh', 'Yetayeh'))上面的函数只有 return 语句，因此，我们可以显式返回如下。
js
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`
console.log(printFullName('Asabeneh', 'Yetayeh'))带默认参数的函数
有时我们向参数传递默认值，当我们调用函数时，如果我们不传递参数，将使用默认值。函数声明和箭头函数都可以有默认值。
js
// 语法
// 声明函数
function functionName(param = value) {
//代码
}
// 调用函数
functionName()
functionName(arg)示例：
js
function greetings(name = 'Peter') {
let message = `${name}, welcome to 30 Days Of JavaScript!`
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))js
function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))js
function calculateAge(birthYear, currentYear = 2019) {
let age = currentYear - birthYear
return age
}
console.log('Age: ', calculateAge(1819))js
function weightOfObject(mass, gravity = 9.81) {
let weight = mass * gravity + ' N' // 值必须首先更改为字符串
return weight
}
console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 地球表面的重力
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // 月球表面的重力让我们看看如何用箭头函数编写上面的函数
js
// 语法
// 声明函数
const functionName = (param = value) => {
//代码
}
// 调用函数
functionName()
functionName(arg)示例：
js
const greetings = (name = 'Peter') => {
let message = name + ', welcome to 30 Days Of JavaScript!'
return message
}
console.log(greetings())
console.log(greetings('Asabeneh'))js
const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {
let space = ' '
let fullName = firstName + space + lastName
return fullName
}
console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))js
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('Age: ', calculateAge(1819))js
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'
console.log('Weight of an object in Newton: ', weightOfObject(100)) // 9.81 地球表面的重力
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // 月球表面的重力函数声明与箭头函数
将在其他部分介绍。
🌕 你是一颗冉冉升起的明星，现在你知道了函数。现在，你被函数的力量超级充电了。你刚刚完成了第 7 天的挑战，你在通往伟大的道路上前进了 7 步。现在为你的大脑和肌肉做一些练习。
练习
练习：级别 1
声明一个函数 fullName，它打印出你的全名。
声明一个函数 fullName，现在它接受 firstName、lastName 作为参数，并返回你的全名。
声明一个函数 addNumbers，它接受两个参数并返回总和。
矩形的面积计算如下：area = length x width。编写一个计算 areaOfRectangle 的函数。
矩形的周长计算如下：perimeter= 2x(length + width)。编写一个计算 perimeterOfRectangle 的函数。
长方体的体积计算如下：volume = length x width x height。编写一个计算 volumeOfRectPrism 的函数。
圆的面积计算如下：area = π x r x r。编写一个计算 areaOfCircle 的函数
圆的周长计算如下：circumference = 2πr。编写一个计算 circumOfCircle 的函数
物质的密度计算如下：density= mass/volume。编写一个计算 density 的函数。
速度是通过将移动物体覆盖的总距离除以所花费的总时间来计算的。编写一个计算移动物体速度 speed 的函数。
物质的重量计算如下：weight = mass x gravity。编写一个计算 weight 的函数。
摄氏度可以使用此公式转换为华氏度：oF = (oC x 9/5) + 32。编写一个将摄氏度转换为华氏度 convertCelsiusToFahrenheit 的函数。
身体质量指数（BMI）计算如下：bmi = weight in Kg / (height x height) in m2。编写一个计算 bmi 的函数。BMI 用于广泛定义 20 岁或以上成年人的不同体重组。根据下面给出的信息检查一个人是 underweight, normal, overweight 还是 obese。
- 同样的组适用于男性和女性。
- Underweight：BMI 小于 18.5
- Normal weight：BMI 为 18.5 到 24.9
- Overweight：BMI 为 25 到 29.9
- Obese：BMI 为 30 或更多
编写一个名为 checkSeason 的函数，它接受一个月份参数并返回季节：Autumn、Winter、Spring 或 Summer。
Math.max 返回其最大参数。编写一个函数 findMax，它接受三个参数并返回它们的最大值，而不使用 Math.max 方法。
jsconsole.log(findMax(0, 10, 5)) 10 console.log(findMax(0, -10, -2)) 0
练习：级别 2
线性方程计算如下：ax + by + c = 0。编写一个计算线性方程值的函数 solveLinEquation。
二次方程计算如下：ax2 + bx + c = 0。编写一个计算二次方程值的函数 solveQuadEquation。
jsconsole.log(solveQuadratic()) // {0} console.log(solveQuadratic(1, 4, 4)) // {-2} console.log(solveQuadratic(1, -1, -2)) // {2, -1} console.log(solveQuadratic(1, 7, 12)) // {-3, -4} console.log(solveQuadratic(1, 0, -4)) //{2, -2} console.log(solveQuadratic(1, -1, 0)) //{1, 0}声明一个函数名 printArray。它接受数组作为参数，并打印出数组的每个值。
编写一个函数名 showDateTime，它使用 Date 对象以这种格式显示时间：08/01/2020 04:08。
shshowDateTime() 08/01/2020 04:08声明一个函数名 swapValues。此函数将 x 的值交换为 y。
jsswapValues(3, 4) // x => 4, y=>3 swapValues(4, 5) // x = 5, y = 4声明一个函数名 reverseArray。它接受数组作为参数，并返回数组的反转（不使用方法）。
jsconsole.log(reverseArray([1, 2, 3, 4, 5])) //[5, 4, 3, 2, 1] console.log(reverseArray(['A', 'B', 'C'])) //['C', 'B', 'A']声明一个函数名 capitalizeArray。它接受数组作为参数，并返回大写数组。
声明一个函数名 addItem。它接受一个项目参数，并在添加项目后返回一个数组
声明一个函数名 removeItem。它接受一个索引参数，并在删除项目后返回一个数组
声明一个函数名 sumOfNumbers。它接受一个数字参数，并添加该范围内的所有数字。
声明一个函数名 sumOfOdds。它接受一个数字参数，并添加该范围内的所有奇数。
声明一个函数名 sumOfEven。它接受一个数字参数，并添加该范围内的所有偶数。
声明一个函数名 evensAndOdds。它接受一个正整数作为参数，并计算数字中偶数和奇数的数量。
shevensAndOdds(100); The number of odds are 50. The number of evens are 51.编写一个函数，它接受任意数量的参数并返回参数的总和
jssum(1, 2, 3) // -> 6 sum(1, 2, 3, 4) // -> 10编写一个生成 randomUserIp 的函数。
编写一个生成 randomMacAddress 的函数
声明一个函数名 randomHexaNumberGenerator。当调用此函数时，它生成一个随机十六进制数。函数返回十六进制数。
shconsole.log(randomHexaNumberGenerator()); '#ee33df'声明一个函数名 userIdGenerator。当调用此函数时，它生成七个字符的 id。函数返回 id。
shconsole.log(userIdGenerator()); 41XTDbE
练习：级别 3
修改 userIdGenerator 函数。声明一个函数名 userIdGeneratedByUser。它不接受任何参数，但使用 prompt() 接受两个输入。其中一个输入是字符数，第二个输入是应该生成的 id 数量。
shuserIdGeneratedByUser() 'kcsy2 SMFYb bWmeq ZXOYh 2Rgxf ' userIdGeneratedByUser() '1GCSgPLMaBAVQZ26 YD7eFwNQKNs7qXaT ycArC5yrRupyG00S UbGxOFI7UXSWAyKN dIV0SSUTgAdKwStr '编写一个函数名 rgbColorGenerator，它生成 rgb 颜色。
shrgbColorGenerator() rgb(125,244,255)编写一个函数 arrayOfHexaColors，它返回数组中任意数量的十六进制颜色。
编写一个函数 arrayOfRgbColors，它返回数组中任意数量的 RGB 颜色。
编写一个函数 convertHexaToRgb，它将十六进制颜色转换为 rgb，并返回 rgb 颜色。
编写一个函数 convertRgbToHexa，它将 rgb 转换为十六进制颜色，并返回十六进制颜色。
编写一个函数 generateColors，它可以生成任意数量的十六进制或 rgb 颜色。
jsconsole.log(generateColors('hexa', 3)) // ['#a3e12f', '#03ed55', '#eb3d2b'] console.log(generateColors('hexa', 1)) // '#b334ef' console.log(generateColors('rgb', 3)) // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)'] console.log(generateColors('rgb', 1)) // 'rgb(33,79, 176)'调用你的函数 shuffleArray，它接受一个数组作为参数，并返回一个洗牌数组
调用你的函数 factorial，它接受一个整数作为参数，并返回数字的阶乘
调用你的函数 isEmpty，它接受一个参数，并检查它是否为空
调用你的函数 sum，它接受任意数量的参数，并返回总和。
编写一个名为 sumOfArrayItems 的函数，它接受一个数组参数并返回所有项目的总和。检查所有数组项目是否为数字类型。如果不是，给出合理的反馈。
编写一个名为 average 的函数，它接受一个数组参数并返回项目的平均值。检查所有数组项目是否为数字类型。如果不是，给出合理的反馈。
编写一个名为 modifyArray 的函数，它接受数组作为参数，修改数组的第五个项目并返回数组。如果数组长度小于五，则返回 'item not found'。
jsconsole.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);sh['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']jsconsole.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']);sh['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM']jsconsole.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);sh'Not Found'编写一个名为 isPrime 的函数，它检查数字是否为质数。
编写一个函数，检查数组中的所有项目是否唯一。
编写一个函数，检查数组的所有项目是否为相同的数据类型。
JavaScript 变量名不支持特殊字符或符号，除了 $ 或 _。编写一个函数 isValidVariable，它检查变量是有效还是无效变量。
编写一个函数，它返回 0-9 范围内七个随机数的数组。所有数字必须是唯一的。
jssevenRandomNumbers() [(1, 4, 5, 7, 9, 8, 0)]编写一个名为 reverseCountries 的函数，它接受 countries 数组，首先复制数组并返回原始数组的反转
🎉 恭喜！🎉