登录/注册
六六六一啊
2378
占位
2
占位
0
浏览量
占位
粉丝
占位
关注
03、函数
六六六一啊
2020-12-05 16:26:01 2020-12-05
65
0

作为前端切图仔,越发觉得自己离不开函数了。

说到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) {
暂无评论