🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名 →

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 标签的包装里。

函数式编程 JavaScript

评论

皓哥,第一个console.log(greeting)和后边onsole.log(`${greeting}, ${name}`),能说一下加上${}的具体用意是?

哦,这个是 ES6 里的新东西,叫字符串模板。在这个模板里,把变量放到 ${} 里面,像这样 ${name},就可以输出 name 变量的值了。你可以把变量跟静态的文字混合到一块儿。像这样 `我的名字叫 ${name}` 。

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点