js-代码简洁之道

前端

发布日期: 2022-11-04

更新日期: 2022-12-05

文章字数: 1.8k

阅读时长: 8 分

阅读次数:

这篇文章主要是跟大家分享了 javascript 简写常用技巧,三人行，必有我师，欢迎多补充，指教！

1. 空(null, undefined)验证

null 和 undefined 的空置检查当这个数据已知是 null 或者是 undefined 可以这样写

if (a != null || a !== undefined || a !== "") {
  // logic
  let b = a;
}

可以简写为：

let b = a || "";

还可以基于 ?? 操作符如果左边的值为 null 或 undefined 就返回右边的值，如果左边的值为默认值就返回左边的值

const b = null ?? "default";

2.判断值是否存在

if (val) {
} // 存在
if (!val) {
} // 不存在

3.将字符串转数字

 let str = '123'
 //方法1.parseInt()解析一个字符串并返回一个整数。允许空格。仅返回第一个数字。

console.log(parseInt(str)) //  123
 ----------------

//方法2.Number()可用于将 JavaScript 变量转换为数字。我们可以用它来转换字符串太数字。

Number(str); // 123;
 ----------------

//方法3. 使用一元运算符 (+)
console.log(+str);// 123;
 ----------------


//方法4. 乘以数字
console.log("123"*1);// 123;
 ----------------
//方法5.双波浪号 (~~) 运算符

console.log(~~str) // 123

4. 运用三元运算符，来简化 if true…else 条件的写法

let test;
if (x > 100) {
  test = true;
} else {
  test = false;
}
// 简化操作
test = x > 100 ? true : false;

5.if 判断输入非空

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

  // 简化操作

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

补充：

?? 是聚合运算符，又称为空值合并运算符，它只判断 null 和 undefined，如果左值为 null 或 undefined，就返回右值。默认返回左值。
!!将任何变量转换成 boolean

6.判断对象的某些属性是否存在，可选项 .?

const obj = { a: { b: { c: 5 } } }
//非简化版
if (!!obj.a && !!obj.a.b && !!obj.a.b.c) { ... }

  // 简化操作
if (!!obj1.a?.b?.c) { ... } //属性不存在会返回undefined

8.对象属性简写

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

const obj = { x: x, y: y };

// 简化操作
const obj = { x, y };

9.合并数组数据

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

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

10.合并对象数据

const obj1 = {
  a: 1,
};
const obj2 = {
  b: 1,
};
const obj = Object.assign({}, obj1, obj2); //{a:1,b:1}

// 简化操作
const obj = { ...obj1, ...obj2 }; //{a:1,b:1}

11.判断条件后给对象添加属性

const obj1 = { name: "obj1" };
const obj2 = { obj2: "obj2" };

const condition = true;

if (condition) {
  obj2.name = obj1.name;
}

// 简化操作
const condition = true;

const obj2 = {
  obj2: "obj2",
  ...(condition && { name: "obj1" }),
};

12.过滤唯一值

const array = [1, 2, 3, 3, 5, 5, 1];

// 简化操作1

const uniqueArray = [...new Set(array)];
// 简化操作2
const uniqueArray = Array.from(new Set(array));
//打印
console.log(uniqueArray); //[ 1, 2, 3, 5 ]

13.字符串拼接

let first = "Frank",
  last = "Fang";
//未简化版
let welcome = "You got a missed call from " + first + " at " + last;
console.log(welcome);
// 简化版
welcome = `You have logged in as ${first} ${last}`;
console.log(welcome);

14.三元判断简写

let marks = 26;
let result;
//未简化版

if (marks >= 30) {
  result = "Pass";
} else {
  result = "Fail";
}
//简化版
let result = marks >= 30 ? "Pass" : "Fail";

补充：多重三元玩法

let x = 90;
let demo = x > 100 ? "100" : x < 50 ? "50" : "50 到 100之间";
console.log(demo); // "50 到 100之间"

15:key-value 简化 switch

//未简化版
switch (data) {
  case 1:
    test1();
    break;

  case 2:
    test2();
    break;

  case 3:
    test();
    break;
  // And so on...
}

//简化版
var data = {
  1: test1,
  2: test2,
  3: test,
};

data[anything] && data[anything]();

16.用 key-value 简化 if…else…

//未简化版

if (type === "test1") {
  test1();
} else if (type === "test2") {
  test2();
} else if (type === "test3") {
  test3();
} else if (type === "test4") {
  test4();
} else {
  throw new Error("Invalid value " + type);
}
//简化版
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4,
};

var func = types[type];
!func && throw new Error("Invalid value " + type);
func();

17.多条件检查（含有多个条件的 if 语句）

//未简化版
if (value === 1 || value === "one" || value === 2 || value === "two") {
  // Execute some code
}
// 简化版 1:使用indexOf来查找
if ([1, "one", 2, "two"].indexOf(value) >= 0) {
  // Execute some code
}
// 简化版 2:使用includes来判断是否包含
if ([1, "one", 2, "two"].includes(value)) {
  // Execute some code
}

