菜单

JavaScript高阶函数_引力节点Java大学整理

2019年6月14日 - Html/Html5

概念二个计量圆面积的函数area_of_circle(),它有八个参数:

x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;

练习

function add(x, y, f) {
  return f(x) + f(y);
}

一经传入的参数连平常定义的参数都没填满,也无妨,rest参数会收到贰个空数组(注意不是undefined)。

编辑高阶函数,就是让函数的参数基本上能用别的函数。

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

您或者感兴趣的篇章:

function foo() {
  return { name: 'foo' };
}
foo(); // { name: 'foo' }

用代码验证一下:

鉴于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是三个函数对象,而函数名abs能够算得指向该函数的变量。

当大家调用add(-5, 6, Math.abs)时,参数xyf各自收到-56和函数Math.abs,依据函数定义,大家能够推导总计进度为:

在这种格局下,function (x) { …
}是三个佚名函数,它并未函数名。不过,这几个无名氏函数赋值给了变量abs,所以,通过变量abs就足以调用该函数。

贰个最简单易行的高阶函数:

上述abs()函数的定义如下:

add(-5, 6, Math.abs); // 11

rest参数只好写在最终,后面用…标记,从运转结果可见,传入的参数先绑定a、b,多余的参数以数组情势提交变量rest,所以,不再要求arguments大家就得到了整个参数。

JavaScript的函数其实都针对有个别变量。既然变量能够针对函数,函数的参数能接受变量,那么一个函数就能够收到另叁个函数作为参数,这种函数就称为高阶函数。

由于JavaScript允许传入猖獗个参数而不影响调用,因而传出的参数比定义的参数多也从没难题,就算函数内部并无需这一个参数:

高阶函数英文叫Higher-order function。那么哪些是高阶函数?

function abs(x) {
 if (x >= 0) {
  return x;
 } else {
  return -x;
 }
}
function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

你也许感兴趣的小说:

为了获得除了已定义参数a、b之外的参数,大家只可以用arguments,并且循环要从索引2开始以便排除前多少个参数,这种写法很别扭,只是为了拿走额外的rest参数,有未有更加好的章程?

function foo(x) {
  alert(x); // 10
  for (var i=0; i<arguments.length; i++) {
    alert(arguments[i]); // 10, 20, 30
  }
}
foo(10, 20, 30);

arguments

上述二种概念完全等价,注意第二种方法遵照整体语法要求在函数体末尾加三个;,表示赋值语句结束。

要把高级中学级的参数b变为“可选”参数,就只能通过arguments判定,然后再一次调解参数并赋值。

请留心,函数体内部的言语在实践时,一旦施行到return时,函数就试行完结,并将结果重临。因而,函数内部通过标准决断和巡回能够兑现非常复杂的逻辑。

ES6正规引入了rest参数,上面包车型地铁函数能够改写为:

由于JavaScript函数允许收取狂妄个参数,于是大家就只能用arguments来获取具备参数:

调用函数

function foo() {
  return
    { name: 'foo' };
}
foo(); // undefined

rest参数

由此正确的多行写法是:

其实arguments最常用于推断传入参数的个数。你恐怕会面到这么的写法:

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}
var abs = function (x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
};
function abs() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

调用函数时,按顺序传入参数就能够:

function foo() {
  return { // 这里不会自动加分号,因为{表示语句尚未结束
    name: 'foo'
  };
}

窗体顶上部分

使用arguments,你能够获得调用者传入的富有参数。也正是说,纵然函数不定义任何参数,还是能获得参数的值:

要小心了,由于JavaScript引擎在行末自动抬高分号的机制,上边包车型大巴代码实际上变成了:

function foo() {
  return; // 自动添加了分号,相当于return undefined;
    { name: 'foo' }; // 这行语句已经没法执行到了
}

传扬的参数比定义的少也从不难点:

因为rest参数是ES6新专门的学业,所以您要求测试一下浏览器是还是不是辅助。请用rest参数编写二个sum()函数,接收任性个参数并再次来到它们的和:

'use strict';
// 测试:
var i, args = [];
for (i=1; i<=100; i++) {
  args.push(i);
}
if (sum() !== 0) {
  alert('测试失败: sum() = ' + sum());
} else if (sum(1) !== 1) {
  alert('测试失败: sum(1) = ' + sum(1));
} else if (sum(2, 3) !== 5) {
  alert('测试失败: sum(2, 3) = ' + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
  alert('测试失败: sum(1, 2, 3, ..., 100) = ' + sum.apply(null, args));
} else {
  alert('测试通过!');
}

在JavaScript中,定义函数的方法如下:

假若把return语句拆成两行:

假诺未有return语句,函数实施实现后也会回去结果,只是结果为undefined。

JavaScript还会有贰个无需付费赠与的重中之重字arguments,它只在函数内部起效果,并且长久指向当前函数的调用者传入的具有参数。arguments类似Array但它不是叁个Array:

r: 表示圆的半径;

abs(); // 返回NaN

那时abs(x)函数的参数x将收到undefined,总括结果为NaN。

// foo(a[, b], c)
// 接收2~3个参数,b是可选参数,如果只传2个参数,b默认为null:
function foo(a, b, c) {
  if (arguments.length === 2) {
    // 实际拿到的参数是a和b,c为undefined
    c = b; // 把b赋给c
    b = null; // b变为默认值
  }
  // ...
}
function foo(a, b) {
  var i, rest = [];
  if (arguments.length > 2) {
    for (i = 2; i<arguments.length; i++) {
      rest.push(arguments[i]);
    }
  }
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
abs(10); // 返回10
abs(-9); // 返回9

小心您的return语句

pi: 表示π的值,假如不传,则暗许3.14

要防止收到undefined,能够对参数举办自己商讨:

日前大家讲到了JavaScript引擎有二个在行末自动抬高分号的体制,那也许让你栽到return语句的贰个油尖旺区:

故此,第三种概念函数的主意如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图