js常见函数实现

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

3、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); // TEST

4、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); // TEST

5、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); // TEST

6、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); // TEST

7、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)); // TEST

8、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)); // TEST

2、深复制

  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