क्या किसी मौजूदा वस्तु पर विनाश संभव है? (जावास्क्रिप्ट ईएस 6)

Question

उदाहरण के लिए यदि मेरे पास दो वस्तुएं हैं:

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

तथा

var oof = {}

और मैं f से oof में x और y मान स्थानांतरित करना चाहता था। वहाँ एक तरीका है कि es6 विनाशकारी सिंटैक्स का उपयोग कर रहा है?

शायद कुछ इस तरह:

oof{x,y} = foo

Comments

यदि आप सभी गुणों को कॉपी करना चाहते हैंObject.assign(oof, foo)

— elclanrs

एमडीएन पर बहुत सारे विनाशकारी उदाहरण यहां दिए गए हैं , लेकिन मैं वह नहीं देखता, जिसके बारे में आप पूछ रहे हैं।

— jfriend00

हम्म मैं एक भी नहीं मिला ..

— प्रमुख

नीचे एक दो लाइन समाधान के लिए मेरा जवाब देखेंObject.assign

— ज़फलेन

Answer 1

जबकि बदसूरत और थोड़ा दोहराव, आप कर सकते हैं

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

जो fooऑब्जेक्ट के दो मूल्यों को पढ़ेगा , और उन्हें oofऑब्जेक्ट पर उनके संबंधित स्थानों पर लिख देगा ।

व्यक्तिगत रूप से मैं अभी भी पढ़ा होगा

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

या

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

हालांकि।

Comments

वैकल्पिक ['x', 'y']। forEach (prop => oof [prop] = foo [prop]); जैसा कि मैं देख रहा हूं, अब तक केवल एक ही DRY (खुद को दोहराना नहीं) है। "DRY" वास्तव में मैप की जाने वाली कई चाबियों के मामले में उपयोगी होगा। आपको केवल एक जगह अपडेट करना होगा। शायद मैं गलत हूँ। फिर भी धन्यवाद!

— व्लादिमीर ब्रासील

तीसरा उदाहरण DRY है, लेकिन आपको स्ट्रिंग्स को कुंजियों के रूप में उपयोग करना होगा, जो जावास्क्रिप्ट सामान्य रूप से निहित है। यकीन नहीं है कि यह उपद्रव से कम है: कॉन्स्ट {x, y} = फू; const oof = {x, y};

— जेफ लोरी

क्या कोई मुझे jsfiddle में दिखा सकता है जहां पहला सुझाव काम करता है? यह क्रोम पर यहां काम नहीं कर रहा है: jsfiddle.net/7mh399ow

— techguy2000

@ Techguy2000 आप अर्धविराम के बाद भूल गए var oof = {};।

— loganfsmyth

पहले कोड में, नहीं होना चाहिए ({x: oof.x, y: oof.y} = foo)? मुझे लगता है कि आपने ओफ़ में एक अतिरिक्त च लगाया है ।

— सोर्नी

Answer 2

नहीं, विनाशकारी शॉर्टहैंड्स में सदस्य भावों का समर्थन नहीं करता है, लेकिन वर्तमान समय में केवल सादे संपत्ति के नाम हैं। वहाँ वार्ता किया गया है esdiscuss पर के बारे में इस तरह के, लेकिन कोई प्रस्तावों ES6 में कर देगा।

Object.assignहालांकि आप उपयोग करने में सक्षम हो सकते हैं - यदि आपको सभी स्वयं के गुणों की आवश्यकता नहीं है, तो आप अभी भी कर सकते हैं

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

Comments

@loganfsmyth, आपका उदाहरण मेरे लिए कम से कम नोड 4.2.2 के साथ मेरे परीक्षणों में काम नहीं कर रहा है। --harmony_destructuringसक्षम के साथ । मैं देख रहा हूँ "SyntaxError: अप्रत्याशित टोकन।"

— जिपरसन

@loganfsmyth को आपको उचित उत्तर प्रस्तुत करना चाहिए क्योंकि यह एक बहुत ही उपयोगी टिप्पणी है।

— सुलिवन

@ सुलिवन: उन्होंने ऐसा (अब) किया है । बर्गी, शायद यह जवाब देने के लिए सबसे अच्छा होगा कि आप लॉगऑन द्वारा दिखाए गए सदस्य अभिव्यक्तियों का उपयोग कर सकते हैं। (क्या यह वास्तव में सही है कि अप्रैल और जून 2015 के बीच यह कल्पना बहुत बदल गई है?)

