$.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);
});
$.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));
语法:$.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、对象深浅克隆
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'}
// $.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);