jquery $方法浅克隆+深克隆

1、$下的方法

1、$.each

$.each(对象, function (index, item) { }); 循环对象(jq对象、[]、{})

注意：jQuery对象.each()只能循环jQuery对象

// 工具方法：可以用来遍历jQuery对象，也可以用来遍历原生数组和对象
// $.each(对象, function (index, item) { });
// item是原生的对象，且同函数中的this指向一致

// 1、遍历jq对象
$.each($('li'), function (index, item) {
    // console.log(index, item);
    // console.log(this === item); // true
    $(item).text(index + 1);
});

// 2、遍历原生数组
var arr = ['刘备', '关羽', '张飞'];
$.each(arr, function (index, item) {
    console.log(index, item);
    // console.log(this);
})

// 3、遍历原生对象
var obj = {
    name: 'zs',
    age: 3,
    fn: function () {
        console.log('前端开发');
    }
}
$.each(obj, function (key, val) {
    console.log(key, val);
});

2、$.map

$.map(function (value, key) { });

作用：循环对象，返回每次函数调用的结果组成的数组(如果调用的结果是null或undefined，则不添加进数组)

类似ES6 : Object.keys() Object.values()

var obj = {
    name: 'zs',
    age: 3,
    fn: function () {
        console.log('前端开发');
    }
}

var v = $.map(obj, function (val, key) {
    // console.log(val);
    // console.log(key);

    // return val; // 将值放在数组中
    return key; // 将key放入数组中
})
console.log(v);

// es6的方法
console.log(Object.values(obj));
console.log(Object.keys(obj));

3、$.extend

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

deep：即是否深度克隆

1、对象合并

// 1、对象合并
// 语法：$.extend(target, object1 [, objectN]);
// 对象合并到target上面，返回合并以后的target，不影响原对象
var o1 = {
    name: 'zs'
}
var o2 = {
    age: 3
}
var o3 = {
    sex: '男',
    name: 'ls'
}

var o = {};
$.extend(o, o1, o2, o3);
console.log(o); // {name: 'ls', age: 3, sex: '男'}

// 推荐用法
var o = $.extend({}, o1, o2, o3);
console.log(o); // {name: 'ls', age: 3, sex: '男'}

2、对象浅克隆：只克隆了一层

// 2、对象深浅克隆
var o3 = {
    sex: '男',
    name: 'ls'
}

// 1、直接赋值，不行
var o = o3; // 引用类型，引类型的赋值是将地址传过去

// 2、手动浅克隆，这里只克隆了一层
var o = {};
for (var attr in o3) {
    o[attr] = o3[attr];
}

o.age = 1;
console.log(o); // {sex: '男', name: 'ls', age: 1}
console.log(o3); // {sex: '男', name: 'ls'}

3、深克隆

// $.extend()深浅克隆
var obj = {
    sex: '男',
    name: 'ls',
    fn: {
        a: 1
    }
}

// 浅克隆：对象里面的值都是基本类型，就可以浅克隆
// 深克隆：对象进而面的值还有引用类型，就必须用深克隆，否则会导致一个修改，所有的都改了

// var o = $.extend({}, obj); // 浅克隆，o为克隆以后的
var o = $.extend(true, {}, obj); // 深克隆，o为克隆以后的，修改fn.a，原来的不变
o.fn.a = 3;
console.log(o);
console.log(obj);

总结：如果对象里面是基本类型，则可以用浅克隆。如果里面是引用类型，则必须用深克隆