每天学习 10 个实用Javascript代码片段(六)

简介: 每天学习10个实用JavaScript代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第六天来了,本文代码片段包括生成随机数、数字加密、四舍五入、文件扩展名、变量数字转换。如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习Javascript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。

每天学习10个实用JavaScript代码片段,加深对 Javascript 语法的理解,积累代码优化经验,第天来了,本文代码片段包括生成随机数、数字加密、四舍五入、文件扩展名、变量数字转换。如果觉得内容能够带来点帮助,可以查看专栏《碎片时间学习Javascript代码》其他内容,又或者有用到的需求片段,不妨在留言区留言。

1. Randoms

在下面的代码片段,将展示了两种生成随机数或从数组中获取随机元素的方法。

生成指定范围的随机数:

const getRandoms = (min, max) => {
    return Math.round(Math.random() * (max - min) + min);
};
console.log(getRandoms(10, 100));

随机获取数组中的一项元素:

const arrayCities = ["北京", "上海", "广州", "深圳", "天津", "重庆"];
const getRadmonItem = (array) =>
    array[Math.floor(Math.random() * array.length)];
console.log("随机城市:", getRadmonItem(arrayCities));

2. 数字加密

下面代码片段展示了使用数字作为密钥对数字进行加密解密操作,使用异或运算 XOR(^) 来实现,展示一个简单的加密解密过程。

function Encrypt(secretNumber) {
    const _secretNumber = secretNumber;
    const encrypted = (encryptNumber) => encryptNumber ^ _secretNumber;
    const decrypted = (encryptedContent) => encryptedContent ^ _secretNumber;
    return {
        encrypted,
        decrypted,
    };
}
const encryptHelper = new Encrypt(202108);
const encryptNumber = 20210901;
// 加密
const encrypted = encryptHelper.encrypted(encryptNumber);
console.log(encrypted); // 20410793
// 解密
const decrypted = encryptHelper.decrypted(encrypted);
console.log(decrypted); // 20210901

3. 设置必选参数

通常定义的一个函数的时候,对于可预期的参数可以使用默认值,而对于必要参数希望给出友好的提示,下面代码片段展示一个必填参数的定义:

const mandatory = (name) => {
    throw new Error(`调用错误,必须传递参数:${name}`);
};
const printTitle = (title = mandatory("标题")) => {
    console.log(`打印文章标题:$`);
};
printTitle("JavaScript"); // 打印文章标题:JavaScript
printTitle(); // Error: 调用错误,必须传递参数:标题

4. 动态创建函数

动态创建函数是一种基于字符串动态生成函数的动态机制,通常用于动态表单的规则验证中,第一个形参是用逗号分隔的实参列表,最后一个形参是函数体的逻辑代码:

const multiplyFn = new Function(
    "num1",
    "num2",
    "num3",
    "return num1*num2*num3"
);
console.log(multiplyFn(1, 2, 3)); // 6
// ES6
const multiply = new Function(
    "...numbers",
    "return numbers.reduce((acc,current) => acc * current, 1)"
);
console.log(multiply(1, 2, 3)); // 6

5. 清空数组

简单的数组清空方式是改变其 length  ,如下代码片段:

const arrayCities = ["北京", "上海", "广州", "深圳", "天津", "重庆"];
console.log(arrayCities); // [ '北京', '上海', '广州', '深圳', '天津', '重庆' ]
// 清空
arrayCities.length = 0;
console.log(arrayCities); // []

6. 四舍五入

小数点的处理,是数字常见的操作,主要涉及的方法是 toFixedMath ,下面代码片段展示常用的方法。

由于 JavaScript 精度原因导致小数点相加的时候与预期有偏差,下面代码片段展示了四舍五入常见的方法和小数相加的处理:

const pi = 3.14159265359;
console.log(pi.toFixed(3)); // 3.142
const sumFloat = 0.1 + 0.2;
console.log(sumFloat); // 0.30000000000000004
console.log(sumFloat.toFixed(1)); // 0.3

Math 方法中常见用于取整的包括:Math.round() 舍入到最接近的整数, Math.floor() 向下舍入, Math.ceil() 向上舍入。最接近数学意义上四舍五入的方法就只有 toFixed ,如下代码片段所示:

