javascript语法

The author selected the COVID-19 Relief Fund to receive a donation as part of the Write for DOnations program.

作者选择了COVID-19救济基金来接受捐赠，这是Write for DOnations计划的一部分。

介绍 (Introduction)

Many new features for working with arrays and objects have been made available to the JavaScript language since the 2015 Edition of the ECMAScript specification. A few of the notable ones that you will learn in this article are destructuring, rest parameters, and spread syntax. These features provide more direct ways of accessing the members of an array or an object, and can make working with these data structures quicker and more succinct.

自2015年版 ECMAScript规范以来， JavaScript语言已经提供了许多处理数组和对象的新功能。 您将在本文中学习的一些值得注意的是destructuring ， rest参数和spread语法。 这些功能提供了访问数组或对象成员的更直接的方法，并且可以使使用这些数据结构更快，更简洁。

Many other languages do not have corresponding syntax for destructuring, rest parameters, and spread, so these features may have a learning curve both for new JavaScript developers and those coming from another language. In this article, you will learn how to destructure objects and arrays, how to use the spread operator to unpack objects and arrays, and how to use rest parameters in function calls.

许多其他语言没有用于解构，剩余参数和扩展的相应语法，因此这些功能对于新JavaScript开发人员和来自另一种语言的开发人员都可能具有学习曲线。 在本文中，您将学习如何对对象和数组进行解构，如何使用传播运算符解压缩对象和数组以及如何在函数调用中使用rest参数。

解构 (Destructuring)

Destructuring assignment is a syntax that allows you to assign object properties or array items as variables. This can greatly reduce the lines of code necessary to manipulate data in these structures. There are two types of destructuring: Object destructuring and Array destructuring.

解构分配是一种语法，允许您将对象属性或数组项分配为变量。 这可以大大减少处理这些结构中的数据所需的代码行。 销毁有两种类型：对象销毁和数组销毁。

对象分解 (Object Destructuring)

Object destructuring allows you to create new variables using an object property as the value.

对象解构允许您使用对象属性作为值来创建新变量 。

Consider this example, an object that represents a note with an id, title, and date:

考虑以下示例，该对象代表具有id ， title和date的注释：

const note = {id: 1,title: 'My first note',date: '01/01/1970',
}

Traditionally, if you wanted to create a new variable for each property, you would have to assign each variable individually, with a lot of repetition:

传统上，如果您想为每个属性创建一个新变量，则必须单独分配每个变量，并且要重复很多次：

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

With object destructuring, this can all be done in one line. By surrounding each variable in curly brackets {}, JavaScript will create new variables from each property with the same name:

通过对象分解，所有这些都可以在一行中完成。 通过将每个变量括在大括号{} ，JavaScript将使用相同的名称从每个属性创建新变量：

// Destructure properties into variables
const { id, title, date } = note

Now, console.log() the new variables:

现在， console.log()新变量：

console.log(id)
console.log(title)
console.log(date)

You will get the original property values as output:

您将获得原始属性值作为输出：

1
My first note
01/01/1970

Note: Destructuring an object does not modify the original object. You could still call the original note with all its entries intact.

注意：解构对象不会修改原始对象。 您仍然可以在原始note完整的情况下调用原始note 。

The default assignment for object destructuring creates new variables with the same name as the object property. If you do not want the new variable to have the same name as the property name, you also have the option of renaming the new variable by using a colon (:) to decide a new name, as seen with noteId in the following:

对象销毁的默认分配将创建与对象属性同名的新变量。 如果你不希望新的变量具有相同的名称作为属性名，你也必须使用一个冒号重命名新变量的选项( : )决定一个新的名字，如同看到noteId如下所示：

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Log the new variable noteId to the console:

将新变量noteId到控制台：

console.log(noteId)

You will receive the following output:

您将收到以下输出：

1

You can also destructure nested object values. For example, update the note object to have a nested author object:

您还可以解构嵌套的对象值。 例如，将note对象更新为具有嵌套的author对象：

