Open hzzzzzzzq opened 2 years ago
我们来介绍一下函数的默认值,在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方式。
我们先来看看ES6之前怎么给函数参数添加默认值
function add(x, y) { y = y || 1; return x + y; } console.log(add(1)) // 2 console.log(add(1, 2)) // 3
我们做的是检查 y 的值有没有传入,如果没有则会默认被赋值为 1。这种方式是有缺点的,如果传入的值为布尔值 false,那么传入的值会变得无效。空字符串也是会有布尔值 false 一样的结果。
y
1
false
那么现在我们来看看ES6 允许设置默认值的写法吧
function add(x = 1, y = 2) { return x + y } console.log(add()); // 3 console.log(add(3)); // 5 console.log(add(2,3)); // 5
从上面的代码就可以看到,一眼就可以判断出参数是否可省略,且写法比 ES5 简洁许多
ES5
注意: 函数的参数变量是默认声明的,所以不能使用 let 或者 const 再次声明。 参数默认值的位置,必须是在函数的尾部,如果不是在尾部,否则是没法省略的。
注意:
function add([x, y] = [1, 2]) { return x + y }
来我们还是先用 add 函数来举例,上面就是用的数组的解构赋值,可以个传入的数组进行解构赋值,默认解构赋值。
add
很奇怪吧,函数居然能有 length,来我们在这里简单提一下函数的 length 是什么。
length
console.log((function (x){}).length); // 1 console.log((function (x = 1){}).length); // 0 console.log((function (x, y, z = 2){}).length); // 2
没错,就是这样。它的 length 就是函数必须传入的参数,也就是函数的所有参数减去制定了默认值的参数个数。 如果设置了默认值的参数不是尾参数,那么 length 属性也不再计入后面的参数了。
ES6 中引入来 rest 参数(形式为 ...变量名 ),用于获取函数的多余参数,替代 arguments 对象。
rest
...变量名
arguments
我们还是那 add 函数来举例吧。
function add(...values) { let sum = 0; for (let num of values) { sum += num } return sum } console.log(add(1,2,3,4,5)); // 15
这里就可以看出来,rest 参数是做什么用的,使用它之后,参数可以无限传入,不限制定量。
函数的 length 不包括 rest 参数。
我们来看看 ES6 中增加的箭头函数( => ),来我们还是用 add 函数来举例子,
=>
function add(a, b) { return a + b } // 等价于 const add = (a, b) => { return a + b }
来看看更简单的写法
function multiply(n) { return n*n } // 等价于 const multiply = (n) => n*n
有时候 return 可以省略。
return
当然,箭头函数可以嵌套使用,会大大增加代码量
function add(x) { return function (y) { return function (z) { return x + y + z } } }
上面是普通的写法,然后我们来看一下箭头函数的写法
const add = x => y => z => x + y + z
对比一下,应该就知道啦,两种的写法简便程度差别真的很大。
在这里,稍微提一下箭头函数的相关注意点:
this
new
yield
Generator
在这里不特点讲述,如果想要具体了解,可以看一下我的另一篇文章[Javasctip - this 指向](),文章后续补齐。
函数的扩展
函数参数默认值
基本用法
我们来介绍一下函数的默认值,在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方式。
我们先来看看ES6之前怎么给函数参数添加默认值
我们做的是检查
y
的值有没有传入,如果没有则会默认被赋值为1
。这种方式是有缺点的,如果传入的值为布尔值false
,那么传入的值会变得无效。空字符串也是会有布尔值false
一样的结果。那么现在我们来看看ES6 允许设置默认值的写法吧
从上面的代码就可以看到,一眼就可以判断出参数是否可省略,且写法比
ES5
简洁许多解构赋值与默认值结合使用
来我们还是先用
add
函数来举例,上面就是用的数组的解构赋值,可以个传入的数组进行解构赋值,默认解构赋值。函数的length
很奇怪吧,函数居然能有
length
,来我们在这里简单提一下函数的length
是什么。没错,就是这样。它的
length
就是函数必须传入的参数,也就是函数的所有参数减去制定了默认值的参数个数。 如果设置了默认值的参数不是尾参数,那么length
属性也不再计入后面的参数了。作用域
rest参数
ES6 中引入来
rest
参数(形式为...变量名
),用于获取函数的多余参数,替代arguments
对象。我们还是那
add
函数来举例吧。这里就可以看出来,
rest
参数是做什么用的,使用它之后,参数可以无限传入,不限制定量。函数的
length
不包括rest
参数。箭头函数
基本使用
我们来看看 ES6 中增加的箭头函数(
=>
),来我们还是用add
函数来举例子,来看看更简单的写法
有时候
return
可以省略。当然,箭头函数可以嵌套使用,会大大增加代码量
上面是普通的写法,然后我们来看一下箭头函数的写法
对比一下,应该就知道啦,两种的写法简便程度差别真的很大。
注意点
在这里,稍微提一下箭头函数的相关注意点:
this
对象new
命令arguments
对象,不存在该对象,但是可以使用rest
参数代替yield
命令,因此箭头函数不能使用Generator
函数在这里不特点讲述,如果想要具体了解,可以看一下我的另一篇文章[Javasctip - this 指向](),文章后续补齐。