JavaScript开发技巧收集
2021-02-20 10:37:31 0 举报AI智能生成
JavaScript开发技巧收集
作者其他创作
大纲/内容
判空并赋默认值
描述
判断变量不是null，undefined，''的时候赋值给第二个变量，否则给个默认值
举例
较长表达式
if (first !== null || first !== undefined || first !== '') {
let second = 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);
}
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'
+ 'test test,test test test test\n\t'
简写
const data = `abc abc abc abc abc abc
test test,test test test test`
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);
}
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();
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
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
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;
}
if (x > 100) {
test = true;
} else {
test = false;
}
简写
// 简写表达式
let test = (x > 10) ? true : false;
// 更直接的
let test = x > 10;
console.log(test);
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"
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...
}
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]();
1: test1,
2: test2,
3: test
};
data[anything] && data[anything]();
善用箭头函数简化 return
描述
当函数简单到只需要返回一个表达式时，用箭头函数最合适不过了，return都不用写
举例
长表达式
function getArea(diameter) {
return Math.PI * diameter
}
return Math.PI * diameter
}
简写
getArea = diameter => (
Math.PI * 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
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
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;
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?.()
如果希望允许 someInterface 也为 null 或者 undefined ，那么你需要像这样写 someInterface?.customMethod?.()
短路计算
let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0
当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算
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?.();
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); // “暗之城”
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”
出处
0 条评论
下一页
