Mevcut bir nesneye zarar vermek mümkün mü? (Javascript ES6)

Örneğin, iki nesnem varsa:

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

ve

var oof = {}

veI wanted to transfer the x vey values from foo to oof. Is there a way to do that using the es6 destructuring syntax?

belki de şöyle bir şey:

oof{x,y} = foo
74
Yıkıcı birçok örnek burada MDN'de , ama sorduğun şeyi görmüyorum.
katma yazar jfriend00, kaynak
Tüm özellikleri Object.assign (oof, foo) kopyalamak istiyorsanız
katma yazar elclanrs, kaynak
Hmm birini de bulamadım.
katma yazar majorBummer, kaynak
Object.assign olmayan iki satırlık bir çözüm için aşağıdaki cevabımı görün
katma yazar Zfalen, kaynak

13 cevap

Çirkin ve biraz tekrarlayan iken, yapabilirsiniz

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

foo nesnesinin iki değerini okuyacak ve bunları oof nesnesindeki ilgili konumlarına yazacaktır.

Şahsen ben hala okumayı tercih ederim

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

veya

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

gerçi.

41
katma
@ techguy2000 var oof = {}; 'dan sonra noktalı virgülü unuttun.
katma yazar loganfsmyth, kaynak
@loganfsmyth Teşekkürler! Fiddle'ı güncelledim: jsfiddle.net/7mh399ow/1
katma yazar techguy2000, kaynak
Birisi bana ilk önerinin nerede çalıştığını jsfiddle'da gösterebilir mi? Chrome'da burada çalışmıyor: jsfiddle.net/7mh399ow
katma yazar techguy2000, kaynak
Üçüncü örnek DRY'dir, ancak javascript'in normalde örtük olarak yaptığı anahtarlar olarak dizeleri kullanmanız gerekir. Bunun bundan daha az sıkıntı verici olduğuna ikna olmadım: const {x, y} = foo; const oof = {x, y};
katma yazar Jeff Lowery, kaynak
Alternatif ['x', 'y']. ForEach (prop => oof [prop] = foo [prop]); Gördüğüm gibi, şu ana kadar tek D.R.Y (kendinizi tekrar etmeyin). "DRY", eşleştirilecek birkaç anahtar durumunda gerçekten faydalı olacaktır. Yalnızca bir yeri güncellemeniz gerekir. Belki ben hatalıyım. Yine de teşekkürler!
katma yazar Vladimir Brasil, kaynak

Hayır, yok etme kısaltmalardaki üye ifadelerini desteklemiyor, şu anda yalnızca düz doğru adları destekliyor. Orada esdiscuss'ta konuşuldu hiçbir teklif ES6’ya giremez.

Object'i kullanabilirsiniz. Bununla birlikte .assign - eğer tüm özelliklere ihtiyacınız yoksa, yine de yapabilirsiniz.

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}
28
katma
@loganfsmyth Bu çok yararlı bir yorum imo olduğu gibi uygun bir cevap sunmalısınız.
katma yazar Sulliwane, kaynak
Asla! :-) .....
katma yazar T.J. Crowder, kaynak
@Sulliwane: Öyle yaptı (şimdi) . Bergi, muhtemelen Logan'ın gösterdiği gibi üye ifadelerini kullanabileceğinizi söyleyen cevabı güncellemek için en iyisidir. (Spesifikasyonun Nisan ve Haziran 2015 arasında bu kadar değiştiği gerçekten doğru mu?)
katma yazar T.J. Crowder, kaynak
Okuması çok zor, ancak teknik olarak ({x: oof.x, y: off.y} = foo); 'ı yapabilirsiniz. Bir anahtar ve değer sağlarsanız, yok etmek tüm sol taraftaki ifadelere izin verir.
katma yazar loganfsmyth, kaynak
@ T.J.Crowder Hayır, değiştiğini sanmıyorum, sanırım {oof.x, oof.y} = foo hakkında konuşuyordum. Ya da belki çok özlemiştim.
katma yazar Bergi, kaynak
@loganfsmyth, örneğiniz benim için en azından 4.2.2 düğümü ile yaptığım testlerde çalışmıyor. --harmony_destructuring etkinken. "SyntaxError: Beklenmeyen belirteç" görüyorum.
katma yazar jpierson, kaynak

