生成随机验证码

//定义所有可能出现的验证码字符，也可以直接把他们写成数组形式
const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const list = str.split('') // 把str转换成数组
let number = '' // 定义一个存储随机码的字符串
for (let i = 0; i < 4; i++) { // 遍历4次，生成4个随机码（如果是6位，可以遍历6次）
    let num = Math.floor(Math.random() * list.length) // 每次遍历生成一个随机数
    number = number + list[num] // 每次遍历叠加一个
}
console.log(number) // 随机四位

主要用到的知识点：

1. str.split('') ： 把字符串转换成数组，也是分隔符，用 空字符串 分开

2. Math.floor() ：Math方法中的向下取整

3. Math.random() * list.length ：在list长度之内随机获取一个数，相当于索引，意思是在0到list.length之间，包括0，但不包括list.length

用代码生成[A-z0-9]（扩展）

有人可能觉得直接定义A-9太低级了，这里我想出一个方法来，只是有些繁琐，不如直接定义。不过做项目时，直接让后端传过来，动态定义也可以...

const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
// 这是修改后的代码,
const list1 = [] // 一会儿存放[A-Z](65-90)
const list2 = [] // 一会儿存放[a-z](97-122)
const list3 = [] // 一会儿存放[0-9](48-57)
for (let i = 65; i < 91; i++) {
    list1.push(String.fromCharCode(i))
}
for (let j = 97; j < 123; j++) {
    list2.push(String.fromCharCode(j))
}
for (let q = 48; q < 58; q++) {
    list3.push(String.fromCharCode(q))
}
const list = list1.concat(list2, list3)
// const list = [...list1, ...list2, ...list3]
let number = ''
for (let i = 0; i < 4; i++) {
    let num = Math.floor(Math.random() * list.length)
    number = number + list[num]
}
console.log(number) // 随机四位

主要用到的知识点：

1. String.fromCharCode(i) ：用Unicode编码遍历出A-Z

2. 这里有两种合并数组的方法：

合并数组常用的两种方法（扩展）

1. concat()方法

这个方法是将两个或者多个数组拼接成一个新数组

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [7, 8, 9]
const newArr = arr1.concat(arr2, arr3)
console,log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2. 扩展运算符（...）

扩展运算符也称 “三个点”，最常用在数组拼接中，vuex中的状态引入也会用到

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [7, 8, 9]
const newArr = [...arr1, ...arr2, ...arr3]
console,log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

随机生成验证码一般是后端的工作，但是前端也要懂生成的逻辑!!!