本文主要是針對工作中，一些給人眼前一亮感覺的知識點做一個總結。在這里給大家做一個分享，也希望大家能通過私信或者評論分享你遇到的眼前一亮的黑科技知識。
更新時間：2019.7.12
更新內容：在 git commit 中添加表情
貢獻：rico_wang，FCC-法式老面包，FCC-星空
計劃：后期內容多后將會按照功能進行分類。
1、debugger;----斷點調試
可在編寫js程序中加入，當運行到此處時會觸發斷點調試，對于vue在chrome中不好打斷點的問題上是一個不錯的補充。
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}
瀏覽器會運行到potentiallyBuggyCode()時開啟斷點調試。
2、javascript:void(0)
void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。
<a href="javascript:void(0)">單擊此處什么也不會發生</a>
<a href="#">點擊返回網頁上端!</a>
3、<a href="#">點擊返回網頁上端!</a>
<a href="#idname">點擊定位到指定id元素位置!</a>
如果idname元素下方空間足夠，定位后idname元素將置頂，如果不夠，頁面尾部置于瀏覽器底部。
<a href="#pos">點我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位點</p>
<br>
...
<br>
常見文章側邊欄目錄定位
4、單豎杠|的運算規則
轉換為二進制之后011|100 相加得到111=7
4|4
轉換為二進制之后100 |100 相加得到100=4
8|3
轉換為二進制之后1000 |011 相加得到1011=11
單豎杠“|”運算就是轉換為2進制之后相加得到的結果
5、Object.prototype.toString()----對象類型判斷
js中判斷對象類型的typeof操作符（和instanceof一起）或許是 JavaScript 中最大的設計缺陷， 因為幾乎不可能從它們那里得到想要的結果。
typeof []; // object
typeof {}; // object
typeof ''; // string
typeof new Date() // object
typeof 1; // number
typeof function () {}; // function
typeof /test/i; // object
typeof true; // boolean
typeof null; // object
typeof undefined; // undefined
function明明是Object類型，卻顯示function；null明明是Null類型，卻顯示’object’。所以typeof操作符對類型的判斷是不靠譜的，除非類型在給定的范圍且typeof確實能夠區分這些類型。
通過 Object.prototype.toString.call()可以返回更準確的類型結果，如下：
var toString = Object.prototype.toString;
toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]
//Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]
Object.prototype.toString.call()返回值是字符串所以可以用.slice(8, -1)方法去掉[object和]
參考文章：
Javascript類型理解與類型判斷
6、查看頁面中所有元素的位置邊框
在chrome開發者模式的console中復制粘貼以下代碼：
[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
如圖，會給頁面所有元素添加隨機顏色邊框。
7、Chrome 控制臺新玩法
可以在Chrome控制臺console下改變打印出的結果文本樣式，例如：默認下為黑色字體，可以變為紅色字體。同時也可以打印出圖片，并給圖片添加布局樣式。
詳情可以查看參考文章：
console顯示圖片以及為文字加樣式
8、實時編輯 CSS
在 HTML 5 中新增了一個新的全局屬性，contenteditable 屬性，規定是否可編輯元素的內容。再也不用寫js，通過雙擊元素使用input標簽替換，就可以實現可編輯啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鵬李先生</title>
</head>
<body>
<p contenteditable="true">這是一段可編輯的段落。請試著編輯該文本。</p>
</body>
</html>
9、想要知道A元素是否包含B元素--contains
如果知道B元素，常用parentElement來判斷，或者知道A元素，反過來遍歷父元素子元素是否存在B元素。
node.contains(otherNode)，對低版本IE和其他瀏覽器兼容性都可以。
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
10、You might not need jQuery.
用原生的方法替代jQuery，可以在網頁上找到對應的原生代替方案，兼容性也做了處理。
You Might Not Need jQuery
11、chrome開者模式中隱藏元素
在 Chrome 瀏覽器的 Elements 里面選中某個元素，鍵盤上按 H可以隱藏該元素，只是讓元素不可見，并不是刪除。
12 css控制字數長度超過指定寬度時用……顯示
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
13 字符串轉為變量
當我們需要生成很多的變量，但是變量的名稱是根據參數的不同而區分的，如 date_1,date_2,datet_3... （后面的數字是根據參數來的），那我們就需要寫一個var name = "test_"+num;，這樣的函數來生成變量名。
- 1、
var name = eval('test_'+num)這樣就可以了，但并不推薦使用eval函數。 - 2、使用
window[name]等價于window.name可以改造為var name = window['test_'+num]，缺點一目了然，污染了全局變量，不過可以將其掛在到局部變量上。 - 3、使用new Function
貢獻自FCC-星空
function strToVar(str) {
var json = (new Function("return " + str))();
return json;
}
strToVar("name")
console.log(name)//true,變量已生成，但為賦值。
eval()，new Function() 性能安全性并不好，不推薦使用
- 4、采用數組的形式
var arr = [];
for (var i = 0,var len = some.length; i < len; i++){
arr[i]['test_' +i]= null;
}
變量在數組中都有對應的下標，賦值和調用都不是很方便，但可能在特殊的使用環境中有奇效。
總結：最佳使用方法通過var name = obj[strname]實現字符串轉為變量。
15、在 git commit 中添加表情
使用方式：$ git commit -m 'message :trollface:'
- 沒有表情的
commit
- 添加表情后的
commit
各種表情代碼已經代表的含義
16 Console中的一些函數
- 1、
monitor函數
使用 monitor函數來監控一函數，如下面的示例
- 2、
inspect函數
inspect函數可以讓你控制臺跳到你需要查看的對象上。如：
- 3、
copy函數
copy函數可以把一個變量的值copy到剪貼板上。
