前端文档

Appearance

On this page

可选链(.?)

javascript
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

let user: IUser | null = null;
const env: string = import.meta.env.MODE;

if(env === 'development'){
  user = {
    name: '张三',
    phone: 13162548974,
    age: 20
  }
}

//如果user 为 null | undefined时 不会执行 . 后面的语句
console.log('name:' + user?.name);

//相当于以下代码
if(user){
  console.log('name:' + user.name);
}
interface IUser{
  name: string;
  phone: number; 
  age: number;
}

let user: IUser | null = null;
const env: string = import.meta.env.MODE;

if(env === 'development'){
  user = {
    name: '张三',
    phone: 13162548974,
    age: 20
  }
}

//如果user 为 null | undefined时 不会执行 . 后面的语句
console.log('name:' + user?.name);

//相当于以下代码
if(user){
  console.log('name:' + user.name);
}

非空断言操作符 !

  • 可以消除编辑器 当属性值为null 和 undefined时候报错
  • 使用时注意 保证属性值不为null 和 undefined, 否则运行时会报错
javascript
let str: string | null = null;

//程序执行过程中一定赋值, 才能使用 非空断言操作符
str = '张三';

console.log('str:' + str!.trim());

//相当于以下代码
if(str){
  console.log('str:' + str.trim());
}
let str: string | null = null;

//程序执行过程中一定赋值, 才能使用 非空断言操作符
str = '张三';

console.log('str:' + str!.trim());

//相当于以下代码
if(str){
  console.log('str:' + str.trim());
}

空值合并运算符(??)

javascript
let b;
let a = null;
let c = { name: '张三' }

//当 a 除了undefined、或者null之外的任何值, b 都会等于a, 否则就等于c
b = a ?? c;
console.log('b的值:' + b); //结果为 b的值: { name: '张三' }

//相当于以下代码
if(!!a || a === 0 ){
  b = a;
}else{
  b = c;
}
let b;
let a = null;
let c = { name: '张三' }

//当 a 除了undefined、或者null之外的任何值, b 都会等于a, 否则就等于c
b = a ?? c;
console.log('b的值:' + b); //结果为 b的值: { name: '张三' }

//相当于以下代码
if(!!a || a === 0 ){
  b = a;
}else{
  b = c;
}

空值赋值运算符(??=)

javascript
let b = '张三';
let a = '李四'
let c = null;
b ??= a;  
c ??= a; 

//当??=左侧的值为null、undefined的时候, 才会将右侧变量的值赋值给左侧变量. 其他所有值都不会进行赋值.
console.log('b的值:', b); //结果为 b的值: 张三
console.log('c的值:', c); //结果为 c的值: 李四
let b = '张三';
let a = '李四'
let c = null;
b ??= a;  
c ??= a; 

//当??=左侧的值为null、undefined的时候, 才会将右侧变量的值赋值给左侧变量. 其他所有值都不会进行赋值.
console.log('b的值:', b); //结果为 b的值: 张三
console.log('c的值:', c); //结果为 c的值: 李四