JavaScript开发技巧收集思维导图模板_ProcessOn思维导图、流程图

判空并赋默认值

描述

判断变量不是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)

数组

长表达式

function testData(element, index, array) {     console.log('test[' + index + '] = ' + element); }

简写

[11, 24, 32].forEach(testData);

简化多行字符串拼接

描述

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

举例

长表达式

const data = 'abc abc abc abc abc abc\n\t' + 'test test,test test test test\n\t'

简写

const data = `abc abc abc abc abc abc test test,test test test test`

简化分支条件语句

描述

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

简写

var types = {   test1: test1,   test2: test2,   test3: test3,   test4: test4 }; var func = types[type]; (!func) && throw new Error('Invalid value ' + type); func();

指数运算

举例

长表达式

Math.pow(2,3);

简写

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("") === false const 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 (['abc', 'def', 'ghi', 'jkl'].includes(x)) {    //其他逻辑 }

简化 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);

补充

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

let x = 300, let test2 = (x > 100) ? 'greater than 100' : (x < 50) ? 'less 50' : 'between 50 and 100'; console.log(test2); // "greater than 100"

简化 switch

描述

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

举例

长表达式

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]();

善用箭头函数简化 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) 的情况下不会引起错误，该表达式短路返回值

举例

const adventurer = { name: 'Alice', cat: {   name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.log(adventurer.someNonExistentMethod?.()); // expected output: undefined

语法

obj?.prop 

let myMap = new Map(); myMap.set("foo", {name: "baz", desc: "inga"}); let nameBar = myMap.get("bar")?.name;

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",   details: {     age: 82,     location: "Paradise Falls" // details 的 address 属性未有定义   } }; let customerCity = customer.details?.address?.city; // … 可选链也可以和函数调用一起使用 let duration = vacations.trip?.getTime?.();

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

let customer = {   name: "Carl",   details: { age: 82 } }; let customerCity = customer?.city ?? "暗之城"; console.log(customerCity); // “暗之城”

出处