zoukankan      html  css  js  c++  java
  • 可选链运算符、空值合并运算符 --应用到vue项目

    1、npm安装

    npm install  @babel/plugin-proposal-optional-chaining // 可选链运算符 ?.
    npm install  @babel/plugin-proposal-nullish-coalescing-operator // 空值合并运算符 ??
    
    

    2、配置label.config.js
    module.exports = {
      plugins: [
        '@babel/plugin-proposal-optional-chaining',  // 可选链运算符 ?.
        '@babel/plugin-proposal-nullish-coalescing-operator'  // 空值合并运算符 ??
      ]
    }

     3、应用

      3.1  可选链  ?.

    // 读取连接对象链的深处的属性值。
    
    // 函数引用
    let res = parent ?. myFn ?. ()    // parent若存在myFn方法则调用     
    
    // 表达式
    let res = parent ?. [`item-${index}`]
    
    // 访问数组项
    let res = parent ?. list ?. [2]    // 访问parent属性list中的下标为2的值

    // 设置默认值
    let res = parent ?. sex ?? '男' // 取parent的sex属性值,若不存在(undefined)则默认值为'男'

      3.2  空值合并  ??

    // 左侧为 null / undefined 返回右侧值;否则返回左侧值。
    
    const v1 = null ?? 'name'    // 'name'
    const v2 = 0 ?? 12    // 0
    const v3 = undefined ?? 0    // 0
    const v4 = undefined ?? null    // null
    const v5 = 10 ?? null    // 10
    const v6 = '' ? 'HAHA' // ''
  • 相关阅读:
    连通块问题
    线性数据结构
    NOIP2018总结
    原码反码补码详解
    一些常用的算法技巧总结
    骗分导论
    模板
    模板
    AcWing
    AcWing
  • 原文地址:https://www.cnblogs.com/zhaoxiaoying/p/14857785.html
Copyright © 2011-2022 走看看