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