50projects50days知识点-31-password-generator

示例网址：

https://50projects50days.com/projects/password-generator/
http://50projects.tc.cluski.top/50projects50days/password-generator/

效果：

思路：

排版没有什么难度，正常排版。

随机数

js中可以使用Math.random()来获取一个0~1的随机数，如此，再乘以大于1的数，就可以获取到任意区间的数。

例如，在获取随机的小写、大写、数字或字符：

function getRandomLower() {
    // 返回随机的小写字母
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
}

function getRandomUpper() {
    // 返回随机的大写字母
    return String.fromCharCode(Math.floor(Math.random() * 25) + 65)
}

function getRandomNumber() {
    // 返回随机的数字
    return String.fromCharCode(Math.floor(Math.random() * 9) + 48)
}

function getRandomSymbol() {
    // 返回随机的符号
    const symbols = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)]
}

Navigator.clipboard 剪切板操作

返回只读属性的clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

clipboard有以下一些方法：

• read()：从剪贴板读取数据（比如图片），返回一个 Promise 对象。在检索到数据后，promise 将兑现一个 ClipboardItem 对象的数组来提供剪切板数据。
• readText()：从操作系统读取文本；返回一个 Promise，在从剪切板中检索到文本后，promise 将兑现一个包含剪切板文本数据的 DOMString。
• write()：写入任意数据至操作系统剪贴板。这是一个异步操作，在操作完成后，返回的 promise 的将被兑现。
• writeText()：写入文本至操作系统剪贴板。返回一个 Promise，在文本被完全写入剪切板后，返回的 promise 将被兑现。

参考链接：

Navigator.clipboard - Web API 接口参考 | MDN (mozilla.org)

Clipboard - Web API 接口参考 | MDN (mozilla.org)

Object.keys() & Object.values() & Object.entries()

这三个工具类可以快速取到对象的所有key，所有value，所有的k-v对。

let person = {
    name: "张三", age: 24, address: "深圳", getName: function () {
    }
}
console.log(Object.keys(person))
// ['name', 'age', 'address', 'getName']

let arr = [1, 2, 3, 4, 5, 6]
console.log(Object.keys(arr));
// ['0', '1', '2', '3', '4', '5']

let str = "12345字符串"
console.log(Object.keys(str));
// ['0', '1', '2', '3', '4', '5', '6', '7']

Object.keys(person).map((key) => {
    // 获取到属性对应的值，做一些处理
    console.log(person[key]);
    // 张三
    // 24
    // 深圳
    // f() {}
})

console.log(Object.values(person))
// ['张三', 24, '深圳', ƒ]

console.log(Object.entries(person))
// [['name', '张三'], ['age', 24], ['address', '深圳'], ['getName', ƒ]]