【JS30】JavaScript 30天练习 第七天 函数

📔 第 7 天 函数

之前的介绍中用到了许多内置的 JavaScript 函数。 本节将重点介绍自定义函数。
什么是函数？ 在开始创建函数之前，需要先了解一下函数是什么以及为什么需要函数。

函数是指在执行特定任务的可重用代码块或编程语句。
函数由函数关键字后+名称和括号 () 声明。括号可以带参数。
如果一个函数接受一个参数，它将被调用参数。 函数也可以采用默认参数。 要将数据存储到函数中，函数必须返回某些数据类型。 以便调用函数或调用函数的结果值。

函数的代码要求：

• 干净易读
• 可重复使用
• 易于测试

可以通过以下几种方式声明或创建函数：

(此处翻译有问题，尤其是前两个)

• 声明功能
• 表达功能
• 匿名函数
• 箭头函数

函数声明

此节介绍如何声明一个函数以及如何调用一个函数。

//声明一个没有参数的函数（无参函数）
function functionName() {
  // 在这里写函数内容
}
functionName() // 通过函数名和括号调用函数

声明没有参数和返回值的函数

函数在声明时可以没有参数和返回值。

例子：

// 无参函数，此函数用于求2的平方
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 = 'Kobe'
      let lastName = 'Bryant'
      let space = ' '
      let fullName = firstName + space + lastName
      console.log(fullName)
}

printFullName() // 调用函数

函数返回值

函数带返回值，如果函数没有返回值，则函数的值是未定义的。
用 return 来返回函数返回值。

function printFullName (){
      let firstName = 'Kobe'
      let lastName = 'Bryant'
      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) // 调用函数
// 如果一个函数并没有返回他内部的数据，他就需要return。
// If a function doesn't return it doesn't store data, so it should return

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('Kobe', 'Bryant'))

带有多个参数的函数

// 带有多个参数的函数
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))

参数数量不限的函数

有时并不知道用户要传递多少参数。因此，就需要知道如何编写一个可以接受无限数量参数的函数。
此类做法在函数声明（常规函数）和箭头函数之间存在显着差异。下面分别介绍函数声明和箭头函数的例子。

常规函数中的参数数量不限

函数声明提供了一个函数范围的参数数组，如对象。在函数中作为参数传递的任何东西都可以从函数内部的参数对象中访问。

// 访问参数对象
​
function sumAllNums() {
console.log(arguments)
}

sumAllNums((1, 2, 3, 4)) 
// 输出结果：Arguments [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

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

箭头函数没有函数范围的参数对象。为了实现一个在箭头函数中接受无限数量参数的函数，需要使用扩展运算符后跟任何参数名称。在函数中作为参数传递的任何东西都可以在箭头函数中作为数组访问。

// 访问参数对象
​
const sumAllNums = (...args) => {
// console.log(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

匿名函数

匿名函数是没有函数名的。

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

// 如果我们的代码块只有一行，可以写成如下，不必写return
const square = n => n * n  // -> 4

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"]

const printFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`
}

console.log(printFullName('Kobe', 'Bryant'))

上面的函数只有 return 语句，因此，可以省去return，写成以下形式。

const printFullName = (firstName, lastName) => `${firstName} ${lastName}`

console.log(printFullName('Kobe', 'Bryant'))

带默认参数的函数

有时需要将默认值传递给参数，当调用函数时，如果不传递参数，则将使用默认值。 函数声明和箭头函数一样都可以有一个或多个默认值。

// 函数声明
function functionName(param = value) {
  //在这里写函数内容
}

// 调用函数
functionName()
functionName(arg)

例子:

function greetings(name = 'Peter') {
  let message = `${name}, welcome to 30 Days Of JavaScript!`
  return message
}

console.log(greetings())
console.log(greetings('Kobe'))

function generateFullName(firstName = 'Kobe', lastName = 'Bryant') {
  let space = ' '
  let fullName = firstName + space + lastName
  return fullName
}

console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))

function calculateAge(birthYear, currentYear = 2019) {
  let age = currentYear - birthYear
  return age
}

console.log('Age: ', calculateAge(1819))

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)) // 月球的重力常数是1.62

上述函数改写为箭头函数如下：

// 函数声明
const functionName = (param = value) => {
  //在这里写函数内容
}

// 调用函数
functionName()
functionName(arg)

例子:

const greetings = (name = 'Peter') => {
  let message = name + ', welcome to 30 Days Of JavaScript!'
  return message
}

console.log(greetings())
console.log(greetings('Kobe'))

const generateFullName = (firstName = 'Kobe', lastName = 'Bryant') => {
  let space = ' '
  let fullName = firstName + space + lastName
  return fullName
}

console.log(generateFullName())
console.log(generateFullName('David', 'Smith'))

const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear
console.log('Age: ', calculateAge(1819))

const weightOfObject = (mass, gravity = 9.81) => mass * gravity + ' N'
  
console.log('Weight of an object in Newton: ', weightOfObject(100))
console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) 

函数声明 vs 箭头函数

将在其他部分中介绍。