1、写一个函数，实现深度克隆对象
const obj = {
name: "LIYUFAN",
age: 25,
career: "初级前端工程师",
info: {
field: ["JS", "CSS", "HTML"],
framework: ["React", "Vue", "Angular"],
partner: [
{
name: "张三",
age: 18,
},
{
name: "李四",
age: 19,
},
],
},
hobby: ["study", "sleeping"],
};
function deepClone(origin, target) {
var tar = target || {};
var type = "[object Array]";
for (var i in origin) {
if (origin.hasOwnProperty(i)) {
if (typeof origin[i] === "object" && origin[i] !== null) {
tar[i] = Object.prototype.toString.call(origin[i]) === type ? [] : {};
tar[i] = deepClone(origin[i], tar[i]);
} else {
tar[i] = origin[i];
}
}
}
return tar;
}
let res = deepClone(obj);
res.name = "Lee_Yu_Fan";
console.log(obj, res);2、重写数组forEach方法
/*
* forEach 有两个参数，第一个参数是回调函数，第二个参数是回调函数this指向的值;如果不传this值为window
* 回调函数执行的次数等于数组的长度
*/
var arr = [{name:'张三',age:18},{name:'李四',age:18},{name:'王五',age:20}]
Array.prototype.myForEach = function (cb) {
var arg2 = arguments[1] || window; //this的指向，传第二个参数，this的指向就指向第二个参数，不传第二个参数就指向window
var _arr = this; //目标对象，这里的this就是调用myForEach函数的数组（在javaScript中，this的指向一般指向调用者）
var len = _arr.length; //数组的长度
for (var i = 0; i < len; i++) {
cb.apply(arg2, [_arr[i], i, _arr]); //执行回调函数，
}
};
arr.myForEach(function (item, index, arr) {
console.log(item, index, arr);
});
3、重写map
// 重写map
let arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
];
/**
* 数组的map函数和forEach的用法差不多，唯一的区别是map函数可以返回一个新数组
* 因为返回新数组了，就要考虑到深拷贝
*/
//---------------- 核心代码开始 ----------------------
Array.prototype.myMap = function (cb) {
var _this = arguments[1] || window;
var _arr = this;
var _len = _arr.length;
var newArr = [];
var res;
for (var i = 0; i < _len; i++) {
var _item = deepClone(_arr[i]);
res = cb.apply(_this, [_item, i, _arr]);
res && newArr.push(res); //有return的时候才返回新数组，没有return的时候返回[]
}
return newArr;
};
//----------------- 核心代码结束 ----------------------
let res = arr.myMap(function (item, index, arr) {
console.log(item, index, arr);
});
console.log(res); //[]
let res2 = arr.myMap(function (item, index, arr) {
return item.age + 2;
});
console.log(res2); // [20,21,22]4、重写filter
// 重写 filter
let arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
];
// filter原理：通过true和false进行过滤。如果是true放进新数组中，如果是false就不放进新数组中
Array.prototype.myFilter = function (cb) {
var _this = arguments[1] || window;
var _arr = this;
var _len = _arr.length;
var newArr = [];
var item;
for (var i = 0; i < _len; i++) {
item = deepClone(_arr[i]); //如果是对象，要进行深拷贝
cb.apply(_this, [item, i, _arr]) ? newArr.push(item) : "";
}
return newArr;
};
let obj = {
age: 18,
};
let result = arr.myFilter(function (item, index, arr) {
return item.age > obj.age;
}, obj);
console.log(result); //[ { name: "李四", age: 19 },{ name: "王五", age: 20 },]5、重写every
// 重写every
//原理：每次都是真才会返回true,有一个为假就会返回false
let arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
];
// -------------核心代码 start ---------------
Array.prototype.myEvery = function (cb) {
var _this = arguments[1] || window;
var _arr = this;
var _len = _arr.length;
var flag = true;
for (var i = 0; i < _len; i++) {
if (!cb.apply(_this, [_arr[i], i, _arr])) {
flag = false;
break;
}
}
return flag;
};
// -------------核心代码 end ---------------
let res = arr.myEvery(
function (item, index, arr) {
return item.age < this.age;
},
{ age: 19 }
);
console.log(res); //false
let res2 = arr.myEvery(
function (item, index, arr) {
return item.age > this.age;
},
{ age: 17 }
);
console.log(res2); //true6、重写some
//重写some
// 原理：有一个为真就返回true
let arr = [
{ name: "张三", age: 18 },
{ name: "李四", age: 19 },
{ name: "王五", age: 20 },
];
// ------------ 重写代码start -----------------
Array.prototype.mySome = function (cb) {
var _this = arguments[1] || window;
var _arr = this;
var _len = _arr.length;
var flag = false;
for (var i = 0; i < _len; i++) {
if (cb.apply(_this, [_arr[i], i, _arr])) {
flag = true;
break;
}
}
return flag;
};
// ----------------重写代码end -------------
let res = arr.mySome(function(item,index,arr){
return item.age < 18
})
console.log(res) //false
let res1 = arr.mySome(function(item,index,arr){
return item.age > 19
})
console.log(res1) //true7、重写reduce (累计求和)
//原理:回调函数中的第一个参数等于，myReduce函数的第二个参数（全等）
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
Array.prototype.myReduce = function (cb) {
var total = arguments[1] || 0;
var _arr = this;
var _len = _arr.length;
for (var i = 0; i < _len; i++) {
total = cb(total, _arr[i], i, arr);
}
return total;
};
let res1 = arr.myReduce(function (total, item, index, arr) {
return total + item;
});
console.log(res1); //36
let res2 = arr.myReduce(function (total, item, index, arr) {
return total + item;
}, 4);
console.log(res2); //40
