如何寫出漂亮的 JavaScript 代碼

何提高代碼的可讀性、復(fù)用性、擴(kuò)展性。我們將從以下四個(gè)方面討論：

變量函數(shù)類異步

一、變量

對同一類型的變量使用相同的命名保持統(tǒng)一：

// Bad:
getUserInfo();
getClientData();
getCustomerRecord();
// Good:
getUser()

每個(gè)常量(全大寫)都該命名

可以用 ESLint 檢測代碼中未命名的常量。

// Bad:
// 其他人知道 86400000 的意思嗎？
setTimeout( blastOff, 86400000 );
// Good:
const MILLISECOND_IN_A_DAY = 86400000;
setTimeout( blastOff, MILLISECOND_IN_A_DAY );

避免無意義的命名

既然創(chuàng)建了一個(gè) car 對象，就沒有必要把它的顏色命名為 carColor。

// Bad:
const car = {
 carMake: 'Honda',
 carModel: 'Accord',
 carColor: 'Blue'
};
function paintCar( car ) {
 car.carColor = 'Red';
}
// Good:
const car = {
 make: 'Honda',
 model: 'Accord',
 color: 'Blue'
};
function paintCar( car ) {
 car.color = 'Red';
}

傳參使用默認(rèn)值

// Bad:
function createMicrobrewery( name ) {
 const breweryName = name || 'Hipster Brew Co.';
 // ...
}
// Good:
function createMicrobrewery( name = 'Hipster Brew Co.' ) {
 // ...
}

二、函數(shù)

函數(shù)參數(shù)( 最好 2 個(gè)或更少 )

如果參數(shù)超過兩個(gè)，建議使用 ES6 的解構(gòu)語法，不用考慮參數(shù)的順序。

// Bad:
function createMenu( title, body, buttonText, cancellable ) {
 // ...
}
// Good:
function createMenu( { title, body, buttonText, cancellable } ) {
 // ...
}
createMenu({
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
});

一個(gè)方法只做一件事情

這是一條在軟件工程領(lǐng)域流傳久遠(yuǎn)的規(guī)則。嚴(yán)格遵守這條規(guī)則會讓你的代碼可讀性更好，也更容易重構(gòu)。如果違反這個(gè)規(guī)則，那么代碼會很難被測試或者重用。

// Bad:
function emailClients( clients ) {
 clients.forEach( client => {
 const clientRecord = database.lookup( client );
 if ( clientRecord.isActive() ) {
 email( client );
 }
 });
}
// Good:
function emailActiveClients( clients ) {
 clients
 .filter( isActiveClient )
 .forEach( email );
}
function isActiveClient( client ) {
 const clientRecord = database.lookup( client ); 
 return clientRecord.isActive();
}

函數(shù)名上體現(xiàn)它的作用

// Bad:
function addToDate( date, month ) {
 // ...
}
const date = new Date();
// 很難知道是把什么加到日期中
addToDate( date, 1 );
// Good:
function addMonthToDate( month, date ) {
 // ...
}
const date = new Date();
addMonthToDate( 1, date );

刪除重復(fù)代碼，合并相似函數(shù)

很多時(shí)候雖然是同一個(gè)功能，但由于一兩個(gè)不同點(diǎn)，讓你不得不寫兩個(gè)幾乎相同的函數(shù)。

// Bad:
function showDeveloperList(developers) {
 developers.forEach((developer) => {
 const expectedSalary = developer.calculateExpectedSalary();
 const experience = developer.getExperience();
 const githubLink = developer.getGithubLink();
 const data = {
 expectedSalary,
 experience,
 githubLink
 };
 render(data);
 });
}
function showManagerList(managers) {
 managers.forEach((manager) => {
 const expectedSalary = manager.calculateExpectedSalary();
 const experience = manager.getExperience();
 const portfolio = manager.getMBAProjects();
 const data = {
 expectedSalary,
 experience,
 portfolio
 };
 render(data);
 });
}
// Good:
function showEmployeeList(employees) {
 employees.forEach(employee => {
 const expectedSalary = employee.calculateExpectedSalary();
 const experience = employee.getExperience();
 const data = {
 expectedSalary,
 experience,
 };
 switch(employee.type) {
 case 'develop':
 data.githubLink = employee.getGithubLink();
 break
 case 'manager':
 data.portfolio = employee.getMBAProjects();
 break
 }
 render(data);
 })
}

