20221008笔记数组对象深拷贝和浅拷贝

原创已于 2022-11-04 11:58:15 修改 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-10-08 15:33:26 首次发布

笔记专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何解决el-dialog中表单滚动条不置顶的问题，并提供多种数组和对象深拷贝的方法，同时分享了处理数据和前端分页等实用技巧。

el-dialog里面的表单，每次点开，滚动条不置顶，设置了清除校验也不行，搜集资料，解决办法：

    <el-dialog
      title="查看详情"
      :visible.sync="detailVisible"
      ref="dialogRef"
      width="600px"
      top="12vh"
      class="dialog-class"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
**append-to-body="true"**可以使滚动条自动置顶。

在这里插入图片描述

父组件清除子组件表单校验：给父组件添加ref；

          // if (this.$refs.serviceRef) {
          //   this.$refs.serviceRef.$refs.surviceFormRef.resetFields();
          // }

js数组和对象深拷贝
1、数组深拷贝
方法一：for循环

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

方法二：slice方法

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)

方法三：concat方法

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)

方法四：ES6扩展运算符实现

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)

推荐此方法；
2、对象深拷贝

let object = {
a: 1,
b: 2,
c: 3
};

let object2 =JSON.parse( JSON.stringify(object));
object2.a=11;
console.log(object1,object2);
// Object { a: 1, b: 2, c: 3 } Object { a: 11, b: 2, c: 3 }

// 第一步：用parentId做一个映射
    const obj = {}
    data.forEach(item => {
      const id = item.parentId
      //分组，将相同父级的对象放到同一个对象中
      obj[id] ? obj[id].push(item) : obj[id] = [item]
    })
    //第二步：处理成数组 - 没有子集去掉children
    const newData = []
    Object.keys(obj).forEach(key => {
      //①拿出每一个分组的数组
      const parent = obj[key]
      //首先map()出子集的menuId，然后filter()过滤掉子集为null的子集，自己在控制台打印看一遍就懂了
      const children = parent.filter(item => item.menuId).map(son => ({ menuName: son.menuName, menuId: son.menuId }))
      //判断children长度，决定是否添加到父级中，为0就不添加
      const sonObj = children.length ? {
        parentName: parent[0].parentName,
        parentId: parent[0].parentId,
        children
      } : {
        parentName: parent[0].parentName,
        parentId: parent[0].parentId
      }
      newData.push(sonObj)
    })

前端分页：

tableData = res.data.slice((pageObj.currentPage-1)*pageObj.pageSize,pageObj.currentPage*pageObj.pageSize)

获取cookie

    getCookie(cookie_name) {
        var allcookies = document.cookie;
        //索引长度，开始索引的位置
        var cookie_pos = allcookies.indexOf(cookie_name);
        // 如果找到了索引，就代表cookie存在,否则不存在
        if (cookie_pos != -1) {
            // 把cookie_pos放在值的开始，只要给值加1即可
            //计算取cookie值得开始索引，加的1为“=”
            cookie_pos = cookie_pos + cookie_name.length + 1;
            //计算取cookie值得结束索引
            var cookie_end = allcookies.indexOf(";", cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allcookies.length;
            }
            //得到想要的cookie的值
            var value = unescape(allcookies.substring(cookie_pos, cookie_end));
        }
        return value;
    }