函数的扩展
函数的扩展
thomaslwq 发表于1年前
函数的扩展
  • 发表于 1年前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

函数的默认值
ES6允许为函数设置默认值
function world(x,y="world"){
  console.log(x,y)
}
参数变量是默认声明的,不能用let或者const再次声明
function foo(x=5){
  let x = 1;
  const x = 2;
}
一个容易忽视的地方就是,如果参数默认值是变量,那就不是传值,而是每次都重新计算默认值表达式的值
let x = 99
function foo(p=x+1){
  console.log(p);
}
foo();//100
x = 100;
foo();//101

与解构赋值默认值结合使用
function foo(x,y=5){
 console.log(x,y);
}
foo({});//undefined,5
foo({x:1})//1,5
foo({x:1,y:2})//1,2
foo()//TypeError,can't read property 'x' of undefined

如果传入函数的值是undefined,结果触发了默认值,null没有这个效果

function foo(x=5,y=5){
  console.log(x,y);
}
foo(undefined,null);

函数的length属性

指定了默认值之后,函数的length属性,将返回没有指定默认值的参数个数,也就是说,指定了默认值之后,length属性将会失真。

 (function(a){}).length //1
 (function(a){c=5}).length //0
 (function(a,b,c=5)).length //2

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的属性了
(function(a=0,b,c)(){}).length //0
(function(a,b=1,c)(){}).length //1

作用域

一旦设置了函数的默认值,函数进行声明初始化时,参数就会形成一个单独的作用域(context).等初始化结束之后,这个作用域就会消失。
var x = 1;
function f(x,y=x){
  console.log(y);
}
f(2) //2

利用参数默认值,可以指定某一参数不得省略

function throwIfmissing(){
  throw new Error("Missing parameter");
}
function foo(mustBeProvided = throwIfmissing){
  return mustBeProvided;
}
foo();
//Error: missing parameter

rest 参数

形式为"...变量名"

function add(...values){

  let sum = 0;
  for(var val of values){
    sum + = val;

  }
  return sum;
}

add(3,4,5);//12

拓展运算符

拓展运算符是三个点(...).它就好比rest的逆运算,将一个数组转为用逗号分隔的参数序列
console.log(...[1,2,3])
//1,2,3

替代数组的apply方法

由于拓展运算符可以展开数组,所以不需要apply方法,将数组转化为函数的参数了。

ES5写法

function f(a,b,c){

}
var args = [1,2,3]
f.apply(null,args)

ES6写法

f(...args);

拓展运算符的应用

合并数组
var arr1 = ['a','b']
var arr2 = ['c','d']
[...arr1,...arr2]
与解构赋值结合
[a,...rest] = list
如果将扩展运算符用于数组赋值,那么只能放在参数的最后一位,否则就会报错
const [...fisrt,second] = [1,2,3,4] //报错
const [first,...middle,third] = [1,2,3,4,5]

函数返回值

Javascript的函数只能返回一个值,如果需要返回多个值,只能返回数组或者对象。扩展运算符提供了解决这个问题的一种变通方法。

 var dataFields = readDateFields(database);
 var d = new Date(...dateField);

 

 字符串

[...'Hello']
//["H","e","l","l","o"]

实现了Iterator接口的对象,都可以用扩展运算符转为真正的数组。

箭头函数

ES6允许使用箭头定义函数
var f = v=>v
等同于
var f = function(v){
  return v;
}

箭头函数的注意点:
1 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
2 不可以当作构造函数,也就是,不可以使用new命令,否则会抛出一个错误
3 不可以使用arguments参数,因为不存在,如果需要,可以使用Rest参数代替
4 不可以使用yield命令,因此箭头函数不能用做Generator函数

绑定this

ES7提案,Babel转码器已经支持,函数绑定运算符是两个并排的冒号,双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境,绑定到右边的函数上。

foo:bar
等同于
bar.bind(foo)

尾调用优化

某个函数的最后一步是调用另一个函数

 

function f(x){
 return g(x);
}

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 6
博文 35
码字总数 31692
×
thomaslwq
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: