Шаблон деструктурирующего присваивания не совсем понятен в JavaScript

Question

С веб-сайта exploringjs

До ES6 не было соответствующего механизма для извлечения данных.Вот что такое деструктуризация - она ​​позволяет извлекать несколько свойств из объекта через шаблон объекта.Например, в левой части назначения:

const { first: f, last: l } = obj;

И я понимаю пример ниже, например, можно было бы назначить метод createServer из модуля httpк переменной с тем же именем.

const { createServer } = require('http');

Но как насчет этого:

const { parse: parseUrl } = require('url');

Как вы используете это в своем коде?

Answer 1

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

• в первом примере, поскольку у obj есть свойство с именем name, из которого мы можем извлечь егоэто

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

  let obj = {
    name :'maged' 
  }
  let {name} = obj ;  // have this prop 
  let {fullName} = obj ; // don't have this prop 
  console.log(name) ; // maged  
  console.log(fullName) ;  // undefined 

  • в этом примере мы возвращаем объект из функции, для которой для требуется функция в nodejs , которая возвращаетобъект экспорта

function require(module) {
  return {
      name : module ,
      method1: '1' ,
      method2 : '2'
   }
}
let obj =  require('url') ; 
let {name,method1,method2} = obj ; 
console.log(name) ; // url 
console.log(method1) ; // 1 
console.log(method2) ;  // 2 

• Как вы можете видеть, мы легко извлекаем несколько свойств из возвращаемого объекта

• в нашем третьемВ примере мы увидим, как мы можем извлечь prop для новой переменной с именем

let obj = {
  a :'a' ,
  b:'b' 
}
let {a:first , b:second} = obj ;
console.log(first) ; // a 
console.log(second) // b
console.log(a); // Uncaught ReferenceError: a is not defined 

, как вы можете видеть, мы извлекаем свойства как новые имена переменных, и это здорово,

• Теперь в последнем примере мы увидим, какприсвойте значение переменной по умолчанию, если оно не существует в объекте, что хорошо для таких вещей, как свойства объекта по умолчанию при передаче в функцию,

let obj = {
  fullName : 'Sniper' 
}
let {fullName='super'} = obj ; // sniper from the obj 
console.log(fullName) ; 
let {name='maged'} = obj ; // maged because undefined in the obj 
console.log(name) ;

Я надеюсь, что эти примеры каким-то образом помогут вам понять, как работает деструктура и как она работает

Примечание. Деструктура работает с массивами

Answer 2

Это просто извлечение данных parse и создание переменной parseUrl в этой области.

Это может быть очень удобно, когда (предположим) вы работаете с API и хотите использовать переменные вместочленский доступ:

const {id: serviceID} = await fetchDefaultService();
const {id: uid} = await fetchUser(serviceID, uid);

Он просто позволяет управлять именами (parseUrl имеет большее значение, чем parse) и позволяет избежать потенциальных конфликтов.

Answer 3

Строка в вашем примере отделяет функцию parse от модуля url и переименовывает ее parseUrl.Вы можете использовать его следующим образом:

> const { parse: parseUrl } = require('url')
undefined
> parseUrl('http://stackoverflow.com/')
Url {
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: 'stackoverflow.com',
  port: null,
  hostname: 'stackoverflow.com',
  hash: null,
  search: null,
  query: null,
  pathname: '/',
  path: '/',
  href: 'http://stackoverflow.com/' }

Это просто копия / вставка из node repl.Откройте свой терминал и введите команду node, и вы можете в интерактивном режиме набрать js и проверить, что происходит.

Answer 4

Вы используете это, когда хотите изменить имя переменной, приходящей на require('url')

, потому что require ('url') содержит parse, но допустим, у вас уже есть переменная с именем parse вваша текущая область и вы хотите иметь parse из require('url'), в этом случае вы используете этот шаблон для переименования в parseUrl

Пример:

const parse = "some value";
const { parse: parseUrl }  = require('url');
console.log(parse); // "some value";
console.log(parseUrl); // value coming from require('url');