js中! 、!!、.?、??、??=、?.的用法和含义 —— ts中 !. 语法

在JavaScript中,以下运算符和语法结构具有特定的含义和用法:

! 运算符:

  • 含义: 逻辑非运算符,用于取反一个布尔值或将一个值转换为布尔类型并取反。
  • 用法示例:
const isTrue = true; 
const isFalse = false; 
console.log(!isTrue); // 输出: false 
console.log(!isFalse); // 输出: true

!! 运算符:

含义: 用于将一个值转换为对应的布尔值(强制类型转换)。

用法示例:

const value = "Hello";
console.log(!!value); // 输出: true,任何非空字符串在布尔上下文中都是真值

?. 运算符 (可选链操作符):

含义: 用于在对象属性访问中避免出现错误,当属性不存在或者为 null/undefined 时不会抛出异常,而是返回 undefined。

用法示例:

const person = {
  name: "Alice",
  address: {
    city: "New York"
  }
};
console.log(person.address?.city); // 输出: "New York"
console.log(person.address?.country); // 输出: undefined,因为属性不存在

?? 运算符 (空值合并操作符):

含义: 用于提供默认值,当左侧表达式的结果为 null 或 undefined 时,返回右侧表达式的值。

用法示例:

const defaultValue = "Default Value";
const nullValue = null;
console.log(nullValue ?? defaultValue); // 输出: "Default Value"

??= 运算符 (空值合并赋值操作符):

含义: 用于在左侧操作数为 null 或 undefined 时,将右侧表达式的值赋给左侧操作数。

用法示例:

let variable = null;
const defaultValue = "Default Value";
variable ??= defaultValue;
console.log(variable); // 输出: "Default Value"

?.?.[] 运算符的组合 (可选链操作符):

含义: 可以在对象属性或数组元素的访问中组合使用可选链操作符。

用法示例:

const data = {
  items: [1, 2, 3],
};
console.log(data?.items?.[1]); // 输出: 2
console.log(data?.items?.[5]); // 输出: undefined,因为索引 5 不存在

?.() 运算符 (可选链操作符):

含义: 可以在函数调用中使用可选链操作符,以防止调用不存在的函数。

用法示例:

const obj = {
  greet: function () {
    return "Hello, world!";
  },
};
console.log(obj?.greet?.()); // 输出: "Hello, world!"
console.log(obj?.notExistingFunction?.()); // 输出: undefined,因为函数不存在

?.()?.[] 运算符的混合使用:

含义: 可以混合使用可选链操作符来访问对象的属性和调用对象的方法。

用法示例:

const person = {
  name: "Alice",
  sayHello: function () {
    return `Hello, ${this.name}!`;
  },
};
console.log(person.name?.toUpperCase()); // 输出: "ALICE"
console.log(person.sayHello?.()); // 输出: "Hello, Alice!"

注意: !.  这是TypeScript的语法,叫非空断言操作符(non-null assertion operator),和?.相反,这个符号表示对象后面的属性一定不是null或undefined。

!.  非空类型断言:

含义:!.  非空类型断言,表示确定某个标识符是有值的:

用法示例:

function aa(value?:string){
  console.log(value!.length);
   // console.log(value.length); //错误提醒:value is possibly 'undefined'.
 } 
aa('ppp');
   // 注意: !.不传值, 编译JS后会报错, 建议使用?. 替代 !.

p:有不足的地方欢迎评论哦~

你可能感兴趣的:(javascript)