在项目开发过程中,总觉得有更好的方式来组织代码,通过代码片段,间接的学习一些代码组织技巧。阅读开源代码,是开阔编码思维最快捷的方式,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习JavaScript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。
解构别名
有一个对象,希望从其中一个属性创建一个变量,这是一件很容易的事情,但通常,希望使用与属性名不同的变量名。例如,有一个博客的详情的 title
属性,同时希望这个属性为页面的标题 pageTitle
的值,下面代码片段展示一个更加简洁的方式,即解构别名:
const detail = { title: "JavaScript编码技巧", intro: "阅读开源代码,是开阔编码思维最快捷的方式", }; const { title: pageTitle } = detail; console.log(pageTitle); // JavaScript编码技巧
洗牌
在大数据时代,算法是一个很常见的知识,通常许多算法需要变换数组元素。在面试中,也可能会被问到如何制作游戏。大多数游戏都涉及到一些洗牌算法。
const arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; const shuffled = (array) => array.sort(() => { return Math.random() - 0.5; }); console.log(shuffled(arrayNumbers));
类型转换
JavaScript 的灵活性,也导致了在 JavaScript 中将一种类型转换为另一种类型存在多种实现方式。有些看起来更加简洁,因此建议确保不会通过使用特定方式从而降低代码的可读性。
转为 String
const num = 5; const str1 = num.toString(); const str2 = String(num); const str3 = num + ""; const str4 = `${num}`; console.log(str1); // "5" console.log(str2); // "5" console.log(str3); // "5" console.log(str4); // "5"
转为 Number
const str = "1"; const num1 = +str; const num2 = Number(str); console.log(num1); // 1 console.log(num2); // 1
浮点转为整数
众所周知,JavaScript 中的数字转换比较特殊,特别是当涉及到数学运算时,JavaScript 中容易出现其他程序语言不会出现的问题,常见的是 0.1+0.2!=0.3
,下面代码片段展示了常见的浮点数转整数的方式:
const floatNum = 1.846; const int1 = floatNum | 0; const int2 = parseInt(floatNum); const int3 = ~~floatNum; const int4 = Math.round(floatNum); const float1 = Math.floor(floatNum); const float2 = Math.ceil(floatNum); console.log(int1); // 1 console.log(int2); // 1 console.log(int3); // 1 console.log(int4); // 2 console.log(float1); // 1 console.log(float2); // 2
下面来看看小数点的四舍五入的方式:
const floatNum = 1.855; const roundNumber = (num, precision = 2) => { const numberFormatted = new Intl.NumberFormat("en-US", { maximumFractionDigits: precision, }).format(num); return Number(numberFormatted); }; const num1 = floatNum.toFixed(2); const num2 = Number(floatNum.toFixed(2)); const num3 = Math.round(floatNum * 100) / 100; console.log(num1); // 1.85 console.log(num2); // 1.85 console.log(num3); // 1.86 console.log(roundNumber(1.2549)); // 1.25 console.log(roundNumber(1.255)); // 1.26
转为 Boolean
const str = "1"; const bool1 = !!str; const bool2 = Boolean(str); console.log(bool1); // true console.log(bool2); // true
正整数转二、八、十六进制
const int = 10; const binary = int.toString(2); const hex = int.toString(16); const octal = int.toString(8); console.log(binary); // 1010 console.log(hex); // a console.log(octal); // 12