ES6 中的破坏和/或质量分配答案

【问题标题】：Destructing and/or mass assigning in ES6ES6 中的破坏和/或质量分配
【发布时间】：2018-05-31 00:37:43
【问题描述】：

我有 2 个数据源。来源之一是数据可接受的“模板”。但是，第二个来源可能有大量我不关心的数据（JSON 中有 100 多个属性）。以下是架构：

// Only store the data we care about.  Only a small subset of
// data that I need for this particular dataset.
state = {
    isDirty: false,
    data: {
        name: '',
        address: '',
        city: '',
        state: ''
    }
 }

第二个来源将具有上述数据模式中的 4 个属性（还有更多我不关心的属性）。目前，我是这样分配它们的：

let updatedData = {};

for(const key in this.state.data) {
  updatedData[key] = someDataSource[key];
}

this.state.data = updatedData;

使用 ES6，也许是破坏，有没有更好的方法来批量分配像这样的变量？

再次感谢！

编辑

添加以澄清循环后的分配。

【问题讨论】：

为什么不直接使用Object.assign()？但是，如果有很多您不关心的属性，我不确定您为什么要尝试复制所有属性。制作一个您关心的属性数组并复制这些属性或使用解构指定这些属性可能会更好。
我认为for 循环非常好，如果不编写自己的函数，没有很好的方法将一个对象的某些属性分解为另一个对象 - 这里经常出现的问题
但是，@CertainPerformance - OP 想要所有 state.data ...而不是一些 state.data
let updatedData = Object.keys(this.state.data).reduce((o, k) => (o[k] = someDataSource[k], o), {});。我敢打赌for 循环现在看起来还不错。
因为{...state.data}; 是“第三阶段”——也许是let updatedData = Object.assign({},state.data);

标签： javascript ecmascript-6

【解决方案1】：

Lodash pick 可以用来选择特定的键，或者帮助函数可以用于相同的目的：

const pick = (obj, keys) => Object.keys(obj)
    .filter((key) => keys.indexOf(key) >= 0)
    .reduce(
        (newObj, key) => Object.assign(newObj, { [key]: obj[key] }),
        {}
    );

这已在许多相关问题中提出。这个问题的具体内容是：

this.state.data = pick(someDataSource, Object.keys(this.state.data));

【讨论】：

【解决方案2】：

属性可以在JSON.parse reviver中排除和修改：

var o = JSON.parse('{"a":1, "b":2}', (k, v) => k === 'a' ? void 0 : k === 'b' ? 3 : v)

console.log( o )

【讨论】：

【解决方案3】：

您可以做的一个技巧（技巧，因为它需要吞下错误）是使用不可扩展的对象，使用Object.preventExtensions，然后使用Object.assign 填充数据（ 在try/catch 块中）。

// Only store the data we care about.  Only a small subset of
// data that I need for this particular dataset.
state = {
    isDirty: false,
    data: {
        name: '',
        address: '',
        city: '',
        state: ''
    }
 }

const newData = {
    name:'name',
    address:'address',
    city:'city',
    state:'state',
    phone:'phone',
    zip:'zip'
}

const updatedData = Object.preventExtensions({...state.data});

try{
   Object.assign(updatedData, newData);
} catch(throwaway){};

console.log(updatedData);

并作为一个可重复使用的函数

function schemaMerge(schema, data) {
  const mergedData = Object.preventExtensions({...schema});

  try {
    Object.assign(mergedData, data);
  } catch (throwaway) {};
  
  return ({...mergedData}); // create a new object from the merged one so that it no longer is extensionless
}

// Only store the data we care about.  Only a small subset of
// data that I need for this particular dataset.
state = {
  isDirty: false,
  data: {
    name: '',
    address: '',
    city: '',
    state: ''
  }
}

const newData = {
  name: 'name',
  address: 'address',
  city: 'city',
  state: 'state',
  phone: 'phone',
  zip: 'zip'
}


const updatedData = schemaMerge(state.data, newData);

state.data = updatedData;

console.log(state.data);

【讨论】：