各种数据操作简单化

一、if判断多个值

描述:判断值满足多个条件

无效代码:if (value === 'a' || value === 'b' || value === 'c') { ... }

有效代码:if (['a', 'b', 'c'].includes(value)) { ... }

二、或非判断

描述:当条件为true或false时,执行某些操作或赋值

无效代码:

if(condition){
  toto()
}
//或者
if(!condition){
  toto()
}

有效代码:

condition && todo()
condition || todo()
const a = undefined
const value = a|| '1';   //短路求值

三、if条件语句有返回值,不要写else

无效代码:

if (...) {
  return 'abin'
} else {
  return 'ok'
}

有效代码:

if (...) {
  return 'abin'
}
return 'ok'

四、if判断输入非空

无效代码:if(value !== null && value !== undefined && value !== ''){ //... }

有效代码:if((value??'') !== ''){ //... }

补充:要注意 ?? 和 || 的区别:

  • ??是空值合并操作符,它只判断null和undefined;
  • || 是逻辑判断(或) 操作符,它判断的是boolean值,除了0、""、null、undefined、NaN 和 false 是假值之外,其他的都是真值。

五、!!将任何变量转换成boolean

六、判断对象的某些属性是否存在,可选项 .?

无效代码:

const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist

有效代码:

if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist,属性不存在会返回undefined
####七、for循环简写

无效代码:for (let i = 0; i < arr.length; i++)

有效代码:for (let index in arr)

八、十进制指数

描述:当需要写数字带有很多零时(如10000000),可以采用指数(1e7)来代替这个数字:

九、对象属性简写

描述:如果属性名与key名相同

无效代码:const obj = { x:x, y:y };

有效代码:const obj = { x, y };

十、双重非位运算简写

无效代码:Math.floor(4.9) === 4 //true

有效代码:~~4.9 === 4 //true

十一、数组精确查找

无效代码:遍历数组进行查找

const pets = [
 { type: 'Dog', name: 'Max'},
 { type: 'Cat', name: 'Karl'},
 { type: 'Dog', name: 'Tommy'},
]
 
function findDog(name) {
   for(let i = 0; i

有效代码:

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

十二、对象取值

无效代码:

const obj = {
    a:1,
    b:2,
}
//取值
const c = obj.a;
const d = obj.b;
const e = obj.a;

有效代码:

const obj = {
    a:1,
    b:2,
}
//取值
const { a, b} = obj
const c = a
const d = b
const e = a

补充:要注意解构的对象不能为undefined、null。否则会报错,故要给被解构的对象一个默认值。

十三、对象动态属性名

无效代码:可以用 [] 号set/get对象属性,而且它还可以写表达式

有效代码:

obj = {};
let index = 1;
obj[`key${index}`] = '内容';

十四、合并数据

无效代码:

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
 
const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

有效代码:

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
 
const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

补充:数组合并考虑下去重,用Set先处理下,Array.from(new Set( ))不兼容ie

十五、拼接字符串

描述:别用加号拼接了,用模板字符串好吗

无效代码:

const name = '小明';
const score = 59;
let result = '';
result = name + score>60?'的考试成绩及格'的考试成绩不及格':

有效代码:

const name = '小明';
const score = 59;
let result = '';
result = `${ name }的考试成绩&{ score>60?'':'不' }及格`

补充:模板字符串里可以写表达式,千万别写出下面这种代码,会被鄙视的

十六、扁平化数组

描述:一个班级JSON数据中,属性名是部门id,属性值是个部门成员id数组集合,现在要把有部 门的成员id都提取到一个数组集合中。

const deps = {
'一班':[13,21,42],
'二班':[34],
'三班':[45,134,79],
'四班':[33,64,15],
}
无效代码:嵌套遍历取值

有效代码:

const deps = {
    '一班':[13,21,42],
    '二班':[34],
    '三班':[45,134,79],
    '四班':[33,64,15],
}
let member = Object.values(deps).flat(Infinity);
改写:Infinity作为flat()方法的参数,可以将任意维度的数组扁平化

十七、判断条件后给对象添加属性

无效代码:

const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true
 
if (condition) {
   other.name = toto.name 
}

有效代码:

const condition = true
const other = {
   other: 'other',
   ...condition && { name: 'toto' }
}

补充:利用了扩展运算符,解构赋值和&& 逻辑运算符

你可能感兴趣的:(各种数据操作简单化)