本文介绍了一系列前端开发中的实用技巧，包括正则表达式的应用、不使用基本算术运算符实现数值运算、数组操作的高效方法、从大数据集中随机抽样以及验证码功能的设计。此外，还探讨了变量作用域和函数自执行的概念。
题目来源于网络及日常工作，答案及说明为自己的理解。如有错误，望指出。共同进步！！！
目录
-
1、正则（邮箱，电话，出生日期，数字和英文字母）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" class="code">
<button>保存</button>
</body>
</html>
<script src="jquery-1.12.1.min.js"></script>
<script>
re=/[^\w_]/
$('button').on('click',function(){
var i=$('.code').val()
if(re.test(i)){
alert('请输入数字或英文字母')
}else{
alert('保存成功')
}
})
reEmail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
if (pubEmail == '') {
swal('民网电子邮箱为空')
return;
} else if (!reEmail.test(pubEmail)) {
swal('请输入正确的电子邮箱')
return
}
reB = /^\d{8}$/
if (birthday == '') {
swal('出生日期为空')
return
} else if (!reB.test(birthday)) {
swal('请输入正确格式的出生日期')
return
}
re = /^1\d{10}$/
if (mph == '') {
swal('移动电话为空')
return
} else if (!re.test(mph)) {
swal('请输入正确的移动电话')
return
}
</script>涉及知识：
正则：
-
2、不用加减乘除运算符，求整数的7倍
方法一：运用乘号的ASSIC码计算
let mul7=(num)=>eval([num,String.fromCharCode(42),"7"].join(""))方法二：
（1）通过位运算（二进制与十进制相互转换）
主要思路：十进制转二进制，左移三位，补零（8倍），左移一位，补零（1倍）；
八倍减1倍，结果为7倍
let mul7=(num)=>{
return (num << 3 )-num
}
console.log(mul7(10)) //70（2）十进制转七进制，左移一位补零
let mul7=(num)=>parseInt([num.toString(7),'0'].join(""),7)
console.log(mul7(10)) //70涉及知识：
- eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
- fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。 语法：String.fromCharCode(numX,numX,...,numX)
- join()：把数组中的所有元素放入一个字符串
- toString转目标进制
- parseInt转十进制 语法：parseInt(string, radix) （radix介于 2 ~ 36，否则返回NaN）
let num=10;
console.log(num.toString(2)) //1010扩展知识：
（1）数组方法
| 方法名 | 参数 | 返回值 | 用途 | 是否改变 原数组 | 备注 |
|---|---|---|---|---|---|
| join() | 不带参数：用,连接 eg:(',') 带参数：(' ')('')('-')等 | 连接后的字符串 | 将数组中的所有元素，转为字符串 并连接在一起 | Array.join()是String.split()的逆向操作 | |
| reverse() | 无 | 逆序的数组 | 将数组中的元素，颠倒顺序 | 是 | |
| sort() | 不带参数：以字母表顺序排序 带参数：比较函数（用匿名函数非常方便） | 排序后的数组 | 将数组中的元素，排序 | 数组中包含undefined，会被排到尾部。 比较函数只使用一次，没必要命名 | |
| concat() | 新数组 | 连接为新数组（元素包括： 调用concat()的原始数组的元素和concat()的每个参数） | 否 | 不会修改调用的数组； 不会递归扁平化数组的数组 | |
| slice() | 两个参数：片段的开始和结束位置 一个参数：从开始到数组结尾 负数：最后一个元素的位置（-1：最后一个；-3：倒数第三个） | 指定数组的一个片段或子数组 | 截取指定数组 | 否 | 返回第一个参数位置到不含第二个参数之前的所有数组元素 |
| splice() | 第一个参数：插入或删除的起始位置 第二个参数：删除元素的个数（省略：起始到数组结尾的所有元素被删除） 第三个参数及之后的任意个参数： 需要插入到数组中的元素（从第一个参数指定的位置开始插入）
| 由删除元素组成的数组（无：返回空） | 插入或删除元素 | 是 | 区别于concat()，slipce()会插入数组本身，不是数组的元素 |
| push() | 数组新的长度 | 在数组的尾部添加一个或多个元素 | 是 | 允许将数组当做栈使用 | |
| pop() | 无 | 删除的值 | 删除数组的最后一个元素，减小数组的长度 | 是 | |
| unshift() | 多个参数：参数是一次性插入 | 数组新的长度 | 在数组的头部添加一个或多个元素 |
|
|
| shift() | 无 | 删除的元素 | 删除数组的第一个元素 |
|
|
| toString() |
|
| 将每个元素转化为字符串，并输出用逗号分隔的字符串列表 |
| 与不使用任何参数，调用join()返回的字符串相同 |
| toLocaleString() |
|
| 将每个元素转化为字符串，并使用本地化分隔符将字符串连接，生成最终的字符串 |
| 是toString()的本地化版本 |
（2）ECMAScript5中的数组方法
大多数函数
第一个参数：函数，并且对数组的每个元素（或一些元素调用一次该函数）
第二个参数：可选（有：调用函数是第二个参数的方法）
调用提供的以下函数，使用三个参数：数组元素、元素索引、数组本身（通常只需要第一个参数）
| 方法名 | 参数 | 返回值 | 用途 | 是否修改原始数组 |
|---|---|---|---|---|
| forEach() | 从头至尾遍历数组，为每个元素调用指定的函数 | 否（传递给这些方法的函数，可以修改原始数组） | ||
| map() | 一个数组 | 将调用的数组每个元素，传递给指定函数 | ||
| filter() | ||||
| every() | ||||
| some() | ||||
| reduce() | ||||
| reduceRight() | ||||
| indexOf() | ||||
| lastIndexOf() |
(3)数组方法的应用
// 数组去重
function unique(arr) {
return arr.filter(function(item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
User=unique(User)
//去重
function uniqueFun(arr, type) {
const res = new Map();
return arr.filter((a) => !res.has(a[type]) && res.set(a[type], 1));
}
var userList1 = [];
userList1 = uniqueFun(userList,"id");
-
3、快速从一个巨大的数组中随机获取部分元素
比如：有个数组有100K个元素，从中不重复随机选取10K个元素。
实际用途：从大量用户中，随机获取抽奖用户！
思路：
从数组中抽取随机数（10个中随机抽取3个）
//从数组中随机抽取三个数
var arr=[12,23,30,46,65,67,79,80,93,103]
var newArr=[]
var random;
for(var i=0;i<3;i++){
random=Math.floor(Math.random()*arr.length)
if(newArr.indexOf(arr[random])===-1){
newArr.push(arr[random])
}else{
i--;
}
}
console.log(newArr)打乱现有数组，从打乱后的数组中获取需要的个数
console.time();//函数执行时间（开始）
//通过随机数，将数组随机排序
let arr=[12,23,30,46,65,67,79,80,93,103]
let newArr=[];
let randomNum=[];
let randomArr=(arr)=>{
let random;
for(let i=0;i<arr.length;i++){
random=Math.floor(Math.random()*arr.length)
if(newArr.indexOf(arr[random])===-1){
newArr.push(arr[random])
}else{
i--;
}
}
}
//从随机排列的数组中，取出需要的个数
let getNumArr=(arr,num)=>{
randomArr(arr)
for(let i=0;i<num;i++){
randomNum.push(newArr[i])
}
}
getNumArr(arr,4)
console.log(newArr)
console.log(randomNum)
console.timeEnd();//函数执行时间(结束)自己思考的解决办法：（只是实现，但不是最优解）
//伪造一个100K的数组
let mostArr=[]
for(var i=0;i<100000;i++){
mostArr.push(i+'Lottery')
}
console.time();
//洗牌100K数据的数组，取出前10K条数据
let arr=mostArr
let newArr=[];
let randomArr=(arr)=>{
let random;
for(let i=0;i<arr.length;i++){
random=Math.floor(Math.random()*arr.length)
if(newArr.indexOf(arr[random])===-1){
newArr.push(arr[random])
//由于洗牌完所有数据，耗时过长。所以洗牌足够10K条的时候，取出洗出的10K条数据
if(newArr.length===10000){
return;
}
}else{
i--;
}
}
}
randomArr(arr)
console.log(newArr)
console.timeEnd();
//default: 354.42626953125ms涉及知识：
随机数：
Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】
Math.floor(); //向下取整。
indexOf() ：
- 返回某个指定的字符串值，在字符串中，首次出现的位置；
- 对大小写敏感；
- 如果要检索的字符串值没有出现，则该方法返回 -1。
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />") //0
document.write(str.indexOf("World") + "<br />") //-1
document.write(str.indexOf("world")) //6扩展知识：
Math.ceil(); //向上取整。
Math.floor(); //向下取整。
Math.round(); //四舍五入。
Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494
Math.ceil(Math.random()*10); // 获取从1到10的随机整数 ，取0的概率极小。
Math.round(Math.random()); //可均衡获取0到1的随机整数。
Math.floor(Math.random()*10); //可均衡获取0到9的随机整数。
Math.round(Math.random()*10); //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半
-
4、60秒获取验证码
为什么要有获取验证码？
答：1、防止恶意刷网站 2、可以收集真实用户数据（手机号，邮箱）
涉及知识：
-
5、变量作用域、函数自执行
var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();答：Hello Tom（错）
正确答案：Goodbye Jack
涉及知识：
var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
let name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
//Hello Tom
var name = 'Tom';
(function(name) {
if (typeof name == 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})(name);
//Hello Tom
var name = 'Tom';
(function() {
if (typeof name == 'undefined') {
name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
//Hello Tom
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
