# 日常开发中的一些小技巧
## 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>
)
}
}
```