使用 Object.assign 設(shè)置默認(rèn)屬性

// Bad:
const menuConfig = {
 title: null,
 body: 'Bar',
 buttonText: null,
 cancellable: true
};
function createMenu(config) {
 config.title = config.title || 'Foo';
 config.body = config.body || 'Bar';
 config.buttonText = config.buttonText || 'Baz';
 config.cancellable = config.cancellable !== undefined ? config.cancellable : true;
}
createMenu(menuConfig);
// Good:
const menuConfig = {
 title: 'Order',
 // 不包含 body
 buttonText: 'Send',
 cancellable: true
};
function createMenu(config) {
 config = Object.assign({
 title: 'Foo',
 body: 'Bar',
 buttonText: 'Baz',
 cancellable: true
 }, config);
 // config : {title: "Order", body: "Bar", buttonText: "Send", cancellable: true}
 // ...
}
createMenu(menuConfig);

盡量不要寫全局方法

在 JavaScript 中，永遠(yuǎn)不要污染全局，會在生產(chǎn)環(huán)境中產(chǎn)生難以預(yù)料的 bug。舉個(gè)例子，比如你在 Array.prototype 上新增一個(gè) diff 方法來判斷兩個(gè)數(shù)組的不同。而你同事也打算做類似的事情，不過他的 diff 方法是用來判斷兩個(gè)數(shù)組首位元素的不同。很明顯你們方法會產(chǎn)生沖突，遇到這類問題我們可以用 ES2015/ES6 的語法來對 Array 進(jìn)行擴(kuò)展。

// Bad:
Array.prototype.diff = function diff(comparisonArray) {
 const hash = new Set(comparisonArray);
 return this.filter(elem => !hash.has(elem));
};
// Good:
class SuperArray extends Array {
 diff(comparisonArray) {
 const hash = new Set(comparisonArray);
 return this.filter(elem => !hash.has(elem)); 
 }
}

盡量別用“非”條件句

// Bad:
function isDOMNodeNotPresent(node) {
 // ...
}
if (!isDOMNodeNotPresent(node)) {
 // ...
}
// Good:
function isDOMNodePresent(node) {
 // ...
}
if (isDOMNodePresent(node)) {
 // ...
}

不要過度優(yōu)化

現(xiàn)代瀏覽器已經(jīng)在底層做了很多優(yōu)化，過去的很多優(yōu)化方案都是無效的，會浪費(fèi)你的時(shí)間。

// Bad:
// 現(xiàn)代瀏覽器已對此( 緩存 list.length )做了優(yōu)化。
for (let i = 0, len = list.length; i < len; i++) {
 // ...
}
// Good:
for (let i = 0; i < list.length; i++) {
 // ...
}

刪除棄用代碼

這里沒有實(shí)例代碼，刪除就對了

三、類

使用 ES6 的 class

在 ES6 之前，沒有類的語法，只能用構(gòu)造函數(shù)的方式模擬類，可讀性非常差。

// Good:
// 動物
class Animal {
 constructor(age) {
 this.age = age
 };
 move() {};
}
// 哺乳動物
class Mammal extends Animal{
 constructor(age, furColor) {
 super(age);
 this.furColor = furColor;
 };
 liveBirth() {};
}
// 人類
class Human extends Mammal{
 constructor(age, furColor, languageSpoken) {
 super(age, furColor);
 this.languageSpoken = languageSpoken;
 };
 speak() {};
}