const note = {id: 1,title: 'My first note',date: '01/01/1970',author: {firstName: 'Sherlock',lastName: 'Holmes',},
}

Now you can destructure note, then destructure once again to create variables from the author properties:

现在，您可以对note ，然后再次进行分解以根据author属性创建变量：

// Destructure nested properties
const {id,title,date,author: { firstName, lastName },
} = note

Next, log the new variables firstName and lastName using template literals:

接下来，使用模板文字记录新变量firstName和lastName ：

console.log(`${firstName} ${lastName}`)

This will give the following output:

这将给出以下输出：

Sherlock Holmes

Note that in this example, though you have access to the contents of the author object, the author object itself is not accessible. In order to access an object as well as its nested values, you would have to declare them separately:

请注意，在此示例中，尽管您可以访问author对象的内容，但是无法访问author对象本身。 为了访问对象及其嵌套值，您必须分别声明它们：

// Access object and nested values
const {author,author: { firstName, lastName },
} = noteconsole.log(author)

This code will output the author object:

这段代码将输出author对象：

{firstName: "Sherlock", lastName: "Holmes"}

Destructuring an object is not only useful for reducing the amount of code that you have to write; it also allows you to target your access to the properties you care about.

销毁对象不仅对减少您必须编写的代码量很有用； 它还允许您将访问权限定位到您关心的属性。

Finally, destructuring can be used to access the object properties of primitive values. For example, String is a global object for strings, and has a length property:

最后，可以使用解构来访问原始值的对象属性。 例如， String是字符串的全局对象，并且具有length属性：

const { length } = 'A string'

This will find the inherent length property of a string and set it equal to the length variable. Log length to see if this worked:

这将找到字符串的固有长度属性，并将其设置为与length变量相等。 记录length以查看是否有效：

console.log(length)

You will get the following output:

您将获得以下输出：

8

The string A string was implicitly converted into an object here to retrieve the length property.

字符串在这里，字符串A string被隐式转换为对象，以获取length属性。

阵列解构 (Array Destructuring)

Array destructuring allows you to create new variables using an array item as a value. Consider this example, an array with the various parts of a date:

数组解构允许您使用数组项作为值来创建新变量。 考虑以下示例，该数组包含日期的各个部分：

const date = ['1970', '12', '01']

Arrays in JavaScript are guaranteed to preserve their order, so in this case the first index will always be a year, the second will be the month, and so on. Knowing this, you can create variables from the items in the array:

JavaScript中的数组可以保证保留其顺序，因此在这种情况下，第一个索引将始终为年份，第二个索引将为月份，依此类推。 知道了这一点，您可以从数组中的项目创建变量：

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

But doing this manually can take up a lot of space in your code. With array destructuring, you can unpack the values from the array in order and assign them to their own variables, like so:

但是手动执行此操作会占用代码中的大量空间。 使用数组解构，您可以按顺序从数组中解压缩值并将它们分配给自己的变量，如下所示：

// Destructure Array values into variables
const [year, month, day] = date

Now log the new variables:

现在记录新变量：

console.log(year)
console.log(month)
console.log(day)

You will get the following output:

您将获得以下输出：

1970
12
01

Values can be skipped by leaving the destructuring syntax blank between commas:

可以通过在逗号之间将解构语法保留为空白来跳过值：

// Skip the second item in the array
const [year, , day] = dateconsole.log(year)
console.log(day)

Running this will give the value of year and day:

运行此将给出year和day的值：

1970
01

Nested arrays can also be destructured. First, create a nested array:

嵌套数组也可以被解构。 首先，创建一个嵌套数组：

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Then destructure that array and log the new variables:

然后解构该数组并记录新变量：

// Destructure nested items
const [one, two, [three, four], five] = nestedArrayconsole.log(one, two, three, four, five)

You will receive the following output:

您将收到以下输出：

1 2 3 4 5