IMO, aradığınızı başarmanın en kolay yoludur:

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

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

Basically, destructure into variables and then use the initializer shorthand to make a new object. No need for Object.assign

Bence bu en okunaklı yoldur zaten. İstediğiniz someObject listesinden tam olarak sahne seçimi yapabilirsiniz. Eğer var olan bir nesneniz varsa, sadece malzemeleri birleştirmek istediğinizde, bunun gibi bir şey yapın:

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

Bir başka, tartışmalı olarak daha temiz, yazmanın bir yolu:

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

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

Bunu yalnızca POST istekleri için kullanıyorum, burada yalnızca birkaç ayrı veri parçasına ihtiyacım var. Ancak, bunu yapmak için bir astar olması gerektiğine katılıyorum.

9
katma
Pragmatik bu yaklaşımı seviyorum.
katma yazar Jesse, kaynak
Yaptığım şey bu ama çok kuru değil. Bence bir çok insanın gerçekten ihtiyaç duyduğu şey, sadece bir anahtar özme işlevidir.
katma yazar jgmjgm, kaynak
jgmjgm evet, bir tane yapmak güzel olurdu ama sanırım bu da yazmak zor değil.
katma yazar Zfalen, kaynak

Bu tamamen mümkün. Sadece bir açıklamada değil.

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

(İfadenin etrafındaki parantezi not edin.) Ancak akılda tutulması okunaklı kod-golf oynamaktan daha önemlidir :)

Source: http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets

3
katma

BabelJS eklentisi

BabelJS kullanıyorsanız artık eklentimi etkinleştirebilirsiniz babel-plugin- dönüşümü-nesne-yıkımdan ( npm'ye bakın) kurulum ve kullanım paketi ).

Bu konu başlığında açıklanan aynı sorunu vardı ve benim için yıkıcı bir ifadeden bir nesne oluştururken, özellikle de bir özelliği yeniden adlandırmanız, eklemeniz veya kaldırmanız gerektiğinde çok yorucuydu. Bu eklenti ile bu tür senaryoları sürdürmek sizin için çok daha kolay.

Nesne örneği

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

olarak yazılabilir:

let myTest = { test1, test3 } = myObject;

Dizi örneği

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

olarak yazılabilir:

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

Bunun için yeniden yapılanmayı kullanabilirsiniz:

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

Veya oof'un değerleri varsa, her iki nesneyi de birleştirin:

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

KURU

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 }

veya

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

Bu yöntem ile geldim:

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

Bu şekilde kullanabilirsiniz:

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

yani, istediğiniz özellikleri seçip bunları yeni bir nesneye koyabilirsiniz. _.pick öğelerinin aksine, bunları aynı zamanda.

Aksesuarları mevcut bir nesneye kopyalamak istiyorsanız, sadece dest argümanını ayarlayın.

0
katma

Bu biraz aldatma, ama böyle bir şey yapabilirsin ...

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

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

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

Uygulamada, nadiren olsa kullanmak isteyeceğini düşünüyorum. Aşağıdaki çok daha açık ... ama neredeyse eğlenceli değil.

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

Prototip ile mucking içeren tamamen farklı bir başka rota (şimdi dikkat ...):

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
katma

Bu, krom içerisinde çalışır 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"
}
0
katma
Bu sadece JS'nin nasıl kafa karıştırıcı olabileceğini göstermek için saklanmaya değer.
katma yazar jgmjgm, kaynak
@ Theo.T iyi yakalamak. bu bir serseri, başka bir yol bulmam gerekecek
katma yazar user1577390, kaynak
Ne yazık ki oof gibi görünüyor, yalnızca foo referansını alır ve tüm tahribatı atlar (en azından Chrome'da). oof === foo ve let oof = {x} = foo , ancak {x, y} döndürür
katma yazar Theo.T, kaynak

Bu, bulabildiğim en okunaklı ve en kısa çözümdür:

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

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

console.log(newProps);

It will output { isValidDate: 'yes' }

Bir gün let newProps = ({isValidDate} = sahne) gibi bir şey söyleyebilmek güzel olurdu ama ne yazık ki ES6'nın desteklediği bir şey değil.

0
katma

Yıkılan nesneyi bir ok işlevinde döndürebilir ve onu bir değişkene atamak için Object.assign() öğesini kullanabilirsiniz.

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

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