js/es6 函数及方法妙用

1、具有防抖功能的请求函数

2、函数式组件

3、监听

4、属性重置
this.value = this.$options.data().value;
Object.assign(this.$data, this.$options.data()); // 注意千万不要写成下面的样子，这样子就更改this.$data的指向。使得其指向另外的与组件脱离的状态
this.$data = this.$options.data();

5、v-once
{{i}}
当下拉框内容变化少却量大时使用v-once，减少渲染次数

6、hook

7、补全

• padStart()：用于头部补全
• padEnd()：用于尾部补全
  console.log("1".padStart(2, "0")); // 01
  console.log("8-27".padStart(10, "YYYY-0M-0D")); // YYYY-08-27

8、map =》 object

let map = new Map([
["a", 1],
["b", 2],
]);

let obj = Object.fromEntries(map);
console.log(obj); // {a: 1, b: 2}

9、array =》 object
let arr = [
["a", 1],
["b", 2],
]
let obj = Object.fromEntries(arr);
console.log(obj); // {a: 1, b: 2}

10、 object =》 object
let obj = { a: 1, b: 2, c: 3 } let res = Object.fromEntries( Object.entries(obj).filter(([key, val]) => value !== 3) ) console.log(res) //{a: 1, b: 2}

11、 console.log(globalThis) // window

12、且等于
let num1 = 5;
let num2 = 10;
num1 &&= num2;
console.log(num1); // 10

// 等价于
num1 && (num1 = num2);
if (num1) {
num1 = num2;
}

13、 或等于
let num1;
let num2 = 10;
num1 ||= num2;
console.log(num1); // 10

// 等价于
num1 || (num1 = num2);
if (!num1) {
num1 = num2;
}

14、非空等于
let num1; let num2 = 10; let num3 = null; // undefined num1 ??= num2; console.log(num1); // 10 num1 = false; num1 ??= num2; console.log(num1); // false num3 ??= 123; console.log(num3); // 123

15、深拷贝

//函数拷贝
const copyObj = (obj = {}) => {
		//变量先置空
        let newobj = null;  

        //判断是否需要继续进行递归
        if (typeof (obj) == 'object' && obj !== null) {
            newobj = obj instanceof Array ? [] : {};
            //进行下一层递归克隆
            for (var i in obj) {
                newobj[i] = copyObj(obj[i])
            }
            //如果不是对象直接赋值
        } else newobj = obj;
        
        return newobj;    
    }

— 工具依赖 lodash
import lodash from 'lodash';
lodash.cloneDeep(obj);

16、0.5边框 字体缩放
svg的text元素 0.1px
font-size: 20px; //font-size缩小为10px transform: scale(0.5); transform-origin: 100% 100%; // 解决兼容性问题 -webkit-transform: scale(0.5); -webkit-transform-origin: 100% 100%;

17、检查对象是否为空
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object

18、延时执行
const wait = async (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

19、el-input type=number 去除聚焦时的上下箭头

20、重置表单
initForm(){
this.$refs['form'] && this.$refs['form'].resetFields()
this.form = this.$options.data.call(this).form;
}