Destructuring assignment

This translation is incomplete. Please help translate this article from English.

תחביר ההשמה המפורקת הוא ביטוי של JavaScript המאפשר לחלץ נתונים ממערכים או אובייקטים בעזרת שימוש בתחביר שמשקף את מבנה המערך או האובייקט המילולי. 

תחביר

[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{a, b} = {a:1, b:2}
{a, b, ...rest} = {a:1, b:2, c:3, d:4}  //ES2016

{a, b} = {a:1, b:2} הוא לא תחביר עצמאי תקף, כי { a, b} בצד השמאל נחשב בלוק ולא אובייקט מילולי.

עם זאת, ({a, b} = {a:1, b:2}) תקף, כמו גם {var {a, b} = {a:1, b:2.

תאור

הביטוי של אובייקט או מערך מילולי מספק דרך פשוטה ליצירה של חבילת נתונים . לאחר שיצרת חבילות של נתונים אלה, אתה יכול להשתמש בהם בכל דרך שאתה רוצה. אתה יכול אפילו להחזיר אותם מפונקציות.

 

דבר אחד שימושי במיוחד שאתה יכול לעשות עם השמה מפורקת היא לקרוא מבנה שלם בהשמה אחת, אם כי יש עוד מספר דברים מעניינים שאתה יכול לעשות איתם, כפי שמוצג בדוגמאות הבאות.

יכולת זו דומה לתכונות קיימות בשפות כמו פרל ופייתון.

פירוק מערך

דוגמא פשוטה

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

השמה ללא הצהרה

השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.

var a, b;

[a, b] = [1, 2];

החלפת משתנים

לאחר ביצוע הקוד הזה, b הוא 1 וa הוא 3. ללא השמה מפורקת, החלפת שני ערכים דורשת שימוש במשתנה זמני (או, בכמה שפות נמוכות, טריק ההחלפת XOR).

var a = 1;
var b = 3;

[a, b] = [b, a];

החזרה מרובת ערכים

תודה להשמה מפורקת פונקציות יכולות להחזיר ערכים מרובים. למרות שתמיד היה ניתן להחזיר מערך מפונקציה, זה עדיין מספק מידה נוספת של גמישות.

function f() {
  return [1, 2];
}

כפי שניתן לראות, החזרת תוצאות נעשית באמצעות סימון כמו מערך, עם כל הערכים בתוך סוגריים. אתה יכול להחזיר מספר בלתי מוגבל של תוצאות בדרך זו. בדוגמא זו, ()f מחזירה את הערכים [1, 2] כפלט שלה.

var a, b;
[a, b] = f();
console.log("A is " + a + " B is " + b);

ההצהרה ()a, b] = f] מקצה את התוצאות של הפונקציה למשתנים בסוגריים, בהתאמה: a הוא 1 ו- b מוגדר 2.

גם אתה יכול לקבל את ערכי החזרה כמערך:

var a = f();
console.log("A is " + a);

במקרה זה, a הוא מערך המכיל את הערכים 1 ו -2.

התעלמות ממספר ערכי החזר

אתה יכול להתעלם מערכי החזר שאתה לא מעוניין בהם:

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log("A is " + a + " B is " + b);

לאחר הרצת קוד זה, a הוא 1 ו- b הוא 3. הערך 2 נדחה. אתה יכול להתעלם מכל ערכי ההחזר בדרך זו. לדוגמה:

[,,] = f();

משיכת ערכים מתוצאה של regular expression

כאשר המתודה  exec של regular expression מוצאת התאמה, היא מחזירה מערך המכיל במיקום הראשון את כל ההתאמה של המחרוזת ולאחר מכן את כל החלקים של המחרוזת שתאמה כל קבוצה בסוגריים בregular expression. השמה מפורקת מאפשרת לך למשוך את החלקים מתוך מערך זה בקלות, תוך התעלמות מההתאמה המלאה אם היא לא נחוצה.

var url = "https://developer.mozilla.org/en-US/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // logs "https"

פירוק אובייקט

דוגמא פשוטה

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

// Assign new variable names
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true  

השמה ללא הצהרה

השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.

var a, b;

({a, b} = {a:1, b:2});

The ( .. ) around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.

Function argument defaults

ES5 version

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

ES2015 version

function drawES2015Chart({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

In Firefox, default values for destructuring assignments are not yet implemented: var { x = 3 } = {} and var [foo = "bar"] = []. See bug 932080 for destructured default values in functions.

Module (non-ES2015) loading

Destructuring can help to load specific subsets of a non-ES2015 module like here in the Add-on SDK:

const { Loader, main } = require('toolkit/loader');

Nested object and array destructuring

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

For of iteration and destructuring

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Pulling fields from objects passed as function parameter

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

This pulls the id, displayName and firstName from the user object and prints them.

Computed object property names and destructuring

Computed property names, like on object literals, can be used with destructuring.

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Destructuring assignment' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Destructuring assignment' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support 2.0 (1.8.1) No support No support 7.1
Computed property names No support 34 (34) No support No support No support
Spread operator ? 34 (34) ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support 1.0 (1.0) No support No support 8
Computed property names No support No support 34.0 (34) No support No support No support
Spread operator ? ? 34.0 (34) ? ? ?

Firefox-specific notes

  • Firefox provided a non-standard language extension in JS1.7 for destructuring. This extension has been removed in Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37). See bug 1083498.
  • Starting with Gecko 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) and to comply with the ES2015 specification, parenthesized destructuring patterns, like ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, are now considered invalid and will throw a SyntaxError. See Jeff Walden's blog post and bug 1146136 for more details.

See also

Document Tags and Contributors

 Contributors to this page: kdex, ShakedAmar
 Last updated by: kdex,