# 日常開發中的一些小技巧
## console
1. console.log
+ console.log是我我們日常開發中最常用的，但是console.log還有一些另外的用法，console.log支持格式化輸出: console.log(msg, values)
``` console.log('I like %s but I do not like %s.', 'Skittles', 'pus')```
輸入的結果就是：
```I like Skittles but I do not like pus```
常見的三種佔位符，%o接受對象，%s接受字符串，%d接受整數或者小數
+ console.dir,常用來輸入某一個對象，該方法可以將目標對象所有的屬性一次性展示出來，並且可以非常方便的常看dom結構, 如下圖
+ console.table,該方法可以將一個數組展示爲表格數據
比如說:
```
const data = [{
id: "7cb1-e041b126-f3b8",
seller: "WAL0412",
buyer: "WAL3023",
price: 203450,
time: 1539688433
},
{
id: "1d4c-31f8f14b-1571",
seller: "WAL0452",
buyer: "WAL3023",
price: 348299,
time: 1539688433
},
{
id: "b12c-b3adf58f-809f",
seller: "WAL0012",
buyer: "WAL2025",
price: 59240,
time: 1539688433
}]
```
展示爲表格：
console.table最大隻能展示1000行，但是對於我們日常開發來說應該是足夠了
+ console.warn,console.error,這兩個方法屬於提示信息，如果只展示console.warn,這對於偶爾會在瀏覽器中輸出大量無用廢話的應用程序尤其有用
+ console.time,這是一個用戶跟蹤操作的函數，以往如果想知道某個函數執行花費了多少時間，一般的做法是在函數開始和結尾處都設置一個獲取時間的函數，但是現在我們可以直接使用這個API：
```
const slowFunction = number => {
console.time('slowFunction');
// something slow or complex with the numbers.
// Factorials, or whatever.
console.timeEnd('slowFunction');
}
console.time();
for (i = 0; i < 100000; ++i) {
slowFunction(i);
}
console.timeEnd();
```
不需要設置任何額外的變量和計算
+ console.trace,用來函數追蹤，console.trace()方法可以將函數的被調用過程清楚地輸出到控制檯上，對於深度調試會有幫助
+ console.memory,常用來性能分析，查看是否有內存泄露
+ 除了上面的這些函數外，還有console.debug, console.clear, console.group, console.groupEnd,console.assert等函數
參考鏈接：
[10個用Console來Debug的高級技巧](https://www.cnblogs.com/liangzhixiaolaohu/p/8600905.html)
2. 過濾唯一值
Set是ES6新增的一個數據結構，其成員都是唯一的，沒有重複的值，結合擴展運算符，可以達到過濾原數組重複值的目的
```
const array = [1, 2, 3, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)]
console.log(uniqueArray) // [1, 2, 3, 5]
```
3. 轉換Number類型
可以使用兩個波浪號:~~
```
const int = ~~'15'
console.log(int) // 15
console.log(typeof int) // 'number'
```
4. Float快速轉Int
使用|(位或運算符)將浮點數截斷爲整數
```
console.log(23.9 | 0) // 23
console.log(-23.9 | 0) // -23
```
如果n是整數，那麼默認會向下舍入，如果n是負數，默認會向上取整
5. 類中自動綁定
React中如果我們顯示的綁定方法：
```
this.myMethod = this.myMethod.bind(this)
```
但是如果函數很多的話，就會出現大量的綁定的代碼。我們可以通過箭頭函數來簡化一下:
```
import React, { Component } from 'react'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {}
}
myMethod = () => {
// 隱私綁定
}
render() {
return (
<div>
{this.myMethod()}
</div>
)
}
}
```