ES6 函数参数（默认值的设置，默认值位置，参数作用域），函数的2个属性（name和length），箭头函数的4大注意事项

tech2024-10-27 9

1.函数参数的默认值

ES5，默认值的写法：

function log(x, y) { y = y || 'World'; // 改进为if (typeof y === 'undefined') { y = 'World';} console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World

（1）ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。这样很简洁，并且ES6 的写法有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

参数变量是默认声明的，所以函数代码块内不能用let或const再次声明。使用参数默认值时，函数不能有同名参数。

function foo(x = 5) { let x = 1; // error const x = 2; // error } function foo(x, x, y) { // ... } // 不报错 function foo(x, x, y = 1) { // ... } // 报错 SyntaxError: Duplicate parameter name not allowed in this context

参数默认值是惰性求值的。参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

（2）与解构赋值的默认值，结合起来使用

对象的解构赋值默认值和函数参数是不一样的。

下面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值，那么调用的时候一定要有参数，没有参数则会报错。只有当函数foo的参数是一个对象时，变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数，变量x和y就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。

function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined 5 foo({x: 1}) // 1 5 foo({x: 1, y: 2}) // 1 2 foo() // TypeError: Cannot read property 'x' of undefined function foo({x, y = 5} = {}) { console.log(x, y); } foo() // undefined 5 如果没有参数，那么是函数默认参数即空对象，然后解构赋值。

双重默认值：参数是一个对象，如果该对象具有解构默认参数，又有函数默认参数。

function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 报错，第二个参数没有默认值 function fetch(url, { body = '', method = 'GET', headers = {} } = {}) { console.log(method); } fetch('http://example.com') // "GET"有，第二个参数具有默认值，是一个空对象，然后进行解构赋值。

关于默认解构赋值参数和默认函数参数的作用比较：

对象参数才会具有双重默认参数对象参数未定义默认函数参数，当函数调用无参数的时候会报错，找不到函数参数。关键看函数调用：当函数调用具有参数的时候，默认函数参数无作用，解构参数有作用，用来补足剩余对象里面的参数默认值；当函数调用无参数的时候，默认函数参数和解构参数均具有作用，默认函数参数先生效，然后才是默认解构参数生效（补充作用，有则不用，无则补充）。 // 写法一 function m1({x = 0, y = 0} = {}) { return [x, y]; } // 写法二 function m2({x, y} = { x: 0, y: 0 }) { return [x, y]; } //写法三 function m3({x=2, y=4} = { x: 0}) { return [x, y]; } // 函数没有参数的情况，先是默认函数参数生效，然后是默认解构参数生效！ console.log('无参数情况', m1()) // [0, 0] console.log(m2()) // [0, 0] console.log(m3()) // [0,4] 默认参数有x的默认值，没有y的默认值，那么从默认解构参数获取 // x 和 y 都有值的情况；即有参数，那么只有默认解构参数生效 console.log('x y 都有值的情况', m1({x: 3, y: 8})) // [3, 8] console.log(m2({x: 3, y: 8})) // [3, 8] console.log(m3({x: 3, y: 8})) // [3, 8] // x 有值，y 无值的情况；即有参数，那么只有默认解构参数生效 console.log('x有值，y无值的情况', m1({x: 3})) // [3, 0] 默认解构参数，y有值，则补充 console.log(m2({x: 3})) // [3, undefined] 默认解构参数，y没有值，则为undefined console.log(m3({x: 3})) // [3, 4] // x 和 y 都无值的情况；即有参数，那么只有默认解构参数生效 console.log('x和y都无值，即参数是空对象情况', m1({})) // [0, 0]; console.log(m2({})) // [undefined, undefined] 默认解构参数无值，则都为undefined console.log(m3({})) // [2, 4] // 传入未定义的z属性的情况；即有参数，只是为空对象，那么只有默认解构参数生效 console.log('传入未定义的z属性的情况', m1({z: 3})) // [0, 0] console.log(m2({z: 3})) // [undefined, undefined] console.log(m3({z: 3})) // [2, 4]

2. 参数默认值的位置

通常情况下，定义默认值的参数，应该放是函数的尾部。所以要放在后面。

有默认值的参数如果不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

// 例一，默认参数的位置在最前面 function f(x = 1, y) { return [x, y]; } f() // [1, undefined] f(2) // [2, undefined] f(, 1) // 报错，注意不能省略默认参数 f(undefined, 1) // [1, 1] 只能使用undefined来出发默认参数值 // 例二，默认参数在中间 function f(x, y = 5, z) { return [x, y, z]; } f() // [undefined, 5, undefined] f(1) // [1, 5, undefined] f(1, ,2) // 报错，注意不能省略默认参数 f(1, undefined, 2) // [1, 5, 2] 只能使用undefined来出发默认参数值 // 例三，null赋值 function foo(x = 5, y = 6) { console.log(x, y); } foo(undefined, null) // 5 null 默认参数只能undefined触发，null实际上是赋值即传参，并不会触发默认值

3.函数的length属性，Function.length:

length 是函数对象的一个属性值，指该函数有多少个必须要传入的参数，即形参的个数。形参的数量不包括剩余参数个数，仅包括第一个具有默认值之前的参数个数。与之对比的是， arguments.length 是函数被调用时实际传参的个数。因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入length属性。

(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2 (function(...args) {}).length // 0 (function (a = 0, b, c) {}).length // 0 第一个具有默认参数之前的参数个数是0 (function (a, b = 1, c) {}).length // 1 第一个具有默认参数之前的参数个数是1

4.作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

（1）参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2

（2）函数f调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，函数体内部的局部变量x影响不到默认值变量x。

let x = 1; function f(y = x) { let x = 2; console.log(y); } f() // 1

（3）如果全局变量x不存在，就会报错，因为x未定义。

function f(y = x) { let x = 2; console.log(y); } f() // ReferenceError: x is not defined

（4）参数x = x形成一个单独作用域。实际执行的是let x = x，由于暂时性死区的原因，这行代码会报错”x 未定义“。

var x = 1; function foo(x = x) { // ... } foo() // ReferenceError: x is not defined

（5）函数参数是一个函数的情况，作用域分析

// example 1: let foo = 'outer'; function bar(func = () => foo) { let foo = 'inner'; console.log(func()); } bar(); // outer /* 函数bar的参数func的默认值是一个匿名函数，返回值为变量foo。函数参数形成的单独作用域里面，并没有定义变量foo，所以foo指向外层的全局变量foo，因此输出outer。*/ // example 2: function bar(func = () => foo) { let foo = 'inner'; console.log(func()); } bar() // ReferenceError: foo is not defined /* 匿名函数里面的foo指向函数外层，但是函数外层并没有声明变量foo，所以就报错了。*/ // example 3: var x = 1; function foo(x, y = function() { x = 2; }) { var x = 3; y(); console.log(x); } foo() // 3 x // 1 /* 函数foo的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x，该变量与第一个函数参数x由于不是同一个作用域，所以不是同一个变量，因此执行y后，内部变量x和外部全局变量x的值都没变。*/ // example 4： var x = 1; function foo(x, y = function() { x = 2; }) { x = 3; y(); console.log(x); } foo() // 2 x // 1 /* 如果将var x = 3的var去除，函数foo的内部变量x就指向第一个参数x，与匿名函数内部的x是一致的，所以最后输出的就是2，而外层的全局变量x依然不受影响。*/

5.函数的name属性：

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

（1）如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。（2）如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。(3）Function构造函数返回的函数实例，name属性的值为anonymous。（4）bind返回的函数，name属性值会加上bound前缀。

6.箭头函数的注意事项

（1）如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

（2）如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。如果只有一句可以不用大括号和return语句

（3）由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

（4）箭头函数可以与变量解构结合使用。

最新回复(0)