ES6的常规用法与便捷使用

一、解构赋值

1. 获取一个对象里面的属性的值

const obj = {
    
    
    A:1,
    B:2,
    C:3,
    D:4,
    E:5,
}
const {
    
     A,B,C,D,E } = obj || {
    
    }

注意： 解构赋值的时候要保证obj不能为null，undefined,要不然会报错。一般的处理就是给它设置一个默认值 {}。

2. 解构赋值重命名

var obj = {
    
    
   A: “libai”,
};
var {
    
     A } = obj
var {
    
     A: A2 } = obj

console.log(A);   // libai
console.log(A2);   // libai

二、对象、数组的合并

1. 数组合并(还要考虑去重)

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

2. 对象合并

const obj1 = {
    
    
  a:1,
}
const obj2 = {
    
    
  b:1,
}
const obj = {
    
    ...obj1,...obj2};//{a:1,b:1} // 方法一
const objTwo = Object.assign(obj1,obj2)  // 方法二

三、ES6中数组实例方法includes的使用

1. 对于判断逻辑简写

一般写法

if(
	type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
    
    //代码//}

改进写法

const arrs = [1,2,3,4];

if( arrs.includes(type) ){
    
    
   //...
}

四、列表搜索

1. 在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。

const arrs = [1,2,3,4,5];
const result = arrs.filter(item => item ==3 )

改进： 对于精确搜索一般使用 find 方法，find方法中找到符合条件的项，就不会继续遍历数组。（性能优化）

const arrs = [1,2,3,4,5];
const result = arrs.find(item => item ==3 )

五、获取对象属性值

一般写法

const age = obj && obj.age;

改进写法（可选链操作符）

const age = obj?.age;

六、输入框非空的判断

在处理输入框相关业务时，往往会判断输入框未输入值的场景。
一般写法

if(value !== null && value !== undefined && value !== ''){
    
    
    //...
}

改进写法（空值合并运算符）

if((value??'') !== ''){
    
    
  //...
}

补充： 空值合并操作符(??)是一个逻辑操作符，当左侧的操作数为null 或者undefined 时,返回其右侧操作数，否则返回左侧操作数。