Destructuring syntax can be applied to destructure the parameters in a function. To test this out, you will destructure the keys and values out of Object.entries().

可以使用解构语法来对函数中的参数进行解构。 为了对此进行测试，您将从Object.entries()解构keys和values 。

First, declare the note object:

首先，声明note对象：

const note = {id: 1,title: 'My first note',date: '01/01/1970',
}

Given this object, you could list the key-value pairs by destructuring arguments as they are passed to the forEach() method:

给定此对象，您可以通过在传递给forEach()方法时解构参数来列出键值对：

// Using forEach
Object.entries(note).forEach(([key, value]) => {console.log(`${key}: ${value}`)
})

Or you could accomplish the same thing using a for loop:

或者，您可以使用for循环完成相同的操作：

// Using a for loop
for (let [key, value] of Object.entries(note)) {console.log(`${key}: ${value}`)
}

Either way, you will receive the following:

无论哪种方式，您都会收到以下信息：

id: 1
title: My first note
date: 01/01/1970

Object destructuring and array destructuring can be combined in a single destructuring assignment. Default parameters can also be used with destructuring, as seen in this example that sets the default date to new Date().

对象解构和数组解构可以组合在单个解构分配中。 默认参数也可以用于解构，如本示例所示，该示例将默认日期设置为new Date() 。

First, declare the note object:

首先，声明note对象：

const note = {title: 'My first note',author: {firstName: 'Sherlock',lastName: 'Holmes',},tags: ['personal', 'writing', 'investigations'],
}

Then destructure the object, while also setting a new date variable with the default of new Date():

然后解构该对象，同时还使用默认的new Date()设置一个新的date变量：

const {title,date = new Date(),author: { firstName },tags: [personalTag, writingTag],
} = noteconsole.log(date)

console.log(date) will then give output similar to the following:

然后console.log(date)将给出类似于以下内容的输出：

Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

As shown in this section, the destructuring assignment syntax adds a lot of flexibility to JavaScript and allows you to write more succinct code. In the next section, you will see how spread syntax can be used to expand data structures into their constituent data entries.

如本节所示，解构赋值语法为JavaScript增加了很多灵活性，并允许您编写更简洁的代码。 在下一节中，您将看到如何使用扩展语法将数据结构扩展为它们的组成数据条目。

传播 (Spread)

Spread syntax (...) is another helpful addition to JavaScript for working with arrays, objects, and function calls. Spread allows objects and iterables (such as arrays) to be unpacked, or expanded, which can be used to make shallow copies of data structures to increase the ease of data manipulation.

扩展语法( ... )是JavaScript的另一个有用补充，用于处理数组，对象和函数调用。 Spread允许将对象和可迭代对象(例如数组)解压缩或扩展，这些对象和可迭代对象可用于制作数据结构的浅表副本，以提高数据操作的简便性。

用数组传播 (Spread with Arrays)

Spread can simplify common tasks with arrays. For example, let’s say you have two arrays and want to combine them:

传播可以简化数组的常见任务。 例如，假设您有两个数组并想要将它们组合：

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

Originally you would use concat() to concatenate the two arrays:

最初，您将使用concat()来连接两个数组：

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Now you can also use spread to unpack the arrays into a new array:

现在，您还可以使用spread将数组解压缩为新数组：

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]console.log(allTools)

Running this would give the following:

运行此命令将得到以下结果：

["hammer", "screwdriver", "wrench", "saw"]

This can be particularly helpful with immutability. For example, you might be working with an app that has users stored in an array of objects:

这对于不变性特别有用。 例如，您可能正在使用将users存储在对象数组中的应用程序：

// Array of users
const users = [{ id: 1, name: 'Ben' },{ id: 2, name: 'Leslie' },
]

You could use push to modify the existing array and add a new user, which would be the mutable option:

您可以使用push修改现有阵列并添加一个新用户，这将是可变选项：

// A new user to be added
const newUser = { id: 3, name: 'Ron' }users.push(newUser)

But this changes the user array, which we might want to preserve.

