有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

jquery $方法 浅克隆+深克隆

javascript cat 10个月前 (12-14) 61次浏览 已收录 0个评论 扫描二维码

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);

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

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址