js,ts简写-符号

97 阅读2分钟

falsy 值(虚值):是在布尔值Boolean上下文中认定为 false 的值。在 JavaScript 中只有 8 个 falsy 值,包括undefined、null、false、空字符串 (双引号 ""、单引号’’、反引号 ``)、NaN、0。 nullish 值:要么是 null 要么是 undefined 。nullish 值总是 falsy 。

1. ||

如果||前面的值是0 '' false null undefined NaN其中的任意一种,则直接返回||后面的值

function(obj){
    var a = obj || {}
}
// 等价于 =>>
function(obj){
    var a;
    if( obj === 0 || obj === "" || obj === false || obj === null || obj === undefined || isNaN(obj)
    ){
        a = {}
    } else {
        a = obj;
    }
}
2. ??

如果||前面的值是null undefined 其中的任意一种,则直接返回??后面的值

    function(obj){
        var a = obj ?? {}
    }
    // 等价于 =>>
    function(obj){
     var a;
        if( obj === null || obj === undefined){
            a = {}
        } else {
            a = obj;
        }
    }
3. ?. 可选链

在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃

const personal = {
    name: "lwl",
    address: {
        state: "New York"
    },
    
}

// 使用可选链操作符
console.log(personal?.address?.ZIPCode) // 输出:undefined

personal.array?.map() //返回undefined,不会崩溃
4. !!

将表达式强制转化为boolean值运算,运算结果为true或者false falsy值 返回 false //空数组返回true

5. ??=

逻辑空赋值运算符(x ??= y)仅在 x 是 nullish(null 或 undefined) 时对其赋值

const a = { duration: 50 };
a.duration ??= 10;
console.log(a.duration);
// expected output: 50
6. !!= &&=

逻辑或赋值运算符(x !!= y)仅在 x 是 假值(Boolean值) 时对其赋值
逻辑或赋值运算符(x &&= y)仅在 x 是 真值 时对其赋值

 var a = 0;
 a ||= 10;
 console.log(a); //输出10

var a = 1;
 a &&= 10;
 console.log(a); //输出10

ts

1. ? ——表示该属性或参数为可选项
2. ! ——表示类型推断排除null、undefined,用于属性后面
// 由于x是可选的,因此parma.x的类型为number | undefined,无法传递给number类型的y,因此需要用x!
interface IDemo {
    x?: number   // 参数为可选项
}

let y:number  // 参数为number类型

const demo = (parma: IDemo) => {
    y = parma.x!  // 变量值可空
    return y
}
const personal = {
    name: "lwl",
    address: {
        state: "New York"
    },    
}
personal.array!.map()