18。判断变量是否存在的缩写法

// 未简化版
if (test1 === true)
if (test1 !== "")
if (test1 !== null)

//  以上三种情况都实用
if (test1)

19. 与 (&&) 短路运算

如果你只有当某个变量为 true 时调用一个函数，那么你可以使用与 (&&)短路形式书写。

//未简化版
if (isLoggedin) {
  goToHomepage();
}
//简化版
isLoggedin && goToHomepage();

20.交换两个变量

为了交换两个变量，我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。

let x = "Hello",
  y = 55;
//未简化版
const temp = x;
x = y;
y = temp;
//简化版
[x, y] = [y, x];

21.赋值运算符缩写法

//未简化版
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
//简化版

test1++;
test2--;
test3 *= 20;

22.使用默认参数代替短路或条件

//未简化版
function add(test1, test2) {
  if (test1 === undefined) test1 = 1;
  if (test2 === undefined) test2 = 2;
  return test1 + test2;
}
//简化版

add = (test1 = 1, test2 = 2) => test1 + test2;
add(); //output: 3

23.${}中可以放入任意的 JavaScript 表达式

//未简化版

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 ? "的考试成绩及格" : "的考试成绩不及格"}`;

24.重复一个字符串多次(repeat)

//未简化版
let str = "";
for (let i = 0; i < 5; i++) {
  str += "Hello ";
}
console.log(str); // Hello Hello Hello Hello Hello
//简化版

"Hello ".repeat(5);

25. 找出数组中的最大和最小数字

//
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2
//或

const arr = [2, 8, 15, 4];
Math.max.apply(Math, arr); // 15
Math.min.apply(Math, arr); // 2

26.过滤无效值

如果要过滤数组中的 false,null,0,undefined,NaN,”” 等值，可以这样做：

let array = [1, false, null, 0, undefined, NaN, "", 6, 7];
let newArr = array.filter(Boolean);

console.log(newArr);

27.通过条件判断给变量赋值布尔值的正确姿势

let a = "a";
//未简化版
if (a === "a") {
  b = true;
} else {
  b = false;
}

//简化版
b = a === "a";

28.在 if 中判断数组长度不为零的正确姿势

//未简化版
if (arr.length !== 0) {
  // todo
}

//简化版
if (arr.length) {
  // todo
}

29.在 if 中判断数组长度为零的正确姿势

//未简化版
if (arr.length == 0) {
  // todo
}

//简化版
if (!arr.length) {
  // todo
}

30.使用 Object.values 快速获取对象键值

let obj = {
  a: 1,
  b: 2,
};
//未简化版1

let values = [];
for (key in obj) {
  values.push(obj[key]);
}

//简化版

let values = Object.values(obj); // [1, 2]

补充：for of 和 for in 区别

for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。
for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator(迭代器)接口的，例如Set,Map,String,Array
for in适合遍历对象，for of适合遍历数组。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。

补充：JavaScript 中 forEach 如何退出循环

JavaScript 中 forEach 循环，break 与 return 都是无法跳出循环，需要使用抛出异常的方式跳出循环

try {
  BarCodeList.forEach((lst) => {
    if (lst.SNO == item.SNO) {
      //抛出异常，跳出循环
      throw new Error("EndIterative");
    }
  });
} catch (e) {
  if (e.message != "EndIterative") {
    mui.alert("数据获取异常请重试!");
    throw e;
  }
}

BiLiang

https://liang996.github.io/2022/110437296.html

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !

vue3学习总结

最近由于项目升级，新项目要用vue3，为此在下班后的时间段里把vue3相关的知识用例子敲了一遍，然后把相关的知识点来总结一下

2022-11-23 vue3

关于js多次点击触发定时器越走越快的问题

2022-09-28 js

js-代码简洁之道

1. 空(null, undefined)验证

2.判断值是否存在

3.将字符串转数字

4. 运用三元运算符，来简化 if true…else 条件的写法

5.if 判断输入非空

6.判断对象的某些属性是否存在，可选项 .?

8.对象属性简写

9.合并数组数据

10.合并对象数据

11.判断条件后给对象添加属性

12.过滤唯一值

13.字符串拼接

14.三元判断简写

15:key-value 简化 switch

16.用 key-value 简化 if…else…

17.多条件检查（含有多个条件的 if 语句）

18。判断变量是否存在的缩写法

19. 与 (&&) 短路运算

20.交换两个变量

21.赋值运算符缩写法

22.使用默认参数代替短路或条件

23.${}中可以放入任意的 JavaScript 表达式

24.重复一个字符串多次(repeat)

25. 找出数组中的最大和最小数字

26.过滤无效值

27.通过条件判断给变量赋值布尔值的正确姿势

28.在 if 中判断数组长度不为零的正确姿势

29.在 if 中判断数组长度为零的正确姿势

30.使用 Object.values 快速获取对象键值

你的赏识是我前进的动力