每天3分钟，重学ES6-ES12(四)函数的补充展开语法

最新推荐文章于 2024-10-09 11:19:11 发布

虎妞先生

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量16

点赞数

文章标签： es6 javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_33259455/article/details/135523297

版权

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，今天介绍的是函数的补充展开语法

函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求:
- 传入了参数，那么使用传入的参数;
- 没有传入参数，那么使用一个默认值;
而在ES6中，我们允许给函数一个默认值:

代码演示

```js // 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之内了。

代码演示

```js // 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的;
- 剩余参数必须放到最后一个位置，否则会报错。
  
  代码演示

```js 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)中添加的新特性;
注意:展开运算符其实是一种浅拷贝;

代码演示

```js 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: '广州市'} // 数组被展开

``` 点赞.webp