前言

今天开始和大家一起系统的学习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: '广州市'}
// 数组被展开

点赞.webp

最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！

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

前言

函数的默认参数

代码演示

函数默认值的补充

代码演示

函数的剩余参数

代码演示

展开语法

代码演示

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