首页  思维导图  详情

JavaScript开发技巧收集

2021-02-20 10:37:31   0  举报





AI智能生成

JavaScript开发技巧收集

JavaScript

ECMAScript

知识图谱

作者其他创作

大纲/内容

判空并赋默认值

描述

判断变量不是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); // “暗之城”

出处