整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发中实用Javascript代码片段

. 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(`打印文章标题:${title}`);
};

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. 四舍五入

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

由于 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. 普通函数定义

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


者 | Minko Gechev

译者 | 王强

策划 | 蔡芳芳

转发链接:https://web.dev/commonjs-larger-bundles/

先,通知一个事情:经过考虑,决定创建一个QQ群,方便交流学习,比较方便加入,包括发布一些文件以及支持远程协助等等,群号:603559164,欢迎大家加入。

这节课,将继续修改四则运算器,改成让用户输入计算结果,然后程序给出判断结果是否正确。

上节课的作业

输入一个分数,根据分数进行判断,大于等于90分屏幕输出best,大于等于80分屏幕输出good,大于等于60分屏幕输出pass,其他屏幕输出fail

这是一个经典的if分支语句题目

正确的结果类似如下:

score=input("please input score:")

if score>=90 :

print "best"

elif score>=80 :

print "good"

elif score>=60 :

print "pass"

else :

print "fail"

运行结果如下:

增加注释行

到目前为止,已经写了不少程序文件了,add.py,subtract.py,cala.py,score.py

程序文件多了之后,会发现如何快速记起程序的内容和目的,会有点困难,特别是当别人来看你的代码的时候

为了帮助我们自己和别人,我们需要给程序增加一些描述文字和说明,这就是注释

注释的格式是这样的: #注释内容

在行首如果是#开头的表示这一行代码是注释,将不会被程序执行,即使#后面跟着的是代码

我们将最早写的add.py拿出来,当时删掉了一行代码,其实也可以用注释来完成:

num1=input("num1:")

#print num1

num2=input("num2:")

num3=num1+num2

print num1,"+",num2,"=",num3

这样第2行代码就不会执行

我们打开score.py,在最前面增加说明:

这样,每新做一个程序,就在程序最前面增加注释说明这个程序的目的是什么,作者是谁,什么时候创建的,方便其他人查看和了解

再次执行程序,会发现提示错误如下:

这是因为增加了中文的原因,解决的办法是指定文件的编码方式:

在文件第一行增加如下代码:

#coding=utf-8

再次执行代码,发现正常了

四则运算测试器修改代码

接下来,开始改造之前写的四则运算器程序,改成让用户输入计算结果,然后程序给出判断结果是否正确。

首先,打开cala.py,另存为cala_test.py

然后在程序开始添加注释说明:

#coding=utf-8

#四则运算测试器程序

#输入2个数字,1个操作符,1个计算结果,判断是否正确

#作者:学哥 时间:2016/12/8

很明显,需要增加一个输入,让用户输入计算结果,然后判断计算结果num3和输入的结果是否一致,输出结果

在print 这行之前,增加下列代码:

result=input("your result:")

if num3==result :

print "right"

else :

print "error"

然后把原来的print这行注释掉

执行结果如下:

大家在测试程序的时候,除了按照理想或者预期的数据进行输入之外,还要输入一些非预期的数据,这样才能够完整的测试代码是否完美

比如上面的程序,如果在预期输入数字的地方,输入了一个字符a,或者输入了带引号的"a",或者在输入操作符的地方输入一个数字

看看会有什么结果,如果发现错误,看看应该如何修改,进行限制输入,如果不知道的话,可以自己去网上搜索,学会自己寻找答案

因为这个并非我们课程的重点,这里就不讲解了。

输入数值改为程序生成随机数

需要输入数值和操作符太麻烦了,能不能让程序自己生成数值和操作符,我们只要输入结果,看看我们做对了没有,那多好

那么,就来做100以内的加减乘除测试题目吧

首先,将上面的文件另存为cala_test_rand.py

其次,在注释的4行下面,将前面3行输入代码都删除掉

num1=input("num1")

operate=input("your operate:")

num2=input("num2:")

然后在程序开始这个地方增加以下代码:

import random

num1=random.randint(1,99)

num2=random.randint(1,99)

operateint=random.randint(1,4)

if operateint==1:

operate="+"

elif operateint==2:

operate="-"

elif operateint==3:

operate="*"

else:

operate="/"

print num1,operate,num2,"="

完整代码如下:

结果如下:

注意测试的时候,除法是进行整除,小数位舍弃

代码说明

import random 引入一个模块random

random.randint(1,99) 生成一个1到99范围之内的随机整数

random.randint(1,4) 生成一个1到4范围之内的随机整数

然后根据1到4,将运算符设置为加减乘除

后续代码不变

关于模块和函数,后续课程会详细说明,这里只要知道是什么就可以了


课后作业

1. 输入数字1-7判断是星期几

2. 收集星座具体的日期范围,考虑一下如何实现输入一个月和日,输出所属星座

往期教程

0001 零基础的小白能学会编程吗?

0002 真的吗,700元的电脑可以学会编程?

0003 十分钟组装一台电脑开始编程

0004 如何编写人生的第一行代码helloworld

0005 键盘打字如何练成像黑客一样的飞速

0006 编程入门python语言之加法计算器

0007 编程入门python语言之四则运算器

第一部分前7课小结和课程规划说明及微信群主招募

因为教程是系列教程,前后关联性非常强,请大家按照微信公众号的发布时间先后次序进行阅读。

微信公众号里面直接输入序号可以查看该序号课程,例如输入0001可以查看【0001 零基础的小白能学会编程吗?】

作者简介

学哥,二十年编程经验,历任程序员,资深程序员,技术经理,项目经理,产品经理,系统架构师,IT总监。爱好篆刻,阅读,美食。

微信号简介

每天半小时零基础学编程。大人可以学,小孩也可以学。练打字,用软件,写文档,做网站,做App,编游戏,数据库,玩硬件,写程序,3D打印,无人机,机器人。

html,css,javascript,python,php,java,swift,mysql,android,ios,raspberry pi,scratch. 微信公众号搜索:零基础学编程。

QQ群简介

欢迎大家加入QQ群 603559164 零基础学编程,交流学习,共同进步。