खोज…


परिचय

विनाशकारी एक पैटर्न मिलान तकनीक है जिसे हाल ही में एक्मास्क्रिप्ट 6 में जावास्क्रिप्ट में जोड़ा गया है।

यह आपको चर के एक समूह को मूल्यों के एक समान समूह से बांधने की अनुमति देता है जब उनका पैटर्न दाएं हाथ-पक्ष और अभिव्यक्ति के बाएं हाथ-पक्ष से मेल खाता है।

वाक्य - विन्यास

  • चलो [x, y] = [१, २]
  • [पहला, ... बाकी] = [१, २, ३, ४]
  • चलो [एक, तीन] = [1, 2, 3]
  • चलो [val = 'default value'] = []
  • {a, b} = {a: x, b: y}
  • {{a: {c}} = {a: {c: 'nested'}, b: y}
  • {b = 'डिफ़ॉल्ट मान'} = {a: 0}

टिप्पणियों

ECMAScript 6 (AKA ES2015) में विनाशकारी नया है विनिर्देश और ब्राउज़र समर्थन सीमित हो सकता है। निम्न तालिका उन ब्राउज़रों के शुरुआती संस्करण का अवलोकन देती है, जिन्होंने विनिर्देशन का> 75% समर्थन किया है।

क्रोम धार फ़ायरफ़ॉक्स इंटरनेट एक्स्प्लोरर ओपेरा सफारी
49 13 45 एक्स 36 एक्स

(अंतिम अपडेट - 2016/08/18)

विनाशकारी फ़ंक्शन तर्क

किसी ऑब्जेक्ट से गुण को फ़ंक्शन में पास किया गया। यह पैटर्न तर्क की स्थिति पर भरोसा करने के बजाय नामित मापदंडों का अनुकरण करता है।

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

यह सरणियों के लिए भी काम करता है:

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

विनाशकारी होते हुए वेरिएबल्स का नाम बदलना

विनाशकारी हमें एक वस्तु में एक कुंजी को संदर्भित करने की अनुमति देता है, लेकिन इसे एक अलग नाम के साथ एक चर के रूप में घोषित करता है। सिंटैक्स सामान्य जावास्क्रिप्ट ऑब्जेक्ट के लिए कुंजी-मूल्य सिंटैक्स की तरह दिखता है।

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

विनाशकारी ऐरे

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

हम डिस्ट्रक्टिंग एरे में डिफॉल्ट वैल्यू सेट कर सकते हैं, डिस्ट्रक्टिंग करते समय डिफॉल्ट वैल्यू का उदाहरण देखें।

विनाशकारी सरणी के साथ, हम 2 चर के मूल्यों को आसानी से स्वैप कर सकते हैं:

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

हम अनावश्यक मानों को छोड़ने के लिए खाली स्लॉट निर्दिष्ट कर सकते हैं:

[a, , b] = [1, 2, 3] // a = 1, b = 3

विनाशकारी वस्तु

विनाशकारी वस्तुओं में से गुणों को चर में निकालने का एक सुविधाजनक तरीका है।

मूल सिंटैक्स:

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

विनाशकारी और नामकरण:

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

डिफ़ॉल्ट मानों के साथ विनाशकारी:

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

डिफ़ॉल्ट मानों के साथ विनाश और नाम बदलना

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

चरों के अंदर विनाशकारी

फ़ंक्शन तर्कों में ऑब्जेक्ट्स को नष्ट करने के अलावा, आप उन्हें निम्नानुसार चर घोषणाओं के अंदर उपयोग कर सकते हैं:

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

जैसा कि आप देख सकते हैं, तीन नए चर बनाए गए थे: name , age और location और उनके मूल्यों को ऑब्जेक्ट person से पकड़ा गया था यदि वे प्रमुख नामों से मेल खाते हैं।

एक तर्क सरणी बनाने के लिए बाकी मापदंडों का उपयोग करना

यदि आपको कभी किसी ऐसे सरणी की आवश्यकता होती है जिसमें अतिरिक्त तर्क होते हैं, जिसकी आप अपेक्षा कर सकते हैं या नहीं कर सकते हैं, इसके अलावा जिनको आपने विशेष रूप से घोषित किया है, आप निम्न के रूप में तर्क घोषणा के अंदर सरणी बाकी पैरामीटर का उपयोग कर सकते हैं:

उदाहरण 1, एक सरणी में वैकल्पिक तर्क:

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

उदाहरण 2, सभी तर्क अब एक सरणी हैं:

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

कंसोल ने सच छापा क्योंकि myArguments एक myArguments है, भी, ...myArguments मापदंडों के तर्क के अंदर ...myArguments घोषणाओं फ़ंक्शन (पैरामीटर) द्वारा प्राप्त मानों की एक सूची को एक पूरी तरह कार्यात्मक सरणी में कॉमा द्वारा अलग किया जाता है (और नहीं एक सरणी जैसी वस्तु) मूल तर्क की तरह वस्तु)।

डिस्ट्रक्टिंग करते समय डिफ़ॉल्ट मान

हम अक्सर एक ऐसी स्थिति का सामना करते हैं, जहां हम जिस संपत्ति को निकालने की कोशिश कर रहे हैं, वह ऑब्जेक्ट / सरणी में मौजूद नहीं है, जिसके परिणामस्वरूप TypeError (नीडिंत वस्तुओं को नष्ट करते हुए) या undefined होने के लिए सेट किया जा रहा है। विनाश करते समय हम एक डिफ़ॉल्ट मान सेट कर सकते हैं, जो इसे वस्तु में नहीं मिलने की स्थिति में वापस आ जाएगा।

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

नेस्ट डिस्ट्रक्टिंग

हम एक वस्तु / सरणी को नष्ट करने तक सीमित नहीं हैं, हम एक नेस्टेड ऑब्जेक्ट / सरणी को नष्ट कर सकते हैं।

नेस्टेड ऑब्जेक्ट विनाशकारी

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

नेस्ट अर्रे डेस्ट्रक्ट्यूरिंग

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

विनाशकारी सिर्फ एक पैटर्न तक सीमित नहीं है, इसमें एन-लेवल ऑफ नेस्टिंग के साथ हम इसमें एरेज हो सकते हैं। इसी तरह हम वस्तुओं और इसके विपरीत के साथ सरणियों को नष्ट कर सकते हैं।

वस्तु के भीतर पहुंचता है

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

वस्तुओं के भीतर

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow