js基础速成-函数

🕗 发布于 2024-09-30 06:05 javascript 前端 vue.js

函数

在这一部分，我们将重点关注自定义函数。什么是函数？在开始编写函数之前，让我们理解什么是函数，以及我们为什么需要函数。

函数是一个可重用的代码块或编程语句，旨在执行特定任务。函数通过关键字 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)) // 4

const 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 + lastName
  return fullName
}

console.log(generateFullName())
console.log(generateFullName('大卫', '史密斯'))

function calculateAge(birthYear, currentYear = 2019) {
  let age = currentYear - birthYear
  return 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 + lastName
  return 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)) // 月球表面的重力

原文地址：https://blog.csdn.net/always_and_forever_/article/details/142478939

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：python.tkinter设计标记语言(渲染5-列表)
下一篇：一、Spring Boot集成Spring Security之自动装配

Vue2 + ElementUI + axios + VueRouter入门
Vue2 + ElementUI + axios + VueRouter入门
阅读更多2024-10-05
云原生化 - 基础镜像（简约版）
根据最佳实践的建议，每个容器只做一件事，并尽可能较少基础镜像的内容，这里列举一些常用的基础镜像，可供选择。
阅读更多2024-10-05
【网络】用网线连接两台电脑实现远程桌面
在现代办公和学习中，远程桌面技术日益重要。通过局域网（LAN）连接两台电脑，可以轻松实现远程控制。本文将详细介绍如何使用网线连接两台电脑，并设置远程桌面功能，以便进行高效的协作和管理。
阅读更多2024-10-05
【pytorch】张量求导2
在阅读上图部分时，笔者一直在思考l是什么，再看之后发现，l此处指的是损失loss关于y的标量函数，因此l对于W的计算可以使用链式法则进行。
阅读更多2024-10-05
C# 事件和委托的详细介绍
通过事件和委托，你可以实现灵活的事件处理机制，允许对象之间的松耦合和异步通知。这在创建图形用户界面（GUI）应用程序或处理异步操作时尤为重要。
阅读更多2024-10-05
828华为云征文｜部署个人文档管理系统 Docspell
Docspell 是一款个人文档管理器。有时也被称为“文档管理系统”(DMS)。
阅读更多2024-10-05
828华为云征文｜部署开源超轻量中文OCR项目 TrWebOCR
TrWebOCR 是开源易用的中文离线OCR，识别率媲美大厂，并且提供了易用的web页面及web的接口，方便人类日常工作使用或者其他程序来调用。
阅读更多2024-10-05
深度学习基础—目标定位与特征点检测
在图片分类问题中，卷积神经网络的输出的特征向量会经过softmax单元，并最终输出类别，如果正在构建汽车自动驾驶系统的网络，那么对象可能包括以下几类：行人、汽车、摩托车和背景，这意味着图片中不含有前三
阅读更多2024-10-05
JMeter压测HTTPS 在window 11处理SSL证书认证
利用jdk中的keytool.exe工具，重新生成证书。crm 去到命令窗口，再去到JDK路径下，如下。在此位置，找到chrome 的证书。选择制作好的证书导入即可。证书到出到指定的路径，
阅读更多2024-10-05
解决跨域问题
首先新建一个vue.config.js文件。解决则参照vue-cli官网。首先可以先搭建后端接口。第二种通过代理来解决。
阅读更多2024-10-05

js基础速成-函数

函数

函数声明

没有参数且不返回的函数

返回值的函数

带参数的函数

带两个参数的函数

带多个参数的函数

带无限数量参数的函数

普通函数中的无限数量参数

箭头函数中的无限数量参数

匿名函数

表达式函数

自执行函数

箭头函数

带默认参数的函数

相关文章