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

最新推荐文章于 2024-05-28 13:52:26 发布

一只tobey

最新推荐文章于 2024-05-28 13:52:26 发布

阅读量1k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zz2230633069/article/details/108393503

版权

JavaScript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

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 的写法有两个好处：首先，阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；其次，有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

function log(x, y = 'World') {
  console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }

参数变量是默认声明的，所以函数代码块内不能用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前缀。

var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"

const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"

(new Function).name // "anonymous"

function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

6.箭头函数的注意事项

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

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

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

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

const isEven = n => n % 2 === 0;
const square = n => n * n;

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

let getTempItem = id => { id: id, name: "Temp" };  // 报错
let getTempItem = id => ({ id: id, name: "Temp" });  // 不报错

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}