Destructuring and spread
لم يُترجم بعد؛ يُعرض باللغة الإنجليزية
Destructuring unpacks values out of an object (by property name) or an array (by position) into separate variables in one line. Spread, written ..., does the opposite: it copies the items of an array or the properties of an object into a new one. Follow six real lines that unpack user and nums, collect the leftovers with ...rest, and build new arrays and objects without changing the originals.
5 أسئلة سريعة
اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.
01After const { name, age } = { name: "Ada", age: 36 };, what is in age?
Object destructuring matches by property name: the variable age gets the value of the property age, which is 36.
02After const [first, ...rest] = [10, 20, 30];, what is rest?
first takes the item at index 0. The rest element collects every item left over into a new array: [20, 30].
03What does const more = [...nums, 40]; do when nums is [10, 20, 30]?
Spread copies the items of nums, in order, into a new array literal, then 40 is added. nums still has three items.
04What is older.age after const older = { ...user, age: 37 }; when user.age is 36?
...user copies age: 36 first, then age: 37 is written later. When two properties share a name, the later one wins.
05Spread makes a shallow copy. What does that mean?
The new array or object is new, but if a value inside it is itself an object, both the copy and the original refer to that same inner object.
المسرد
- Destructuring
- A short way to unpack values from an object or an array into separate variables, such as const { name } = user or const [first] = nums.
- Object
- A set of named values, written with curly braces, such as { name: "Ada", age: 36 }.
- Property
- One named value in an object, such as age: 36. Read it with user.age.
- Array
- A list of values kept in order, written with square brackets, such as [10, 20, 30].
- Index
- The position of an item in an array, counted from 0. In [10, 20, 30], 10 is at index 0.
- Rest element
- ...name at the end of a destructuring pattern. It collects the items (or properties) that are left into a new array (or object).
- Spread syntax
- ... in front of an array or object inside a new [ ] or { }. It copies every item or property into the new one.
- Shallow copy
- A copy of the top-level values only. Inner objects and arrays are shared with the original, not copied.
الملاحظات والمصادر
- Spread makes a shallow copy: it copies each top-level value. If a value is itself an object or array, the new one refers to the same inner object, so changing that inner object shows up in both.
- Destructuring a name or position that is not there gives undefined. You can set a default instead: const [a = 1] = [] gives a = 1.
- A rest element must be the last item in the pattern. Objects have one too: const { age, ...others } = user puts the remaining properties in a new object.
- The figure draws each variable as its own box holding a copy of the value. For numbers and text that is exactly what happens; for objects and arrays a variable holds a reference to the one object.
- Destructuring, rest and array spread came in ECMAScript 2015. Spread and rest for objects came in ECMAScript 2018. All current browsers and Node.js support both.
اختبار يتاح بعد الخطوة الأخيرة.