使用JavaScript进行数据处理(长期更新)

        前端框架vue或者react讲究数据驱动视图，也就是无需过多关注dom的更新，将更多精力花费在数据的处理上，虚拟dom这一概念就是为了提高开发效率而诞生（它并不一定比真实dom渲染的性能更优，但开发效率相较后者确实大大提升...）

                本文会对常用到的数据处理进行汇总，以便之后查阅

0.扁平数组或对象转换为树形结构，树形结构转换为扁平化汇总在上一篇算法文里了...

算法汇总~

1. 对象数组的合并

        es6中简单数据类型数组合并可以用展开运算符，

let MergeArr = [...arr1,...arr2]

   数组中包含对象的话，需要进行一些处理

Object.assign(item, cur);  将原对象覆盖为新对象

 let MergeArrs = (arr1, arr2) => {
        let result =  arr2.reduce((pre, cur) => {
          let flag = false;
          arr1.forEach((item, index) => {
            if (item.name == cur.name) {
              flag = true;
              item = Object.assign(item, cur); //用cur覆盖item对象
            }
          });
          if (!flag) {
            pre.push(cur);
          }
          return pre
        }, arr1);
        return result
      };

2.手写splice方法

        细节和边界处理是难点

Array.prototype.sx_splice = function (start, length, ...values) {
  if (length === 0) return []  //边界
  length = start + length > this.length - 1 ? this.length - start : length
    // start加删除数大于当前数组总长，则删除start之后全部内容
  const res = [], tempArr = [...this]
    //浅拷贝一份以备用
  for (let i = start; i < start + values.length; i++) {
    this[i] = values[i - start]
  }
    //正常添加 this[i] = values[i-start]
    //将values内容逐一添加至start开始的原数组
  this.length = start + values.length  //改变原数组长度
  if (values.length < length) {
    const cha = length - values.length
    console.log(cha)
    for (let i = start + values.length; i < tempArr.length; i++) {
      this[i] = tempArr[i + cha]
    }
    this.length = this.length - cha 
  }
    /*
        删除内容大于添加内容时取差值，从start+values.length开始，逐一将剩余元素补齐
        this[i] = tempArr[i+sub]  sub此时为差值
    */
  if (values.length > length) {
    for (let i = start + length; i < tempArr.length; i++) {
      this.push(tempArr[i])
    }
  }
    /*
        如果添加数量大于删除数，从start+end开始，将tempArr剩余元素追加至原数组
    */
  for (let i = start; i < start + length; i++) {
    res.push(tempArr[i])
  }
  return res
  //返回被替换掉的数据
}