Javascript 基础知识 —— 重写数组方法

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