前端开发辅助

快捷键-uni-app工具HBuilder X实用快捷键

// Ctrl + R + 5             运行/停止小程序
// Ctrl + E                 文件名/路径搜索
// Ctrl + Shift + F         多文件字符搜索和替换
// Ctrl + Shift + E         开始和结束标签同步修改
// Ctrl + 鼠标左键           增加选中光标
// Alt + Shift + F          整理代码格式
// Alt + 样式名/方法/属性    跳转到该元素定义位置
// Alt + ←                  跳转到上一光标
// Alt + ↑/↓                上下移动本行位置
// Alt + W                  显示隐藏当前文件结构
// Alt + 鼠标左键拉动        批量增加选中光标

es6知识补充

变量的结构赋值(数组、对象)
// let [a, b, c] = [111, 222, 333]         
// let {x, y, z} = {x: 123, y: 456, z: 789}

模板字符串去除空格和换行
// let a = `姓名：${name}；年龄：${age}`.trim()

字符串新增方法
// 'super vip'.includes('vip') // true 包含
// 'x'.repeat(3) // "xxx" 重复
// '08-03'.padStart(10, 'YYYY-MM-DD') // YYYY-08-03 头部补全
// '8'.padStart(2, '0') // 08 头部补全
// '13800138'.padEnd(11, 'x') // 13800138xxx 尾部补齐
// 'aabbcc'.replace('b', '_') // aa_bcc 替换第一个
// 'aabbcc'.replaceAll('b', '_') // 'aa__cc 替换全部
// 'abcd'.at(-1) // d 字符串索引，-1为倒数第一，数组也通用

数组新增方法
let arr1 = [1, 2, 3, 4, 5]
// let arr2 = Array.from(arr1) // 浅拷贝
// let arr3 = [..arr1] // 浅拷贝

对象新增方法
let obj1 = {a: 1, b: 2, c: 3}
Object.assign({}, obj1, obj2) // 对象合并到{}，浅拷贝
Object.keys(obj1) // ['a', 'b', 'c']
Object.values(obj1) // [1, 2, 3]
Object.entries(obj1) // [['a', 1], ['b', 2], ['c', 3]]
Object.fromEntries([['a', 1], ['b', 2], ['c', 3]]) // {a: 1, b: 2, c: 3}
let name = obj1.obj2.name || '' // 不存在会报错
let name = obj1 && obj1.obj2 && obj1.obj2.name || '' // 不会报错
let name = obj1?.obj2?.name || '' // 不会报错，建议采用这总

// Set数据结构(适合数组和字符串)
let s = new Set()
let arr1 = [1, 2, 3, 3, 4, 4, 5, 5]
let arr2 = Array.from(new Set(arr1)) // [1, 2, 3, 4, 5] 数组去重
arr1.forEach(item => s.add(item)) // add只会添加不重复的值，对象{}算不重复
let arr3 = Array.from(s) // [1, 2, 3, 4, 5]
s.size // 5 个数
s.delate(3) // 删除值为3的数值，删除成功返回true，失败返回false
s.has(2) // 判断是否包含2的数值，是返回true，否返回false
s.clear() // 清除所有数据，没有返回值
Array.from(s.keys()) // 返回键，但set没有键，所以返回值 [1, 2, 3, 4, 5]
Array.from(s.values()) // 返回值 [1, 2, 3, 4, 5]
Array.from(s.entries()) // 返回 [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
s.forEach((item) => item) // 可像数组一样遍历，但s又不是数组

// Map数据结构(主要是为了处理Object的键只能是字符串，不能是其他类型的数据，Object主要是键(字符串)-值的对应，Map主要是键(任意值)-值的对应，是一种更完善的hash结构的实现)
var list = [['name', 'lzm'], ['age', '33']]
let m = new Map(list)
m.size // 2 个数
m.has('name') // true
m.get('name') // 'lzm'
m.set('job', 'web') // m增加或替换'job'
m.delete('name') // 删除键为'name'的数据
m.has('name') // false
m.has('job') // true
let arrKeys = Array.from(m.keys()) // 返回键 ['name', 'age']
let arrValues = Array.from(m.values()) // 返回值 ['lzm', '33']
let arrEntries = Array.from(m.entries()) // 返回 [['name', 'lzm'], ['age', '33']]
m.forEach((value, key) => {console.log(value, key)}) // 'lzm','name' '33','age' 'web','job'