$.extend(),$.each(),$.grep()整理

$.extend(),$.each(),$.grep()整理
今天熟悉新公司代码过程中，发现这三个方法十分常用，在这里整理一下。晚上下班来补。
过去三四天了，来补,大部分都是搜到网上的好的解析，复制整理一下。
一
$.grep() 方法是按照某种条件来过滤数组。以一个例子来看看：

var nums = ‘1,2,3,4,5,jQuery,CSS,5’.split(’,’);
可见数组中有数字和字符串，如果我们想找出其中的字符串，我们可以直接使用 $.grep() 方法来完成这个任务，如下：

nums = $.grep(nums, function (num, index) {
    // num = 数组元素的当前值  
    // index = 当前值的下标
    return isNaN(num);
});
console.log(nums); //结果为： ["jQuery", "CSS"]  

我们很容易想到 $.map()方法，$.map() 方法可将一个数组转换为另一个数组，所以，使用 $.map() 方法也可以完成这个任务，如下：

    nums = $.map(nums, function (num, index) {
            //和$.grep() 的区别
            //return isNaN,得到结果为：[true, true]
            return isNaN(num) ? num : null;
        });

console.log(nums); // ["jQuery", "CSS"] 

二
$.each()函数，之前还是用for()循环比较多。
1、遍历一维数组

 var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+'```````'+val);
输出的结果为：

0```````aa
1```````bb
 2```````cc
3```````dd

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'````'+item);
输出的结果为：

0````aaa,bbb
1````ccc,ddd
2````eee,fff

此时可以对输出的一维数组进行遍历

$.each(item,function(i,val){  //遍历二维数组
          console.log(i+'`````'+val);
  })
输出的结果为：

0````aaa,bbb
    0`````aaa
    1`````bbb
1````ccc,ddd
    0`````ccc
    1`````ddd
2````eee,fff
    0`````eee
    1`````fff

3、处理json

var json1={key1:'a',key2:'b',key3:'c'};
 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'````'+value);
  })
输出的结果为：

key1````a
key2````b
key3````c

4、当二维数组中有json对象时

var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
        $.each(arr3,function(i,val){
            console.log(i+'`````'+val);   
             console.log(val.name); //获取每一个json里面的name值
            console.log(val["name"]);//另一种获取name值得方法
            $.each(val,function(key,val2){
                console.log(key+'```'+val2);
            })
        });
	//输出：
		0`````[object Object]
			n1
			n1
			name```n1
			age```18
		1`````[object Object]
			n2
			n2
			name```n2
			age```20
		2`````[object Object]
			n3
			n3
			name```n3
			age```22

5、处理dom元素

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

$.each($('input:hidden'),function(i,val){
            console.log(i+'````'+val);
            
	                /*0````[object HTMLInputElement]
	                1````[object HTMLInputElement]
	                2````[object HTMLInputElement]
	                3````[object HTMLInputElement]*/
            
            console.log(val.name+'`````'+val.value);
            
	               /* aaa`````111
	               bbb`````222
	                ccc`````333
	               ddd`````444*/
       }

三
$.extend()的深拷贝和浅拷贝详细讲解

语法：jQuery.extend( [deep ], target, object1 [, objectN ] )

描述: 将两个或更多对象的内容合并到第一个对象。

深浅拷贝对应的参数就是[deep]，是可选的，为true或false。
默认情况是false（浅拷贝），并且false是不能够显示的写出来的。
如果想写，只能写true（深拷贝）

什么是深、浅拷贝呢？先讲定义，再举例子

在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。

浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。

深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

var object1 = {
    apple: 0,
    banana: {
        weight: 52,
        price: 100
    },
    cherry: 97
};
var object2 = {
    banana: {
        price: 200
    },
    durian: 100
};

//默认情况浅拷贝

//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

//object2的banner覆盖了object1的banner，但是weight属性未被继承

//$.extend(object1, object2);

//深拷贝

//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

//object2的banner覆盖了object1的banner，但是weight属性也被继承了呦

$.extend(true,object1, object2);

console.log('object1--->'+JSON.stringify(object1));