ES6的常规用法与便捷使用

一、解构赋值

  1. 获取一个对象里面的属性的值
const obj = {
    A:1,
    B:2,
    C:3,
    D:4,
    E:5,
}
const { A,B,C,D,E } = obj || {}

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

  1. 解构赋值重命名
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]
  1. 对象合并
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 时,返回其右侧操作数,否则返回左侧操作数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值