JSON

1. JSON Viewer Pro

JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：

支持將JSON數據進行格式化，并使用屬性或者圖表進行展示；
使用面包屑深入遍歷 JSON 屬性；
在輸入區寫入自定義 JSON；
導入本地 JSON 文件；
使用上下文菜單下載 JSON 文件；
網址過濾器；
改變主題；
自定義 CSS ；
復制屬性和值；

輸入界面如下：

格式化之后：

2. JSONVue

JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：

網站技術

3. Library Sniffer

Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。

4. Wappalyzer

Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。

5. WhatRuns

WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。

開發調試

6. PerfectPixel by WellDoneCode

使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。

7. Clear Cache

可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。

8. VisBug

VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。

9. Debug CSS

Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：

10. CSS Viewer

CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。

11. EditThisCookie

EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。

12. React Developer Tools

React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：

Components 選項卡顯示了在頁面上呈現的根 React 組件，以及它們最終呈現的子組件；
Profiler 選項卡用來記錄性能信息。

13. Vue.js devtools

Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。

14. Augury

Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。

15. Firebug Lite for Google Chrome

Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。

16. HTML Validator

HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。

17. Web Developer

Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。

18. Requestly

Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。

19. Window Resizer

Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。

20. Responsive Viewer

Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。

21. Moesif Origin & CORS Changer

此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.

22. ColorPick Eyedropper

ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。

23. CSSPeeper

CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。

24. Dimensions

Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。

25. Site Palette

Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。

26. ColorZilla

ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。

吸管器-獲取頁面上任何像素或區域的顏色；
一個先進的顏色選擇器類似于可以在Photoshop和Paint Shop Pro中找到的；
網頁顏色分析器-分析任何網頁上的DOM元素顏色，找到相應的元素；
終極CSS梯度發生器；
調色板查看器與7預先安裝調色板；
顏色歷史最近挑選的顏色；
顯示標簽名稱，類別，編號，大小等元素信息；
光標下的輪廓元素；
自動將生成或采樣的顏色復制到CSS RGB，Hex和其他格式的剪貼板；
使用鍵盤快速采樣頁面顏色的鍵盤快捷鍵。

字體

27. WhatFont

當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：

28. Fonts Ninja

Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。

標簽頁

29. BrowserStack

使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。

30. Toby

Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。

31. daily.dev

該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。

32. Momentum

Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。

33. The Great Suspender

The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。

34. Session Buddy

Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。

Github

35. Octotree

Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。

1_EKF88oqIyX6FzgueCKdtXg.gif

36. File Icons for GitHub and GitLab

File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。

網頁測試

37. axe DevTools

ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。

38. OctoLinker

OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。

39. Web Developer Checklist

此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。

40. Check My Links

Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。

41. Checkbot

Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。

42. PageSpeed Insights

Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。

43. Meta SEO Inspector

META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。

隱私廣告

44. Ghostery

Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：

攔截廣告：Ghostery 內置的廣告攔截工具可以移除網頁上的廣告，防止網頁雜亂無章，讓你專注于想看的內容。
保護隱私：利用 Ghostery 可以查看和攔截所瀏覽的網站上的跟蹤器，控制收集數據的跟蹤器。增強反跟蹤功能還能將數據匿名化，進一步保護隱私。
提高瀏覽速度：Ghostery 的智能攔截功能可以自動攔截和取消攔截跟蹤器來滿足網頁質量標準，提高網頁加載速度，優化網頁性能。

45. AdBlock

AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。

效率工具

46. Marinara

番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效

47. Loom

Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。

48. GoFullPage

GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。

49. BetterViewer

BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。

50. svg-grabber

svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。

昨天開始研究，今天寫好了。

這個就是成果了，打開百度的時候，去掉所有不想關注的新聞、廣告、菜單之類的界面！就問你純不純凈。

出于好玩，我甚至把搜索框也加了機制，鼠標移動過去的時候，搜索框也會消失！（不要問我你該怎么搜索，就問你純不純凈！！）

下面我們直接手把手一起實現吧，主要起個拋磚引玉的效果，希望你能做出五花八門、強大的功能出來~

廢話不多說，直接新建一個文件夾，里面準備一張顯示程序的圖片，再新建幾個txt文件，分別進行重命名（記住后綴要一起改了），如圖：