使用鏈?zhǔn)秸{(diào)用

這種模式相當(dāng)有用，可以在很多庫中都有使用。它讓你的代碼簡潔優(yōu)雅。

class Car {
 constructor(make, model, color) {
 this.make = make;
 this.model = model;
 this.color = color;
 }
 setMake(make) {
 this.make = make;
 }
 setModel(model) {
 this.model = model;
 }
 setColor(color) {
 this.color = color;
 }
 save() {
 console.log(this.make, this.model, this.color);
 }
}
// Bad:
const car = new Car('Ford','F-150','red');
car.setColor('pink');
car.save();
// Good: 
class Car {
 constructor(make, model, color) {
 this.make = make;
 this.model = model;
 this.color = color;
 }
 setMake(make) {
 this.make = make;
 // NOTE: Returning this for chaining
 return this;
 }
 setModel(model) {
 this.model = model;
 // NOTE: Returning this for chaining
 return this;
 }
 setColor(color) {
 this.color = color;
 // NOTE: Returning this for chaining
 return this;
 }
 save() {
 console.log(this.make, this.model, this.color);
 // NOTE: Returning this for chaining
 return this;
 }
}
const car = new Car("Ford", "F-150", "red").setColor("pink").save();

四、異步

使用 promise 或者 Async/Await 代替回調(diào)

// Bad:
get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => {
 if (requestErr) {
 console.error(requestErr);
 } else {
 writeFile('article.html', response.body, (writeErr) => {
 if (writeErr) {
 console.error(writeErr);
 } else {
 console.log('File written');
 }
 });
 }
});
// Good:
get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
 .then((response) => {
 return writeFile('article.html', response);
 })
 .then(() => {
 console.log('File written');
 })
 .catch((err) => {
 console.error(err);
 });
// perfect:
async function getCleanCodeArticle() {
 try {
 const response = await get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
 await writeFile('article.html', response);
 console.log('File written');
 } catch(err) {
 console.error(err);
 }
}

本文來自：掘金

原文鏈接：https://juejin.im/post/5d0e11196fb9a07eee5ed6d2，譯自：github.com/ryanmcdermo…

說明：本文翻譯自 github 上的一個(gè)項(xiàng)目，非全文搬運(yùn)，只取部分精華。

匯智動力IT學(xué)院，做一個(gè)勤勞的IT技術(shù)干貨搬運(yùn)工，只為成就你的IT夢！

面效果展示

頁面完整代碼

<!DOCTYPE HTML>
<html>
<head> 
<title>文內(nèi)鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示，并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態(tài)</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價(jià)</a>
</div><!--使導(dǎo)航菜單懸停在頂端（結(jié)尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進(jìn)程</a></h2>
殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測試，13時(shí)08分成功著陸，歷時(shí)18分鐘。<br>
整個(gè)首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
2016年10月28日，首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國航展”后，還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行，不僅在現(xiàn)場引起轟動，也立刻被西方媒體大量報(bào)道。殲-20是中國現(xiàn)代空中力量的代表作，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列，它是中國國防能力高速發(fā)展的一個(gè)象征。<br>
2018年11月11日，第十二屆中國航展在珠海迎來“高光時(shí)刻”：殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開放活動新聞發(fā)布上，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
<h2><a id="chapter3" >服役動態(tài)</a></h2>
2017年3月9日，中央電視臺報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>
2017年3月13日，《中國日報(bào)》發(fā)布消息稱，中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動機(jī)。<br>
2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>
2017年9月28日，在中國國防部行記者會上，國防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>
2017年11月10日上午，中國空軍發(fā)言人申進(jìn)科大校表示，殲-20 列裝部隊(duì)后，已經(jīng)開展編隊(duì)訓(xùn)練。<br>
2018年2月9日，中國空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>
2018年10月30日，中國空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場上空。<br>
2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱；該三款殲擊機(jī)被譽(yù)為中國空軍殲擊機(jī)家族的“三劍客”，是未來聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評價(jià)</a></h2>
殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)，這讓中國空軍在面對日本、韓國與印度等國家的空軍時(shí)占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機(jī)進(jìn)行了對比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲，尚未正式交付入役；美國F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題，大面積停飛，出口受阻；韓國KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此，中國殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢戰(zhàn)機(jī)。<br>
中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)，成為有效塑造態(tài)勢、管控危機(jī)、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負(fù)起維護(hù)國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰(zhàn)斗機(jī)，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī)，是按照性能、技術(shù)和進(jìn)度要求，研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展，指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國重器的研制，我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì)，是指通過型號研制，錘煉一支愛黨愛國的研制隊(duì)伍，這些擁有報(bào)國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來，我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致！-->
</map>
</div><!--小div(結(jié)尾)-->
</div><!--小div套大div隱藏滾動條（結(jié)尾）-->
</div><!--使頁面居中顯示，并展視窗50%寬度（結(jié)尾）-->
</body> 
</html>

