本文主要介紹一些JS中用到的小技巧和實(shí)用方法，可以在日常Coding中提升幸福度，也可以通過一些小細(xì)節(jié)來增加代碼可讀性，讓代碼看起來更加優(yōu)雅，后續(xù)將不斷更新
1.數(shù)組 map 的方法 (不使用Array.Map)
Array.from 還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。如下：
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"]
2.有條件的對象屬性
不再需要根據(jù)一個(gè)條件創(chuàng)建兩個(gè)不同的對象，可以使用展開運(yùn)算符號來處理。
let getUser = (emailIncluded) => {
return {
name: 'John',
surname: 'Doe',
...emailIncluded && { email : '[email protected]' }
}
}
const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "[email protected]" }
const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }3. 動(dòng)態(tài)屬性名
const dynamic = 'email';
let user = {
name: 'John',
[dynamic]: '[email protected]'
}
console.log(user); // outputs { name: "John", email: "[email protected]" }4.函數(shù)默認(rèn)參數(shù)妙用
場景：假設(shè)我們又如下的初始化工作需要進(jìn)行，在代碼的最開始我們需要對config對象進(jìn)行初始化工作
function initConfig(config) {
config.map((item) => {
item.content = Number(item.content)
})
}如果我們不小心忘記給它傳遞參數(shù)，瀏覽器會(huì)報(bào)如下錯(cuò)誤，提示我們 config 沒有 map 方法，因?yàn)榇藭r(shí) config 為 undefined
解決辦法：
我們可以給函數(shù)的參數(shù)加上一個(gè)默認(rèn)的值
function initConfig(config = []) {
config.map((item) => {
item.content = Number(item.content)
})
}5.監(jiān)聽DOM元素是否在可視區(qū)域內(nèi)
場景：如果打開網(wǎng)頁，DOM元素在可視區(qū)域內(nèi)，就不展示一個(gè)div，反之如果需要滑動(dòng)網(wǎng)頁才能讓這個(gè)DOM元素出現(xiàn)在可視區(qū)域，就展示這個(gè)div。這里分享一個(gè)vue的做法。
mounted(){
let recommend = document.getElementById('replyList'),that = this;
let observer = new IntersectionObserver(function(entries){
entries.forEach( function(element, index) {
if (element.isIntersecting ) {
//用recommendShow這個(gè)布爾值來控制DOM是否顯示
that.recommendShow = false;
} else {
that.recommendShow = true;
}
});
}, {
root: null,
threshold:[0, 1]
});
observer.observe(recommend)
}16.谷歌瀏覽器A標(biāo)簽跳轉(zhuǎn)新標(biāo)簽導(dǎo)致sessionStorage無效
解決方法：主動(dòng)添加 rel="opener" 屬性即可，如下。
跳轉(zhuǎn)17.Array.find
如果你曾經(jīng)編寫過普通 JavaScript 中的 find 函數(shù)，那么你可能使用了 for 循環(huán)。在 ES6 中，介紹了一種名為 find（）的新數(shù)組函數(shù)，可以實(shí)現(xiàn) for 循環(huán)的簡寫。
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i簡寫為
let = pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }8.數(shù)組提取不重復(fù)的新值
如果有下面兩個(gè)數(shù)組，需要提取第二個(gè)中與第一個(gè)數(shù)組中不重復(fù)的新值,也就是單獨(dú)把5，6提取出來
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]
