关于javascript:重温JavaScriptlesson6函数2

又到了咱们一起重温 JavaScript 的工夫啦，上一次咱们重温了无关函数是一等公民和函数定义形式的内容，这次咱们接着看看函数参数相干的内容，这次回顾的局部内容略微有点艰涩，然而我敢保障你能明确！反正我是信了。

1. 函数形参和实参的定义

形参是咱们定义函数时所列举的变量。

实参是咱们调用函数时所传递给函数的值。

咱们看几个领有形参的函数：

function paramFunc(param) {console.log(param);
}
var  paramFunc2 = function(param1,param2) {console.log(param1,param2);
}
var paramFunc3 = (param1,param2,param3) => {console.log(param1,param2,param3);
}

正如咱们所看到的函数的形参是在函数定义时所指定的，而且是无论应用哪种定义函数的形式咱们都能够为其指定形参。paramFun 是函数申明的状况；paramFunc2 是函数表达式的状况；paramFunc3 是箭头函数的状况。

另一方面，函数的实参则与函数的调用相分割，它们是函数调用时所传给函数的值。下述代码是对函数的调用：

paramFunc(1);
//1
paramFunc2('hello','world');
//hello world
paramFunc3(1,'hello',{name:'new_name'})
//1 "hello" {name: "new_name"}

将数字 1 以函数实参的模式传给了函数 paramFunc；将字符串 hello 和 world 以函数实参的模式传递给 paramFunc2；数字 1、字符串 hello 和对象字面量 {name: “new_name”} 以函数实参的模式传给 paramFunc3。

通过下面的例子咱们也看到了以下两点：

第一，JS 函数定义并未指定形参的类型；

第二，函数的调用也未对实参值做任何类型查看。

实际上 JS 函数调用甚至不查看传入实参的个数，当实参的数量大于形参的数量时，并不会报错。看代码：

paramFunc(1,2,3)
//1

当函数调用的时提供了多个实参的状况下，第一个实参会赋值给第一形参，第二个实参会赋值给第二个形参，以此类推。如果实参的数量大于形参的数量，那么额定的参数不会赋值给任何形参。那么多余的参数哪去了？咱们怎么获取它们呢？首先咱们看 arguments 参数。

2.arguments 参数

方才咱们看到了，JS 函数的一个特地的中央就是当你给函数多传参数的时候不会造成谬误。那是因为 函数参数实际上被保留在一个称为 arguments 的相似数组的对象中。再强调一下，arguments 是相似数组的对象而不是数组。

arguments 对象有两个特点：

第一，arguments 能够主动增长来蕴含任意个数的参数值；

第二，arguments 领有 length 属性能够通知咱们目前有多少个实参值。

arguments 对象主动存在于函数中。上面咱们看代码：

function testArguments(param1,param2) {console.log(param1,param2);
  //1 "hello"
  console.log(arguments);
  //Arguments(3) [1, "hello", {…}, callee: (...), Symbol(Symbol.iterator): ƒ]
  console.log(arguments.length);
  //3
  console.log(Array.isArray(arguments));
  //false 
}
testArguments(1,'hello',{name:'New_Name'});

从代码咱们能够看出 arguments 对象保留了所有传入函数的实参。还有就是咱们应用 Array.isArray()对 arguments 对象判断发现它的确不是数组。咱们能够用以下的办法将其转换为数组：

var argsArray = Array.prototype.slice.call(arguments)

当初有一个问题，arguments 在理论开发中有什么用，有什么利用场景呢？我先脑补一下啥叫“命名参数”哈，命名参数就是在定义函数时指定的形参。

在《JavaScript 权威指南（第 6 版）》中是这样说的：“arguments 对象最适宜的场景是在这样的一类函数中，这类函数包含固定个数的命名和必须参数，以及随后个数不定的可选实参。”而后，你们的 New_Name 就没有看到例子。。。

咱们看一个略微相似的例子吧：假如你想创立一个函数承受任意数量的参数并返回它们的和。因为咱们不知道会有多少个参数，所以无奈应用命名参数，在这种状况下，应用 arguments 是不错的抉择。看代码：

function sum() {
  var i = 0, result = 0;
  while(i<arguments.length) {result += arguments[i];
    i++;
  }
  return result;
}
console.log(sum(1,2));
//3
console.log(sum(3,4,5,6));
//18
console.log(sum(18));
//18
console.log(sum());
//0

