每天3分钟，重学ES6-ES12(四)函数的补充 展开语法
每天3分钟，重学ES6-ES12(四)函数的补充 展开语法
虎妞先生
发布于 2022-10-27 19:57:57
发布于 2022-10-27 19:57:57
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
前言
今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是函数的补充 展开语法
函数的默认参数
- 在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求:
- 传入了参数，那么使用传入的参数;
- 没有传入参数，那么使用一个默认值;
- 而在ES6中，我们允许给函数一个默认值:
代码演示
// ES5以及之前给参数默认值
/**
* 缺点:
* 1.写起来很麻烦, 并且代码的阅读性是比较差
* 2.这种写法是有bug
*/
function foo(m, n) {
m = m || "aaa"
n = n || "bbb"
console.log(m, n)
}
// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
console.log(m, n)
}
// foo()
foo(0, "")函数默认值的补充
- 默认值也可以和解构一起来使用:
- 另外参数的默认值我们通常会将其放到最后(在很多语言中，如果不放到最后其实会报错的): *但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配;
- 另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。
代码演示
// 1.对象参数和默认值以及解构
function printInfo({name, age} = {name: "why", age: 18}) {
console.log(name, age)
}
printInfo({name: "kobe", age: 40})
// 另外一种写法
function printInfo1({name = "why", age = 18} = {}) {
console.log(name, age)
}
printInfo1()
// 2.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
console.log(x, y, z)
}
// bar(10, 20)
bar(undefined, 10, 20)
// 3.有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
console.log(x, y, z, m, n)
}
console.log(baz.length)
// 打印 4函数的剩余参数
ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中:
- 如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组;
- 那么剩余参数和arguments有什么区别呢?
- 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参;
- arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作;
- arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，
- 而rest参数是ES6中提供 并且希望以此来替代arguments的;
- 剩余参数必须放到最后一个位置，否则会报错。
代码演示
function foo(...args, m, n) {
console.log(m, n)
console.log(args)
console.log(arguments)
}
foo(20, 30, 40, 50, 60)
// 报错
// Uncaught SyntaxError: Rest parameter must be last formal parameter
// rest paramaters必须放到最后
// Rest parameter must be last formal parameter
function foo(m, n = m + 1) {
console.log(m, n)
}
foo(10);展开语法
- 展开语法(Spread syntax):
- 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开;
- 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开;
- 展开语法的场景:
- 在函数调用时使用;
- 在数组构造时使用;
- 在构建对象字面量时，也可以使用展开运算符，这个是在ES2018(ES9)中添加的新特性;
- 注意:展开运算符其实是一种浅拷贝;
代码演示
const names = ["abc", "cba", "nba"]
const name = "why"
const info = {name: "why", age: 18}
// 1.函数调用时
function foo(x, y, z) {
console.log(x, y, z)
}
// foo.apply(null, names)
foo(...names)
//打印 abc cba nba
foo(...name)
// 打印 w h y
// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames)
//打印 ['abc', 'cba', 'nba', 'w', 'h', 'y']
// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)
// 打印 {0: 'abc', 1: 'cba', 2: 'nba', name: 'why', age: 18, address: '广州市'}
// 数组被展开最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录