頁面制作技術(shù)解析

1.頁面內(nèi)容居中顯示方法

2.導(dǎo)航欄懸停頂端方法

3.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示

3.隱藏滾動條方法

4.圖片區(qū)域鏈接

大家結(jié)合代碼和技術(shù)解析，先自行分析一下每段代碼的作用，以及它們之間的前后關(guān)系。這一步練習(xí)對培養(yǎng)代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會逐步演示“頁面制作技術(shù)解析”中的五個(gè)步驟以及一些注意事項(xiàng)。

使用碎片時(shí)間，學(xué)習(xí)完整知識！關(guān)注大魚師兄，一起精研技藝。

、日期處理

1. 檢查日期是否有效

該方法用于檢測給出的日期是否有效：

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true
復(fù)制代碼

2. 計(jì)算兩個(gè)日期之間的間隔

該方法用于計(jì)算兩個(gè)日期之間的間隔時(shí)間：

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90
復(fù)制代碼

距離過年還有90天~

3. 查找日期位于一年中的第幾天

該方法用于檢測給出的日期位于今年的第幾天：

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307
復(fù)制代碼

2021年已經(jīng)過去300多天了~

4. 時(shí)間格式化

該方法可以用于將時(shí)間轉(zhuǎn)化為hour:minutes:seconds的格式：

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回當(dāng)前時(shí)間 09:00:00
復(fù)制代碼

二、字符串處理

1. 字符串首字母大寫

該方法用于將英文字符串的首字母大寫處理：

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world
復(fù)制代碼

2. 翻轉(zhuǎn)字符串

該方法用于將一個(gè)字符串進(jìn)行翻轉(zhuǎn)操作，返回翻轉(zhuǎn)后的字符串：

const reverse = str => str.split('').reverse().join('');

reverse('hello world');   // 'dlrow olleh'
復(fù)制代碼

3. 隨機(jī)字符串

該方法用于生成一個(gè)隨機(jī)的字符串：

const randomString = () => Math.random().toString(36).slice(2);

randomString();
復(fù)制代碼

4. 截?cái)嘧址?/h1>

該方法可以從指定長度處截?cái)嘧址?

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'
復(fù)制代碼

5. 去除字符串中的HTML

該方法用于去除字符串中的HTML元素：

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
復(fù)制代碼

三、數(shù)組處理

1. 從數(shù)組中移除重復(fù)項(xiàng)

該方法用于移除數(shù)組中的重復(fù)項(xiàng)：

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
復(fù)制代碼

2. 判斷數(shù)組是否為空

該方法用于判斷一個(gè)數(shù)組是否為空數(shù)組，它將返回一個(gè)布爾值：

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true
復(fù)制代碼

3. 合并兩個(gè)數(shù)組

可以使用下面兩個(gè)方法來合并兩個(gè)數(shù)組：

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];
復(fù)制代碼

四、數(shù)字操作

1. 判斷一個(gè)數(shù)是奇數(shù)還是偶數(shù)

該方法用于判斷一個(gè)數(shù)字是奇數(shù)還是偶數(shù)：

const isEven = num => num % 2 === 0;

