函数参数的解构赋值

最新推荐文章于 2024-02-11 13:42:49 发布

ftg1852vyf

最新推荐文章于 2024-02-11 13:42:49 发布

阅读量929

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/ftg1852vyf/article/details/118970062

版权

es6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中解构赋值在处理数组和对象参数时的行为，特别是结合默认值的情况。当参数为数组时，解构会将数组元素分别赋值给变量。而在对象参数中，两种不同的默认值设定会产生不同效果：一种是为解构后的每个属性设置默认值，另一种则是为整个参数对象指定默认值。关键在于，解构赋值的默认值仅在解构的目标值为undefined时才生效。因此，当对象缺少属性时，是否提供默认值取决于参数定义方式。

摘要由CSDN通过智能技术生成

先看一下参数为数组时的解构：

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

再看一下参数为对象时的结构：
当使用默认值时，两种不同的默认值结果有什么不同

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

第一种是给解构后的参数赋默认值；第二种是为函数move的参数指定默认值。

解构赋值只有当解构的值为undefined时，才会使用默认值！！！

因此，第二种情况只要传参就相当于没有默认值，只有不传参的情况下参数为undefined，使用默认 x: 0, y: 0