函数
在这一部分,我们将重点关注自定义函数。什么是函数?在开始编写函数之前,让我们理解什么是函数,以及我们为什么需要函数。
函数是一个可重用的代码块或编程语句,旨在执行特定任务。函数通过关键字 function
声明,后跟一个名称,最后是括号 ()
。括号可以带有参数。如果函数带有参数,则在调用时会传入一个参数。函数还可以有默认参数。要将数据存储到函数中,函数必须返回某些数据类型。我们通过调用或调用函数来获取值。
函数使代码:
- 干净且易于阅读
- 可重用
- 易于测试
函数可以通过几种方式声明或创建:
- 声明函数
- 表达式函数
- 匿名函数
- 箭头函数
函数声明
让我们看看如何声明一个函数以及如何调用一个函数。
//声明一个没有参数的函数
function functionName() {// 代码在这里
}
functionName() // 通过名称和括号调用函数
没有参数且不返回的函数
函数可以声明为没有参数。
示例:
// 没有参数的函数,计算一个数字的平方
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(); // 必须通过名称调用函数以执行
function printFullName() {let firstName = 'Asabeneh';let lastName = 'Yetayeh';let space = ' ';let fullName = firstName + space + lastName;console.log(fullName);
}printFullName(); // 调用函数
返回值的函数
函数也可以返回值,如果函数不返回值,则函数的值为 undefined
。让我们用返回值的方式重写上述函数。从现在开始,我们返回值而不是打印它。
function printFullName() {let firstName = 'Asabeneh';let lastName = 'Yetayeh';let space = ' ';let fullName = firstName + space + lastName;return fullName;
}
console.log(printFullName());
function addTwoNumbers() {let numOne = 2;let numTwo = 3;let total = numOne + numTwo;return total;
}console.log(addTwoNumbers());
带参数的函数
在函数中,我们可以传递不同数据类型(数字、字符串、布尔值、对象、函数)作为参数。
// 带一个参数的函数
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));
带两个参数的函数
// 带两个参数的函数
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'));
带多个参数的函数
// 带多个参数的函数
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
对象访问。让我们看一个例子。
// 让我们访问 arguments 对象
function sumAllNums() {console.log(arguments);
}sumAllNums(1, 2, 3, 4);
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// 函数声明
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
对象。为了实现一个可以接受无限数量参数的箭头函数,我们使用扩展运算符(spread operator),后面跟着任何参数名。我们传递的任何内容都可以作为数组在箭头函数中访问。让我们看一个例子。
// 让我们访问 arguments 对象
const sumAllNums = (...args) => {// console.log(arguments),在箭头函数中找不到 arguments 对象// 相反,我们使用后跟扩展运算符的参数 (...)console.log(args);
}sumAllNums(1, 2, 3, 4);
// [1, 2, 3, 4]
// 函数声明
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
以下是你提供的JavaScript函数部分的中文翻译:
匿名函数
匿名函数或无名函数
const anonymousFun = function() {console.log('我是一 个匿名函数,我的值存储在 anonymousFun 中')
}
表达式函数
表达式函数是匿名函数。在我们创建一个没有名称的函数并将其赋值给一个变量后,返回函数的值时应调用该变量。请看下面的示例。
// 函数表达式
const square = function(n) {return n * n
}console.log(square(2)) // -> 4
自执行函数
自执行函数是匿名函数,无需调用即可返回值。
(function(n) {console.log(n * n)
})(2) // 4,但如果我们想返回并存储数据,而不仅仅是打印,可以如下进行let squaredNum = (function(n) {return n * n
})(10)console.log(squaredNum)
箭头函数
箭头函数是编写函数的一种替代方式,但函数声明和箭头函数之间有一些小差异。
箭头函数使用箭头而不是关键字 function 来声明函数。让我们看看函数声明和箭头函数的写法。
// 这是我们写常规或声明函数的方式
// 让我们将这个声明函数改为箭头函数
function square(n) {return n * n
}console.log(square(2)) // 4const square = n => {return n * n
}console.log(square(2)) // -> 4// 如果代码块中只有一行代码,可以如下写,显式返回
const square = n => n * n // -> 4
const changeToUpperCase = arr => {const newArr = []for (const element of arr) {newArr.push(element.toUpperCase())}return newArr
}const countries = ['芬兰', '瑞典', '挪威', '丹麦', '冰岛']
console.log(changeToUpperCase(countries))// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
const printFullName = (firstName, lastName) => {return `${firstName} ${lastName}`
}console.log(printFullName('Asabeneh', 'Yetayeh'))
上面的函数只有返回语句,因此可以显式返回如下。
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`console.log(printFullName('Asabeneh', 'Yetayeh'))
带默认参数的函数
有时我们为参数传递默认值,当我们调用函数时,如果没有传递参数,则将使用默认值。函数声明和箭头函数都可以有一个或多个默认值。
// 语法
// 声明一个函数
function functionName(param = value) {// 代码
}// 调用函数
functionName()
functionName(arg)
示例:
function greetings(name = '彼得') {let message = `${name},欢迎来到 30 天 JavaScript!`return message
}console.log(greetings())
console.log(greetings('Asabeneh'))
function generateFullName(firstName = 'Asabeneh', lastName = 'Yetayeh') {let space = ' 'let fullName = firstName + space + lastNamereturn fullName
}console.log(generateFullName())
console.log(generateFullName('大卫', '史密斯'))
function calculateAge(birthYear, currentYear = 2019) {let age = currentYear - birthYearreturn age
}console.log('年龄:', calculateAge(1819))
function weightOfObject(mass, gravity = 9.81) {let weight = mass * gravity + ' N' // 值必须先转换为字符串return weight
}console.log('物体的重量(牛顿):', weightOfObject(100)) // 地球表面的 9.81 重力
console.log('物体的重量(牛顿):', weightOfObject(100, 1.62)) // 月球表面的重力
让我们看看如何用箭头函数编写上述函数
// 语法
// 声明一个函数
const functionName = (param = value) => {// 代码
}// 调用函数
functionName()
functionName(arg)
示例:
const greetings = (name = '彼得') => {let message = name + ',欢迎来到 30 天 JavaScript!'return message
}console.log(greetings())
console.log(greetings('Asabeneh'))
const generateFullName = (firstName = 'Asabeneh', lastName = 'Yetayeh') => {let space = ' 'let fullName = firstName + space + lastNamereturn fullName
}console.log(generateFullName())
console.log(generateFullName('大卫', '史密斯'))
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('年龄:', calculateAge(1819))
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'console.log('物体的重量(牛顿):', weightOfObject(100)) // 地球表面的 9.81 重力
console.log('物体的重量(牛顿):', weightOfObject(100, 1.62)) // 月球表面的重力