时间戳

首页 > 解决方案 > 包含对象数组和字符串数组的深拷贝道具

javascript - 包含对象数组和字符串数组的深拷贝道具

问题描述

目标：

我需要在组件中读取和写入道具。

挑战：

  1. 道具是只读的。我相信深度应对/克隆会解决这个问题。
  2. 我不知道如何深度复制道具，因为它包含不同的变量类型，例如字符串数组和对象数组。

这些是变量：

var data = [

{ID: 5, First: "first", Middle: null, Last: "last", Job Listing ID: null, …},

{ID: 6, First: "first", Middle: null, Last: "last", Job Listing ID: null, …},

…

] 

var default_refine_toggle_display = [
   "ID",
   "CV",
   "C Letter",
   "NDA",
   "Photo",
   "Address",
   "First",
   "Middle",
   "Last",
   "Email",
   "Job Title",
   "Status",
 ]

 var fake_prop_change_name = {
   applicant_id: "ID",
   recruiter_id: "Recruiter ID",
   cover_letter_id: "C Letter",
   nda_id: "NDA",
   file_photo_id: "Photo",
   resume_cv_id: "CV",
   file_address: "Address",
   first_name: "First",
   middle_name: "Middle",
   last_name: "Last",
   gender: "Sex",
   personal_email: "Email",
   building_number: "Building #",
   street_number: "Street #",
   street_name: "Street Name",
   town_name: "Town Name",
   state: "State",
   country: "Country",
   applicant_status_id: "Status ID",
   status_datetime_change: "Change Datetime",
   why_should_we: "Why Should We",
   job_listings_id: "Job Listing ID",
   name: "Status",
   Job_title_Status: "Job Title",
   personal_email:"Email"
 }
 var column_order = ["applicant_id", "Status","Job_title_Status", 'first_name', "middle_name", "last_name", "personal_email"];
 var make_view_file = ["CV", "C Letter", "NDA","Photo","Address"]

这就是将这些变量传递给组件的方式：

<Component_table
  default_refine_toggle_display={default_refine_toggle_display}
  fake_prop_change_name={fake_prop_change_name}
  column_order={column_order}
  make_view_file={make_view_file}
  data={database_data['Job Applications']}
  />

我试过的

  1. var props_editable = Array.from(props)
  2. var props_editable = 道具

我正在尝试什么：

我在考虑可能单独深度克隆每个道具，然后将它们存储在一个新数组中。这样我就可以根据需要处理每个 prop 变量类型的深度克隆。

您对此有何看法？

我发现处理数组和对象对我来说需要大量的脑力，但似乎无法弄清楚这一点。

标签： javascriptarraysobject

解决方案

如果你想克隆一个数组，你可以使用 ES6 spread syntax。它可能有助于克隆数组和对象。

克隆对象数组

var data = [
  {
    ID: 5,
    First: "first",
    Middle: null,
    Last: "last",
    "Job Listing ID": null,
  },
  {
    ID: 6,
    First: "first",
    Middle: null,
    Last: "last",
    "Job Listing ID": null,
  },
];

const copyData = [...data];
console.log(copyData);

克隆一个对象

const obj = {
  name: "Praveen",
  address: {
    streetName: "Amphitheatre streer",
    blockNumber: 8,
    Country: "USA",
  },
};

const cloneObj = { ...obj };
console.log(obj);
console.log(cloneObj);

推荐阅读