美文网首页
ES6 函数的扩展1---参数,属性,rest, 扩展运算符

ES6 函数的扩展1---参数,属性,rest, 扩展运算符

作者: 萘小蒽 | 来源:发表于2019-06-20 21:19 被阅读0次

1 . 函数参数的默认值

  • 在 ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
function log(x,y){
   y=y||'你好';
  console.log(x,y)
}
log('妹子')  //妹子你好

严格上来说有还需要判断参数的类型,如果比如上面函数,y传入的为false,那么参数就不起作用了。

  • ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x,y='你好'){
  console.log(x,y)
}
log('妹子')  //妹子,你好
  • 配合解构使用
function log({x,y=5}){
  console.log(x,y)
}
log2({x:1,y:2})  // 1,2

2 . 函数length属性

  • 在函数指定默认值之后,它的length属性将返回没有指定默认值的参数个数。
  • 函数参数指定默认值后,length属性将是真。
function log1(x,y){
}
console.log(log1.length)  //2
function log2(x,y='你好'){
}
console.log(log2.length)  //1

之所以会失真,我们要了解函数的length存在含义,它的数值表示函数预期传入的参数个数,当参数指定默认值的时候,函数的length将失真。

2 . 作用域

  • 如果参数默认值是变量,则该变量的作用域和其他变量的作用域规则是一样的,即优先当前作用域,然后往上至全局作用域寻找。
var x = 2;
function log(x,y = x){
 console.log(x,y)
}
log(1) //1 1

上面调用log函数时,由于函数作用域的变量x已经生成,且赋值为1,所以y等于函数内部x=1,而不是全局作用域的x变量。

3 . 应用

  • 利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
function ThrowIfMissing(){
   throw new Error('Missing parameter');
}
function foo(mustBeProvided = ThrowIfMissing()){
  return mustBeProvided 
}
foo()   //Uncaught Error: Missing parameter

上面的函数,如果运行foo不传参,会直接触发ThrowIfMissing(),抛出异常。

  • 除了默认赋值抛出异常函数,我们还可以赋值undefined,表明这个参数可以省略。
function foo(mustBeProvided = undefine){...}

4. rest参数

  • rest(形式为...参数名),用于获取函数的多余参数,这样就不需要用arguments对象了。
  • rest参数搭配的变量是一个数组,该变量将多余的参数放入其中。
function add(...values){
  let sum = 0;
  for( var val of values){
    sum+ = val;
   }
   return sum 
}
add(1,2,3)  //6
function foo (...values){ console.log(values) }
foo(1,2,3) //  [1, 2, 3]

rest解决了arguments对象的局限性,因为rest就是数组的实例,某些需求下各种方便。

5. 扩展运算符

  • 扩展运算符(spread)是三个点(...),好比是rest的逆运算,将一个数组转为用逗号风格的参数序列。
console.log(...[ 1, 2, 3 ])  //1, 2, 3
console.log(0,...[ 1, 2, 3 ], 4, 5)  //0, 1,  2, 3, 4, 5
  • 扩展运算符(...)替代了ES5常用的apply操作。
//ES5
function add(x, y, z){
  return x+y+z;
}
var arr = [1,2,3]
add.apply(null,arr)
//ES6
add(...arr)
  • 应用
  1. 合并数组
//ES5
[1,2].concat(arr);
[1,2].concat( arr1, arr2, arr3 )
//ES6
[1, 2, ...arr]
[1,2, ...arr1, ...arr2, ...arr3 ]
  1. 与解构赋值结合
//ES5
a = arr[0],rest = arr.slice(1);
//ES6
[a,...rest] = arr;

...运算符只能放在参数的最后一位,放在其他地方会报错。

  • 字符串
[...'hello'] // ["h", "e", "l", "l", "o"]

相关文章

网友评论

      本文标题:ES6 函数的扩展1---参数,属性,rest, 扩展运算符

      本文链接:https://www.haomeiwen.com/subject/utnifctx.html