From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../operators/destructuring_assignment/index.html | 416 +++++++++++++++++++++ 1 file changed, 416 insertions(+) create mode 100644 files/he/web/javascript/reference/operators/destructuring_assignment/index.html (limited to 'files/he/web/javascript/reference/operators/destructuring_assignment') diff --git a/files/he/web/javascript/reference/operators/destructuring_assignment/index.html b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..07b2957fe2 --- /dev/null +++ b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,416 @@ +--- +title: השמה מפורקת +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

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

+ +

תחביר

+ +
var a, b, rest;
+[a, b] = [1, 2]
+console.log(a); // 1
+console.log(b); // 2
+
+[a, b, ...rest] = [1, 2, 3, 4, 5]
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // [3, 4, 5]
+
+({a, b} = {a: 1, b :2});
+console.log(a); // 1 console.log(b); // 2
+
+({a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4});  //ES2016
+console.log(a); // 1
+console.log(b); // 2
+console.log(rest); // {c: 3, d: 4}
+
+ +
+

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

+ +

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

+
+ +

תאור

+ +
ביטויים ליטרלים של אובייקטים או מערכים מספקים דרך פשוטה ליצירה של חבילת נתונים לפי דרישה. לאחר יצירת חבילות נתונים אלה, ניתן להשתמש בהם בכל דרך שתרצה. ניתן אפילו להחזיר אותם מפונקציות.
+ +
var x = [10, 20, 30, 40, 50];
+ +

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

+ +
var x = [10, 20, 30, 40, 50];
+var [y, x] = x;
+console.log(y); // 10
+console.log(z); // 20
+
+ +

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

+ +

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

+ +

פירוק מערך

+ +

דוגמה פשוטה

+ +
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.

+
+ +

ברירות המחדל של ארגומנטים מפונקציה

+ +

גרסת ES5

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

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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{ CompatGeckoDesktop("1.8.1") }}{{CompatNo}}{{CompatNo}}7.1
Computed property names{{CompatNo}}{{ CompatGeckoDesktop("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Spread operator{{CompatUnknown}}{{ CompatGeckoDesktop("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("1.0") }}{{CompatNo}}{{CompatNo}}8
Computed property names{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("34") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Spread operator{{CompatUnknown}}{{CompatUnknown}}{{ CompatGeckoMobile("34") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Firefox-specific notes

+ + + +

ראה גם

+ + -- cgit v1.2.3-54-g00ecf