— टीजे क्राउडर

@TJCrowder नहीं, मुझे नहीं लगता कि यह बदल गया है, मुझे लगता है कि मैं इसके बारे में बात कर रहा था {oof.x, oof.y} = foo। या शायद मैं वास्तव में इसे याद किया था।

— बरगी

Answer 3

IMO यह सबसे आसान तरीका है जिसे आप खोज रहे हैं:

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

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

मूल रूप से, चर में विनाश और फिर एक नई वस्तु बनाने के लिए इनिशलाइज़र शॉर्टहैंड का उपयोग करें। की कोई ज़रूरत नहींObject.assign

मुझे लगता है कि यह सबसे पठनीय तरीका है, वैसे भी। आप इसके द्वारा सटीक प्रॉप्स का चयन कर सकते हैं 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अनुरोधों के लिए इसका उपयोग करता हूं जहां मुझे केवल असतत डेटा के कुछ टुकड़े चाहिए। लेकिन, मैं मानता हूं कि ऐसा करने के लिए एक लाइनर होना चाहिए।

संपादित करें: PS - मैंने हाल ही में सीखा है कि आप जटिल वस्तुओं में से नेस्टेड मानों को खींचने के लिए पहले चरण में अल्ट्रा डिस्ट्रक्टुरिंग का उपयोग कर सकते हैं! उदाहरण के लिए...

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

इसके अलावा, आप ऑब्जेक्ट के बजाय प्रसार ऑपरेटर का उपयोग कर सकते हैं। एक नई वस्तु बनाते समय असाइन करें:

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

या ...

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

Comments

मुझे यह दृष्टिकोण, व्यावहारिक लगता है।

— जेसी

यह वही है जो मैं करता हूं लेकिन यह बहुत सूखा नहीं है। मुझे लगता है कि वास्तव में बहुत सारे लोगों को क्या जरूरत है सिर्फ एक निकालने की कुंजी है।

— jgmjgm

@jgmjgm हाँ, यह अच्छा होगा कि एक का निर्माण किया जाए, लेकिन मुझे लगता है कि इतना कठिन भी नहीं है कि वह लिख सके।

— Zfalen

Answer 4

अन्य की तुलना में Object.assignहै वस्तु प्रसार वाक्य रचना जो ECMAScript के लिए एक स्टेज 2 प्रस्ताव है।

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

var oof = { z: "z" }

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

console.log(oof)

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

लेकिन इस सुविधा का उपयोग करने के लिए आपको बेबल का उपयोग stage-2या transform-object-rest-spreadप्लगइन करना होगा। यहाँ के साथ babel पर एक डेमो हैstage-2

Comments

यह वास्तव में मौजूदा ऑब्जेक्ट पर गुण सेट नहीं करता है, बल्कि एक नई ऑब्जेक्ट बनाता है जिसमें दोनों के सभी गुण हैं।

— मैट ब्राउन

Answer 5

BabelJS प्लगइन

यदि आप BabelJS का उपयोग कर रहे हैं, तो आप अब मेरे प्लगइन को सक्रिय कर सकते हैं babel-plugin-transform-object-from-destructuring( स्थापना और उपयोग के लिए npm पैकेज देखें) )।

मेरे पास इस धागे में वर्णित एक ही मुद्दा था और मेरे लिए यह बहुत ही थकाऊ था जब आप एक विनाशकारी अभिव्यक्ति से एक वस्तु बनाते हैं, खासकर जब आपको एक संपत्ति का नाम बदलना, जोड़ना या निकालना होता है। इस प्लगइन को बनाए रखने से ऐसे परिदृश्य आपके लिए और अधिक आसान हो जाते हैं।

वस्तु उदाहरण

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;

Comments

यह वही है जो मैं चाहता था। धन्यवाद!

— अभिवादन

let myTest = { test1, test3 } = myObject;काम नहीं करता

— ईटडोकू

Answer 6

यह पूरी तरह से संभव है। सिर्फ एक बयान में नहीं।

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

Answer 7

आप बस इस तरह के लिए पुनर्गठन का उपयोग कर सकते हैं:

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)

Comments

