网站建设到运营赚钱,具有价值的网站建设,wordpress主题演示导入,如何联系网站管理员本文主要介绍一些JS中用到的小技巧和实用方法#xff0c;可以在日常Coding中提升幸福度#xff0c;也可以通过一些小细节来增加代码可读性#xff0c;让代码看起来更加优雅#xff0c;后续将不断更新1.数组 map 的方法 (不使用Array.Map)
Array.from 还可以接受第二个参数…
本文主要介绍一些JS中用到的小技巧和实用方法可以在日常Coding中提升幸福度也可以通过一些小细节来增加代码可读性让代码看起来更加优雅后续将不断更新1.数组 map 的方法 (不使用Array.Map)
Array.from 还可以接受第二个参数作用类似于数组的map方法用来对每个元素进行处理将处理后的值放入返回的数组。如下
const cities [ { name: Paris, visited: no }, { name: Lyon, visited: no }, { name: Marseille, visited: yes }, { name: Rome, visited: yes }, { name: Milan, visited: no }, { name: Palermo, visited: yes }, { name: Genoa, visited: yes }, { name: Berlin, visited: no }, { name: Hamburg, visited: yes }, { name: New York, visited: yes }
];const cityNames Array.from(cities, ({ name}) name);
console.log(cityNames);
//[Paris, Lyon, Marseille, Rome, Milan, Palermo, Genoa, Berlin, Hamburg, New York]Copy
2.有条件的对象属性
不再需要根据一个条件创建两个不同的对象可以使用展开运算符号来处理。
let getUser (emailIncluded) {return {name: John,surname: Doe,...emailIncluded { email : johndoe.com }}
}const user getUser(true);
console.log(user); // outputs { name: John, surname: Doe, email: johndoe.com }const userWithoutEmail getUser(false);
console.log(userWithoutEmail); // outputs { name: John, surname: Doe }
Copy
3. 动态属性名
const dynamic email;
let user {name: John,[dynamic]: johndoe.com
}
console.log(user); // outputs { name: John, email: johndoe.com }
Copy
4.函数默认参数妙用
场景假设我们又如下的初始化工作需要进行在代码的最开始我们需要对config对象进行初始化工作
function initConfig(config) {config.map((item) {item.content Number(item.content)})
}
Copy
如果我们不小心忘记给它传递参数浏览器会报如下错误提示我们 config 没有 map 方法因为此时 config 为 undefined
解决办法
我们可以给函数的参数加上一个默认的值
function initConfig(config []) {config.map((item) {item.content Number(item.content)})
}
Copy
5.监听DOM元素是否在可视区域内
场景如果打开网页DOM元素在可视区域内就不展示一个div反之如果需要滑动网页才能让这个DOM元素出现在可视区域就展示这个div。这里分享一个vue的做法。
mounted(){
let recommend document.getElementById(replyList),that this;let observer new IntersectionObserver(function(entries){entries.forEach( function(element, index) {if (element.isIntersecting ) {//用recommendShow这个布尔值来控制DOM是否显示that.recommendShow false;} else {that.recommendShow true;}});}, {root: null,threshold:[0, 1]});observer.observe(recommend)
}
Copy
16.谷歌浏览器A标签跳转新标签导致sessionStorage无效
解决方法主动添加 relopener 属性即可如下。
跳转
Copy
17.Array.find
如果你曾经编写过普通 JavaScript 中的 find 函数那么你可能使用了 for 循环。在 ES6 中介绍了一种名为 find的新数组函数可以实现 for 循环的简写。 const pets [{ type: Dog, name: Max},{ type: Cat, name: Karl},{ type: Dog, name: Tommy},
]
function findDog(name) {for(let i 0; i
Copy
简写为
let pet pets.find(pet pet.type Dog pet.name Tommy);
console.log(pet); // { type: Dog, name: Tommy }
Copy
8.数组提取不重复的新值
如果有下面两个数组需要提取第二个中与第一个数组中不重复的新值,也就是单独把56提取出来
let arr1 [1,2,3];
let arr2 [2,5,6];
let arr3 [];
arr2.forEach(item{if(!arr1.includes(item)){arr3.push(item);}
})
console.log(arr3);//[5,6]
