之前的方法叫实例方法，是基于选出来的对象进行操作，

工具方法是不用基于选择出来的东西进行操作了，往往操作一些原生的数据类型，比如对象、原始值、this、去空格...

一、判断数据类型

原生 typeof() 返回的数据类型，使用价值低了点

undefined、String、Number、Boolean、Object(Function、null)、Array

$.type()

原生 typeof() 返回数据是什么类型，$.type() 返回数据是什么？

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

  console.log($.type(undefined));// undefined

  console.log($.type('abc')); // string

  console.log($.type(123)); // number

  console.log($.type(true)); // boolean

  console.log($.type(function(){})); // function

  console.log($.type(null)); // null（原生typeof返回object）

  console.log($.type({})); // object

  console.log($.type([1,2,3])); // array

</script>

$.type 返回的类型标记是"字符串"

console.log(typeof $.type([1,2,3])); // string

时间对象，对比两种方法返回的结果

console.log($.type(new Date())); // date

console.log(typeof(new Date())); // object

包装类不如成哥封装的好，因为除了返回 number，还要知道这是一个数字类型的对象

console.log($.type(new Number())); // number

所以结合 typeof 接着判断一次

console.log($.type(new Number()) + typeof(new Number())); // numberobject

字面量对象 和 自定义的对象，返回的都是 object

function Person(){}

console.log($.type(new Person())); // object

console.log($.type({})); // object

下面三个方法是 jQuery 出于效率做出的方法，一般在源码里调用，手册上查不到，

在 jQuery 库源码里需要严谨的判断传的的值

$.isArray() es5数组里也演变出了isArray方法

判断是不是数组

console.log($.isArray([1,2,3])); // true

$.isFunction()

匿名函数是一个索引返回 true

console.log($.isFunction(function(){})); // true

立即执行函数看的是 false

console.log($.isFunction( (function (){})()) ); // false

因为立即执行函数返回的是 undefined，所以 $.isFunction 判断返回 false

console.log((function (){})()); // undefined

$.isWindow()

后期编程涉及到 iframe，跨越的编程的时候，判断是不是 window 就有些重要了

console.log($.isWindow(window)); // true

二、消除空格

$.trim() 去掉前后的空格，与原生字符串里有 trim() 方法没有什么区别

var str = '  1 2 3   ';

console.log(str.trim());

console.log($.trim(str));

传的是数字，返回字符串类型数字

var num = 123;

console.log($.trim(num)); // "123"

三、改变函数的this指向

$.proxy()

改变函数的 this 指向，有点类似于 bind 函数

show 函数里的 this 默认指向 window，通过 $.proxy() 改变指向 obj，没有改变 show 方法，返回了一个新的方法里面 this 指向的是 obj

参数一，要改变的 show 函数

参数二，要指向的 obj 对象

function show(){
  console.log(this);
}

var obj = {
  name: 'Glee',
  age:37
}

var showProxy = $.proxy(show, obj);

showProxy(); // {name: 'Glee', age: 37}

$.proxy() 源码是用 call() 和 apply() 写的

小例子，单对象式编程

一般独立成块的功能，都有一个 init 启动函数，初始起始的意思

init: function(){

}

这种编程形式，模块化写的很清晰，绑定事件单独一个方法，绑定事件全部写 在bindEvent 里面，接下来在调用就完事了

bindEvent: function(){

}

是事件处理函数

show: function(){

} 

生成信息的函数，是辅助 show 函数出现的

produseMs: function(ms){

}

show 方法里的 this 指向的是 dom 对象，不是 list 对象

<div id="demo" style="width:100px;height:100px;background-color:coral;"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

var list = {
  init: function(){
    this.ms = 123;
    this.dom = document.getElementById('demo');
    this.bindEvent();
  },
  bindEvent: function(){
    this.dom.onclick = this.show; // 这里的this是dom，dom调用的show方法
  },
  show: function (){
    console.log(this); // <div id="demo" style="width:100px;height:100px;background-color:coral;"></div>
    console.log(this.produseMs(this.ms)); // Uncaught TypeError: this.produseMs is not a function at HTMLDivElement.show
    // 这的this指向不是list对象是dom元素，dom元素上没有prOduseMs方法所以报错，而且this也调用不了ms
  },
  produseMs: function (ms){
    return ms + 234;
  }
}

list.init();
  
</script>

$.proxy 方法修改 show 方法里的 this，指向改成 list 对象

