es6 — 与解构赋值默认值结合使用[通俗易懂]

es6 — 与解构赋值默认值结合使用

大家好,又见面了,我是全栈君。

参数默认值可以与解构赋值的默认值,结合起来使用。

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

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

function foo({x, y = 5} = {}) {
    console.log(x, y)
}

foo() // undefined 5

 上面代码指定,如果没有提供参数 ,函数foo的参数默认为一个空对象。

eg2:

function fetch(url, {body = '', method = 'GET', header = {} }) {
    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'

函数fetch没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量method才会取到默认值GET。

思考:

// 写法一
function m1({x = 0, y = 0} = {}) {
    return [x, y]
}

// 写法二
function m2({x, y} = {x : 0, y : 0}) {
    return [x, y]
}

上面两种写法的区别: 写法一函数参数的默认值是空对象, 但是设置了对象解构赋值的默认值;写法二函数参数默认是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// 以上的情况都没有区别,下面的情况两者就有区别了
// x 有值,y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

 推荐:http://es6.ruanyifeng.com/#docs/function

转载于:https://www.cnblogs.com/garfieldzhong/p/8056105.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107819.html原文链接:https://javaforall.net

(0)
上一篇 2022年3月12日 下午5:35
下一篇 2022年3月12日 下午6:00


相关推荐

  • vue 父传子 子传父实现方式

    vue 父传子 子传父实现方式父传子 主要步骤 首先在子组件 props 中创建一个属性 用以接收父组件传过来的值 然后父组件中引用子组件 并在子组件标签中添加子组件 props 中创建的属性 最后把需要传给子组件的值赋给该属性 理解 父亲传给儿子东西 儿子在那边用一个碗接 这个碗就是 props 因为传的东西不可能只是一个 所以是一个数组 父亲因为要传东西到儿子的碗里 所以要绑定儿子的碗 然后传值 props properties 的简称 prop 只可以从上一级组件传递到下一级组件 父子组件

    2026年3月18日
    1
  • 苹果gpt搜题快捷指令教程

    苹果gpt搜题快捷指令教程

    2026年3月15日
    2
  • 一文彻底解决AI可视化图表问题:DeepSeek一键生成百种图表,小白也能轻松上手

    一文彻底解决AI可视化图表问题:DeepSeek一键生成百种图表,小白也能轻松上手

    2026年3月16日
    2
  • java 多线程yield

    java 多线程yieldpackagecom.lhj.java;publicclassTest{publicstaticvoidmain(String[]args)throwsException{RRRt1=newRRR(“t1”);RRRt2=newRRR(“t2”);

    2026年4月14日
    9
  • 基于MATLAB的智能交通信号灯控制系统的实现

    基于MATLAB的智能交通信号灯控制系统的实现写在前面1)现实意义早期使用的交通信号灯是固定配时的调控方式,无法随着车流量的变动而调整绿灯时间,这降低绿灯的使用效益,增大了车辆在交叉口的延误。堵车现象频繁发生,给市民工作生活带来了极大不便,国民经济受到影响。这时候提高道路通行效率,特别是交叉路口的车辆通行效率就显得尤为重要。2)关键技术智能交通系统的核心是交通信号灯的智能控制算法,根据实时交通流的大小,配置信号周期及各种色灯的闪亮时间…

    2026年3月8日
    5
  • opkg软件源设置[通俗易懂]

    opkg软件源设置[通俗易懂]opkg软件源定义在/etc/opkg/distfeeds.conf(更新/etc/opkg.conf并没有什么卵用)文件中,包含软件源索引的目录路径。分为base,luci,management,packages,routeing,telephony多个目录。每个目录存放对应的packages和索引文件。如果想更新base部分的包,请在添加相应的目录名称:vim/etc/o

    2022年5月22日
    196

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号