代码简化

# 对象取值（解构赋值）

const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;

const {a,b,c,d,e} = obj;
const f = a + d;
const g = c + e;
// 如果想创建的变量名和对象的属性名不一致，可以这么写
const {a,b,c,d,e} = obj || {};
// 注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值
const {a,b,c,d,e} = obj || {};

1
2
3
4
5
6
7
8
9
10
11
12
13

# 合并数据(扩展运算符)

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 obj1 = {
  b:1,
}
const obj = Object.assgin({}, 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}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 拼接字符串

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13

# if中判断条件

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

// 改进
const condition = [1,2,3,4];

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 查找数组中符合条件的第一项

// 如果查找多项用 filter
const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)

// 如果只查找一项用 find，查找到符合条件的元素后就不会继续循环
const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 获取对象属性值(可选链)

const name = obj && obj.name;

// 改进（obj 不是对象的话，name 会被赋值为 undefined ，不会报错）
const name = obj?.name;

1
2
3
4

# 输入框非空(空值合并运算符)

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

// 改进 在第一个操作数为null 或 undefined 时（而不是其它假值）返回第二个操作数
if(value??'' !== ''){
  //...
}

1
2
3
4
5
6
7
8

#JavaScript

最近更新时间： 2022/09/28 16:26:36

← offset，client，scroll系列瀑布流布局→