每天学习使用代码片段(八)

简介: 在项目开发过程中,总觉得有更好的方式来组织代码,通过代码片段,间接的学习一些代码组织技巧。阅读开源代码,是开阔编码思维最快捷的方式,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习JavaScript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。

在项目开发过程中,总觉得有更好的方式来组织代码,通过代码片段,间接的学习一些代码组织技巧。阅读开源代码,是开阔编码思维最快捷的方式,如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习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


相关文章
|
4月前
|
编译器 C++
【C++】lambda表达式语法详细解读(代码演示,要点解析)
【C++】lambda表达式语法详细解读(代码演示,要点解析)
|
4月前
|
存储 C++
【C++】function包装器全解(代码演示,例题演示)
【C++】function包装器全解(代码演示,例题演示)
|
4月前
|
机器学习/深度学习 算法 索引
Python函数、类和对象、流程控制语句if-else while的讲解及演示(图文解释 附源码)
Python函数、类和对象、流程控制语句if-else while的讲解及演示(图文解释 附源码)
35 0
|
4月前
|
索引 Python
13 个非常有用的 Python 代码片段,建议收藏!
13 个非常有用的 Python 代码片段,建议收藏!
文件操作函数——大全(简洁,全面,附代码演示)
文件操作函数——大全(简洁,全面,附代码演示)
|
索引 Python
13 个非常有用的 Python 代码片段
13 个非常有用的 Python 代码片段
97 0
Mystring函数(编程练习代码)
Mystring函数(编程练习代码)
60 0
|
前端开发 JavaScript Windows
我学会了,定制自己的代码片段
vscode的用户片段非常的方便,比如我想规范注释、快速生成代码呀,vscode的用户片段都可以帮我实现,而且是那种非常定制化去实现。定义好片段后,你还可以通过脚手架去生成一个vscode插件,并不复杂。
165 0
我学会了,定制自己的代码片段
ADI
[随笔]Electorn 代码片段
[随笔]Electorn 代码片段
ADI
107 0
|
安全 测试技术 开发者
20 个笑肚疼的代码片段
20 个笑肚疼的代码片段
97 0
20 个笑肚疼的代码片段