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