作为前端切图仔,越发觉得自己离不开函数了。
说到JavaScript函数,脑子里都是匿名函数、普通函数、闭包函数、构造函数......然后还能说出一大堆函数的概念。如果你达到这个水平,那么函数对你来说没有难度,是一个前端老鸟了。
当我闭上眼睛,不看键盘,手指在键盘上敲击出一个排序函数的时候,我在想,还是回顾一下函数的基本知识才有意思。
函数的默认参数
在ES5中,我们给函数传参数,然后在函数体内设置默认值,如下面这种方式。
function a(num, callback) { num = num || 6 callback = callback || function (data) {console.log('ES5: ', data)} callback(num * num) } a() //ES5: 36,不传参输出默认值 //你还可以这样使用callback a(10, function(data) { console.log(data * 10) // 1000, 传参输出新数值 })
而在ES6中,我们使用新的默认值写法。
function a(num = 6, callback = function (data) {console.log('ES6: ', data)}) { callback(num * num) } a() //ES6: 36, 不传参输出默认值 a(10, function(data) { console.log(data * 10) // 1000,传参输出新数值 })
使用ES6的默认值写法可以让函数体内部的代码更加简洁优雅
默认值对arguments对象的影响
我们先要了解arguments对象是什么?准确一点来说它是一个类数组对象,它存在函数内部,它将当前函数的所有参数组成了一个类数组对象。
function a(num, b){ console.log(arguments) // {"0": 6, "1": 10} console.log(arguments.length) // 2 } a(6, 10)
上面的输出结果看起来很正常,那么,如果我们加上参数默认值会怎样呢?
function a(num = 1, b = 1){ console.log(arguments) } a() // {} 默认值不能被arguments识别。 a(6, 10) // {"0":6,"1":10}
下面我们看一下修改参数默认值对arguments的影响。
1、在ES5的非严格模式下,一开始输入的参数是1,那么可以获取到arguments[0](表示第一个参数)全等于num,修改num = 2之后,arguments[0]也能更新到2。
function a(num){ console.log(num === arguments[0]) //true num = 2 //修改参数默认值 console.log(num === arguments[0]) //true } a(1)
2、在ES5的严格模式下,arguments就不能在函数内修改默认值后跟随着跟新了。
"use strict"; //严格模式 function a(num) { console.log(num === arguments[0]); // true num = 2; console.log(num === arguments[0]); // false } a(1);
在ES6环境下,默认值对arguments的影响和ES5严格模式是同样的标准。
默认参数表达式
参数不仅可以设置默认值为字符串,数字,数组或者对象,还可以是一个函数。
function add() { return 10 } function a(num = add()){ console.log(num) } a() // 10
默认参数的临时死区
第一章我们提到了let和const什么变量的临时死区(TDZ),默认参数既然是参数,那么也同样有临时死区,函数的作用域是独立的,a函数不能共享b函数的作用域参数。
//这是个默认参数临时死区的例子,当初始化a时,b还没有声明,所以第一个参数对b来说就是临时死区。 function add(a = b, b){ console.log(a + b) } add(undefined, 2) // b is not define
无命名参数
上面说的参数都是命名参数,而无命名参数也是函数传参时经常用到的。当传入的参数是一个对象,不是一个具体的参数名,则是无命名参数。
function add(object){ console.log(object.a + object.b) } let obj = { a: 1, b: 2 } add(obj) // 3
不定参数的使用:使用...(展开运算符)的参数就是不定参数,它表示一个数组。
function add(...arr){ console.log(a + b) } let a = 1,b = 2 add(a, b) // 3
不定参数的使用限制:必须放在所有参数的末尾,不能用于对象字面量setter中。
//错误的写法1 function add(...arr, c){ console.log(a + b) } let a = 1,b = 2,c = 3 add(a, b, c) //错误的写法2 let obj = { set add(...arr) {