JavaScript开发技巧收集

JavaScript开发技巧

判空并赋默认值

描述

判断变量不是null，undefined，''的时候赋值给第二个变量，否则给个默认值

举例

较长表达式

if (first !== null || first !== undefined || first !== '') {    let second = first;}

简写

let second = first || '';

简写循环遍历

for 循环是最基本的，但是有点繁琐。可以用for...in、for...of或者forEach代替

对象

长表达式

for (var i = 0; i < testData.length; i++)

for (let i in testData) or for (let i of testData)

数组

简化多行字符串拼接

字符串表达式过长，我们可能会拆成多行拼接的方式。不过随着 ES6 的普及，更好的做法是用模板字符串

简化分支条件语句

if...else if...else！跟switch类似，也可以用key-value形式简化

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);}

指数运算

2**3

空值合并操作符（??）

只有当左侧为null和undefined时，才会返回右侧的数

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数

与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时

const foo = null ?? 'default string';console.log(foo);// expected output: \"default string\"const baz = 0 ?? 42;console.log(baz);// expected output: 0

const nullValue = null;const emptyText = \"\"; // 空字符串，是一个假值，Boolean(\"\") === falseconst someNumber = 42;const valA = nullValue ?? \"valA 的默认值\";const valB = emptyText ?? \"valB 的默认值\";const valC = someNumber ?? 0;console.log(valA); // \"valA 的默认值\"console.log(valB); // \"\"（空字符串虽然是假值，但不是 null 或者 undefined）console.log(valC); // 42

出处

简化条件表达式

判断某个变量是否为指定的某些值，用常规的逻辑表达式会很长。做法是把这些值放进数组里

过长的表达式

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {    //其他逻辑}

简化 if ... else

简单的变量赋值，完全没必要用这种冗长的语句，一行表达式就搞定

较长的表达式

let test= boolean;if (x > 100) { test = true;} else { test = false;}

// 简写表达式let test = (x > 10) ? true : false;// 更直接的let test = x > 10;console.log(test);

补充

三元表达式可以做复杂的条件分支判断，会牺牲可读性

简化 switch

把switch 转换成对象的key-value形式

switch (data) {  case 1:    test1();    break;  case 2:    test2();    break;  case 3:    test();    break;  // And so on...}

善用箭头函数简化 return

当函数简单到只需要返回一个表达式时，用箭头函数最合适不过了，return都不用写

function getArea(diameter) {  return Math.PI * diameter}

getArea = diameter => (  Math.PI * diameter;)

重复字符串 N 次

出于某种目的需要将字符串重复 N 次，最笨的方法就是用for循环拼接。其实更简单的方法是用repeat

let test = ''; for(let i = 0; i < 5; i ++) {   test += 'test '; } console.log(str); // test test test test test 

'test '.repeat(5);

数字分隔符

ES2021 提出来的，数字字面量可以用下划线分割，提高了大数字的可读性

let number = 98234567

let number = 98_234_567

可选链操作符( ?. )

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值

语法

obj?.prop 

let myMap = new Map(); myMap.set(\"foo\

obj?.[expr]

可选链与表达式：

let nestedProp = obj?.['prop' + 'Name'];

arr?.[index]

可选链访问数组：

let arrayItem = arr?.[42];

func?.(args)

函数调用

let result = someInterface.customMethod?.();如果希望允许 someInterface 也为 null 或者 undefined ，那么你需要像这样写 someInterface?.customMethod?.()

短路计算

let potentiallyNullObj = null;let x = 0;let prop = potentiallyNullObj?.[x++];console.log(x); // x 将不会被递增，依旧输出 0当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算

连用可选链操作

let customer = {  name: \"Carl\

空值合并操作符可以在使用可选链时设置一个默认值：