One place for hosting & domains

      Comprender desestructurar, los parámetros Rest y propagar sintaxis en JavaSript


      El autor seleccionó el COVID-19 Relief Fund para que reciba una donación como parte del programa Write for DOnations.

      Introducción

      Desde la Edición 2015 de la especificación ECMAScript, hay disponibles muchas nuevas funciones para el lenguaje JavaScript para trabajar con conjuntos y objetos. Algunas de las más notables que aprenderá en este artículo son desestructurar, parámetros rest y propagar sintaxis. Estas funciones ofrecen formas más directas de acceder a los miembros de una matriz o un objeto, y pueden hacer que trabajar con estas estructuras de datos sea más rápido y conciso.

      Muchos otros lenguajes no tienen la sintaxis correspondiente para desestructurar, los parámetros rest y propagar, de forma que estas funciones pueden tener una curva de aprendizaje para los nuevos desarrolladores de JavaScript y para aquellos que provienen de otro lenguaje. En este artículo, aprenderá cómo desestructurar objetos y conjuntos, cómo usar el operador de propagación para descomprimir objetos y conjuntos y cómo usar los parámetros rest en las invocaciones de funciones.

      Desestructurar

      La asignación de desestructurar es una sintaxis que le permite asignar propiedades de objetos o elementos de una matriz como variables. Esto puede reducir enormemente las líneas de código necesarias para manipular datos en estas estructuras. Existen dos tipos de desestructuración: desestructurar objetos y desestructurar conjuntos.

      Desestructurar objetos

      La desestructuración de objetos permite crear nuevas variables usando una propiedad de objeto como el valor.

      Considere este ejemplo, un objeto que representa una nota con id, title y date:

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

      Tradicionalmente, si quería crear una nueva variable para cada propiedad, tendría que asignar cada variable individualmente, con muchas repeticiones:

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

      Con la desestructuración de objetos, esto puede hacerse en una línea. Al rodear cada variable entre corchetes {}, JavaScript creará nuevas variables desde cada propiedad con el mismo nombre:

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

      Ahora console.log() las nuevas variables:

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

      Obtendrá los valores originales de la propiedad como resultado:

      Output

      1 My first note 01/01/1970

      Nota: Desestructurar un objeto no modifica el objeto original. Aún podría invocar note original con todas sus entradas intactas.

      La asignación predeterminada para la desestructuración de objetos crea nuevas variables con el mismo nombre que la propiedad del objeto. Si no desea que la nueva variable tenga el mismo nombre que el nombre de la propiedad, tendrá la opción de cambiar el nombre de la nueva variable usando dos puntos (:) para decidir un nuevo nombre, como se puede ver con noteId a continuación:

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

      Registre la nueva variable noteId para la consola:

      console.log(noteId)
      

      Recibirá el siguiente resultado:

      Output

      1

      También puede desestructurar valores de objetos anidados. Por ejemplo, actualice el objeto note para tener un objeto author anidado:

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

      Ahora puede desestructurar note, luego desestructurarla de nuevo para crear variables desde las propiedades author:

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

      A continuación, registre las nuevas variables firstName y lastName usando los literales de plantilla:

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

      Esto generará el siguiente resultado:

      Output

      Sherlock Holmes

      Observe que en este ejemplo, aunque tiene acceso a los contenidos del objeto author, el objeto author en sí mismo no es accesible. Para acceder a un objeto y a sus valores anidados, tendría que declararlos por separado:

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

      Este código dará como resultado el objeto author:

      Output

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

      Desestructurar un objeto no es solo útil para reducir la cantidad de código que tiene que escribir; también le permite orientar el acceso a las propiedades que necesita.

      Finalmente, la desestructuración puede usarse para acceder a las propiedades de los valores primitivos del objeto. Por ejemplo, String es un objeto global para cadenas, y tiene una propiedad length:

      const { length } = 'A string'
      

      Esto encontrará la propiedad de longitud inherente de una cadena y la establecerá igual a la variable length. Registre length para ver si funciona:

      console.log(length)
      

      Verá el siguiente resultado:

      Output

      8

      La cadena A string se convirtió específicamente en un objeto para recuperar la propiedad length.

      Desestructuración de conjuntos

      La desestructuración de conjuntos le permite crear nuevas variables usando un elemento de una matriz como valor. Considere este ejemplo, una matriz con las diferentes partes de una fecha:

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

      Se garantiza que los conjuntos en JavaScript conserven su orden, de forma que en este caso, el primer índice siempre será un año, el segundo será el mes y así sucesivamente. Sabiendo esto, puede crear variables a partir de los elementos de la matriz:

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

      Pero hacer esto manualmente puede ocupar mucho espacio en su código. Con la desestructuración de matrices, puede descomprimir los valores de la matriz para ordenarlos y asignarlos a sus propias variables, de esta forma:

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

      Ahora registre las nuevas variables:

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

      Verá el siguiente resultado:

      Output

      1970 12 01

      Los valores pueden omitirse dejando la sintaxis de desestructuración en blanco entre comas:

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

      Al ejecutar esto obtendremos el valor de year y day:

      Output

      1970 01

      Los conjuntos anidados pueden ser desestructurados también. Primero cree una matriz anidada:

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

      Luego, desestructure esa matriz y registre las nuevas variables:

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

      Recibirá el siguiente resultado:

      Output

      1 2 3 4 5

      La sintaxis de desestructuración puede aplicarse para desestructurar los parámetros en una función. Para probar esto, desestructurará keys y values de Object.entries().

      Primero, declare el objeto note:

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

      Dado este objeto, podría listar los pares clave-valor desestructurando argumentos a medida que se pasan al método forEach():

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

      O podría conseguir lo mismo usando un bucle for:

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

      De cualquier forma, recibirá lo siguiente:

      Output

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

      La desestructuración de objetos y la desestructuración de conjuntos pueden combinarse en una única asignación de desestructuración. También pueden usarse parámetros predeterminados con la desestructuración, como se ve en este ejemplo que establece la fecha predeterminada a new Date().

      Primero, declare el objeto note:

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

      Luego desestructure el objeto, a la vez que establece una nueva variable date con el predeterminado de new Date():

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

      console.log(date) proporcionará un resultado similar al siguiente:

      Output

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

      Como se muestra en esta sección, la sintaxis de asignación de desestructuración añade mucha flexibilidad a JavaScript y le permite escribir un código más conciso. En la siguiente sección, verá cómo propagar sintaxis puede usarse para expandir las estructuras de datos en sus entradas de datos constituyentes.

      Propagación

      Propagar sintaxis (...) es otra adición útil a JavaScript para trabajar con conjuntos, objetos e invocaciones de función. La propagación permite descomprimir o expandir objetos e iterables (como los conjuntos), lo que puede ser usado para realizar copias superficiales de estructura de datos para aumentar la facilidad de la manipulación de datos.

      Propagación con conjuntos

      La propagación puede simplificar las tareas comunes con los conjuntos. Por ejemplo, digamos que tiene dos conjuntos y quiere combinarlos:

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

      Originalmente, usaría concat() para concatenar los dos conjuntos:

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

      Ahora también puede propagar para descomprimir las matrices en un nueva matriz:

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

      Al ejecutar esto obtendrá lo siguiente:

      Output

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

      Esto puede ser particularmente útil con la inmutabilidad. Por ejemplo, es posible que esté trabajando con una aplicación que tiene users guardados en una matriz de objetos:

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

      Podría usar push para modificar la matriz existente y añadir un nuevo usuario, que será una opción mutable:

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

      Pero esto cambia la matriz user, que quizá queramos conservar.

      La propagación le permite crear una nueva matriz partir de una existente y añadir un nuevo elemento al final:

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

      Ahora, la nueva matriz updatedUsers tiene el nuevo usuario, pero la matriz original users permanece sin cambios:

      Output

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

      Crear copias de datos en vez de cambiar los datos existentes puede ayudar a prevenir cambios inesperados. En JavaScript, cuando crea un objeto o matriz y lo asigna a otra variable, no está creando realmente un nuevo objeto, está pasando una referencia.

      Tome este ejemplo, en el cual se crea una matriz y se asigna a otra variable:

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

      Eliminar el último elemento de la segunda matriz modificará el primero:

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

      Esto generará el siguiente resultado:

      Output

      ["one", "two"]

      La propagación le permite realizar una copia superficial de una matriz u objeto, lo que significa que cualquier propiedad de nivel superior se clonará, pero los objetos anidados se pasarán por referencia. Para conjuntos u objetos simples, una copia superficial puede ser todo lo que necesita.

      Si escribe el mismo código de ejemplo pero copia la matriz con propagación, la matriz original no se modificará:

      // 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)
      

      Lo siguiente se registrará en la consola:

      Output

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

      La propagación también puede usarse para convertir un conjunto, o cualquier otro iterable, a una matriz.

      Crear un nuevo conjunto y añadir algunas entradas:

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

      A continuación, utilice el operador de propagación con set y registre los resultados:

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

      Esto dará el siguiente resultado:

      Output

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

      Esto puede ser útil para crear un conjunto desde una cadena:

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

      Esto proporcionará una matriz con cada carácter como un elemento en la matriz:

      Output

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

      Propagación con objetos

      Cuando se trabaja con objetos, la propagación puede usarse para copiar y actualizar objetos.

      Originalmente, Object.assign() se usó para copiar un objeto:

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

      El secondObject ahora será un clon del originalObject.

      Esto se simplifica con la sintaxis de propagación; puede copiar superficialmente un objeto propagándolo a uno nuevo:

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

      Esto dará como resultado lo siguiente:

      Output

      {enabled: true, darkMode: false}

      Igual que con las matrices, esto solo creará una copia superficial y los objetos anidados seguirán pasándose por referencia.

      Añadir o modificar propiedades sobre un objeto existente de forma inmutable se simplifica con la propagación. En este ejemplo, la propiedad isLoggedIn se añade al objeto user:

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

      Esto dará el siguiente resultado:

      Output

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

      Algo importante a tener en cuenta a la hora de actualizar objetos mediante la propagación es que cualquier objeto anidado también se propagará. Por ejemplo, digamos que en el objeto user hay un objeto anidado organization:

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

      Si intentase añadir un nuevo elemento a organization, sobrescribiría los campos existentes:

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

      Esto resultará en lo siguiente:

      Output

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

      Si la mutabilidad no es un problema, el campo podría actualizarse directamente:

      user.organization.position = 'Director'
      

      Pero ya que estamos buscando una solución inmutable, podemos propagar el objeto interno para que conserve las propiedades existentes:

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

      Esto dará el siguiente resultado:

      Output

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

      Propagación con invocaciones de función

      La propagación también puede usarse con argumentos en las invocaciones de funciones.

      Como ejemplo, aquí hay una función multiply que toma tres parámetros y los multiplica:

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

      Normalmente, pasaría tres valores individualmente como argumentos a la invocación de función, de esta forma:

      multiply(1, 2, 3)
      

      El resultado sería el siguiente:

      Output

      6

      Sin embargo, si todos los valores que desea pasar a la función ya existen en una matriz, la propagación de sintaxis le permite usar cada elemento en una matriz como argumento:

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

      Esto dará el mismo resultado:

      Output

      6

      Nota: Sin propagación, esto puede conseguirse usando apply():

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

      Esto proporcionará lo siguiente:

      Output

      6

      Ahora que ha visto cómo la propagación puede acortar su código, puede echar un vistazo a un uso diferente de la sintaxis ...: parámetros rest.

      Parámetros rest

      La última función que aprenderá en este artículo es la sintaxis parámetro rest. La sintaxis parece igual a medida que se propaga (...), pero tiene el efecto contrario. En vez de descomprimir una matriz u objeto en valores individuales, la sintaxis rest creará una matriz de un número indefinido de argumentos.

      En la función restTest, por ejemplo, si queremos que args sea una matriz compuesta de un número indefinido de argumentos, podrías tener lo siguiente:

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

      Todos los argumentos pasados a la función restTest están ahora disponibles en la matriz args:

      Output

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

      La sintaxis rest puede usarse como el único parámetro o como el último parámetro en la lista. Si se utiliza como el único parámetro, recopilará todos los argumentos, pero si está al final de una lista, recopilará todos los argumentos que quedan, como se ve en este ejemplo:

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

      Esto tomará los dos primeros argumentos individualmente, y luego agrupará el resto en una matriz:

      Output

      1 2 [3, 4, 5, 6]

      El código anterior, la variable arguments podría usarse para recopilar todos los argumentos pasados a través de una función:

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

      Esto nos dará el siguiente resultado:

      Output

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

      Sin embargo, esto tiene algunas desventajas. Primero, la variable arguments no puede usarse con las funciones de flecha.

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

      Esto resultaría en un error:

      Output

      Uncaught ReferenceError: arguments is not defined

      Adicionalmente, arguments no es una matriz verdadera y no puede usar métodos como map y filter sin convertirse primero a una matriz. También recogerá todos los argumentos pasados de solo el resto de los argumentos, como se ve en el ejemplo restTest(one, two, ...args).

      Rest puede usarse cuando se desestructuran las matrices también:

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

      Esto proporcionará lo siguiente:

      Output

      hammer ["screwdriver", "wrench"]

      Rest también puede usarse cuando se desestructuran objetos:

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

      Proporcionar el siguiente resultado:

      Output

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

      De esta forma, la sintaxis rest proporciona métodos eficientes para recopilar una cantidad indeterminada de elementos.

      Conclusión

      En este artículo, ha aprendido cómo desestructurar, propagar sintaxis y sobre los parámetros rest. En resumen:

      • Desestructurar se usa para crear variables a partir de los elementos de una matriz o de propiedades de objetos.
      • Propagar sintaxis se usa para descomprimir iterables como matrices, objetos e invocaciones de función.
      • La sintaxis del parámetro rest creará una matriz a partir de un número indefinido de valores.

      Desestructurar, parámetros rest y propagar sintaxis son funciones útiles en JavaScript que ayudan a mantener su código conciso y limpio.

      Si desea ver la desestructuración en acción, eche un vistazo a Cómo personalizar componentes React con Props, que utiliza esta sintaxis para desestructurar datos y pasarlos a componentes front-end personalizados. Si desea aprender más sobre JavaScript, vuelva a nuestra página de la serie Cómo codificar en JavaScript.



      Source link

      Entendendo as sintaxes de desestruturação, parâmetros rest e espalhamento em JavaScript


      O autor selecionou a COVID-19 Relief Fund​​​​​ para receber uma doação como parte do programa Write for DOnations.

      Introdução

      Muitas novas funcionalidades para trabalhar com matrizes e objetos foram disponibilizadas para a linguagem JavaScript desde a Edição de 2015 da especificação ECMAScript. Alguns dos elementos notáveis que você aprenderá neste artigo são a desestruturação, os parâmetros rest e a sintaxe de espalhamento. Esses recursos nos dão maneiras mais diretas de acessar os membros de uma matriz ou objeto, e podem tornar o trabalho com essas estruturas de dados mais rápido e sucinto.

      Muitas outras linguagens não possuem sintaxes correspondentes para a desestruturação, parâmetros rest e espalhamento. Por este motivo, esses recursos podem ter uma curva de aprendizado tanto para novos desenvolvedores JavaScript quanto para aqueles que estejam vindo de outra linguagem. Neste artigo, você aprenderá como desestruturar objetos e matrizes, como usar o operador de espalhamento para descompactar objetos e matrizes e como usar os parâmetros rest em chamadas de função.

      Desestruturação

      A atribuição de desestruturação é uma sintaxe que permite que você atribua propriedades de objetos ou itens de matrizes como variáveis. Isso pode reduzir de maneira significativa as linhas de código necessárias para manipular dados nessas estruturas. Existem dois tipos de desestruturação: a desestruturação de objetos e a desestruturação de matrizes.

      Desestruturação de objetos

      A desestruturação de objetos permite que você crie novas variáveis usando uma propriedade de objeto como o valor.

      Considere este exemplo, onde um objeto que representa uma nota com um id, title e date:

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

      Tradicionalmente, se você quisesse criar uma nova variável para cada propriedade, você teria que atribuir cada variável individualmente, com muitas repetições:

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

      Com a desestruturação de objetos, tudo isso pode ser feito em uma linha. Ao colocar cada variável entre chaves {}, o JavaScript criará novas variáveis a partir de cada propriedade com o mesmo nome:

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

      Agora, use o console.log() nas novas variáveis:

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

      Você receberá os valores originais das propriedades como resultado:

      Output

      1 My first note 01/01/1970

      Nota: a desestruturação de objetos não modifica o objeto original. Você ainda pode chamar a note (nota) original com todas as entradas intactas.

      A atribuição padrão para a desestruturação de objetos cria novas variáveis com o mesmo nome que a propriedade do objeto. Se você não quiser que a nova variável tenha o mesmo nome que o nome da propriedade, você também tem a opção de renomear a nova variável usando dois pontos (:) para decidir um novo nome, como visto com o noteId no seguinte exemplo:

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

      Registre a nova variável noteId no console:

      console.log(noteId)
      

      Você receberá o seguinte resultado:

      Output

      1

      Você também pode desestruturar valores aninhados de objetos. Por exemplo, atualize o objeto note para que tenha um objeto aninhado author:

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

      Agora, você pode desestruturar o note, então desestruturar novamente para criar variáveis a partir das propriedades de author:

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

      Em seguida, registre as novas variáveis firstName e lastName usando os template literals:

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

      Isso dará o seguinte resultado:

      Output

      Sherlock Holmes

      Observe que neste exemplo, embora você tenha acesso ao conteúdo do objeto author, o objeto author em si não está acessível. Para acessar um objeto, bem como seus valores aninhados, você teria que declará-los separadamente:

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

      Este código irá gerar o objeto author como resultado:

      Output

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

      Desestruturar um objeto é útil não apenas para reduzir a quantidade de código que você precisa escrever, mas também permite que você mire seu acesso nas propriedades que julga importantes.

      Por fim, a desestruturação pode ser utilizada para acessar as propriedades de objetos de valores primitivos. Por exemplo, String é um objeto global para strings e possui uma propriedade length (comprimento):

      const { length } = 'A string'
      

      Isso encontrará a propriedade de comprimento inerente de uma string e a definirá como sendo igual à variável length. Registre length para ver se o processo funcionou:

      console.log(length)
      

      Você receberá o seguinte resultado:

      Output

      8

      Aqui, a string A string foi implicitamente convertida em um objeto para recuperar a propriedade length.

      Desestruturação de matrizes

      A desestruturação de matrizes permite que você crie novas variáveis usando um item de uma matriz como valor. Considere este exemplo, onde há uma matriz com as várias partes de uma data:

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

      As matrizes em JavaScript garantem a preservação de sua ordem. Dessa forma, neste caso, o primeiro índice será sempre um ano, o segundo será o mês e assim por diante. Sabendo isso, você pode criar variáveis a partir dos itens da matriz:

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

      Apesar disso, fazer isso manualmente pode tomar muito espaço do seu código. Com a desestruturação da matriz, você pode descompactar os valores da matriz em ordem e atribuí-los às suas próprias variáveis, desta forma:

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

      Agora, registre as novas variáveis:

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

      Você receberá o seguinte resultado:

      Output

      1970 12 01

      Os valores podem ser ignorados deixando a sintaxe de desestruturação em branco entre vírgulas:

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

      Ao executar isso, você receberá o valor de year (ano) e day (dia):

      Output

      1970 01

      As matrizes aninhadas também podem ser desestruturadas. Primeiro, crie uma matriz aninhada:

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

      Em seguida, desestruture aquela matriz e registre as novas variáveis:

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

      Você receberá o seguinte resultado:

      Output

      1 2 3 4 5

      A sintaxe de desestruturação pode ser aplicada na desestruturação dos parâmetros em uma função. Para testar isso, você irá desestruturar as keys (chaves) e values (valores) do Object.entries().

      Primeiro, declare o objeto de note:

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

      Dado este objeto, você poderia listar os pares de chave de valor através da desestruturação de argumentos à medida em que eles são passados ao método forEach():

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

      Ou você poderia alcançar o mesmo resultado usando um loop for:

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

      De qualquer maneira, você receberá o seguinte:

      Output

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

      A desestruturação de objetos e de matrizes podem ser combinadas em uma única atribuição de desestruturação. Os parâmetros padrão também podem ser usados com a desestruturação, como visto no exemplo a seguir que define a data como new Date().

      Primeiro, declare o objeto de note:

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

      Em seguida, desestruture o objeto, ao mesmo tempo em que você também define uma nova variável date com o padrão de new Date():

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

      Então, o console.log(date) gerará um resultado semelhante ao seguinte:

      Output

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

      Como mostrado nesta seção, a sintaxe de atribuição de desestruturação adiciona muita flexibilidade ao JavaScript e permite que você escreva códigos mais sucintos. Na próxima seção, você verá como a sintaxe de espalhamento pode ser utilizada para expandir estruturas de dados nas entradas de dados constituintes.

      Espalhamento

      A sintaxe de espalhamento (...) é outra adição ao JavaScript bastante útil para trabalhar com matrizes, objetos e chamadas de função. O espalhamento permite que objetos e iteráveis (como matrizes) sejam descompactados ou expandidos. Isso pode ser usado para fazer cópias superficiais de estruturas de dados para facilitar a manipulação de dados.

      Espalhamento com matrizes

      O espalhamento simplifica as tarefas comuns com matrizes. Por exemplo, vamos supor que você tenha duas matrizes e deseja combiná-las:

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

      Originalmente, você usaria o concat() para concatenar as duas matrizes:

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

      Agora, você também pode usar o espalhamento para descompactar as matrizes em uma nova matriz:

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

      Executar isso resultaria no seguinte:

      Output

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

      Isso pode ser particularmente útil com a imutabilidade. Por exemplo, você poderia estar trabalhando com um app que possui users (usuários) armazenados em uma matriz de objetos:

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

      Você poderia usar o push para modificar a matriz existente e adicionar um novo usuário, o que seria a opção mutável:

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

      Mas isso altera a matriz user, que pode ser que queiramos preservar.

      O espalhamento permite que você crie uma nova matriz a partir de uma existente e adicione um novo item no final:

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

      Agora, a nova matriz updatedUsers possui o novo usuário, mas a matriz users original permanece inalterada:

      Output

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

      Criar cópias de dados em vez de alterar dados existentes ajuda a evitar alterações inesperadas. Em JavaScript, quando você cria um objeto ou matriz e a atribui a outra variável, você não está criando, de fato, um novo objeto — você está passando uma referência.

      Observe este exemplo, onde uma matriz é criada e atribuída a outra variável:

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

      Remover o último item da segunda matriz modificará o primeiro:

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

      Isso dará o resultado:

      Output

      ["one", "two"]

      O espalhamento permite que você crie uma cópia superficial de uma matriz ou objeto. Isso significa que qualquer propriedade de nível superior será clonada, mas objetos aninhados ainda serão passados por referência. Para matrizes ou objetos simples, uma cópia superficial pode ser tudo o que você precisa.

      Se você escrever o mesmo código de exemplo, mas copiar a matriz com o espalhamento, a matriz original não será mais modificada:

      // 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)
      

      O seguinte ficará registrado no console:

      Output

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

      O espalhamento também pode ser usado para converter um conjunto, ou qualquer outro iterável em uma matriz.

      Crie um novo conjunto e adicione algumas entradas a ele:

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

      Em seguida, utilize o operador de espalhamento com o set (conjunto) e registre os resultados:

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

      Isso resultará no seguinte:

      Output

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

      Isso também pode ser útil para criar uma matriz a partir de uma string:

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

      Isso resultará em uma matriz com cada caractere sendo um item na matriz:

      Output

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

      Espalhamento com objetos

      Ao trabalhar com objetos, o espalhamento pode ser usado para copiar e atualizar objetos.

      Originalmente, o Object.assign() era usado para copiar um objeto:

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

      O secondObject será agora um clone do originalObject.

      Isso é simplificado com a sintaxe de espalhamento — você pode copiar um objeto superficialmente, espalhando-o em um novo:

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

      Isso dará como resultado o seguinte:

      Output

      {enabled: true, darkMode: false}

      Assim como com matrizes, isso criará apenas uma cópia superficial e objetos aninhados ainda serão passados por referência.

      Adicionar ou modificar propriedades em um objeto existente de maneira imutável torna-se mais simplificado com o espalhamento. Neste exemplo, a propriedade isLoggedIn é adicionada ao objeto user:

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

      Isso irá mostrar o seguinte:

      Output

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

      Uma coisa importante a se notar com a atualização de objetos através do espalhamento é que qualquer objeto aninhado também terá que ser espalhado. Por exemplo, vamos supor que no objeto user existe um objeto organization aninhado:

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

      Se você tentasse adicionar um novo item ao organization, ele substituiria os campos existentes:

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

      Isso resultaria no seguinte:

      Output

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

      Se a mutabilidade não for um problema, o campo poderia ser atualizado diretamente:

      user.organization.position = 'Director'
      

      Mas como estamos buscando uma solução imutável, podemos espalhar o objeto interno para reter as propriedades existentes:

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

      Isso resultará no seguinte:

      Output

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

      Espalhamento com chamadas de função

      O espalhamento também pode ser usado com argumentos em chamadas de função.

      Como um exemplo, aqui está uma função multiply que recebe três parâmetros e os multiplica:

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

      Normalmente, você passaria três valores individualmente como argumentos para a chamada de função, desta forma:

      multiply(1, 2, 3)
      

      Isso resultaria no seguinte:

      Output

      6

      No entanto, se todos os valores que você deseja passar para a função já existirem em uma matriz, a sintaxe de espalhamento permitirá que você utilize cada item em uma matriz como um argumento:

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

      Isso gerará o mesmo resultado:

      Output

      6

      Nota: sem o espalhamento, isso pode ser feito usando o apply():

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

      Isso dará:

      Output

      6

      Agora que você viu como o espalhamento pode encurtar seu código, dê uma olhada em um outro uso da sintaxe ...: os parâmetros rest.

      Parâmetros rest

      O último recurso que você aprenderá neste artigo é a sintaxe do parâmetro rest. A sintaxe aparece da mesma forma que o espalhamento (...) mas possui o efeito oposto. Ao invés de descompactar uma matriz ou objeto em valores individuais, a sintaxe do rest criará uma matriz de um número de argumentos indefinido.

      Na função restTest por exemplo, se quiséssemos que o args fosse uma matriz composta por um número de argumentos indefinido, poderíamos ter o seguinte:

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

      Todos os argumentos passados para a função restTest estão agora disponíveis na matriz args:

      Output

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

      A sintaxe rest pode ser usada como o único parâmetro ou como o último parâmetro na lista. Se usada como único parâmetro, ela reunirá todos os argumentos. No entanto, se for usada no final de uma lista, ela reunirá todos os argumentos remanescentes, como visto neste exemplo:

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

      Isso pegará os dois primeiros argumentos individualmente. Em seguida, agrupará o restante em uma matriz:

      Output

      1 2 [3, 4, 5, 6]

      Em código mais antigo, a variável arguments poderia ser usada para reunir todos os argumentos passados para uma função:

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

      O resultaria no seguinte:

      Output

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

      No entanto, isso possui algumas desvantagens. Primeiro, a variável arguments não pode ser usada com funções de flecha.

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

      Isso geraria um erro:

      Output

      Uncaught ReferenceError: arguments is not defined

      Além disso, arguments não é uma matriz verdadeira e não pode usar métodos como map e filter sem que seja primeiro convertida em uma matriz. Ela também irá coletar todos os argumentos passados em vez de apenas o restante dos argumentos, como visto no exemplo restTest(one, two, ...args).

      Os parâmetros rest também podem ser usados na desestruturação de matrizes:

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

      Isso dará:

      Output

      hammer ["screwdriver", "wrench"]

      Os parâmetros rest também podem ser usados na desestruturação de objetos:

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

      Gerando o seguinte resultado:

      Output

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

      Desta forma, a sintaxe rest fornece métodos eficientes para reunir uma quantidade indeterminada de itens.

      Conclusão

      Neste artigo, você aprendeu sobre desestruturação, sintaxe de espalhamento e parâmetros rest. Resumindo:

      • A desestruturação é utilizada para criar variáveis a partir dos itens de matrizes ou propriedades de objetos.
      • A sintaxe de espalhamento é usada para descompactar iteráveis como matrizes, objetos e chamadas de função.
      • A sintaxe do parâmetro rest criará uma matriz a partir de um número indefinido de valores.

      As sintaxes de desestruturação, parâmetros rest e espalhamento são recursos úteis no JavaScript que ajudam a manter seu código sucinto e limpo.

      Se você quiser ver a desestruturação em ação, dê uma olhada em Como personalizar componentes React com o Props, que utiliza essa sintaxe para desestruturar dados e passá-los para componentes personalizados de front-end. Se você quiser aprender mais sobre o JavaScript, retorne para nossa página da série Como programar em JavaScript.



      Source link

      Концепции деструктурирования, параметров Rest и синтаксиса Spread в JavaScript


      Автор выбрал COVID-19 Relief Fund для получения пожертвования в рамках программы Write for DOnations.

      Введение

      Многие функции для работы с массивами и объектами были добавлены в язык JavaScript после выпуска спецификации ECMAScript версии 2015. В этой статье мы расскажем о деструктурировании, параметрах rest и синтаксисе spread. Они открывают возможность более прямого доступа к элементам массива или объекта и делают работу с этими структурами данных более быстрой и лаконичной.

      Во многих других языках отсутствует аналогичный синтаксис для деструктурирования, параметров rest и spread, и поэтому данные функции будет полезно изучить как начинающим разработчикам JavaScript, так и тем, кто переходит на JavaScript с другого языка. В этой статье мы расскажем о деструктурировании объектов и массивов, использовании оператора spread для распаковки объектов и массивов и использовании параметров rest при вызове функций.

      Деструктурирование

      Синтаксис деструктурирования позволяет задавать свойства объектов и элементы массива как переменные. Это значительно сокращает количество строк кода, необходимых для манипулирования данными в этих структурах. Существует два типа деструктурирования: деструктурирование объектов и деструктурирование массивов.

      Деструктурирование объектов

      Деструктурирование объектов позволяет создавать новые переменные, используя свойство объекта как значение.

      Рассмотрим пример объекта, представляющего собой заметку со свойствами id, title и date:

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

      Обычно при создании новой переменной для каждого свойства нужно задавать каждую переменную отдельно, используя много повторов:

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

      С деструктурированием объектов можно уложиться в одну строку. При заключении каждой переменной в фигурные скобки {} JavaScript создаст новые переменные из каждого свойства с тем же именем:

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

      Запустите console.log() для новых переменных:

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

      На экран будут выведены начальные значения свойств:

      Output

      1 My first note 01/01/1970

      Примечание. Деструктурирование объекта не изменяет первоначальный объект. Вы все равно можете вызвать первоначальный объект note со всеми исходными записями.

      При деструктурировании объектов создаются новые переменные с теми же именами, что и у свойств объекта. Если вы не хотите, чтобы имя новой переменной совпадало с именем свойства, вы можете переименовать новую переменную, используя двоеточие (:) для ввода нового имени, как показано в следующем примере с noteId:

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

      Зарегистрируйте новую переменную noteId в консоли:

      console.log(noteId)
      

      Результат будет выглядеть следующим образом:

      Output

      1

      Также вы можете деструктурировать значения вложенных объектов. Например, обновите объект note так, чтобы у него был вложенный объект author:

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

      Теперь вы можете деструктурировать объект note, а затем провести деструктурирование еще раз, чтобы создать переменные из свойств объекта author:

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

      Затем зарегистрируйте новые переменные firstName и lastName, используя литерали шаблонов:

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

      Результат будет выглядеть следующим образом:

      Output

      Sherlock Holmes

      В этом примере у вас есть доступ к содержимому объекта author, но сам объект author остается недоступным. Для доступа к объекту и его вложенным значениям их следует декларировать отдельно:

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

      Этот код выводит объект author:

      Output

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

      Деструктурирование объекта полезно не только для сокращения объема кода, но также позволяет организовать целевой доступ к важным свойствам.

      Кроме того, деструктурирование можно использовать для доступа к свойствам объектов значений примитивов. Например, String — это глобальный объект для строк, и он имеет свойство length:

      const { length } = 'A string'
      

      Эта команда находит изначальное свойство длины строки и задает для него переменную length. Зарегистрируйте length, чтобы проверить, сработало ли это:

      console.log(length)
      

      Результат будет выглядеть следующим образом:

      Output

      8

      Строка A string была косвенно конвертирована в объект для получения свойства length.

      Деструктурирование массивов

      Деструктурирование массивов позволяет создавтаь новые переменные, используя элементы массива в качестве значения. В качестве примера рассмотрим массив с разными компонентами даты:

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

      Массивы в JavaScript гарантированно сохраняют порядок, и поэтому первым индексом всегда будет год, вторым — месяц и т. д. Зная это, вы можете создавать переменные из элементов массива:

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

      Если делать это вручную, вам потребуется большой объем кода. Деструктурирование массивов позволяет распаковать значения массива по порядку и присвоить им собственные переменные, как показано здесь:

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

      Зарегистрируйте новые переменные в журнале:

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

      Результат будет выглядеть следующим образом:

      Output

      1970 12 01

      Значения можно пропускать,оставляя пустой синтаксис деструктурирования между запятыми:

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

      При запуске этого кода будут указаны значения year и day:

      Output

      1970 01

      Вложенные массивы также можно деструктурировать. Вначале создайте вложенный массив:

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

      Затем деструктурируйте массив и зарегистрируйте новые переменные:

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

      Результат будет выглядеть следующим образом:

      Output

      1 2 3 4 5

      Синтаксис деструктурирования можно применять для деструктурирования параметров функции. Для тестирования вам нужно будет деструктурировать ключи и значения из Object.entries().

      Вначале декларируйте объект note:

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

      Для этого объекта вы можете указать пары ключ-значение, деструктурируя аргументы по мере их передачи в метод forEach():

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

      Также вы можете использовать для этой цели цикл for:

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

      В каждом случае вы получите следующий результат:

      Output

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

      Деструктурирование объектов и деструктурирование массивов можно комбинировать в одном выражении деструктурирования. При деструктурировании также можно использовать параметры по умолчанию, как видно из этого примера, где задается дата по умолчанию new Date().

      Вначале декларируйте объект note:

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

      Затем деструктурируйте объект и задайте новую переменную new со значением по умолчанию new Date():

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

      Команда console.log(date) выведет на экран примерно следующее:

      Output

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

      Как показано в этом разделе, синтаксис деструктурирования добавляет в JavaScript гибкость и позволяет создавать более лаконичный код. В следующем разделе мы покажем, как использовать синтаксис spread для раскрытия структур данных с выводом составляющих их записей данных.

      Spread

      Синтаксис Spread (...) — это еще одно полезное дополнение JavaScript для работы с массивами, объектами и вызовами функций. Spread позволяет распаковывать или раскрывать объекты и элементы итерации (например, массивы) и использовать их для создания копий структур данных с целью упрощения манипуляций с данными.

      Spread с массивами

      Spread упрощает выполнение распространенных задач с массивами. Допустим, у нас есть два массива и мы хотим их комбинировать:

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

      Раньше нам нужно было бы использовать concat() для сокращения двух массивов:

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

      Теперь мы также можем использовать spread для распаковки массивов в новый массив:

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

      Результат выполнения будет выглядеть так:

      Output

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

      Это особенно полезно в случае неизменяемых объектов. Например, вы можете работать с приложением, которое сохранило объект users в массиве объектов:

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

      Вы можете использовать push для изменения массива и добавления нового пользователя, если это изменяемый объект:

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

      Однако при этом изменяется массив user, что может быть для нас нежелательно.

      Spread позволяет создать новый массив из существующего и добавить в его конец новый элемент:

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

      Теперь в новый массив updatedUsers добавлен новый пользователь, а первоначальный массив users остался без изменений:

      Output

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

      Создание копий данных вместо изменения имеющихся данных помогает предотвратить неожиданные изменения. При создании в JavaScript объекта или массива и присвоения его другой переменной вы на самом деле не создаете новый объект, а передаете ссылку.

      Рассмотрим этот пример, где мы создаем массив и назначаем его другой переменной:

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

      При удалении последнего элемента второго массива изменится первый:

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

      Результат будет выглядеть следующим образом:

      Output

      ["one", "two"]

      Spread позволяет делать простую копию массива или объекта, где будут клонированы все свойства верхнего уровня, а вложенные объекты будут передаваться посредством ссылки. Такой простой копии может быть достаточно для простых массивов или объектов.

      Если вы напишете тот же код, но при этом скопируете массив с помощью spread, первоначальный массив больше не будет меняться:

      // 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)
      

      На консоли будет зарегистрировано следующее:

      Output

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

      Spread также можно использовать для конвертации набора или другого элемента с итерацией в массив.

      Создайте новый набор и добавьте в него записи:

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

      Используйте оператор spread с set и зарегистрируйте результаты:

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

      В результате вы получите следующий вывод:

      Output

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

      Это также может быть полезно при создании массива из строки:

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

      Это даст нам массив, где каждый символ будет элементом массива:

      Output

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

      Spread с объектами

      При работе с объектами spread можно использовать для их копирования и обновления.

      Изначально для копирования объектов использовался Object.assign():

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

      Теперь secondObject будет клоном originalObject.

      Синтаксис spread все упрощает, позволяя создать простую копию объекта посредством его передачи в новый объект:

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

      Результат будет выглядеть следующим образом:

      Output

      {enabled: true, darkMode: false}

      Как и в случае с массивами при этом создается простая копия, где вложенные объекты будут передаваться посредством ссылки.

      Spread упрощает добавление и изменение свойств существующего неизменяемого объекта. В этом примере мы добавляем свойство isLoggedIn в объект user:

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

      В результате вы получите следующий вывод:

      Output

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

      При обновлении объектов с помощью spread важно учитывать, что каждый вложенный объект также потребуется передать. Рассмотрим пример, когда в объекте user содержится вложенный объект organization:

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

      Если мы попробуем добавить новый элемент в объект organization, существующие поля будут перезаписаны:

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

      Результат будет выглядеть следующим образом:

      Output

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

      Если изменяемость неважна, поле можно обновить напрямую:

      user.organization.position = 'Director'
      

      Однако нам нужно изменяемое решение, и мы используем spread для копирования внутреннего объекта для сохранения имеющихся свойств:

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

      В результате вы получите следующий вывод:

      Output

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

      Spread с вызовами функций

      Spread также можно использовать с аргументами в вызовах функций.

      Например, у нас имеется функция multiply, которая берет три параметра и умножает их:

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

      Обычно мы передаем три переменных по отдельности как аргументы вызова функции, примерно так:

      multiply(1, 2, 3)
      

      Результат будет выглядеть следующим образом:

      Output

      6

      Однако если все значения, которые вы хотите передать функции, уже существуют в массиве, синтаксис syntax позволит использовать каждый элемент массива в качестве аргумента:

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

      Это даст тот же результат:

      Output

      6

      Примечание. Без spread этого можно добиться с помощью apply():

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

      Это даст нам следующее:

      Output

      6

      Теперь вы увидели, как можно использовать spread для сокращения кода и можете рассмотреть другой вариант использовать параметров ... синтаксиса: rest.

      Параметры Rest

      В последнюю очередь в этой статье мы расскажем о синтаксисе параметра rest. Синтаксис аналогичен синтаксису spread (...), но имеет противоположный эффект. Вместо распаковки массива или объекта на отдельные значения синтаксис rest создаст массив с неограниченным количеством аргументов.

      Например, если в функции restTest мы захотим использовать массив args, состоящий из неограниченного количества аргументов, мы получим следующее:

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

      Все аргументы, переданные в функцию restTest, теперь доступны в массиве args:

      Output

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

      Синтаксис Rest можно использовать как единственный параметр или как последний параметр в списке. Если его использовать как единственный паарметр, он соберет все аргументы, но в конце списка он соберет все остающиеся аргументы, как показано в этом примере:

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

      При этом будут отдельно приниматься два аргумента, а остальные будут сгруппированы в массив:

      Output

      1 2 [3, 4, 5, 6]

      В более старом коде переменную arguments можно было бы использовать для сбора всех аргументов, передаваемых в функцию:

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

      Результат выглядел бы так:

      Output

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

      Однако такой подход имеет ряд недостатков. Во первых, переменную arguments нельзя использовать со стрелочными функциями.

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

      При этом будет возникать ошибка:

      Output

      Uncaught ReferenceError: arguments is not defined

      Кроме того, arguments не является истинным массивом и не может использовать такие методы как map и filter без предварительной конвертации в массив. Он будет собирать все передаваемые аргументы, а не только остальные аргументы, как показано в примере restTest(one, two, ...args).

      Rest можно использовать и при деструктурировании массивов:

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

      Это даст нам следующее:

      Output

      hammer ["screwdriver", "wrench"]

      Также Rest можно использовать при деструктурировании объектов:

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

      Результат будет выглядеть так:

      Output

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

      Таким образом, синтаксис rest дает эффективные методы для сбора неопределенного количества элементов.

      Заключение

      В этой статье мы рассказали о деструктурировании, синтаксисе spread и параметрах rest. Краткое содержание:

      • Деструктурирование используется для создания переменных из элементов массива или свойств объекта.
      • Синтаксис Spread используется для распаковки элементов с итерацией, таких как массивы, объекты и вызовы функций.
      • Синтаксис параметра Rest создает массив из неограниченного количества значений.

      Деструктурирование, параметры rest и синтаксис spread — полезные функции JavaScript, позволяющие сохранять код лаконичным и чистым.

      Если вы хотите увидеть деструктурирование в действии, пройдите обучающий модуль «Настройка компонентов React с помощью Props», где этот синтаксис используется для деструктурирования данных и их передачи компонентам клиентской части. Если вы хотите узнать больше о JavaScript, вернитесь на страницу серии статей по программированию на JavaScript.



      Source link