manifest.json：這個就是相當于擴展程序的配置文件了，很重要的文件，所有的權限都是在里面配置的。
main.html:這個用來作為擴展程序的用戶界面。
content.js:這個用來實現一些邏輯的。

下面對每個文件進行填寫，每個文件打開方式使用記事本就行了。

content.js文件里面的代碼：

里面寫了一個函數，是針對首頁的，隱藏了大部分的組件，并對搜索框添加了監聽，然后再網頁加載完成后就會運行這個代碼的。

manifest.json文件里面的代碼：

這個文件里面主要是對擴展程序的名字，版本，說明，作者，圖標，以及一些權限進行了設置，如果對具體代碼有想更多了解的話，可以聯系我。

main.html:這個文件呢，不寫也罷，因為我們功能已經實現了，不需要進行擴展程序界面的設計。如果你自己有想法的話，可以寫一些自己想要的界面出來。

下面，見證奇跡的時刻到了。

打開瀏覽器，把我們的擴展程序添加到瀏覽器里面，添加完了之后，直接地址欄搜索，去搜索的頁面，效果就直接出來，沒有了新聞啥的了。

當把擴展程序去掉時，新聞之類的又顯示出來了。

是不是很純？這里我只是拋磚引玉，你們要實現的功能，可以自己根據情況去寫。

章節的主要內容是: ES6 數值擴展

一: 數值擴展: 數值處理的新增特性
    1. 新增方法
       1. 主要是關于數學處理, 如: 立方根、指數 等等
    2. 方法調整
       1. 有一部分是將原來的全局處理數值相關的方法, 移植到了 Number  對象上 <但是它們的功能不變> 。
    3. 數值擴展常用 API 總結:
       1. Number.isFinite()
       2. Number.isNaN()

如圖所示:

1. 二進制與八進制

/**
1. 二進制與八進制
   1. 在 ES6 中, 二進制的表示方法都是以 0b 開頭
   2. 八進制的表示方法是以 0o 開頭
   3. 小知識點:
      1. 0b 中的 b 大小寫均可以 。
      2. 0o 中的 o 大小寫均可以 。
 */
{
  console.log('二進制數字的表示方式 - 輸出結果為 十進制: ', 0b111110111); // 二進制數字的表示方式 - 輸出結果為 十進制:  503
  console.log('八進制的表示方法 - 輸出結果為 十進制: ', 0o767); // 八進制的表示方法 - 輸出結果為 十進制:  503

  /**
   * 測試大小寫均可
   */
  console.log('二進制數字的表示方式 - B 大小寫均可以: ', 0B111110111); // 二進制數字的表示方式 - b 大小寫均可以:  503
  console.log('八進制的表示方法 - O 大小寫均可以: ', 0O767); // 八進制的表示方法 - O 大小寫均可以:  503
}

2. ES6 Number.isFinite() 方法

/**
2. Number.isFinite() 方法
   1. 用來檢驗一個數值是否是有限的 <即是否是在有效值范圍之內的>。
 */
{
  /**
   * 正常值:
   */
  console.log('isFinite 方法 -- 15: ', Number.isFinite(15)); // isFinite 方法 -- 15:  true
  console.log('isFinite 方法 -- 小數 -- 0.0001', Number.isFinite(0.0001)); // isFinite 方法 -- 小數 -- 0.0001 true
  console.log('isFinite 方法 -- 負數 -- -15', Number.isFinite(-15)); // isFinite 方法 -- 負數 -- -15 true
  /**
   * NaN 為什么是 false? 因為它本身就不是一個數, 使用 Number.isFinite() 方法的前提是首先需要判斷當前值得是一個數 。
   */
  console.log('isFinite 方法 -- NaN: ', Number.isFinite(NaN)); // isFinite 方法 -- NaN:  false
  console.log('isFinite 方法 -- 字符串: ', Number.isFinite('字符串')); // isFinite 方法 -- 字符串:  false
  console.log('isFinite 方法 -- "15": ', Number.isFinite('15')); // isFinite 方法 -- "15":  false
  /**
   * 分母為 0
   */
  console.log('isFinite 方法 -- 1/0: ', Number.isFinite(1/0)); // isFinite 方法 -- 1/0:  false
  console.log('isFinite 方法 -- true/0: ', Number.isFinite('true'/0)); // isFinite 方法 -- true/0:  false
  /**
   * bool 值
   */
  console.log('isFinite 方法 -- true: ', Number.isFinite(true)) // isFinite 方法 -- true:  false
  console.log('isFinite 方法 -- false: ', Number.isFinite(false)) // isFinite 方法 -- false:  false
}

