javascript使用

I’m not so sure, but I think JavaScript might be the only web technology where you can destructure objects and assign the individual units in one take. It is also one great feature that allows you can get straight to the point with what you have to do and keep things very clean.

我不太确定，但我认为JavaScript可能是唯一可以一次分解对象并分配各个单元的Web技术。 这也是一项很棒的功能，使您可以直接了解自己必须做的事情，并使事情保持清洁。

Destructuring assignment in more simple words means unpacking the values of objects or arrays into simple variables. You have probably already seen it used somewhere, and it never made sense to you. At the end of this guide, we will see how to use it and what it can replace for you.

用更简单的词来破坏赋值意味着将对象或数组的值分解为简单变量。 您可能已经看到它在某处使用过，对您而言从来没有任何意义。 在本指南的最后，我们将看到如何使用它以及可以为您替代的东西。

( )

( )

Old school ways tell us that if we have an array and we want to assign some of it’s values to variables, we do something like this:

老式的方法告诉我们，如果我们有一个数组，并且想将它的某些值分配给变量，我们将执行以下操作：

let johnDoe = ["John", "Doe", "Iskolo"]let firstName = johnDoe[0]let lastName = johnDoe[1]let title = johnDoe[2]console.log(firstName, lastName, title) // John Doe Iskolo

But would you not like to do this instead?

但是，您不想这样做吗？

let johnDoe = ["John", "Doe", "Iskolo"]let [firstName, lastName, title] = johnDoeconsole.log(firstName, lastName, title) // John Doe Iskolo

The best part is that you can pick any number of elements you want

最好的部分是，您可以选择任意数量的元素

let johnDoe = ["John", "Doe", "Iskolo"]let [firstName, lastName] = johnDoeconsole.log(firstName, lastName) // John Doe

Or

要么

let johnDoe = ["John", "Doe", "Iskolo"]let [, lastName, title] = johnDoeconsole.log(lastName, title) // Doe Iskolo

We can do it with strings as well

我们也可以用字符串做

let [firstName, ,title] = "John Doe Iskolo".split(" ")console.log(firstName, title) // John Iskolo

We can throw in the rest operator to collect the rest 😆

我们可以把剩下的算子丢进去operator

let [firstName, ...others] = "John Doe Iskolo".split(" ")console.log(firstName, others) // John Iskolo

And we can even bring in objects here

我们甚至可以在这里引入物体

let johnDone = {
     }[johnDoe.first, johnDoe.last] = "John Doe Iskolo".split(" ")console.log(johnDoe.first, johnDoe.last) // John Doe

In Looping Through Objects We can use it in looping through a key-value pair variable like an object or map. Here is what is very common:

在循环对象中，我们可以在循环通过键值对变量（例如对象或映射）时使用它。 这是很常见的情况：

let obj = {
       firstName : "John",  lastName : "Doe",  title : "Iskolo"}Object.keys(obj).forEach(key => {
       console.log(`${
       key} : ${
       obj[key]}`)})

We can spin that differently like this:

我们可以这样旋转：

let obj = {
       firstName : "John",  lastName : "Doe",  title : "Iskolo"}for(let [key, value] of Object.entries(obj)) {
       console.log(`${
       key} : ${
       value}`)}

It might look like the same thing to you, but it is not. In using forEach above, we pull the keys of the object into an array, then looping through that array of keys now and using those keys to pick out the values of objects. Phew! I lost my breath for a second reading that 😃.

在您看来，这似乎是同一回事，但事实并非如此。 在上面的forEach ，我们将对象的键拉到一个数组中，然后立即遍历该键的数组并使用这些键来选择对象的值。 ！ 我屏息了第二遍。

In the second part, we just go straight and loop through each object entries and extracting the keys and values.

在第二部分中，我们直接遍历每个对象条目并提取键和值。

Assigning default values We can assign defaults values, just for a situation where the variable we wish to destructure is empty

分配默认值我们可以分配默认值，仅在我们要分解的变量为空的情况下

let [firstName = "John", ,title = "Fire"] = "John Doe".split(" ")console.log(firstName, title) // John Fire

( )

Like we did with arrays, we can destructure objects as well. If you have ever used React, you are likely to have seen this used when importing a module.

就像我们对数组所做的一样，我们也可以分解对象。 如果您曾经使用过React，那么您很可能在导入模块时就已经使用过它。

let obj = {
       firstName : "John",  lastName : "Doe",  title : "Iskolo"}let {
     firstName, lastName) = objconsole.log(firstName, lastName) // John Doe

When destructuring objects, we use the keys as variable names. This is how JavaScript knows which property of the object you want to assign. Unlike arrays where you use their index/positions in the assignment, here you use the keys.

解构对象时，我们将keys用作变量名。 这样，JavaScript便知道要分配对象的哪个属性。 与在分配中使用其索引/位置的数组不同，此处使用键。

This destructuring works on any kind of object. If your object has nested values, you can still destructure that and extract the values into variables.

这种解构适用于任何类型的对象。 如果对象具有嵌套值，则仍可以对其进行解构并将值提取到变量中。

let obj = {
       name : "John Doe",  address : {
         city : "Omsk",    country : "Russia"  }}let {
     city, country} = obj.addressconsole.log(city, country) // Omsk Russia

( )

Let’s be frank, you might have seen functions that look like this:

坦率地说，您可能已经看过如下函数：

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
       console.log(a,b,c,d,e)}// Call the functionsumFunc(true, "", "", "", true)// Or if we want to preserve default valuessumFunc(true, undefined, undefined, undefined, true)

It doesn’t look so good. It gets worse if you are trying to perform a function like making a chart and you need a lot of arguments (think like 15 optional arguments) to create the chat. It is plainly unsustainable.

看起来不太好。 如果您尝试执行诸如绘制图表之类的功能，并且需要大量参数（例如15个可选参数）来创建聊天，则情况会变得更糟。 这显然是不可持续的。

Let destructuring save the day 😃

让破坏拯救一天

function sumFunc({
     a = true, b = "", c = "", d = 0, e = false}) {
       console.log(a,b,c,d,e)}let args = {
     a : false, e: true}// Call the functionsumFunc(args)

By passing the function arguments as an object, they will get automatically resolved into independent arguments. Now, we pass an object with matching key-value pairs and the function will work nicely.

通过将函数参数作为对象传递，它们将自动解析为独立的参数。 现在，我们传递一个具有匹配键-值对的对象，该函数将正常运行。

Admit it, you love the destructured way 😁.

承认吧，你爱变形的方式😁。

( )

Destructuring is an operation you can do without, however, you can already see how it makes you a better developer. Cleaner code, fewer repetitions and more structure over what you have.

销毁是您可以做的一项操作，但是，您已经知道它如何使您成为更好的开发人员。 整洁的代码，更少的重复和更多的结构。

Use destructuring today and make your code a better code 😀.

立即使用分解，使您的代码成为更好的代码。

翻译自:

javascript使用