但这改变了我们可能想要保留的user数组。

Spread allows you to create a new array from the existing one and add a new item to the end:

Spread允许您从现有数组创建一个新数组，并在末尾添加一个新项目：

const updatedUsers = [...users, newUser]console.log(users)
console.log(updatedUsers)

Now the new array, updatedUsers, has the new user, but the original users array remains unchanged:

现在，新数组updatedUsers具有了新用户，但是原始users数组保持不变：

[{id: 1, name: "Ben"}{id: 2, name: "Leslie"}][{id: 1, name: "Ben"}{id: 2, name: "Leslie"}{id: 3, name: "Ron"}]

Creating copies of data instead of changing existing data can help prevent unexpected changes. In JavaScript, when you create an object or array and assign it to another variable, you are not actually creating a new object—you are passing a reference.

创建数据副本而不是更改现有数据可以帮助防止意外更改。 在JavaScript中，当您创建对象或数组并将其分配给另一个变量时，实际上并没有创建新对象，而是传递了引用。

Take this example, in which an array is created and assigned to another variable:

以以下示例为例，其中创建了一个数组并将其分配给另一个变量：

// Create an Array
const originalArray = ['one', 'two', 'three']// Assign Array to another variable
const secondArray = originalArray

Removing the last item of the second Array will modify the first one:

删除第二个数组的最后一项将修改第一个：

// Remove the last item of the second Array
secondArray.pop()console.log(originalArray)

This will give the output:

这将给出输出：

["one", "two"]

Spread allows you to make a shallow copy of an array or object, meaning that any top level properties will be cloned, but nested objects will still be passed by reference. For simple arrays or objects, a shallow copy may be all you need.

Spread允许您对数组或对象进行浅表复制，这意味着将克隆任何顶级属性，但嵌套对象仍将通过引用传递。 对于简单的数组或对象，可能只需要浅表副本。

If you write the same example code but copy the array with spread, the original array will no longer be modified:

如果您编写相同的示例代码，但使用散点图复制该数组，则将不再修改原始数组：

// Create an Array
const originalArray = ['one', 'two', 'three']// Use spread to make a shallow copy
const secondArray = [...originalArray]// Remove the last item of the second Array
secondArray.pop()console.log(originalArray)

The following will be logged to the console:

以下内容将记录到控制台：

["one", "two", "three"]

Spread can also be used to convert a set, or any other iterable to an Array.

Spread还可以用于将set或任何其他可迭代的数组转换为Array。

Create a new set and add some entries to it:

创建一个新集合并向其中添加一些条目：

// Create a set
const set = new Set()set.add('octopus')
set.add('starfish')
set.add('whale')

Next, use the spread operator with set and log the results:

接下来，将传播运算符与set并记录结果：

// Convert Set to Array
const seaCreatures = [...set]console.log(seaCreatures)

This will give the following:

这将给出以下内容：

["octopus", "starfish", "whale"]

This can also be useful for creating an array from a string:

这对于从字符串创建数组也很有用：

const string = 'hello'const stringArray = [...string]console.log(stringArray)

This will give an array with each character as an item in the array:

这将给出一个数组，其中每个字符都作为数组中的一项：

["h", "e", "l", "l", "o"]

随对象传播 (Spread with Objects)

When working with objects, spread can be used to copy and update objects.

当使用对象时，spread可用于复制和更新对象。

Originally, Object.assign() was used to copy an object:

最初， Object.assign()用于复制对象：

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

The secondObject will now be a clone of the originalObject.

现在， secondObject将是originalObject的副本。

This is simplified with the spread syntax—you can shallow copy an object by spreading it into a new one:

使用传播语法可以简化此操作-您可以通过将对象传播到新对象中来浅复制一个对象：

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }console.log(secondObject)

This will result in the following:

这将导致以下结果：

{enabled: true, darkMode: false}

Just like with arrays, this will only create a shallow copy, and nested objects will still be passed by reference.

