[JavaScript知识库]TS中的感叹号和问号的用法

今天遇到一串这样的写法：

大意是获取城市数组下对应的城市编码code下的children。其中遇到的!. 和!感到很蒙圈,于是查找了下相关资料。

selectArea.value = selectCity.value.find(item => item.code === val)!.children!

!

1. 用在变量前表示取反。
2. 用在赋值的内容后时，使 null 和 undefined 类型可以赋值给其他类型并通过编译。

interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x!
    return y
}

上述例子中，由于x是可选的，因此parma.x的类型为number | undefined，无法传递给number类型的y，因此需要用x!

当然这种情况也可以处理成：

interface IDemo {
    x?: number
}

let y:number

const demo = (parma: IDemo) => {
    y = parma.x || 1 
    return y
}

!.

!.叫非空断言操作符（non-null assertion operator），和?.相反，这个符号表示对象后面的属性一定不是null或undefined。

!!

!!这个运算可以把表达式强行转换为逻辑值。

?.

可选链操作符 ?. 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

??

空值合并操作符??: 只有当左侧为null和undefined时，才会返回右侧的数。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

与逻辑或操作符||不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42