isEven(996); 
復(fù)制代碼

2. 獲得一組數(shù)的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3
復(fù)制代碼

3. 獲取兩個(gè)整數(shù)之間的隨機(jī)整數(shù)

該方法用于獲取兩個(gè)整數(shù)之間的隨機(jī)整數(shù)

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

random(1, 50);
復(fù)制代碼

4. 指定位數(shù)四舍五入

該方法用于將一個(gè)數(shù)字按照指定位進(jìn)行四舍五入：

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56
復(fù)制代碼

五、顏色操作

1. 將RGB轉(zhuǎn)化為十六機(jī)制

該方法可以將一個(gè)RGB的顏色值轉(zhuǎn)化為16進(jìn)制值：

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255);  // '#ffffff'
復(fù)制代碼

2. 獲取隨機(jī)十六進(jìn)制顏色

該方法用于獲取一個(gè)隨機(jī)的十六進(jìn)制顏色值：

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();
復(fù)制代碼

六、瀏覽器操作

1. 復(fù)制內(nèi)容到剪切板

該方法使用 navigator.clipboard.writeText 來實(shí)現(xiàn)將文本復(fù)制到剪貼板：

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");
復(fù)制代碼

2. 清除所有cookie

該方法可以通過使用 document.cookie 來訪問 cookie 并清除存儲在網(wǎng)頁中的所有 cookie：

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
復(fù)制代碼

3. 獲取選中的文本

該方法通過內(nèi)置的 getSelection 屬性獲取用戶選擇的文本：

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
復(fù)制代碼

4. 檢測是否是黑暗模式

該方法用于檢測當(dāng)前的環(huán)境是否是黑暗模式，它是一個(gè)布爾值：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)
復(fù)制代碼

5. 滾動到頁面頂部

該方法用于在頁面中返回頂部：

const goToTop = () => window.scrollTo(0, 0);

goToTop();
復(fù)制代碼

6. 判斷當(dāng)前標(biāo)簽頁是否激活

該方法用于檢測當(dāng)前標(biāo)簽頁是否已經(jīng)激活：

const isTabInView = () => !document.hidden; 
復(fù)制代碼

7. 判斷當(dāng)前是否是蘋果設(shè)備

該方法用于檢測當(dāng)前的設(shè)備是否是蘋果的設(shè)備：

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();
復(fù)制代碼

8. 是否滾動到頁面底部

該方法用于判斷頁面是否已經(jīng)底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
復(fù)制代碼

9. 重定向到一個(gè)URL

該方法用于重定向到一個(gè)新的URL：

const redirect = url => location.href = url

redirect("https://www.google.com/")
復(fù)制代碼

10. 打開瀏覽器打印框

該方法用于打開瀏覽器的打印框：

const showPrintDialog = () => window.print()
復(fù)制代碼

七、其他操作

1. 隨機(jī)布爾值

該方法可以返回一個(gè)隨機(jī)的布爾值，使用Math.random()可以獲得0-1的隨機(jī)數(shù)，與0.5進(jìn)行比較，就有一半的概率獲得真值或者假值。

const randomBoolean = () => Math.random() >= 0.5;

randomBoolean();
復(fù)制代碼

2. 變量交換

可以使用以下形式在不適用第三個(gè)變量的情況下，交換兩個(gè)變量的值：

[foo, bar] = [bar, foo];
復(fù)制代碼

3. 獲取變量的類型

該方法用于獲取一個(gè)變量的類型：

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function
復(fù)制代碼

4. 華氏度和攝氏度之間的轉(zhuǎn)化

該方法用于攝氏度和華氏度之間的轉(zhuǎn)化：

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0
復(fù)制代碼

5. 檢測對象是否為空

該方法用于檢測一個(gè)JavaScript對象是否為空：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

在線咨詢

上一篇：HTML ANSI（Windows-1252）參考手冊
下一篇：寫給產(chǎn)品經(jīng)理們的技術(shù)分享-前端篇

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商