ES6参数处理

259 阅读2分钟

1. 默认参数

ES5 中函数的默认参数是 undefined,而在 ES6 中,可以指定默认参数。
默认参数可以是任何类型。

// ES5
function sum(a, b){
  a = a || 1  // 兜底写法,如果 a 为undefined,则 a 赋值为 1
  b = (typeof b !== 'undefined') ?  b : 1 // 检测 b 是否为 undefined,若是则 b 赋值为 1
  return a + b
}
sum()         // 2
// ES6 
function sum(a = 1,b = 1){  // ES6不需要在函数体内检查,直接在形参设置默认值
  return a + b
}
sum()          // 2

默认参数特点:

  • 参数手动设置为 undefined 时,依然会进行默认值的赋值。
function sum(a = 1, b = 1){
  return a + b
}

sum(undefined,undefined)  // 2
  • 每次函数调用,都会创建一个新的参数对象
function push(item, array = []){
  array.push(item)
  return array
}

console.log(push(1))  // [1]
console.log(push(2))  // [2]
// 每次函数调用,都是一个新的 array 默认值 [],所以push(2) 不会在 push(1) 返回的数组上 push
  • 默认参数可用于后面的默认参数
function sum(a = 1, b = a){
  return a + b
}
sum()       // 2

2. 剩余参数

ES6可以用 ...来匹配参数的最后几个。
有时候,需要获取arguments倒数几个参数

// ES5 写法
function fn(a, b, c, d, e, f){
  // 获取第4个参数和之后的所有参数
  // 首先需要将 arguments 伪数组转换成数组,3个方法
  let argus = Array.prototype.slice.call(arguments)
  // let argus = Array.from(arguments)  //方法二
  // let argus = [...arguments]  //方法三

  return argus.slice(3)  // 截取键值为3以上的所有数组元素
}
fn(1,2,3,4,5,6)  // [4,5,6] 
// ES6 写法
function fn(a, b, c, d, e, f){
  // 获取第4个参数和之后的所有参数
  ;[a,b,c,...argus] = arguments// 以[开头的语句需加分号,否则会默认往上一行末尾添加
  return argus 
}
fn(1,2,3,4,5,6)  // [4,5,6] 

... 将传入的靠后的参数变成数组

function sum(message, ...array){
    let result = 0
    result = array.reduce((pre,value)=>{
      return pre + value
    }, 0)
    return message + result  
}

sum('结果是',1,2,3,4)   // 结果是 10

3. 展开运算符(使用模式匹配)

// 用于数组
let array = [1,2,3,4,5]
let [...array2] = array
console.log(array2)  // [,1,2,3,4,5]

let [a,b,...array3] = array
console.log(array3)  // [3,4,5]

let [,,...array4] = array
console.log(array4)  // [3,4,5]

let array5 = [0,...array,6]
console.log(array5)  // [0,1,2,3,4,5,6]

let array6 = [...array, ...array2]
console.log(array6)  // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

// 用于对象也是相同的规则