3. ES6 Number.isNaN() 方法:

/**
3. Number.isNaN() 方法:
   1. 用來檢驗一個值是否為 NaN
 */
{
  /**
   * 判斷結果為 true 的情況
   */
  console.log('Number.isNaN 方法 -- NaN: ', Number.isNaN(NaN)); // Number.isNaN 方法 -- NaN:  true
  console.log('Number.isNaN 方法 -- 1/NaN:', Number.isNaN(1/NaN)) // Number.isNaN 方法 -- 1/NaN: true
  console.log('Number.isNaN 方法 -- "true0"/0:', Number.isNaN('true'/0))  // Number.isNaN 方法 -- "true0"/0: true
  console.log('Number.isNaN 方法 -- "true"/"true":', Number.isNaN('true'/'true')) // Number.isNaN 方法 -- "true"/"true": true
  console.log('Number.isNaN 方法 -- ""/"":', Number.isNaN(''/'')) // Number.isNaN 方法 -- ""/"": true

  /**
   * 判斷結果為 false 的情況
   */
  console.log('Number.isNaN 方法 -- 0:', Number.isNaN(0)); // Number.isNaN 方法 -- 0: false
  console.log('Number.isNaN 方法 -- 字符串 - 123:', Number.isNaN('123')) // Number.isNaN 方法 -- 字符串 - 123: false
  console.log('Number.isNaN 方法 -- 字符串 - 空:', Number.isNaN('')) // Number.isNaN 方法 -- 字符串 - 空: false
  console.log('Number.isNaN 方法 -- bool值 true:', Number.isNaN(true)) // Number.isNaN 方法 -- bool值 true: false
  console.log('Number.isNaN 方法 -- bool值 false:', Number.isNaN(false)) // Number.isNaN 方法 -- bool值 false: false
}

4. ES5 isFinite() isNaN() 兩個方法與 ES6 Number.isFinite() Number.isNaN() 方法的區別在于

/**
4. ES5 isFinite() isNaN() 兩個方法 與 ES6 Number.isFinite()  Number.isNaN() 方法的區別在于:
   1. ES5 是先調用 Number() 方法將非數值轉化為數值, 二 ES6 中的新方法只對數值有效 。
   2. 即 Number.isFinite() 只對數值有效, 對于非數值一律返回 false; Number.isNaN() 只有對于 NaN 返回 true, 非 NaN 一律返回 false 。
 */
{
  /**
   * ES5 isFinite() 與 ES6 Number.isFinite() 對比
   */
  console.log('ES5 isFinite 方法', isFinite(5)); // ES5 isFinite 方法 true
  console.log('ES5 isFinite 方法', isFinite('88')); // ES5 isFinite 方法 true

  console.log('ES6 Number.isFinite 方法', Number.isFinite(5)); // ES6 Number.isFinite 方法 true
  console.log('ES6 Number.isFinite 方法', Number.isFinite('88')); // ES6 Number.isFinite 方法 false

  /**
   * ES5 isNaN() 與 ES6 Number.isNaN() 對比
   */
    console.log('ES5 isNaN 方法', isNaN(NaN)); // ES5 isNaN 方法 true
  console.log('ES5 isNaN 方法', isNaN('NaN')); // ES5 isNaN 方法 true
  console.log('ES6 Number.isNaN 方法', Number.isNaN(NaN)); // ES6 Number.isNaN 方法 true
  console.log('ES6 Number.isNaN 方法', Number.isNaN('NaN')); // ES6 Number.isNaN 方法 false
}

5. ES6 Number.isInterger

