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的指向就指向第二个参数,不传第二个参数就指向windowvar _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); //true
6、重写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) //true
7、重写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