就像数组一样，这只会创建一个浅表副本，并且嵌套对象仍将通过引用传递。

Adding or modifying properties on an existing object in an immutable fashion is simplified with spread. In this example, the isLoggedIn property is added to the user object:

通过传播简化了以不变方式在现有对象上添加或修改属性的操作。 在此示例中， isLoggedIn属性被添加到user对象：

const user = {id: 3,name: 'Ron',
}const updatedUser = { ...user, isLoggedIn: true }console.log(updatedUser)

THis will output the following:

这将输出以下内容：

{id: 3, name: "Ron", isLoggedIn: true}

One important thing to note with updating objects via spread is that any nested object will have to be spread as well. For example, let’s say that in the user object there is a nested organization object:

通过传播更新对象时要注意的一件事是，任何嵌套对象也必须传播。 例如，假设在user对象中有一个嵌套的organization对象：

const user = {id: 3,name: 'Ron',organization: {name: 'Parks & Recreation',city: 'Pawnee',},
}

If you tried to add a new item to organization, it would overwrite the existing fields:

如果您尝试将新项目添加到organization ，它将覆盖现有字段：

const updatedUser = { ...user, organization: { position: 'Director' } }console.log(updatedUser)

This would result in the following:

这将导致以下结果：

id: 3
name: "Ron"
organization: {position: "Director"}

If mutability is not an issue, the field could be updated directly:

如果可变性不是问题，则可以直接更新该字段：

user.organization.position = 'Director'

But since we are seeking an immutable solution, we can spread the inner object to retain the existing properties:

但是，由于我们正在寻求一个不变的解决方案，因此我们可以扩展内部对象以保留现有属性：

const updatedUser = {...user,organization: {...user.organization,position: 'Director',},
}console.log(updatedUser)

This will give the following:

这将给出以下内容：

id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

通过函数调用传播 (Spread with Function Calls)

Spread can also be used with arguments in function calls.

Spread也可以与函数调用中的参数一起使用。

As an example, here is a multiply function that takes three parameters and multiplies them:

例如，下面是一个multiply函数，它接受三个参数并将它们相乘：

// Create a function to multiply three items
function multiply(a, b, c) {return a * b * c
}

Normally, you would pass three values individually as arguments to the function call, like so:

通常，您将三个值分别作为参数传递给函数调用，如下所示：

multiply(1, 2, 3)

This would give the following:

这将给出以下内容：

6

However, if all the values you want to pass to the function already exist in an array, the spread syntax allows you to use each item in an array as an argument:

但是，如果要传递给函数的所有值都已存在于数组中，则使用spread语法可以将数组中的每个项目用作参数：

const numbers = [1, 2, 3]multiply(...numbers)

This will give the same result:

这将产生相同的结果：

6

Note: Without spread, this can be accomplished by using apply():

注意：如果不进行传播，可以使用apply()来完成：

multiply.apply(null, [1, 2, 3])

This will give:

这将给出：

6

Now that you have seen how spread can shorten your code, you can take a look at a different use of the ... syntax: rest parameters.

现在您已经了解了扩展如何缩短代码，现在可以看看...语法的其他用法：rest参数。

休息参数 (Rest Parameters)

The last feature you will learn in this article is the rest parameter syntax. The syntax appears the same as spread (...) but has the opposite effect. Instead of unpacking an array or object into individual values, the rest syntax will create an array of an indefinite number of arguments.

您将在本文中学习的最后一个功能是rest参数语法。 语法看起来与spread( ... )相同，但效果相反。 其余语法不会将数组或对象分解为单独的值，而将创建不确定数量的参数的数组。

In the function restTest for example, if we wanted args to be an array composed of an indefinite number of arguments, we could have the following:

例如，在函数restTest中，如果我们希望args是由不确定数量的参数组成的数组，则可以具有以下内容：

function restTest(...args) {console.log(args)
}restTest(1, 2, 3, 4, 5, 6)

All the arguments passed to the restTest function are now available in the args array:

传递给restTest函数的所有参数现在都在args数组中可用：

[1, 2, 3, 4, 5, 6]

Rest syntax can be used as the only parameter or as the last parameter in the list. If used as the only parameter, it will gather all arguments, but if it’s at the end of a list, it will gather every argument that is remaining, as seen in this example:

Rest语法可以用作列表中的唯一参数或最后一个参数。 如果用作唯一参数，它将收集所有参数，但是如果它位于列表的末尾，它将收集剩余的每个参数，如本例所示：

function restTest(one, two, ...args) {console.log(one)console.log(two)console.log(args)
}restTest(1, 2, 3, 4, 5, 6)

This will take the first two arguments individually, then group the rest into an array:

这将分别采用前两个参数，然后将其余的参数分组为一个数组：

1
2
[3, 4, 5, 6]

In older code, the arguments variable could be used to gather all the arguments passed through to a function:

在较早的代码中， arguments变量可用于收集传递给函数的所有参数：

function testArguments() {console.log(arguments)
}testArguments('how', 'many', 'arguments')

This would give the following output:

这将给出以下输出：

1Arguments(3) ["how", "many", "arguments"]

However, this has a few disadvantages. First, the arguments variable cannot be used with arrow functions.

但是，这有一些缺点。 首先， arguments变量不能与箭头函数一起使用。

const testArguments = () => {console.log(arguments)
}testArguments('how', 'many', 'arguments')

This would yield an error:

这将产生一个错误：

Uncaught ReferenceError: arguments is not defined

Additionally, arguments is not a true array and cannot use methods like map and filter without first being converted to an array. It also will collect all arguments passed instead of just the rest of the arguments, as seen in the restTest(one, two, ...args) example.

此外， arguments不是真正的数组，并且在未先转换为数组的情况下不能使用map和filter类的方法。 它还将收集所有传递的参数，而不是仅收集其余参数，如restTest(one, two, ...args)示例所示。

Rest can be used when destructuring arrays as well:

分解数组时也可以使用Rest：

const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']console.log(firstTool)
console.log(rest)

This will give:

这将给出：

hammer
["screwdriver", "wrench"]

Rest can also be used when destructuring objects:

分解对象时也可以使用Rest：

const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }console.log(isLoggedIn)
console.log(rest)

Giving the following output:

提供以下输出：

true
{id: 1, name: "Ben"}

In this way, rest syntax provides efficient methods for gathering an indeterminate amount of items.

这样，rest语法提供了用于收集不确定数量的项目的有效方法。

结论 (Conclusion)

In this article, you learned about destructuring, spread syntax, and rest parameters. In summary:

在本文中，您了解了解构，传播语法和rest参数。 综上所述：

• Destructuring is used to create varibles from array items or object properties.解构用于从数组项或对象属性创建变量。
• Spread syntax is used to unpack iterables such as arrays, objects, and function calls.传播语法用于解压缩可迭代对象，例如数组，对象和函数调用。
• Rest parameter syntax will create an array from an indefinite number of values.Rest参数语法将根据不确定数量的值创建一个数组。

Destructuring, rest parameters, and spread syntax are useful features in JavaScript that help keep your code succinct and clean.

分解，休息参数和传播语法是JavaScript中的有用功能，可帮助保持代码简洁明了。

If you would like to see destructuring in action, take a look at How To Customize React Components with Props, which uses this syntax to destructure data and pass it to custom front-end components. If you’d like to learn more about JavaScript, return to our How To Code in JavaScript series page.

如果您希望看到实际的结构分解 ，请看一下如何使用Props定制带有Props的React Components ，它使用这种语法来分解数据并将其传递给自定义的前端组件。 如果您想了解有关JavaScript的更多信息，请返回我们的“ 如何在JavaScript中编码”系列页面 。

翻译自: https://www.digitalocean.com/community/tutorials/understanding-destructuring-rest-parameters-and-spread-syntax-in-javascript

javascript语法