var list = {
  init: function(){
    this.ms = 123;
    this.dom = document.getElementById('demo');
    this.bindEvent();
  },
  bindEvent: function(){
    this.dom.onclick = $.proxy(this.show, this);  // 在这里把show方法里的this指向改成list对象
  },
  show: function (){
    console.log(this.produseMs(this.ms));

  },
  produseMs: function (ms){
    return ms + 234;
  }
}

list.init();

四、防止冲突

$.onConflict()

当其它库也用 $ 做全局变量时，jQuery 可以通过 $.onConflict() 方法转换，比如 $c 取代原来的 $

<div id="demo" style="width:100px;height:100px;background-color:coral;"></div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

  var $c = $.noConflict();

  $c('#demo').click(function(){
    $c(this).css({backgroundColor: 'tomato'});
  });

</script>

五、循环

$.each()

$().each() 是对前面选出来的集合进行循环处理叫实例方法，

$.each() 叫工具方法是数组方法 foreach() 的前身，有了 foreach 以后 $.each() 基本不怎么用了，现在它只针对数组、类数组、对象而存在的

循环数组

var arr = ['a', 'b', 'c', 'd'];

$.each(arr, function (index, ele){
  console.log(index, ele);
});


// 0 'a'
// 1 'b'
// 2 'c'
// 3 'd'

循环对象

var obj = {
  one:'aaa',
  two:'bbb',
  three:'ccc'
}

$.each(obj, function(key, value){
  console.log(key, value);
});

// one aaa
// two bbb
// three ccc

$.map()

es5 的 map()方法就是来源于 $.map()

map() 方法不改变原数组，返回一个新数组，所以就关注返回值 return，把需要公式写在返回值里面

var arr = [1,2,3,4];

var arrNew = $.map(arr, function (index, ele){
  return ele * index;
});

console.log(arrNew); // [0, 2, 6, 12]

六、json字符串转成对象

$.parseJSON()

原生的 JSON.parse() 和 $.parseJSON() 是一样的，JSON.parse() 方法把一个符合 json 格式的字符串，转换成纯粹意义的 json

// 严格的json格式，属性名和属性名都要用双引号
var json = '{"number":"123", "string":"王珞丹", "boolean":true}';


// 把json格式的字符串转成json
console.log($.parseJSON(json)); // {number: '123', string: '王珞丹', boolean: true}

$.parseJSON() 的源码就一行 JSON.parse(data + "")  data加空字符串的形式

json 格式必须规范

定义 json 的时候，属性名不加双引号没什么问题，

如果想把字符串形式的 json 转成正常 json 对象，必须写严格的 json 格式，属性名和属性名都要用双引号，单引号都不行，属性值是布尔值或数字不用引号

七、类数组转成数组、制作数组

$.makeArray()

1、基本的用法，只传一个参数

类数组 obj 转换成数组，类数组 obj 不变

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length : 3
}

var arr = $.makeArray(obj);

console.log(arr); // ['a', 'b', 'c']
console.log(obj); // {0: 'a', 1: 'b', 2: 'c', length: 3}

slice 方法空截取，也能把类数组变成数组

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length : 3
}

var arr = [].slice.call(obj, 0);

console.log(arr); //  ['a', 'b', 'c']

把 slice 方法写在类数组 obj 里，obj 自己直接调用就 ok 了

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length : 3,
  slice: Array.prototype.slice
}

var arr = obj.slice(0);

console.log(arr); // ['a', 'b', 'c']

2、延伸的用法，一般传两个参数

参数一填字符串 "d"，

参数二填类数组，会把前面字符串 "d" 添加到类数组里面去，改变类数组 obj

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

$.makeArray('d', obj);

console.log(obj); // {0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4}

前面填数组 arr，第二个参数填类数组 obj，能把数组 arr 挨个的加到类数组 obj 里面去，lenght 长度也变成6位了

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length : 3
}

var arr = [1,2,3];

console.log($.makeArray(arr, obj)); // {0: 'a', 1: 'b', 2: 'c', 3: 1, 4: 2, 5: 3, length: 6}

前面传数字类型 5，后面传数组 arr，把 5 放到数组里面了

var arr = [1, 2, 3];

console.log($.makeArray(5, arr)); // [1, 2, 3, 5]

前面是数组，后面是类数组，把类数组依次放到数组里面去了

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length : 3
}

var arr = [1, 2, 3];

console.log($.makeArray(obj, arr)); //  [1, 2, 3, 'a', 'b', 'c']

结论，底层就是一个拼接，

把前面的放到，后面第二个参数里面去，

后面的是什么类型，最后的结果就是什么类型