Можно ли деструктурировать на существующий объект? (В JavaScript ES6 в)

Например, если у меня есть два объекта: 

var foo = {
  x: "bar",
  y: "baz"
}

и 

var oof = {}

и я хотел бы передать значения X и y из Foo в ооф. Есть ли способ сделать это, используя синтаксис ES6 в деструктурируется?

возможно, что-то вроде: 

oof{x,y} = foo
Bergi
Редактировал вопрос 14-го апреля 2015 в 7:43
Программирование
javascript ecmascript-6 destructuring
14-го апреля 2015 в 6:37
15 просмотров
Комментарии к вопросу (4)
Решение

Хотя некрасиво и немного повторяющиеся, вы можете сделать

({x: oof.x, y: oof.y} = foo);

который будет читать два значения класса Foo объект, и записать их в соответствующие места на объект ооф.

Лично я'd по-прежнему достаточно прочитал

oof.x = foo.x;
oof.y = foo.y;

или

['x', 'y'].forEach(prop => oof[prop] = foo[prop]);

хотя.

loganfsmyth
Редактировал ответ 7-го сентября 2018 в 5:22
Комментарии (7)

Нет, деконструкция не поддерживает выражения членов в shorthands, но только простой propertynames в настоящее время. Есть разговоры о таких на esdiscuss, но никаких предложений в ЕС6.

Вы могли бы использовать Object.assign однако - если вы Don'т нужна все собственные свойства, вы все еще можете сделать

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}
Bergi
Редактировал ответ 12-го ноября 2018 в 10:32
Комментарии (4)

ИМО это самый простой способ для достижения того, что вы'вновь ищу:

let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };

  // data === { prop1: someObject.prop1, ... }

В основном, деструктурировать в переменные, а затем использовать инициализатор стенографии, чтобы сделать новый объект. Нет необходимости для объекта`.назначить

Я думаю, это самый четкий способ, в любом случае. Настоящим вы можете выбрать точную реквизит из someObject, что вы хотите. Если у вас есть существующий объект, вы просто хотите объединить в реквизит, сделать что-то вроде этого:

let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
    // Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
    // Merges into otherObject

Еще один, пожалуй, чище, способ, чтобы написать это:

let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };

// Merges your selected props into otherObject
Object.assign(otherObject, newObject);

Я использую это для POST запросов много, где мне нужно всего несколько штук дискретных данных. Но, я согласен, должен быть один лайнер для этого.

Zfalen
Редактировал ответ 9-го февраля 2018 в 12:15
Комментарии (3)

Другие, чем объект.назначить там объект распространения синтаксис, который является этапом предложение 2 для ECMAScript.

var foo = {
  x: "bar",
  y: "baz"
}

var oof = { z: "z" }

oof =  {...oof, ...foo }

console.log(oof)

/* result 
{
  "x": "bar",
  "y": "baz",
  "z": "z"
}
*/

Но для использования этой функции вы должны использовать Этап 2 или преобразования объекта-остальное-выкладываю плагин для Бабеля. Вот это [Demo на Бабеля сЭтап 2`]2

Комментарии (1)

Плагин BabelJS

Если вы используете BabelJS Теперь вы можете активировать плагин Вавилон-плагин-преобразовывать объект из-деконструкция (см. НПМ пакет для установки и использования).

У меня была такая же проблема описана в этой теме и для меня это было очень утомительно, когда вы создаете объект из деструктурируется выражение, особенно, когда вы должны переименовать, добавить или удалить свойство. С помощью этого плагина поддержание таких случаях становится гораздо легче.

Объекта## пример

let myObject = {
  test1: "stringTest1",
  test2: "stringTest2",
  test3: "stringTest3"
};
let { test1, test3 } = myObject,
  myTest = { test1, test3 };

может быть записан как:

let myTest = { test1, test3 } = myObject;

Примеру выбора

let myArray = ["stringTest1", "stringTest2", "stringTest3"];
let [ test1, , test3 ] = myArray,
  myTest = [ test1, test3 ];

может быть записан как:

let myTest = [ test1, , test3 ] = myArray;
Комментарии (1)

Это's совершенно возможно. Просто не в одном заявлении.

var foo = {
    x: "bar",
    y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}

(Отметим в скобках рядом с оператором.) Но имейте в виду удобочитаемость является более важным, чем код-гольф :).

Источник: http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets

Hampus Ahlgren
Редактировал ответ 14-го мая 2018 в 11:22
Комментарии (0)

Вы можете просто использовать перестройку для этого такой:

const foo = {x:"a", y:"b"};
const {...oof} = foo; // {x:"a", y:"b"}

Или объединить оба объекта, если ооф имеет значения:

const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)
Комментарии (4)

Вы можете вернуть объект деструктурированных в функции стрелочку, и объект использования.назначение (), чтобы присвоить его переменной.

const foo = {
  x: "bar",
  y: "baz"
}

