21 個簡單實用的 JavaScript 代碼技巧
作者：佚名
21 個簡單實用的 JavaScript 代碼技巧都有哪些，我們一起來了解下。
1.滾動到頁面頂部
我們可以使用 window.scrollTo() 平滑滾動到頁面頂部。
const scrollToTop = () => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};2.滾動到頁面底部
當(dāng)然，如果知道文檔的高度，也可以平滑滾動到頁面底部。
const scrollToBottom = () => {
window.scrollTo({
top: document.documentElement.offsetHeight,
left: 0,
behavior: "smooth",
});
};3.將元素滾動到可見區(qū)域
有時候我們需要將元素滾動到可見區(qū)域，怎么辦？使用 scrollIntoView 就足夠了。
const smoothScroll = (element) => {
element.scrollIntoView({
behavior: "smooth",
});
};4. 以全屏模式顯示元素
你一定遇到過這樣的場景，需要全屏播放視頻，在瀏覽器中全屏打開頁面。
const goToFullScreen = (element) => {
element = element || document.body;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
};5.退出瀏覽器全屏狀態(tài)
是的，這個和第4點一起使用，你也會有退出瀏覽器全屏狀態(tài)的場景。
const goExitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};6.獲取數(shù)據(jù)類型
如何通過函數(shù)獲取變量的數(shù)據(jù)類型？
const getType = (value) => {
const match = Object.prototype.toString.call(value).match(/ (\w+)]/)
return match[1].toLocaleLowerCase()
}
getType() // undefined
getType({}}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/fatfish/) // regexp7.停止冒泡事件
需要一種適用于所有平臺的防止事件冒泡的方法。
const stopPropagation = (event) => {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
};8.深拷貝一個對象
如何復(fù)制深度嵌套的對象？
const deepCopy = (obj, hash = new WeakMap()) => {
if (obj instanceof Date) {
return new Date(obj);
}
if (obj instanceof RegExp) {
return new RegExp(obj);
}
if (hash.has(obj)) {
return hash.get(obj);
}
let allDesc = Object.getOwnPropertyDescriptors(obj);
let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
hash.set(obj, cloneObj);
for (let key of Reflect.ownKeys(obj)) {
if (obj[key] && typeof obj[key] === "object") {
cloneObj[key] = deepCopy(obj[key], hash);
} else {
cloneObj[key] = obj[key];
}
}
return cloneObj;
};9. 確定設(shè)備類型
我們經(jīng)常需要這樣做，在手機(jī)上顯示 A 邏輯，在 PC 上顯示 B 邏輯?；旧希O(shè)備類型是通過識別瀏覽器的userAgent來確定的。
const isMobile = () => {
return !!navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
);
};10.判斷設(shè)備是Android還是IOS
除了區(qū)分是手機(jī)端還是PC端，很多時候我們還需要區(qū)分當(dāng)前設(shè)備是Android還是IOS。
const isAndroid = () => {
return /android/i.test(navigator.userAgent.toLowerCase());
};
const isIOS = () => {
let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;
return reg.test(navigator.userAgent.toLowerCase());
};11.獲取瀏覽器類型和版本
作為前端開發(fā)人員，您可能會遇到各種兼容性問題。這時候你可能需要獲取瀏覽器的類型和版本。
const getExplorerInfo = () => {
let t = navigator.userAgent.toLowerCase();
return 0 <= t.indexOf("msie")
? {
//ie < 11
type: "IE",
version: Number(t.match(/msie ([\d]+)/)[1]),
}
: !!t.match(/trident\/.+?rv:(([\d.]+))/)
? {
// ie 11
type: "IE",
version: 11,
}
: 0 <= t.indexOf("edge")
? {
type: "Edge",
version: Number(t.match(/edge\/([\d]+)/)[1]),
}
: 0 <= t.indexOf("firefox")
? {
type: "Firefox",
version: Number(t.match(/firefox\/([\d]+)/)[1]),
}
: 0 <= t.indexOf("chrome")
? {
type: "Chrome",
version: Number(t.match(/chrome\/([\d]+)/)[1]),
}
: 0 <= t.indexOf("opera")
? {
type: "Opera",
version: Number(t.match(/opera.([\d]+)/)[1]),
}
: 0 <= t.indexOf("Safari")
? {
type: "Safari",
version: Number(t.match(/version\/([\d]+)/)[1]),
}
: {
type: t,
version: -1,
};
};12.設(shè)置cookies
cookie 可能是我見過的最糟糕的 API，它太難用了，我們不得不重新封裝它以最大限度地提高我們的開發(fā)效率。
const setCookie = (key, value, expire) => {
const d = new Date();
d.setDate(d.getDate() + expire);
document.cookie = `${key}=${value};expires=${d.toUTCString()}`;
};13. 獲取 cookie
除了寫入cookie之外，我們還會參與到它的讀取操作中。
const getCookie = (key) => {
const cookieStr = unescape(document.cookie);
const arr = cookieStr.split("; ");
let cookieValue = "";
for (let i = 0; i < arr.length; i++) {
const temp = arr[i].split("=");
if (temp[0] === key) {
cookieValue = temp[1];
break;
}
}
return cookieValue;
};14. 刪除 cookie
刪除cookie的想法是什么？其實只要把它的過期時間設(shè)置到這個時刻，它就會立即過期。
const delCookie = (key) => {
document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;
};15.生成隨機(jī)字符串
不知道大家有沒有遇到過需要生成隨機(jī)字符串的場景。我遇到過很多次，每次都要重新google一遍，直到學(xué)會這個工具功能。
const randomString = (len) => {
let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789";
let strLen = chars.length;
let randomStr = "";
for (let i = 0; i < len; i++) {
randomStr += chars.charAt(Math.floor(Math.random() * strLen));
}
return randomStr;
};
randomString(10) // pfkMfjEJ6x
randomString(20) // ce6tEx1km4idRNMtym2S16.將字符串首字母大寫
const fistLetterUpper = (str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
fistLetterUpper('fatfish') // Fatfish17.生成指定范圍內(nèi)的隨機(jī)數(shù)
可能出于測試目的，我經(jīng)常需要生成一定范圍內(nèi)的隨機(jī)數(shù)。
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
randomNum(1, 10) // 6
randomNum(10, 20) // 1118.打亂數(shù)組的順序
如何打亂數(shù)組的原始順序？
const shuffleArray = (array) => {
return array.sort(() => 0.5 - Math.random())
}
let arr = [ 1, -1, 10, 5 ]
shuffleArray(arr) // [5, -1, 10, 1]
shuffleArray(arr) // [1, 10, -1, 5]19. 從數(shù)組中獲取一個隨機(jī)值
之前做過一個抽獎項目，需要讓數(shù)組中的獎品隨機(jī)出現(xiàn)。
const getRandomValue = array => array[Math.floor(Math.random() * array.length)];
const prizes = [ '$100', '??', '??' ]
getRandomValue(prizes) // ??
getRandomValue(prizes) // ??
getRandomValue(prizes) // ??20. 第一種格式化貨幣的方法
格式化錢的方式有很多種，比如這兩種方式。
const formatMoney = (money) => {
return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',')
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'21.格式化錢的第二種方式
正則表達(dá)式讓我們太頭疼了，不是嗎？所以我們需要找到一種更簡單的方法來格式化貨幣。
const formatMoney = (money) => {
return money.toLocaleString()
}
formatMoney(123456789) // '123,456,789'
formatMoney(123456789.123) // '123,456,789.123'
formatMoney(123) // '123'太喜歡這種方式了，簡單易懂。
最后
謝謝您安排時間閱讀這篇文章，希望您能從中獲取到新知識新技能。
責(zé)任編輯：華軒
來源：
web前端開發(fā)