/**
5. Number.isInterger
   1. 用來判斷一個值是否為整數 。
   2. 它接收的參數必須是一個數, 否則它的返回結果為 false 。
   2. 小知識點:
      1. 在 JS 中, 整數和浮點數是同樣的存儲方法 。
 */
{
  console.log('Number.isInterger - 判斷一個值是否為整數 - 25:', Number.isInteger(25)); // Number.isInterger - 判斷一個值是否為整數 - 25: true
  console.log('Number.isInterger - 判斷一個值是否為整數 - 25.0:', Number.isInteger(25.0)); // Number.isInterger - 判斷一個值是否為整數 - 25.0: true
  console.log('Number.isInterger - 判斷一個值是否為整數 - 25.1:', Number.isInteger(25.1)); // Number.isInterger - 判斷一個值是否為整數 - 25.1: false
  console.log('Number.isInterger - 判斷一個值是否為整數 - "25":', Number.isInteger('25')); // Number.isInterger - 判斷一個值是否為整數 - "25": false
  console.log('Number.isInterger - 判斷一個值是否為整數 - true:', Number.isInteger(true)); // Number.isInterger - 判斷一個值是否為整數 - true: false
}

6. ES6 Number.isSafeInteger()

/**
6. Number.isSafeInteger()
   1. 用來判斷一個數<整數>是否是 -2 的 53 次方 到 2 的 53 次方 之間 (不包含這兩個端點) 。
   2. 如果超過這個區間的話, 存儲就會不準確 。
   3. 上下限 '常量' 的表示方法:
      1. 上限: Number.MAX_SAFE_INTEGER
      2. 下限: Number.MIN_SAFE_INTEGER
   4. 注意小細節:
      1. 它的參數必須是一個數 。
 */
{
  console.log('Number.MAX_SAFE_INTEGER - 上限: ', Number.MAX_SAFE_INTEGER); // Number.MAX_SAFE_INTEGER - 上限:  9007199254740991
  console.log('Number.MIN_SAFE_INTEGER - 下限: ', Number.MIN_SAFE_INTEGER); // Number.MAX_SAFE_INTEGER - 上限:  -9007199254740991

  console.log('Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - 10:', Number.isSafeInteger(10)); // Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - 10: true
  console.log('Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - a<字符串>:', Number.isSafeInteger('a')); // Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - a<字符串>: false
  console.log('Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - 1.1<小數>:', Number.isSafeInteger(1.1)); // Number.isSafeInteger() -- 判斷一個值是否在安全區間內 - 1.1<小數>: false
}

7. ES6 Math.trunc()

/**
7. Math.trunc()
   1. 去除一個數的小數部分, 返回整數部分 <只獲取整數部分, 不進行四舍五入或者向上向下取整>。
   2. 細節知識點:
      1. 對于非數值, Math.trunc() 內部使用 Number 方法先將其轉換為數值 。
 */
// ES5 數值取整方法
{
  // Math.round(): 返回一個數字四舍五入后的整數部分 。
  console.log('Math.round - 小數部分小于 0.5: ', Math.round(6.01)); // Math.round - 小數部分小于 0.5:  6
  console.log('Math.round - 小數部分大于 0.5: ', Math.round(6.9)); // Math.round - 小數部分大于 0.5:  7

  // Math.ceil(): 返回一個大于或等于數字的最小整數, 即向上取整 。
  console.log('Math.ceil - 小數部分小于 0.5: ', Math.ceil(6.01)); // Math.ceil - 小數部分小于 0.5:  7
  console.log('Math.ceil - 小數部分大于 0.5: ', Math.ceil(6.9)); // Math.ceil - 小數部分大于 0.5:  7

  // Math.floor(): 返回一個小于或等于數字的最小整數, 即向下取整 。
  console.log('Math.floor - 小數部分小于 0.5: ', Math.floor(6.01)); // Math.floor - 小數部分小于 0.5:  6
  console.log('Math.floor - 小數部分大于 0.5: ', Math.floor(6.9)); // Math.floor - 小數部分大于 0.5:  6
}
// ES6 數值取整方法:
{
  console.log('Math.trunc() -- 小數部分小于 0.5 - 4.1: ', Math.trunc(4.1)); // Math.trunc() -- 小數部分小于 0.5 - 4.1:  4
  console.log('Math.trunc() -- 小數部分大于 0.5 - 4.81: ', Math.trunc(4.81)); // Math.trunc() -- 小數部分大于 0.5 - 4.81:  4

  // 細節部分:
  console.log('Math.trunc() 內部使用 Number 方法先將其轉換為數值 - 數值字符串: ', Math.trunc('-12.121212')); // Math.trunc() 內部使用 Number 方法先將其轉換為數值 - 數值字符串:  -12
  console.log('Math.trunc() 內部使用 Number 方法先將其轉換為數值 - NaN: ', Math.trunc(NaN)); // Math.trunc() 內部使用 Number 方法先將其轉換為數值 - NaN:  NaN
  console.log('Math.trunc() 內部使用 Number 方法先將其轉換為數值 - 字符串: ', Math.trunc('字符串')); // Math.trunc() 內部使用 Number 方法先將其轉換為數值 - 字符串:  NaN
  console.log('Math.trunc() 內部使用 Number 方法先將其轉換為數值 - ""<空字符串>: ', Math.trunc('')); // Math.trunc() 內部使用 Number 方法先將其轉換為數值 - ""<空字符串>:  0
  console.log('Math.trunc() 內部使用 Number 方法先將其轉換為數值 - <空: 不傳參數>: ', Math.trunc()); // Math.trunc() 內部使用 Number 方法先將其轉換為數值 - <空: 不傳參數>:  NaN
}