咋样？是不是感觉 arguments 参数还挺香的？ES6 引入了一道叫做“残余参数”的菜，它比 arguments 还要香，咱们稍候再说。对于 arguments 还有其余两点要说的：

第一，说说函数的 length 属性和 arguments 的 length 属性的异同点；

第二，说说 callee 和 caller。

函数的 length 属性是什么呢？函数的 length 属性是用来保留函数冀望的参数个数。看代码：

function testFunLength(value) {return value;}
console.log(testFunLength('hello'));
//hello
console.log(testFunLength.length);
//1
console.log(testFunLength('hello','world'));
//hello
console.log(testFunLength.length);
//1
console.log(testFunLength());
//undefined
console.log(testFunLength.length);
//1

从上述代码咱们看到，无论是传递几个实参给函数 testFunLength，它的 length 属性都是 1，这个值就代表函数定义时命名参数的个数，和你传多少实参，和你传不传实参都没有关系。

接下来看看 callee 和 caller 属性。

刚刚咱们看到测试 testArguments 函数的代码的输入后果中有这样的一句：Arguments(3) [1, “hello”, {…}, callee: (…), Symbol(Symbol.iterator): ƒ]; 这里有 callee 属性，我在浏览器控制台开展这个属性看到这样的内容：callee: [Exception: TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not …

那么 callee 是什么呢？ES5 规定了在非严格模式下，callee 属性指代以后正在执行的函数。而在严格模式下，对 callee 的读写都会产生类型谬误。callee 属性在某些时候会十分有用，比方在匿名函数中通过 callee 来递归地调用本身。而caller 示意以后正在执行函数的函数, 也就是指向的是函数的调用者，通过 caller 能够拜访调用栈。

说了这么多，咱们来对 arguments 进行一个总结：arguments 是指向实参对象的援用，它是一个类数组对象，它领有像 length 和 callee 等可供编程者应用的属性。上面咱们就看看 ES6 引入的“残余参数”：

3. 残余参数

ES6 中新增了一个操作符 …。依据用法的不同，能够叫做 spread(开展、扩散)或 rest(残余)。看代码：

function restExample(a,b) {console.log(a,b);
}
restExample(...[1,2]);
//1 2
restExample(...[1,2,3]);
//1 2

咱们看到如果将 … 放在数组之前，该操作符会将数组中的元素扩散到函数的各个参数中。在扩散的过程中，会疏忽掉多余的参数。操作符 … 另外一种用法正好和下面的例子相同，不是扩散，而是将多余的参数汇聚到一起。看上面的代码：

function restExample(a,...b) {console.log(a,b);
}
restExample(1,2,3,4,5);
//1  [2, 3, 4, 5]

在此例中，变量 b 承受了残余的 (rest) 所有值。留神：只有函数的最初一个参数能力应用残余参数。看代码：

function restExample(a,...b,c) {console.log(a,b,c);
}
// 编译报错

这段代码申明的函数把 … 放在了不是最初一个参数的 b 后面，所以编辑没有通过。上面咱们看本次分享的最初一个知识点：默认参数

4. 默认参数

默认 (defaulting) 一种很常见的做法，ES6 中的一个新个性使能够指定参数的默认值。通常，如果没有给参数传值，它的值将是 undefined。默认值则能够给这些参数指定其余的默认值。能够为默认参数赋予任何值，能够是原始类型的数字和字符串或者是布尔值，也能够是对象、数组和函数这样的援用类型。应用默认参数的目标是为了防止空值。

咱们对这样的代码一点不生疏：

function add(a,b) {
  a = a || 0;
  b = b || 0;
  return a + b;
}
console.log(add(1));
//1
console.log(add(1,1));
//2

如果函数在调用的时候没有为 a, 提供对应的值，咱们应用 ||（OR 操作符）将两者的默认值设置为 0。ES6 引入了默认参数后咱们能够这样申明 add 函数：

function add(a=0,b=0) {return a + b;}
console.log(add(1));
//1
console.log(add(1,1));
//2

是不是简洁了很多呢？

好了，明天就到这里吧。本次分享次要介绍了函数参数的内容，尽管咱们用了很多篇幅介绍 arguments，然而残余参数和默认参数才是重点哦。下次咱们持续一起重温函数调用的内容，咱们要碰到充斥神秘色彩的 this，再见啦~

如有谬误，请不吝指正。温故而知新，欢送和我一起重温旧常识，攀登新台阶~