网站建设 电话,网站常见程序问题,大数据人工智能培训班,营销网站建设hanyous文章目录 一、数组Array1、forEach2、filter3、map4、reduce5、find6、findIndex7、includes8、join 二、对象Object1、Object.keys2、深复制 js环境中有很多工具函数#xff0c;比如es6添加了很多新的属性和方法#xff0c;这些方法也可以自定义实现#xff0c;但是官方也提… 文章目录 一、数组Array1、forEach2、filter3、map4、reduce5、find6、findIndex7、includes8、join 二、对象Object1、Object.keys2、深复制 js环境中有很多工具函数比如es6添加了很多新的属性和方法这些方法也可以自定义实现但是官方也提供出来了这样可以形成规范和一致性了解为什么要提供这些函数是有必要的。 一、数组Array 公共数据 const inventory [{ name: 芦笋, type: 蔬菜, quantity: 5 },{ name: 香蕉, type: 水果, quantity: 0 },{ name: 山羊, type: 肉, quantity: 23 },{ name: 樱桃, type: 水果, quantity: 5 },{ name: 鱼, type: 肉, quantity: 22 }];1、forEach // 自定义forEach方法Array.prototype.forEachCustom function (cb) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}for (let i 0; i this.length; i) {// this[i], i, this 三个参数分别表示当前元素索引数组本身// 大部分功能函数都是这三个参数和顺序cb(this[i], i, this);}};// inventory.forEachCustom((item) { // TEST// console.log(item.name);// });2、filter // 自定义filter方法Array.prototype.filterCustom function (cb) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}const result [];for (let i 0; i this.length; i) {// 返回值只是为了做if判断不用存储存储的是满足条件的元素if (cb(this[i], i, this)) {result.push(this[i]);}}return result;};const resultFilterCustom inventory.filterCustom((item) {return item.quantity 6;});// console.log(filterCustom, resultFilterCustom); // TEST3、map // 自定义map方法Array.prototype.mapCustom function (cb) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}const result [];for (let i 0; i this.length; i) {// 将返回值存储起来最后返回; 当然函数默认返回undefinedresult.push(cb(this[i], i, this));}return result;};const resultMapCustom inventory.mapCustom((item) {if (item.quantity 6) {return item.name;}});// console.log(mapCustom, resultMapCustom); // TEST4、reduce // 自定义reduce方法Array.prototype.reduceCustom function (cb, initialValue) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}// 每一次循环的结果都会作为下一次循环的初始值; 最后返回出去let result initialValue;for (let i 0; i this.length; i) {result cb(result, this[i], i, this);}return result;};const resultReduceCustom inventory.reduceCustom((acc, item) {return acc item.quantity;}, 0);// console.log(reduceCustom, resultReduceCustom); // TEST5、find // 自定义find方法Array.prototype.findCustom function (cb) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}for (let i 0; i this.length; i) {// 返回值只是为了做if判断不用存储// 找到第一个满足条件的元素就返回找到就停止遍历// 有点类似于filter但是只返回第一个满足条件的元素if (cb(this[i], i, this)) {return this[i];}}// 如果没有找到返回undefined};const resultFindCustom inventory.findCustom((item) {return item.name 香蕉;});// console.log(findCustom, resultFindCustom); // TEST6、findIndex // 自定义findIndex方法Array.prototype.findIndexCustom function (cb) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的cb是自定义的回调函数;if (typeof cb ! function) {return;}for (let i 0; i this.length; i) {// 返回索引找到第一个满足条件的元素就返回找到就停止遍历// 很类似于find但是只返回第一个满足条件的元素的索引if (cb(this[i], i, this)) {return i;}}// 如果没有找到返回-1};const resultFindIndexCustom inventory.findIndexCustom((item) {return item.name 樱桃;});// console.log(findIndexCustom, resultFindIndexCustom); // TEST7、includes // 自定义includes方法Array.prototype.includesCustom function (value) {for (let i 0; i this.length; i) {// 这里默认数组是一维数组; 只是单纯判断值是否存在;// 如果是复杂数据使用find即可;if (this[i] value) {return true;}}return false;};// console.log(includesCustom, [1, 2, 3, 4, 5].includesCustom(2)); // TEST8、join // 自定义join方法Array.prototype.joinCustom function (separator) {// 这里的this是数组本身;if (!Array.isArray(this)) {return;}// 这里的separator是自定义的分隔符;if (typeof separator ! string) {return;}let result ;for (let i 0; i this.length; i) {// 这里默认数组是一维数组;// 这里默认separator是空格;result this[i] separator;}// 去掉最后一个分隔符;return result.slice(0, -1);};console.log(joinCustom, [1, 2, 3, 4, 5].joinCustom(-)); // TEST二、对象Object
1、Object.keys 提供了一个案例获取属性时的原型链问题 // 简易版继承const parentFunc function () {this.name 张三;};const childFunc function () {// 继承父类的属性和方法构造函数继承// 注意调用的时机会决定实例的属性顺序比如这里的name属性在age前面parentFunc.call(this);// 运行时this指向childFunc实例对象的内存空间;this.age 20;};parentFunc.prototype.getName function () {return this.name;};childFunc.prototype new parentFunc();const childObj new childFunc();const keysAll [];const keysOwn [];for (let key in childObj) {// 自己的属性和原型链上的属性都会遍历出来// 原型链继承的所有属性 Object.prototype 挂载的自定义方法keysAll.push(key);if (childObj.hasOwnProperty(key)) {// 自己的属性才会遍历出来keysOwn.push(key);}}console.log(Object.keysCustom, keysAll, keysOwn); // TEST// 结果keysAll [name, age, getName, keysCustom];// 结果: keysOwn [name, age];// 自定义Object.keys方法 用于获取对象所有属性名Object.prototype.keysCustom function (obj) {if (typeof obj ! object || obj null) {return;}const result []; // 用于存储结果for (let key in obj) {// hasOwnProperty表示自身的属性不包括原型链上的属性if (obj.hasOwnProperty(key)) {// 相当于循环后存储keyresult.push(key);}}return result;};const obj { name: 张三, age: 20, gender: 男 };// console.log(Object.keysCustom, Object.keysCustom(obj)); // TEST2、深复制 const data [{ name: 张三, age: 20, array: [1, 2, 3] },{ name: 李四, age: 25, array: [4, 5, 6] }];const deepClone (source) {if (typeof source ! object || source null) {return source;}const target Array.isArray(source) ? [] : {};for (const key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {if (typeof source[key] object source[key] ! null) {target[key] deepClone(source[key]);} else {target[key] source[key];}}}return target;};console.log(deepCopy, deepClone(data)); // TEST