8. ES6 Math.sign()

/**
8. Math.sign()
   1. 判斷一個數是: 正數 / 負數 / 0
   2. 輸入參數的返回結果:
      1. 參數為負數: 返回 1
      2. 參數為正數: 返回 -1
      3. 參數為 0: 返回 0
      4. 參數為 -0: 返回 -0
      5. 其它值返回 NaN
   2. 細節知識點:
      1. 對于非數值, 會將其轉換為數值 。
 */
{
  console.log('Math.sign() -- 參數為正數: ', Math.sign(555)); // Math.sign() -- 參數為正數:  1
  console.log('Math.sign() -- 參數為 0: ', Math.sign(0)); // Math.sign() -- 參數為 0:  0
  console.log('Math.sign() -- 參數為 -0: ', Math.sign(-0)); // Math.sign() -- 參數為 -0:  -0
  // console.log('Math.sign() -- 參數為 0000000: ', Math.sign(0000000)); // Math.sign() -- 參數為 0000000:  0
  console.log('Math.sign() -- 參數為負數: ', Math.sign(-22222)); // Math.sign() -- 參數為負數:  -1
}

9. ES6 Math.cbrt()

/**
9. Math.cbrt()
   1. 計算一個數的立方根
      1. 當參數為字符串且不為數值字符串時, 返回 NaN 。
   2. 細節知識點:
      1. 對于非數值, 會將其轉換為數值 。
 */
{
  console.log('Math.cbrt() -- 參數=-1: ', Math.cbrt(-1)); // Math.cbrt() -- 參數=-1:  -1
  console.log('Math.cbrt() -- 參數=1: ', Math.cbrt(1)); // Math.cbrt() -- 參數=1:  1
  console.log('Math.cbrt() -- 參數=0: ', Math.cbrt(0)); // Math.cbrt() -- 參數=0:  0
  console.log('Math.cbrt() -- 參數=4: ', Math.cbrt(4)); // Math.cbrt() -- 參數=4:  1.5874010519681996

  /**
   * 參數為字符串:
   */
  console.log('Math.cbrt() -- 參數="9"<數字字符串>: ', Math.cbrt('9')); // Math.cbrt() -- 參數="9"<數字字符串>:  2.080083823051904
  console.log('Math.cbrt() -- 參數=:<非數字字符串>', Math.cbrt('字符串')); // Math.cbrt() -- 參數=:<非數字字符串> NaN
}

以上代碼執行結果, 如圖所示:

之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端ES6基礎" 的相關專欄; 不積跬步，無以至千里, 戒焦戒躁。

如果對大家有所幫助，可以點個關注、點個贊; 文章會持續打磨。

有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容。

在線咨詢

上一篇：html標簽屬性
下一篇：一首純AI制作的歌曲，由GPT4作詞AI作曲MJ作圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

推薦50個超實用的 Chrome 擴展，建議收藏