函数参数默认值、函数参数解构赋值、rest参数、扩展运算符、箭头函数

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

ES6 基础之函数扩展

[TOC]

### 函数参数默认值
在ES6之前返回默认值的方法
```js
function foo(param) {
    var val = param || "hello word"
    return val;
}
console.log(foo())
//输出：hello word
```

ES6扩展后的参数默认值
```js
function foo(param = "hello word"){
    return param;
}
console.log(foo())
//输出：hello word
```

### 函数参数解构赋值
使用对象作为函数参数时，对象参数必须要有值，如果调用时不传参会提示错误，下面代码就给对象赋值了一个`{}`空对象作为默认值,所以`foo()`直接调用时输出了对象成员的默认值，参数为对象时也是可以给对象成员设置默认值的

```js
function foo({ username = "曹操", userage = 56 } = {}) {
    console.log(username, userage)
}
foo()
//输出：曹操 56
foo({ username: "刘备", userage: 60 })
//输出：刘备 60
```

### rest参数
rest参数也叫剩余参数，在函数参数中使用三个点来声明 `...param`,从下面的示例我们可以看出调用函数时传了3个参数，但我们函数只声明了2个参数，一个常规参数和一个剩余参数，这时参数 `a = 1` 是调用时传的第一个参数，参数 `param = [2,3]` 它接收到的是剩下两个值组成的一个数组，这就是剩余参数的作用，把没有对应关系的传参集合成数组给了剩余参数

```js
function foo(a, ...param) {
    console.log(a, param)
}
foo(1, 2, 3)
//输出：1 [2,3]
```

### 扩展运算符
函数的扩展运算符和rest参数是反着来的，它是在调用函数的可以将一个数组传递给方法，在传参的数组前面使用三点来进行修饰 `...[]`,下面的示例中使用 `...[]` 传参后，函数 `foo` 的参数 `a,b,c,d,e` 都分别获取到了对应的传参

```js
function foo(a,b,c,d,e){
    console.log(a + b + c + d + e)
}
foo(...[1,2,3,4,5])
```

下面再通过一个合并数组方式来看扩展运算符 `...`，从示例中可以看出 `...` 起到的作用就是把数组进行了拆分了

```js
let attr1 = [1,2,3]
let attr2 = [4,5,6]
let attr = [...attr1,...attr2]
console.log(attr)
//输出：[1,2,3,4,5,6]
```

### 箭头函数