JavaScript高级进阶课程总结了很多前端编程思想有用的技巧,在日常开发中,为了保障前端代码的优雅,我们通常会尽可能的用最少得代码实现最复杂的功能;
今天总结了一些代码技巧希望有助于你的技巧提升,以下就是今天的分享:
(1)、短路评估
短路评估也可以理解为 if...else 分支语句。当变量值为 false 时,可使用快捷方式使用逻辑或运算符 || 为变量提供默认值。
let str = "";
let finalRes;
// 常规写法
if (![null,undefined,""].includes(str)) {
finalRes = str;
} else {
finalRes = "default value";
}
// 简写
let finalRes = str || "default value";
// 'default value'
(2)、将字符串转换为数字
代码有时必须以数字格式处理的字符串格式数据,我们用以下方法快速转换它。
// 常规写法
const num1 = parseInt('1000');
const num2 = parseFloat('1000.01')
// 简写
const num1 = +'1000';
//整数例句
const num2 = +'1000.01';
//浮点例句
(3)、声明变量
在函数体头部声明及赋值变量是个好习惯,这种简写方法可以快速创建大量变量,节省不少时间和空间。
// 常规写法
let a;
let b;
let c = 11;
let d = 12;
// 简写
let a, b, c=11, d=12;
(4)、展开运算符(Spread Operator)
感谢 ES6 中引入的展开运算符,让我们的代码写起来更加欢快,在字符串、数组和对象中,它都可以代替特定的函数写法。展开运算符(...),我们可以用它来连接和浅拷贝字符串、数组和对象。
const obj = {a:1,b:2};
const arr = [3, 5, 7];
// 常规写法
const map = Object.assign({c:3,d:4},obj);
const list = [2, 4, 6].concat(arr);
const copy = arr.slice();
// 简写
const map = {c:3,d:4,...obj};
const list = [2, 4, 6, ...arr];
const copy = [...arr];
(5)、数字分隔符
如果你想要简单的获取数组中的每一项内容,这个小技巧很有用。
const largeNumber = 1_000_000_000;
console.log(largeNumber);
// '1000000000'
(6)、事件监听器只运行一次
如果需要添加事件监听器并且只运行一次,你可以使用 once 选项。
element.addEventListener('click', () => console.log('only once'), {
once: true
});