欢迎光临散文网 会员登陆 & 注册

分享几个惊艳的JavaScript 代码技巧!

2023-02-24 11:49 作者:华清远见西安中心  | 我要投稿

多表达式多if判断

我们可以在数组中存储多个值,并且可以使用数组include方法。

// 长 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {  //logic } // 短 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {  //logic }


简写 if else

如果 if-else 的逻辑比较简单,可以使用下面这种方式镜像简写,当然也可以使用三元运算符来实现。

// 长 let test: boolean; if (x > 100) {  test = true; } else {  test = false; } // 短 let test = (x > 10) ? true : false; // 也可以直接这样 let test = x > 10;


合并变量声明

当我们声明多个同类型的变量时,可以像下面这样简写。

// 长 let test1; let test2 = 1; // 短 let test1, test2 = 1;


合并变量赋值

当我们处理多个变量并将不同的值分配给不同的变量时,这种方式非常有用。

// 长 let test1, test2, test3; test1 = 1; test2 = 2; test3 = 3; // 短 let [test1, test2, test3] = [1, 2, 3];

&& 运算符

如果仅在变量值为 true 的情况下才调用函数,则可以使用 && 运算符。

// 长 if (test1) { callMethod(); } // 短 test1 && callMethod();


箭头函数

// 长   function add(a, b) {   return a + b; } // 短 const add = (a, b) => a + b;


短函数调用

可以使用三元运算符来实现这些功能。

const fun1 = () => console.log('fun1'); const fun2 = () => console.log('fun2'); // 长 let test = 1; if (test == 1) {  fun1(); } else{  fun2(); } // 短 (test === 1? fun1:fun2)();


默认参数值

// 长 function add(test1, test2) {  if (test1 === undefined)    test1 = 1;  if (test2 === undefined)    test2 = 2;  return test1 + test2; } // 短 const add = (test1 = 1, test2 = 2) => (test1 + test2);


扩展运算符

// 长-合并数组 const data = [1, 2, 3]; const test = [4 ,5 , 6].concat(data); // 短-合并数组 const data = [1, 2, 3]; const test = [4 ,5 , 6, ...data]; // 长-拷贝数组 const test1 = [1, 2, 3]; const test2 = test1.slice() // 短-拷贝数组 const test1 = [1, 2, 3]; const test2 = [...test1];



分享几个惊艳的JavaScript 代码技巧!的评论 (共 条)

分享到微博请遵守国家法律