WEB前端2020年更新实用代码段

1、使用解构获取json数据

let jsonData = { id: 1, status: “OK”, data: [‘a’, ‘b’] }; let { id, status, data: number } = jsonData; console.log(id, status, number ); // 1,“OK”,[a, b]

2、使用扩展字符串合并数组

let a1 = [1,2]; let a2 = [3,4]; console.log([…a1,…a2]) // [1,2,3,4]

3、使用Set实现数组去重

let arr = [1,2,2,3]; console.log([… new Set(arr)]) // [1,2,3]

4、使用apply改变this指向

let name = “maomin”; let obj = { name:‘xqm’, say:function(year,place){ console.log(this.name+’ is ‘+year+’ born from '+place); } }; let say = obj.say; setTimeout(function(){ say.apply(obj,[‘1996’,‘China’]); },0)

5、使用解构快速交换变量值

let a = 10; let b = 20; [a,b] = [b,a];

6、使用解构实现多变量赋值

let [a,b,c]=[1,2,3];

7、找到数组中的最大值

console.log(Math.max(…[14, 3, 77, 30])); //77

8、实现数组内值遍历计算

const list = [1,2,3,4,5]; const newList = list.map(item=>console.log(item*item)) // 1 4 9 16 25

9、模板字符串

let x = ‘我是x’; let y = ‘我是y’; console.log(${x} + ${y}) // 我是x + 我是y

10、实现防抖函数

原理： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 适用场景：

按钮提交场景：防止多次提交按钮，只执行最后提交的一次；
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次；
搜索联想词场景；

代码：

// 防抖 const debounce = (fn,delay)=>{ let timer = null; return (…args)=>{ clearTimeout(timer); timer = setTimeout(()=>{ fn.apply(this,args)

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120032662