Sebagai contoh jika saya memiliki dua objek:

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

dan

var oof = {}

dan saya ingin mentransfer nilai x dan y dari foo ke oof. Apakah ada cara untuk melakukan itu menggunakan sintaksis esstructuring es6?

mungkin sesuatu seperti:

oof{x,y} = foo

Meski jelek dan sedikit berulang, Anda bisa melakukannya

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

yang akan membaca dua nilai fooobjek, dan menuliskannya ke lokasi masing-masing pada oofobjek.

Secara pribadi saya masih lebih suka membaca

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

atau

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

meskipun.

Tidak, perusakan tidak mendukung ekspresi anggota di singkatan tetapi hanya propertynames biasa pada saat ini. Sudah ada pembicaraan tentang esdiscuss, tetapi tidak ada proposal yang akan masuk ke ES6.

Anda mungkin dapat menggunakan Object.assignnamun - jika Anda tidak membutuhkan semua properti sendiri, Anda masih bisa melakukannya

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}

IMO ini adalah cara termudah untuk mencapai apa yang Anda cari:

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

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

Pada dasarnya, perusakan menjadi variabel dan kemudian gunakan singkatan initializer untuk membuat objek baru. Tidak perluObject.assign

Saya pikir ini adalah cara yang paling mudah dibaca. Anda dapat memilih alat peraga yang tepat sesuai someObjectyang Anda inginkan. Jika Anda memiliki objek yang sudah ada dan ingin digabungkan dengan props, lakukan sesuatu seperti ini:

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

Cara lain, yang bisa dibilang lebih bersih, untuk menulisnya adalah:

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

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

Saya menggunakan ini untuk POSTbanyak permintaan di mana saya hanya perlu beberapa data diskrit. Tapi, saya setuju harus ada satu liner untuk melakukan ini.

EDIT: PS - Saya baru-baru ini belajar Anda dapat menggunakan ultra destrukturisasi pada langkah pertama untuk menarik nilai bersarang dari objek kompleks! Misalnya...

let { prop1, 
      prop2: { somethingDeeper }, 
      prop3: { 
         nested1: {
            nested2
         } 
      } = someObject;
let data = { prop1, somethingDeeper, nested2 };

Plus, Anda bisa menggunakan operator spread alih-alih Object.assign ketika membuat objek baru:

const { prop1, prop2, prop3 } = someObject;
let finalObject = {...otherObject, prop1, prop2, prop3 };

Atau...

const { prop1, prop2, prop3 } = someObject;
const intermediateObject = { prop1, prop2, prop3 };
const finalObject = {...otherObject, ...intermediateObject };

Selain Object.assignada sintaks penyebaran objek yang merupakan proposal Tahap 2 untuk ECMAScript.

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

var oof = { z: "z" }

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

console.log(oof)

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

Tetapi untuk menggunakan fitur ini, Anda perlu menggunakan stage-2atau transform-object-rest-spreadplugin untuk babel. Berikut ini adalah demo tentang babel denganstage-2

Plugin BabelJS

Jika Anda menggunakan BabelJS sekarang Anda dapat mengaktifkan plugin saya babel-plugin-transform-object-from-destructuring( lihat paket npm untuk instalasi dan penggunaan ).

Saya memiliki masalah yang sama yang dijelaskan di utas ini dan bagi saya itu sangat melelahkan ketika Anda membuat objek dari ekspresi yang merusak, terutama ketika Anda harus mengganti nama, menambah atau menghapus properti. Dengan plugin ini, mempertahankan skenario seperti itu akan jauh lebih mudah bagi Anda.

Contoh objek

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

dapat ditulis sebagai:

let myTest = { test1, test3 } = myObject;

Contoh array

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

dapat ditulis sebagai:

let myTest = [ test1, , test3 ] = myArray;

Sangat mungkin. Hanya saja tidak dalam satu pernyataan.

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

(Perhatikan tanda kurung di sekitar pernyataan.) Namun perlu diingat keterbacaan lebih penting daripada kode-golf :).

Sumber: http://exploringjs.com/es6/ch_destrukturisasi.html#sec_assignment-targets

Anda bisa menggunakan restrukturisasi untuk itu seperti ini:

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

Atau menggabungkan kedua objek jika memiliki nilai:

const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)

Anda bisa mengembalikan objek yang dirusak dalam fungsi panah, dan menggunakan Object.assign () untuk menetapkannya ke variabel.

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

const oof = Object.assign({}, () => ({ x, y } = foo));

KERING

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 }

atau

console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});

Anda dapat merusak objek yang ditugaskan langsung ke atribut objek lain.

Contoh kerja:

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

Anda dapat bekerja dengan merusak menggunakan variabel dengan nama atribut objek yang sama yang ingin Anda tangkap, dengan cara ini Anda tidak perlu melakukannya:

let user = { name: 'Mike' }
let { name: name } = user;

Gunakan cara ini:

let user = { name: 'Mike' }
let { name } = user;

Cara yang sama Anda dapat mengatur nilai baru ke struktur objek jika mereka memiliki nama atribut yang sama.

Lihatlah contoh kerja ini:

// 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

Ini bekerja di 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"
}

Saya datang dengan metode ini:

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);
};

Yang bisa Anda gunakan seperti ini:

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

yaitu, Anda dapat memilih properti mana yang Anda inginkan dan memasukkannya ke objek baru. Tidak seperti itu_.pick Anda, Anda juga dapat mengubah nama mereka secara bersamaan.

Jika Anda ingin menyalin alat peraga ke objek yang ada, cukup setel destarg.

Ini agak curang, tetapi Anda dapat melakukan sesuatu seperti ini ...

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

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

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

Dalam praktiknya, saya pikir Anda jarang ingin menggunakannya. Berikut ini JAUH lebih jelas ... tetapi tidak menyenangkan.

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

Rute lain yang sama sekali berbeda, yang mencakup pengikatan dengan prototipe (hati-hati sekarang ...):

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' }

Ini adalah solusi yang paling mudah dibaca dan paling singkat yang bisa saya buat:

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

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

console.log(newProps);

Ini akan menampilkan { isValidDate: 'yes' }

Akan menyenangkan untuk suatu hari bisa mengatakan sesuatu seperti let newProps = ({ isValidDate } = props)tapi sayangnya itu bukan sesuatu yang didukung ES6.

Ini bukan cara yang indah, saya juga tidak merekomendasikannya, tetapi mungkin seperti ini, hanya untuk pengetahuan.

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"}

Anda dapat menggunakan metode kelas JSON untuk mencapainya sebagai berikut

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

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

Pass properti yang perlu ditambahkan ke objek yang dihasilkan sebagai argumen kedua stringifyberfungsi dalam format array.

MDN Doc untuk JSON.stringify