मुझे लगता है कि यह पहला मामला वही है जिसकी मुझे तलाश थी। मैंने इसे क्रोम कंसोल में आज़माया और यह काम करने लगता है। चीयर्स! @campsafari

— majorBummer

@majorBummer अंत में आपका कॉल, लेकिन मैं वास्तव में आपके प्रश्न का उत्तर नहीं देने के लिए दृष्टिकोण पर विचार करूंगा, क्योंकि ये दोनों नई वस्तुओं का निर्माण करते हैं, न कि आपके शीर्षक जैसी मौजूदा वस्तुओं के गुणों को जोड़ने के बजाय ।

— loganfsmyth

यह एक अच्छी बात है @loganfsmyth। मुझे लगता है कि मैं सिर्फ इस विधि से उत्साहित था कि कैंपसफरी ने लाया क्योंकि मुझे एहसास नहीं था कि यह संभव था।

— ब्यूमर

अगर आपको कोई नई वस्तु बनाने में कोई आपत्ति नहीं है, तो आप कर सकते हैंoof = {...oof, ...foo}

— जोशुआ कोएडी

Answer 8

आप एक तीर फ़ंक्शन में विध्वंसक ऑब्जेक्ट को वापस कर सकते हैं, और एक चर को असाइन करने के लिए Object.assign () का उपयोग कर सकते हैं।

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

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

Answer 9

सूखी

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

Answer 10

आप किसी ऑब्जेक्ट को सीधे किसी अन्य ऑब्जेक्ट की विशेषता पर नष्ट कर सकते हैं।

काम करने का उदाहरण:

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

आप जिस ऑब्जेक्ट विशेषता को पकड़ना चाहते हैं, उसी नाम के साथ चर का उपयोग करके विनाश के साथ काम कर सकते हैं, इस तरह से आपको ऐसा करने की आवश्यकता नहीं है:

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

इस तरह इस्तेमाल करें:

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

उसी तरह से आप ऑब्जेक्ट स्ट्रक्चर्स पर नए मान सेट कर सकते हैं यदि उनके पास समान विशेषता नाम है।

इस कार्यशील उदाहरण को देखें:

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

Answer 11

यह क्रोम 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"
}

Comments

अफसोस की बात है कि ऐसा लगता है जैसे oofसिर्फ एक संदर्भ प्राप्त करता है fooऔर पूरे विनाश (कम से कम क्रोम में) को बायपास करता है। oof === fooऔर let oof = { x } = fooअभी तक{ x, y }

— Theo.T

@ Theo.T अच्छी पकड़। यह एक

— बुमेर है

यह केवल यह दर्शाने के लायक है कि जेएस कैसे भ्रमित हो सकते हैं।

— jgmjgm

Answer 12

मैं इस विधि के साथ आया:

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

यानी, आप चुन सकते हैं कि कौन से गुण आप बाहर चाहते हैं और उन्हें एक नई वस्तु में डाल दें। इसके विपरीत _.pickआप उन्हें एक ही समय में नाम बदल भी सकते हैं।

यदि आप किसी मौजूदा ऑब्जेक्ट पर प्रॉप्स को कॉपी करना चाहते हैं, तो बस destarg को सेट करें ।

Answer 13

यह एक तरह का धोखा है, लेकिन आप ऐसा कुछ कर सकते हैं ...

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

Answer 14

यह सबसे पठनीय और सबसे छोटा समाधान है, जिसे मैं ले सकता हूं:

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

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

console.log(newProps);

इसका उत्पादन होगा { isValidDate: 'yes' }

यह अच्छा होगा कि किसी दिन कुछ ऐसा कहा जा सके, let newProps = ({ isValidDate } = props)लेकिन दुर्भाग्य से यह ईएस 6 सपोर्ट नहीं है।

Answer 15

यह एक सुंदर तरीका नहीं है, न ही मैं इसकी सलाह देता हूं, लेकिन यह इस तरह से संभव है, सिर्फ ज्ञान के लिए।

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

Answer 16

आप इसे प्राप्त करने के लिए JSON वर्ग विधियों का उपयोग कर सकते हैं

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

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

पास गुण जो stringifyसरणी प्रारूप में कार्य करने के लिए दूसरे तर्क के रूप में परिणामी वस्तु में जोड़ने की आवश्यकता है।

JSON.stringify के लिए MDN Doc