es6+函数语法规范(二):函数默认参数、判断函数参数个数、函数作用域、扩展运算符、箭头函数、es10函数扩展

文章目录

  • 一、默认参数
  • 二、判断函数参数个数
  • 三、属性与作用域
    • 3.1 length属性
    • 3.2 name属性
    • 3.3 作用域
  • 四、扩展运算符
    • 4.1 Spread Operator把数组或伪数组展开成用逗号隔开的值
    • 4.2 Rest Parameter用来解决函数参数不确定的场景
  • 五、箭头函数
    • 5.1 箭头函数与普通函数
    • 5.2 参数和返回值的讨论
    • 5.3 箭头函数与普通函数中this的指向
  • 练习
  • 六、ES10扩展


一、默认参数

对于函数而言,经常会用到参数,关于参数的默认值通常都是写在函数体中,在 ES6 中的写法:

function func(x, y = 'world') {
   
    console.log(x, y)
}
func('hello', 0)

函数参数是从左到右解析,如果没有默认值会被解析成 undefined

如果我们想让具体某个参数使用默认值,我们可以使用 undefined 进行赋值,如下段代码所示:

function func(x, y = 7, z = 42) {
   
    return x + y + z
}
console.log(func(1, undefined, 43)) // 51

在ES6中我们不仅可以给参数默认赋值具体的数值,同时参数赋值支持参数的逻辑运算进行赋值,如下段代码所示:

function func(x, y = 7, z = x + y) {
   
    return z * 0.5
}
console.log(func(1, 7)) // 4

再看一个例子:

function ajax(url, {
   
    body = '',
    method = 'GET',
    headers = {
   }
} = {
   }) {
   
    console.log(method)
}

ajax('http://www.imooc.com', {
   
    method: 'POST'
})

二、判断函数参数个数

一共有2个办法。在 ES5 中可以在函数体内使用 arguments 来判断。

function func(a, b = 1, c) {
   
    console.log(arguments.length)
}
func('a', 'b') //2

然而在 ES6 中不能再使用 arguments 来判断了,但可以借助 Function.length 来判断。

function func(a, b = 1, c) {
   
    console.log(func.length)
}
func('a', 'b') // 1

细心的同学发现 Function.length 结果和 arguments 的结果不同!没错,Function.length 是统计第一个默认参数前面的变量数:

function func(a = 2, b = 1, c) {
   
    console

你可能感兴趣的:(前端,javascript,es6)