const pi = 3.14159265359;
console.log(pi.toFixed(0)); // 3
console.log(Math.floor(pi)); // 3
console.log(Math.ceil(pi)); // 4
console.log(Math.round(pi)); // 3
const num2 = 3.5;
console.log(num2.toFixed(0)); // 4
console.log(Math.floor(num2)); // 3
console.log(Math.ceil(num2)); // 4
console.log(Math.round(num2)); // 4

7. 数组项的对象解构

数组项的对象解构在解析 CSV 格式的数据非常实用,请看下面的代码片段:

const csvAddressDetail = "广东省,深圳市,南山区,科技园北区科技园大厦";
const arrayAddress = csvAddressDetail.split(",");
const { 0: province, 1: city, 2: district, 3: address } = arrayAddress;
console.log(province, city, district, address);  // 广东省 深圳市 南山区 科技园北区科技园大厦

当然还可以跳过一些索引,如下:

const arrayAddress = csvAddressDetail.split(",");
const { 1: city, 3: address } = arrayAddress;
console.log(city, address); // 深圳市 科技园北区科技园大厦

8. 变量数字转换

将值转换为数字,特别是将字符串转换为数字,是经常会用到的,有许多方法可以进行转换,这里展示一些常见的方式:

console.log(+"15"); // 15
console.log(+true); // 1
console.log(+false); // 0
console.log(+null); // 0
console.log(Number("15")); // 15
console.log(parseInt("15", 10)); // 15
console.log(parseFloat("15.42")); // 15.42

9. 获取文件扩展名

下面的代码片段展示了通过一个完整路径或者文件名称获取文件相应的扩展名称方法:

const arrayFiles = [
    "/attach/pics/logo.png",
    "logo.svg",
    "template.xlsx",
    "template.doc",
];
const getExtName = (fullpath) => {
    const root = fullpath.split(/[\\/]/).pop();
    const pos = root.lastIndexOf(".");
    return root === "" || pos < 1 ? "" : root.slice(pos + 1);
};
const arrayExtNames = arrayFiles.map((item) => getExtName(item));
console.log(arrayExtNames); // [ 'png', 'svg', 'xlsx', 'doc' ]

10. 普通函数定义

假设需要定义一个函数,给定一些参数和函数,然后使用这些参数执行这个函数,代码片段展示一个计算器的功能及扩展运算符的使用,如下代码:

const calculator = (operation, ...numbers) => {
    return operation(...numbers);
};
function add(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
function subtract(...numbers) {
    return numbers.reduce((acc, num) => acc - num, 0);
}
function multiply(...numbers) {
    return numbers.reduce((acc, num) => acc * num, 1);
}
console.log(calculator(add, 1, 2, 3, 4, 5)); // 15
console.log(calculator(subtract, 20, 12, 1)); // -33
console.log(calculator(multiply, 1, 2, 3, 4)); // 24
// 打印JSON数据的 title 属性
function printTitle({ title }) {
    console.log(title);
}
const article = {
    title: "JavaScript 函数定义",
    description: "函数定义方式",
};
printTitle(article); // JavaScript 函数定义


相关文章
|
9天前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
17 0
|
14天前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
8 0
|
20天前
|
机器学习/深度学习 前端开发 JavaScript
实用的javascript代码分享
32个史上最有用的js代码
22 1
|
4天前
|
JSON 前端开发 JavaScript
16个重要的JavaScript代码
16个重要的JavaScript代码
27 1
|
6天前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
5 0
|
6天前
|
JavaScript
当当网首页——JS代码
当当网首页——JS代码
6 1
|
7天前
|
JavaScript Java
什么?java中居然可以执行js代码了?真是不知者不怪
什么?java中居然可以执行js代码了?真是不知者不怪
8 1
|
7天前
|
JavaScript 前端开发 Python
生成X-Bogus的js代码,通过python调用生成
该文本是一个关于如何解析和执行JavaScript代码的步骤说明。主要内容包括: 1. 找到JavaScript文件的位置。 2. 下载代码并进行格式化。 3. 运行代码时会出现缺少变量错误,需要添加模拟环境的代码。 4. 指出主要的入口函数是`_0x5a8f25`,将其赋值给`window`。 5. 提供了整个JavaScript代码的长串内容。 6. 提供了一个Python脚本,用于调用这个JavaScript函数并处理返回的数据。 总结:这段文本描述了如何处理和运行一个JavaScript文件,以及使用Python来与这个脚本交互的示例。
|
9天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
9天前
|
存储 JavaScript 编译器
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!

相关产品

  • 云迁移中心
  • http://www.vxiaotou.com