這篇文章給大家介紹5個(gè)提升你JavaScript編碼水平的實(shí)例是怎樣的，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
10年的鎮(zhèn)雄網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鎮(zhèn)雄建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“鎮(zhèn)雄網(wǎng)站設(shè)計(jì)”,“鎮(zhèn)雄網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
雖然 2020 的今天，各種前端框架、工具林立，而這些框架跟工具也幫我們提前解決了不少麻煩的問題，但是工具始終是工具，扎實(shí)的基本功才是最核心的，現(xiàn)在一起來(lái)通過幾個(gè)實(shí)際的代碼片段來(lái)提高我們?cè)?JS 的編碼水平。
首先來(lái)提問一個(gè)：typeof是否能正確判斷類型？
答案是：不可以，因?yàn)橛捎跉v史原因，在判斷原始類型時(shí)，typeof null會(huì)等于object。而且對(duì)于對(duì)象來(lái)說(shuō)，除了函數(shù)，都會(huì)轉(zhuǎn)換成object。例子如下：
重慶分公司
重慶分公司
typeof 1; // 'number'
typeof "1"; // 'string'
typeof null; //
typeof []; // 'object'
typeof {}; // 'object'
typeof window.alert; // 'function'再來(lái)提問一個(gè)，instanceof是否能正確判斷類型？
答案是：還是不可以，雖然instanceof是通過原型鏈來(lái)判斷的，但是對(duì)于對(duì)象來(lái)說(shuō)，Array也會(huì)被轉(zhuǎn)換成Object，而且也不能區(qū)分基本類型string和boolean。例如：
function Func() {}
const func = new Func();
console.log(func instanceof Func); // true
const obj = {};
const arr = [];
obj instanceof Object; // true
arr instanceof Object; // true
arr instanceof Array; // true
const str = "abc";
const str2 = new String("abc");
str instanceof String; // false
str2 instanceof String; // true所以該怎么辦呢？
這時(shí)候我們可以使用：Object.prototype.toString.call()
所以為什么？
因?yàn)槊總€(gè)對(duì)象都有一個(gè)toString()方法，當(dāng)要將對(duì)象表示為文本值或以預(yù)期字符串的方式引用對(duì)象時(shí)，會(huì)自動(dòng)調(diào)用該方法。默認(rèn)情況下，從Object派生的每個(gè)對(duì)象都會(huì)繼承toString()方法。如果此方法未在自定義對(duì)象中被覆蓋，則toString()返回[Object type]，其中type是對(duì)象類型。所以就有以下例子：
Object.prototype.toString.call(new Date()); // [object Date]
Object.prototype.toString.call("1"); // [object String]
Object.prototype.toString.call(1); // [object Numer]
Object.prototype.toString.call(undefined); // [object Undefined]
Object.prototype.toString.call(null); // [object Null]所以綜合上述知識(shí)點(diǎn)，我們可以封裝出以下通用類型判斷方法：
var type = function(data) {
var toString = Object.prototype.toString;
var dataType = data instanceof Element
? 'element' // 為了統(tǒng)一DOM節(jié)點(diǎn)類型輸出
: toString
.call(data)
.replace(/\[object\s(.+)\]/, ''$1')
.toLowerCase()
return dataType
}使用方法如下：
type("a"); // string
type(1); // number
type(window); // window
type(document.querySelector("h2")); // element如果我們使用 ES5/ES6+的數(shù)組 API，很容易就能夠?qū)?shù)組進(jìn)行各類的循環(huán)操作，但是如果我們要循環(huán)一個(gè)類數(shù)組對(duì)象呢？
例如NodeList。直接循環(huán)是會(huì)報(bào)錯(cuò)的：
document.querySelectorAll("div").map(e => e); // Uncaught TypeError: document.querySelectorAll(...).map is not a function當(dāng)然我們可以用擴(kuò)展運(yùn)算符：
[...document.querySelectorAll("div")].map(e => e);那如果我們不用擴(kuò)展運(yùn)算符呢？
那么我們就可以利用call的特性，將NodeList里的元素一個(gè)一個(gè)的插入到數(shù)組中，例子如下：
var listMap = function(array, type, fn) {
return !fn ? array : Array.prototype[type]["call"](array, fn);};使用方法如下：
var divs = document.querySelectorAll("div");
listMap(divs, "forEach", function(e) {
console.log(e);
});如果有用過jQuery的童鞋，就一定不會(huì)忘記$('').offset()這個(gè) api 的強(qiáng)大功能，這個(gè) api 可以輕易獲取元素的偏移量，那么如果我們不用jQuery該怎么實(shí)現(xiàn)呢？
我們先來(lái)看看例子：
var getOffset = function(el) {
var scrollTop =
el.getBoundingClientRect().top +
document.body.scrollTop +
document.documentElement.scrollTop;
var scrollLeft =
el.getBoundingClientRect().left +
document.body.scrollLeft +
document.documentElement.scrollLeft;
return {
top: scrollTop,
left: scrollLeft
};
};首先我們先來(lái)看getBoundingClientRect()這個(gè)方法。
getBoundingClientRect()方法返回元素的大小及其相對(duì)于視口的位置。返回值是一個(gè) DOMRect 對(duì)象，是與該元素相關(guān)的 CSS 邊框集合 。
然后就是document.body.scrollTop 跟 document.documentElement.scrollTop這兩個(gè)是一個(gè)功能，只不過在不同的瀏覽器下會(huì)有一個(gè)始終為 0，所以做了以上的兼容性處理。所以當(dāng)我們做拖拽功能的時(shí)候，就可以依賴上以上屬性。
使用方法如下：
var el = document.querySelector(".moveBox");
getOffset(el); // {top: xxx, left: xxx}
我們可以看上面的搖桿效果，這里就是利用了offset()去做位置判斷。具體實(shí)現(xiàn)代碼可以看：https://codepen.io/krischan77/pen/zYxPNPy
// Fade in
var fadeIn = function (el) {
el.style.opacity = 0
var last = +new Date()
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400
last = +new Date()
if (+el.style.opacity < 1) {
requestAnimationFrame(tick))
}
}
tick()
}
// Fade out
var fadeOut = function (el) {
el.style.opacity = 1
var last = +new Date()
var tick = function() {
el.style.opacity = +el.style.opacity - (new Date() - last) / 400
last = +new Date()
if (+el.style.opacity > 0) {
requestAnimationFrame(tick)
}
}
tick()
}上述是淡入淡出效果的具體實(shí)現(xiàn)，這里是利用requestAnimationFrame對(duì)opacity通過遞歸的方式進(jìn)行修改。
其實(shí)這里需要提一個(gè)概念，就是時(shí)間分片。
這是一個(gè)非常重要的概念，例如 React 的 Fiber 核心實(shí)現(xiàn)就是時(shí)間分片。它會(huì)將一個(gè)長(zhǎng)任務(wù)切分成一個(gè)含有若干小任務(wù)的任務(wù)隊(duì)列，然后一個(gè)接著一個(gè)的執(zhí)行。
requestAnimationFrame就是這樣一個(gè) API，它可以根據(jù)系統(tǒng)來(lái)決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)，其實(shí)也就是在下一次重繪之前更新動(dòng)畫幀，因?yàn)橛羞@樣的機(jī)制，所以能防止丟幀。
隊(duì)列（queue），是先進(jìn)先出（FIFO, First-In-First-Out）的線性表。在具體應(yīng)用中通常用鏈表或者數(shù)組來(lái)實(shí)現(xiàn)。隊(duì)列只允許在后端（稱為 rear）進(jìn)行插入操作，在前端（稱為 front）進(jìn)行刪除操作。
雖然很多人覺得了解數(shù)據(jù)結(jié)構(gòu)對(duì)前端作用不大，但是如果我們懂一些基礎(chǔ)的概念，是否在編碼時(shí)能夠更加擴(kuò)散我們的思維呢？我們看下面兩個(gè)例子：
如果我們要操作原生 DOM，那么是繞不開獲取節(jié)點(diǎn)在該父節(jié)點(diǎn)的下標(biāo)的這個(gè)功能的，那么我們?cè)撊绾螌?shí)現(xiàn)呢？
當(dāng)然就是利用我們的循環(huán)啦，對(duì)子元素集合進(jìn)行遍歷，直到確定下標(biāo)為止，代碼如下：
var index = function(el) {
if (!el) {
return -1;
}
var i = 0;
while ((el = el.previousElementSibling)) {
i++;
}
return i;
};如果我們要清空某個(gè) DOM 節(jié)點(diǎn)的子節(jié)點(diǎn)，我們有以下的方法：
var empty = function(el) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
};上面只是提供一個(gè)思路，其實(shí)el.innerHTML = ''會(huì)更簡(jiǎn)潔。
沒錯(cuò)，又是一個(gè)老生常談的問題，數(shù)組去重，但是我們這次去除的不僅僅是單個(gè)的數(shù)據(jù)，而是擁有某個(gè)相同鍵值的對(duì)象集合。例如下面的例子，我們有以下的數(shù)據(jù)：
首先我們來(lái)看看一個(gè)老生常談的問題，我們假設(shè)有這樣的一個(gè)對(duì)象：
const data = [
{
name: "Kris", age: "24"
},
{
name: "Andy", age: "25"
},
{
name: "Kitty", age: "25"
},
{
name: "Andy", age: "25"
},
{
name: "Kitty", age: "25"
},
{
name: "Andy", age: "25"
},
{
name: "Kitty", age: "25"
}];現(xiàn)在我們要去重里面name重復(fù)的對(duì)象，這時(shí)候我們可以利用reduce，例子如下：
const dataReducer = (prev, cur, idx) => {
let obj = {};
const { name } = cur;
obj[name] = cur;
return {
...prev,
...obj
};
};
const reducedData = data.reduce(dataReducer, {});
let newData = Object.values(reducedData);在魚頭的實(shí)際業(yè)務(wù)中，有一個(gè)操作是需要對(duì)類似以下的對(duì)象進(jìn)行操作的：
{
a1: 'data',
a2: 'data',
...,
an: 'data'
}像我這么懶的魚，肯定不會(huì)一個(gè)個(gè)手寫，所以就有了以下方法
const createList = (item, idx) => {
let obj = {};
obj[`a${idx}`] = "data";
return obj;
};
const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc });
const obj = Array.from(new Array(20), createList).reduce(listReducer);關(guān)于5個(gè)提升你JavaScript編碼水平的實(shí)例是怎樣的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
