JavaScript Functional Programming：函数

Functional Programming，函数式编程。是一套编写程序的方法，也可以说是一种风格。

函数

先了解一下什么是 Function，函数。来看一行代码：

console.log('hello ~')

执行上面代码会在控制台上输出一个 “hello ~”，每次你想在控制台上输出一个 “hello ~”，你都要执行一下上面这行代码。我们可以用一个函数包装一下这行代码：

function greet() {
  console.log('hello ~')
}

定义函数可以使用 function 这个关键词，上面我们定义了一个名字是 greet（问候的意思） 的函数。执行 / 调用这个函数，就会在控制台上输出一个 “hello ~”，因为这是这个函数要做的事情。调用函数可以在函数的名字的后面加上一组括号()，像这样：

greet()

在我们的程序里，可以重复使用这个函数。

参数

让函数更灵活一点，可以在定义它的时候去设置一些它能接受的参数，这些参数你可以在函数的内部去使用，在调用函数的时候，你可以指定函数的参数的值。像这样再改进一下 greet 这个函数：

function greet(greeting) {
  console.log(greeting)
}

我们在定义函数的时候为它添加了一个名字叫 greeting 的参数，然后在函数的内部，我们用了一下这个 greeting 参数，把它放在了 console.log 里面。这样，调用这个函数的时候可以设置一下 greeting 具体表示的值是什么，像这样：

greet('hello')
// 输出 'hello'

greet('您好')
// 输出 '您好'

greet 现在更灵活了，因为每次使用它的时候，我们可以指定不同的问候语。

函数也可以使用多个参数：

function greet(greeting, name) {
  console.log(`${greeting}, ${name}`)
}

现在 greet 有两个参数，greeting 还有 name ，参数之间使用逗号分隔开。再用它的时候现在可以这样：

greet('您好', '王皓')
// 输出 '您好，王皓'

默认值

函数的参数可以有默认的值，这样如果调用函数的时候不去指定参数的值，参数的值就会使用默认我们为它设置的值。

function greet(greeting = 'hello', name = 'you') {
  console.log(`${greeting}, ${name}`)
}

用一下这个函数：

greet()
// 输出 'hello, you'

调用函数时没有具体去设置它支持的参数的值，所以参数的值就是它的默认的值。greeting 是 “hello” ，name 的值是 “you” 。

再像这样用一下函数：

greet('您好', '小雪')
// 输出 '您好，小雪'

调用函数时设置了参数的值，这样这些具体指定的值就会替代参数的默认的值。

返回值

函数一般就是去做一些计算，然后返回计算之后的结果，返回这个结果用的是 return 这个关键词。

function greet(greeting = 'hello', name = 'you') {
  return `${greeting}, ${name}`
}

我们去掉了之前在 greet 函数里面用的 console.log ，也就是输出一些内容到控制台上。这次我们用了一个 return ，返回了一段文字，这样这个函数就会更灵活一些。因为你可以自己决定到底怎么样使用这个函数返回的值，比如可以把结果输出到控制台上，也可以让它在页面上显示出来。

var greeting = greet('hello', 'ninghao.net')
console.log(greeting)

// 在控制台上输出 'hello, ninghao.net'

因为 greet 函数现在可以返回一个值，所以我们可以把这个值交给一个变量。这个变量的值会是一段问候语，我们又把这段问候语输出到了控制台上。

像这样再利用一下 greet 函数返回的值：

document.querySelector('body').innerHTML = `<h1>${greeting}</h1>`

这会在页面的 body 元素上显示出 “ hello, ninghao.net”，这行文字会在一个 h1 标签的包装里。