前端神奇知识点

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;
  }
}

3.

4.

5.

6.