ES5写法

//1.写起来很麻烦, 并且代码的阅读性是比较差
//2.这种写法是有bug
function foo(m, n) {
  m = m || 'aaa';
  n = n || 'bbb';
  console.log(m, n);
}
foo(); //aaa bbb

ES6写法

//给函数参数提供默认值
function foo(m = 'aaa', n = 'bbb') {
  console.log(m, n);
}
foo(); //aaa bbb

解构语法

1、默认值解构

function printInfo({ name, age } = { name: 'abc', age: 18 }) {
  console.log(name, age);
}
printInfo({ name: 'byj', age: 18 });

另一种写法：解构后赋默认值

function printInfo1({ name = 'byj', age = 18 } = {}) {
  console.log(name, age);
}
printInfo1();

2、默认值形参

一般情况下有默认值的形参放到最后

function bar(x, y, z = 30) {
  console.log(x, y, z);
}
bar(10, 20);//10 20 30

3、默认值函数的length

函数的length属性就是参数的个数

有默认值的参数不算在函数的参数之内

function baz(x, y, z, m, n = 30) {
  console.log(x, y, z, m, n);
}
console.log(baz.length); //4

剩余参数

可以将不定数量的参数放入到一个数组中

如果最后一个参数是… 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组

function foo(m, n, ...args) {
  console.log(m, n);
  console.log(args);
}
foo(20, 30, 40, 50, 60); 
//20 30
//[ 40, 50, 60 ]

剩余参数和arguments的区别

剩余参数只包含那些没有对应形参的实参，而arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

注意：剩余参数必须放到最后一个位置，否则会报错。

展开语法

可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

使用场景

在函数调用时使用；
在数组构造时使用；
在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

//ES5写法
const names = ['abc', 'cba', 'nba'];
// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z);
}
foo.apply(null, names); //abc cba nba
//剩余参数写法
const names = ['abc', 'cba', 'nba'];
// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z);
}
foo(...names);//abc cba nba
//2、构造数组时
const names = ['abc', 'cba', 'nba'];
const newNames = [...names];
console.log(newNames); //[ 'abc', 'cba', 'nba' ]
//3、ES9构建对象字面量
const info = { name: 'byj', age: 18 };
const obj = { ...info, address: '杭州市' };
console.log(obj);//{ name: 'byj', age: 18, address: '杭州市' }