const oof = Object.assign({}, () => ({ x, y } = foo));
Комментарии (0)

Сухой

var a = {a1:1, a2: 2, a3: 3};
var b = {b1:1, b2: 2, b3: 3};

const newVar = (() => ({a1, a2, b1, b2})).bind({...a, ...b});
const val = newVar();
console.log({...val});
// print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }

или

console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});
Комментарии (0)

Это самый четкий и короткий решение, которое я мог придумать:

let props = { 
  isValidDate: 'yes',
  badProp: 'no!',
};

let { isValidDate } = props;
let newProps = { isValidDate };

console.log(newProps);

Он будет выводить { isValidDate: 'Да' }

Было бы неплохо, чтобы однажды быть в состоянии сказать что-то вроде `Давай newProps = ({ isValidDate } = реквизит) - но к сожалению это не то, ЕС6 поддерживает.

Комментарии (0)

Я придумал этот способ:

exports.pick = function pick(src, props, dest={}) {
    return Object.keys(props).reduce((d,p) => {
        if(typeof props[p] === 'string') {
            d[props[p]] = src[p];
        } else if(props[p]) {
            d[p] = src[p];
        }
        return d;
    },dest);
};

Которые вы можете использовать такой:

let cbEvents = util.pick(this.props.events, {onFocus:1,onBlur:1,onCheck:'onChange'});
let wrapEvents = util.pick(this.props.events, {onMouseEnter:1,onMouseLeave:1});

т. е., вы можете выбрать, какие свойства вы хотите, и положить их в новый объект. В отличие от _.выберите вы также можете переименовать их в то же время.

Если вы хотите скопировать реквизит на существующий объект, просто установите назначение арг.

Комментарии (0)

Это работает в Chrome 53.0.2785.89

let foo = {
  x: "bar",
  y: "baz"
};

let oof = {x, y} = foo;

console.log(`oof: ${JSON.stringify(oof)});

//prints
oof: {
  "x": "bar",
  "y": "baz"
}
Комментарии (3)

Это's не красивый способ, и я рекомендую его, но это'ы можно вот так, просто для знания.

const myObject = {
  name: 'foo',
  surname: 'bar',
  year: 2018
};

const newObject = ['name', 'surname'].reduce(
  (prev, curr) => (prev[curr] = myObject[curr], prev),
  {},
);

console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}
Sornii
Редактировал ответ 7-го сентября 2018 в 12:15
Комментарии (0)

Вы можете уничтожить объект присвоения непосредственно к другой атрибут объекта.

Рабочий пример:

в 

let user = {};
[user.name, user.username] = "Stack Overflow".split(' ');
document.write(`
1st attr: ${user.name} <br /> 
2nd attr: ${user.username}`);

в

Вы можете работать с уничтожением используя переменные с тем же именем атрибута объекта, который вы хотите поймать, таким образом, вы Дон'т нужно сделать:

пусть пользователь = { имя: &#39;Майк&#39; } пусть { имя } = пользователь;

Использовать этот способ:

пусть пользователь = { имя: &#39;Майк&#39; } пусть { имя } = пользователь;

Таким же образом вы можете установить новые значения для структуры объектов, если они имеют одинаковое имя атрибута.

Посмотрите этот рабочий пример:

в 

// The object to be destructed
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// Destructing
let {width: w, height: h, title} = options;

// Feedback
document.write(title + "<br />");  // Menu
document.write(w + "<br />");      // 100
document.write(h);                 // 200

в

Комментарии (0)

Это своего рода обман, но вы можете сделать что-то подобное...

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject = (({ hello, your }) => {
  return { hello, your };
})(originalObject);

console.log(partialObject); // ​​​​​{ hello: 'nurse', your: 'mom' }​​​​​

На практике, я думаю, что вы'г редко хочу использовать это, хотя. Следующий гораздо более понятна... но не так весело.

const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};

Другой, совершенно другой маршрут, который включает возни с прототипом (осторожно...):

if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) => {
      destObj[prop] = this[prop];

      return destObj;
    }, {});
  }
}

const originalObject = {
  hello: 'nurse',
  meaningOfLife: 42,
  your: 'mom',
};

const partialObject2 = originalObject.pluck('hello', 'your');

console.log(partialObject2); // { hello: 'nurse', your: 'mom' }
Комментарии (0)

Вы можете использовать методы JSON в класс, чтобы достичь его следующим образом

const foo = {
   x: "bar",
   y: "baz"
};

const oof = JSON.parse(JSON.stringify(foo, ['x','y']));
// output -> {x: "bar", y: "baz"}

Свойства проходить, что нужно добавить в полученный объект в качестве второго аргумента функции преобразовать в строки в формате массива.

МДН док для JSON.преобразовать в строки

Bharathvaj Ganesan
Редактировал ответ 30-го октября 2019 в 2:12
Комментарии (0)