关于js中的对象的深拷贝常用的方式

<template>
  <div id="app">

    <!-- 表格部分 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="home" label="家乡"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="primary" plain size="small" @click="editRow(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框中 表单部分 -->
    <el-dialog
      title="编辑表格"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model.trim="form.age"></el-input>
        </el-form-item>
        <el-form-item label="家乡">
          <el-input v-model.trim="form.home"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
// 引入lodash函数工具库
import _ from 'lodash'
export default {
  components: {},
  data() {
    return {
      // 表格的数据
      tableData: [
        {
          name: "孙悟空",
          age: "500",
          home: "花果山水帘洞",
        },
        {
          name: "猪八戒",
          age: "88",
          home: "高老庄",
        },
      ],
      dialogVisible: false,
      // 表单的数据
      form: {
        name: "",
        age: "",
        home: "",
      },
    };
  },
  methods: {
    editRow(rowData) {
      console.log("rowData", this.form);
      this.dialogVisible = true;

      // // 不用深拷贝，直接赋值
      // this.form = rowData

      // // 深拷贝方式一 之 JSON方法
      // this.form = JSON.parse(JSON.stringify(rowData));

      // // 深拷贝方式二 之 Object.assign方法
      // this.form = Object.assign({},rowData)

      // // 深拷贝方式三 之 拓展运算符
      // let { ...newObj } = rowData
      // this.form = newObj

      // // 深拷贝方式四 之 lodash函数库
      this.form = _.cloneDeep(rowData) // 调用lodash的cloneDeep方法也可以做深拷贝

    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
}
/deep/ .el-dialog {
  margin-top: 30vh !important;
}
</style>

let arr = ['孙悟空','猪八戒','沙和尚','唐僧']

// 方式一slice
let newArr = arr.slice(0)

// 方式二concat
let newArr = arr.concat()

// 方式三...拓展运算符
let [ ...newArr ] = arr

// 方式四
let newArr = JSON.parse(JSON.stringify(arr))

 let arr = [
    {
        name: '孙悟空',
        age: 500,
        skill: ['筋斗云', '火眼金睛']
    },
    {
        name: '猪八戒',
        age: 88,
        skill: ['九齿钉耙', '36变']
    },
]

function deepClone(params) {
    // 如果数组类型数据
    if (Array.isArray(params)) {
        let newnew = []
        for (let i = 0; i < params.length; i++) {
            newnew[i] = deepClone(params[i]) // 递归调用克隆
        }
        return newnew // 克隆完以后，再返回出结果
    }
    // 如果是对象类型数据
    if (Object.prototype.toString.call(params) === '[object Object]') {
        let newnew = {}
        for (const key in params) {
            newnew[key] = deepClone(params[key]) // 递归调用克隆
        }
        return newnew // 克隆完以后，再返回出结果
    }
    // 如果是普通数据类型
    return params 
}
console.log( deepClone(arr) );