【JS编码技巧】技巧掌握的好,业务代码才能写的溜(二)

简介: 语言的一些高级特性的使用可以帮助我们更好去实现一些复杂的功能,以尽量简短的语句来使代码看上去更简洁、逻辑更完善,而且这样减少了出现 bug 的风险。接下来让我总结一些 JavaScript 中的一些简写小技巧。

11. 对象属性分配

如果变量名和对象的属性名相同,那么我们可以在对象的中只写变量名,而不用同时写出属性名和属性值(变量的值)。JavaScript 会自动将属性名设置为与变量名相同,并将属性值分配为变量值。

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 
// 常规写法 
let obj = {firstname: firstname, lastname: lastname}; 
// 简写 
let obj = {firstname, lastname};


12. 字符串(String)转为数字(Number)

有一些内置方法,如 parseIntparseFloat ,可以将字符串转换为数字。我们也可以通过简单地在字符串值前面提供一个一元运算符 + 来实现。

// 常规写法
let total = parseInt('453'); 
let average = parseFloat('42.6'); 
// 简写
let total = +'453'; 
let average = +'42.6';


13. 多次重复一个字符串

要将一个字符串重复指定的次数,你可以使用 for 循环。但使用 repeat() 方法,我们可以在一行中完成。

// 常规写法
let str = ''; 
for(let i = 0; i < 5; i ++) { 
  str += 'Hello '; 
} 
console.log(str); // Hello Hello Hello Hello Hello 
// 简写
'Hello '.repeat(5);



14. 幂的力量

我们可以使用 Math.pow() 方法来求一个数字的幂。有一个更简洁的语法,那就是双星号 (**)

// 常规写法
const power = Math.pow(4, 3); // 64 
// 简写
const power = 4**3; // 64


15. 双NOT位运算符(~~)?

双NOT位运算符 (~~)Math.floor() 方法的替代品。

// 常规写法
const floor = Math.floor(6.8); // 6 
// 简写
const floor = ~~6.8; // 6

提醒: 双 NOT 位运算符方法只适用于32位整数,即(2^31) -1=2147483647。所以对于任何大于2147483647的数字,位运算符 (~~) 会给出错误的结果,所以建议在这种情况下使用 Math.floor()


16. 找出数组中的最大最小值

我们可以使用 for 循环来遍历数组,找到最大值或最小值。也可以使用 Array.reduce() 方法来寻找数组中的最大和最小值。

但是使用展开操作符 (...) 我们可以,我们可以用一行代码就实现这个需求。

// 简写
const arr = [2, 8, 15, 4]; 
Math.max(...arr);  // 最大值 15 
Math.min(...arr);  // 最小值 2

17. 关于 For 循环

要遍历一个数组,我们通常使用传统的 for 循环。我们可以利用 for...of 的方式来遍历一个数组。如果要访问数组每个值的索引,我们可以使用 for...in 循环。

let arr = [10, 20, 30, 40]; 
// 常规写法,for循环
for (let i = 0; i < arr.length; i++) { 
  console.log(arr[i]); 
} 
// 简写
// for...of循环
for (const val of arr) { 
  console.log(val); 
} 
// for...in循环
for (const index in arr) { 
  console.log(`index: ${index} and value: ${arr[index]}`); 
}

我们还可以使用 for...in 循环来遍历对象的属性。

let obj = {x: 20, y: 50}; 
for (const key in obj) { 
  console.log(obj[key]); 
}

18. 合并数组

let arr1 = [20, 30]; 
// 常规写法
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80] 
// 简写
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]


19. 多层次对象的深拷贝

要对一个多层次的对象实现深拷贝,我们可以遍历其每个属性,检查当前属性是否包含一个对象。如果是,则递归调用同一个函数,并将当前属性值(即嵌套对象)作为函数的参数传递进去。

如果我们的对象不包含 函数undefinedNaNDate 等值,我们也可以使用 JSON.stringify()JSON.parse() 来实现。

如果我们的对象是单层对象,即没有嵌套对象,那么我们也可以使用展开操作符 (...) 进行深拷贝。

let obj = {x: 20, y: {z: 30}}; 
// 常规写法,递归
const makeDeepClone = (obj) => { 
  let newObject = {}; 
  Object.keys(obj).map(key => { 
    if(typeof obj[key] === 'object'){ 
      newObject[key] = makeDeepClone(obj[key]); 
    } else { 
      newObject[key] = obj[key]; 
    } 
  }); 
 return newObject; 
} 
const cloneObj = makeDeepClone(obj); 
// 特殊情况下(对象中属性值没有函数、undefined或NaN的情况下)的简写
const cloneObj = JSON.parse(JSON.stringify(obj));
// 单层对象(无嵌套对象)情况下的简写
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};


20. 获取字符串中的某个字符

let str = 'jscurious.com'; 
// 常规写法
str.charAt(2); // c 
// 简写
str[2]; // c



目录
相关文章
|
1月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
41 0
|
3月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
229 9
|
4月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
202 11
|
4月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
234 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
人工智能 数据可视化 机器人
【通义灵码】三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
我发掘出的通义灵码AI程序员新玩法:三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
210 6
|
6月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
131 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
人工智能 数据可视化 架构师
三句话生成 P5.js 粒子特效代码,人人都可以做交互式数字艺术
短短几分钟,两个完全不懂P5.js的人类,和通义灵码AI程序员一起,共同完成了有真实物理引擎和碰撞检测的3D仿真动画。人类扮演的角色更像产品经理和架构师,提出开发需求和迭代修改方案,而AI的作用更像码农,任劳任怨,熟练用各种编程语言完成技术底层的脏活累活。这只是AI编程的冰山一角,未来,每一个艺术家都能快速做出自己的创意原型,每一个数学老师都能轻松做出自己的教学动画。
|
5月前
|
自然语言处理 前端开发 JavaScript
20 个 JavaScript 简化技巧,让你的代码更上一层楼!
JavaScript 既灵活又强大,掌握以下20个技巧可助你编写更简洁高效的代码

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等