未加星标

Destructuring Assignment in JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

javascript is an... interesting... language. I personally love it, but can see why others wouldn't be so fond of it. ECMAScript 6, a.k.a. ES6, introduced a good handful of really nice features that make JavaScript development more enjoyable. In this short post, I want to talk a little bit about destructuring assignment and provide some practical examples where this might be useful.

MDN describes destructuring assignment in the following way:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

This means that you can take an array or object, and easily pluck out values from it and assign them to variables.

Destructuring Assignment with Objects

Suppose you've got an object representing a point in 3-dimensional space:

let myPointInSpace = { x: 3, y: -2, z: 2.7 } Suppose you want to do some computing with the coordinates of the point [like compute its distance from the origin, (0, 0, 0)], so you'd like to throw the x , y , and z coordinates of the point in some variables for easy reference. One might do the following: let x = myPointInSpace.x; let y = myPointInSpace.y; let z = myPointInSpace.z; let distance = Math.sqrt(x*x + y*y + z*z);

This certainly works! But if you do that enough times, you might get sick of copy/pasting. With destructuring assignment, you can pluck those coordinates in a much more succinct way! Here's how:

let {x, y, z} = myPointInSpace; let distance = Math.sqrt(x*x + y*y + z*z);

The curly-braces in this case indicate the destructuring assignment. The first line above looks at the myPointInSpace variable, and looks for any properties indicated within the curly-braces, and will return those back in individual variable assignments.

Conveniently, you can pluck only a subset of an object's property-values. For example, if you just needed the x and y coordinates, you could just as well do:

let {x, y} = myPointInSpace; Destructuring Assignment with Arrays

Destructuring assignment is great when used with objects, but it can also be used with arrays in a similar way. Let's suppose that instead our point in space is represented as a 3-tuple (or array of 3 values).

let myPointInSpace = [3, -2, 2.7];

The old-school way of plucking the coordinates of this point would be:

let x = myPointInSpace[0]; let y = myPointInSpace[1]; let z = myPointInSpace[2];

With destructuring assignment, we can shorten this to:

let [x, y, z] = myPointInSpace;

Pretty neat!

Some real examples

I read about destructuring assignment a few times before I actually made use of it and appreciating its utility. I showed a simple example above that involved simply plucking values, but I want to showcase a couple more useful examples.

Setting Default Function Values

When writing functions, I often like to use a single object as the input, and then pull values from that object - that way I don't have to worry about the order of my inputs. Destructuring assignment helps with this, and allows us to make use of "default parameters" that were introduced in ES6.

Let's say you want to write a function that takes a number of hours, minutes, and seconds and converts that amount of time into a number of milliseconds. We can do this via the following:

let toMilliseconds = ({ hours = 0, minutes = 0, seconds = 0 }) => { // Compute the # of ms let ms = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000); // Return the # of ms return ms; }

This might look like a strange function declaration, but it entails that we can pass in an object as the input to toMilliseconds() and the function will look for keys hours , minutes , and seconds to use. If it doesn't find any one of those keys in the object that was passed in, it will just default to 0. Putting this to use might look like the following:

let ms1 = toMilliseconds({hours: 3, minutes: 42, seconds: 33}); let ms2 = toMilliseconds({minutes: 7});

In the second line above, hours and seconds get defaulted to 0 and we don't have to explicitly pass a number of hours or seconds.

I've grown to like this way of writing functions, as some functions have a lot of a lot parameters that all need defaults - and this form of a function declaration feels readable to me.

Swapping Values

Swapping variables' values is a somewhat common procedure, and often involves creating a temporary variable. Here's a classic example of this.

// Initial values let x = 5; let y = 3; // Now swap, creating tmp variable let tmp = y; y = x; x = tmp; delete tmp;

However, destructuring assignment makes this more succinct, and in my opinion, a little more readable:

// Initial values let x = 5; let y = 3; // Now swap [x, y] = [y, x];

If you find yourself swapping variables often, destructuring can be a real nice tool.

Pulling Values and Giving New Names

With object destructuring, you can actually name your variables things other than the keys of the object you are destructuring. Suppose you're using an API, and the api sends back a response where the object has weird names that you don't prefer to use. Something like the following:

let apiResponse = { someWeirdKeyForX: 3, someWeirdKeyForY: -7 }

We could pull the x and y values out of that response and name them whatever we'd like - say x and y . To do this, we use the following syntax:

let {someWeirdKeyForX: x, someWeirdKeyForY: y} = apiResponse;

The someWeirdKeyForX: x part of the destructuring declares that you want to pull the key someWeirdKeyForX from apiResponse and you'd like to assign it to a variable named x . This can be surprisingly useful. Realistically, I like to use this in scenarios as simple as assigning something like apiResponse.latitutde to lat and apiResponse.longitude to lng .

Look out!

One little "gotcha" that I stumbled on a few times was the fact that sometimes you need to wrap your destructuring statements in parentheses. If your destructuring statement doesn't start with a variable declaration keyword (like var , let , or const ), you'll need to wrap your statement in parentheses. I'm assuming this is so the compiler knows how to distinguish between the { ... } in the destructuring statement and the { ... } that indicate blocks of code.

Here's what I mean by this. Consider the following code:

// Declare x and y ahead of time let x, y; // Object that we will destructure let o = {x: 3, y: -7}; // Try to destructure {x, y} = o; // -> No good!

The compiler doesn't know how to interpret that last line of code. You'll need to change it to:

// Declare x and y ahead of time let x, y; // Object that we will destructure let o = {x: 3, y: -7}; // Successfully destructure ({x, y} = o); // -> Good!

If you find yourself using destructuring, make sure you're aware of this little caveat!

And more!

MDN has many more examples of destructuring assignment. If you want to know more, check that page out.

In my next post, we'll take a dive into the rest and spread operators in Javascript, and see how they play into destructuring assignment.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Destructuring Assignment in JavaScript
本站链接:https://www.codesec.net/view/610699.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)