TS前端“随意”的知识点 ?? 和 ?. 和 ||,扩展运算符:…

大神们发明ts,包装js的时候根本没考虑我们这些菜鸟,理解这些近似的、似是而非的、随意的概念多难。JS学会了不容易,又弄个TS,学完TS,发现自己可以用JAVA了,特么的,就这么完全明白了什么似的

1.?? 和 ?. 和 ||

1、定义:

?. 可选链操作符;访问多层对象属性时,兼容空值时使用; ?? 空值合并操作符;只有当左侧为null和undefined时,才会返回右侧的数

2、?. 可选链

当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误;为此我们不得不这么处理:

let dataList = res && res.data && res.data.list

其等价于

let dataList = res ?.data ?.list

3、?? 和 ?.的合作使用

const obj = {

      a:"xxx",

      c: {

        d: 'abc'

      }

    }

    let res1 = obj?.a?.b // <=等价=> let res = obj && obj.a && obj.a.b

    let res2 = obj?.e?.f

    let res3 = obj?.e?.f ?? '123'

    let res4 = obj?.a?.b ?? '456'

    let res5 = obj?.c?.d ?? '789'

    console.log(res1) // undefined

    console.log(res2) // undefined

    console.log(res3) // 123

    console.log(res4) // 456

    console.log(res5) // abc

作用就是判断这个对象下的属性值是否为null或者undefined;

当其中一链为null或者undefined时就返回undefined;

这样即使中间缺少一个属性也不会报错;

双问号后面接的就是默认值。

4、??和||的区别

|| 视0 空字符串为假

?? 视0 空字符串为真

console.log(1 || "xx") //1

console.log(0 || "xx") //xx

console.log("" || "xx") //xx

console.log(1 ?? "xx") //1

console.log(0 ?? "xx") //0

console.log("" ?? "xx") //''

 

??和||的用法基本一样;不过他是忽略0和空字符串这两种错误的

2.es6兴起的语法

(1)扩展运算符:…

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 10, 20, 30];

// 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];

 

(2)声明变量方式:let/const

(3)模板字符串:``

里面变量用${a}来取值

const name = '李刚';

const age = 30;

console.log(`我是${name},我今年${age}岁`)

 

(4)箭头函数:

var fn = function(a, b) {

    return a + b;

}

es6写法:

const fn = (a, b) => a + b;

 

(5)结构赋值

// 首先有这么一个对象

const props = {

    className: 'tiger-button',

    loading: false,

    clicked: true,

    disabled: 'disabled'

}

// es5

var loading = props.loading;

var clicked = props.clicked;

// es6 解析结构

const { loading, clicked } = props;

 (6)函数的默认参数定义方式

// es5

function sum (a, b) {

    a = a || 10;

    b = b || 5;

    return a + b;

}

// es6

function sum (a = 10, b = 5) {

    return a + b;

}

 console.log(sum(1, 2)); // 3

 console.log(sum(5)); // 10

 console.log(sum()); // 15

 // 当需要第一个参数使用默认值,而指定第二个参数时,需要显式指定第一个参数值为undefined

 console.log(sum(undefined, 10)); // 20

 // ********需要注意,当显式指定参数为null时,是不会使用默认值的

 console.log(sum(null, 10)); // 10

 

(7)对象字面量

const name = 'Jane';

const age = 20

// es6

const person = {

  name,

  age

}

// es5

var person = {

  name: name,

  age: age

};

 

(7)class构造函数

ES6为我们创建对象提供了新的语法糖,这就是Class语法

// ES5

// 构造函数

function Person(name, age) {

  this.name = name;

  this.age = age;

}

// 原型方法

Person.prototype.getName = function() {

  return this.name

}

// ES6

class Person {

  constructor(name, age) {  // 构造函数

    this.name = name;

    this.age = age;

  }

  getName() {  // 原型方法

    return this.name

  }

}

 extends继承

class Person {

  constructor(name, age) {

    this.name = name;

    this.age = age;

  }

  getName() {

    return this.name

  }

}

// Student类继承Person类

class Student extends Person {

  constructor(name, age, gender, classes) {

    super(name, age); // 声明继承父级的属性;相当于获得父类的this指向

    this.gender = gender; // 自己的私有属性

    this.classes = classes; // 自己的私有属性 

  }

  getGender() { // 自己的私有方法

    return this.gender;

  }

}

猜你喜欢

转载自blog.csdn.net/weixin_44821114/article/details/133438680
今日推荐