ES6—Function新特性

最新推荐文章于 2025-01-14 09:06:04 发布

原创最新推荐文章于 2025-01-14 09:06:04 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

ES全版本专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨ES6中函数的默认参数、作用域、length属性及name属性等新特性，展示如何优雅地处理参数初始化，并结合解构赋值进行实践。通过具体示例，帮助读者理解这些特性的应用与优势。

ES6—Function新特性

默认参数

ES5中，函数的参数都是写在函数体里的

function foo(x,y){
    y=y||'world'
    console.log(x,y)
}
foo('hello','jim')//hello jim
foo('hello',0)//hello world

但是当函数多个参数都涉及到初始化时，这样写显然不太优雅，ES6就提供了一种写法：

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

函数参数是从左到右解析，如果只想给某个参数使用默认值，可以用undefined进行赋值：

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

在ES6中我们不仅可以给参数默认赋值具体的数值，同时参数赋值支持参数的逻辑运算进行赋值：

function f(x, y = 7, z = x + y) {
    return z * 0.5
}

console.log(f(1, 7)) // 4

还可以与解构赋值（解构赋值就是从数组和对象提取值，对变量进行赋值）结合起来使用：

function foo({x,y=5}){
    console.log(x,y)
}
foo({})//undefined 5
foo({
    x:1,
    y:2
})//1 2
foo()//报错

function ajax(url,{
    body='',
    method='get',
    headers={}
}={}){
    console.log(method)
}
ajax('http://www.baidu.com')//get
ajax('http://www.baidu.com',{})//get
ajax('http://www.baidu.com',{method:'post'})//post

函数作用域

let x=1
function foo(x,y=x){//先在作用域内找 找到x=2
    console.log(y)//2
}
foo(2)

let x=1
function foo(y=x){//使用x时,下面的let x=2还没有被声明 沿作用域链往上找到全局的let x=1
    let x=2
    console.log(y)//1
}
foo()

length属性

ES5中获取函数参数的个数可以使用arguments：

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

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

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

细心的同学会发现，打印结果跟arguments.length的结果不一致，是的，Function.length统计的是第一个默认参数之前的参数个数，所以建议将有默认值的形参写到最后：

function foo(x,y,z=5){
    console.log(x,z,y)
}
foo(1,2)//1 5 2

name属性

函数的name属性，返回该函数的函数名：

function foo(){}
console.log(foo.name)//foo

另外，ES6的函数新特性还包括了扩展运算符、Rest参数和箭头函数，写在另一篇博客中。