【JS】Is a name import deconstructed

Preface

The following two js implement the exposure and import functions

export let n = 1
export const increase = () => {
  n++
}

• 1
• 2
• 3
• 4

AI writing code

import { n, increase } from "./"
console.log(n, increase)

• 1
• 2

AI writing code

At first glance{ name, sayHello }The writing method is consistent with the deconstruction of JS. So is the name import a deconstruction? Let's analyze it below.

analyze

Try to modify n

import { n, increase } from "./"

console.log(n) // 1
increase()
console.log(n) // 2

• 1
• 2
• 3
• 4
• 5

AI writing code

Simulate to change the import method to JSDeconstruction：

const obj = {
  n: 1,
  increase() {
    this.n++
  },
}
const { n, increase } = obj

console.log(n) // 1
increase()
console.log(n) // 1

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

AI writing code

It can be found that the printing results of the two are not consistent, so we came to the conclusion:Named importNot a deconstruction.

Summarize

Deconstruction full nameDeconstruction assignment, deconstructs the value from the object and assigns the value toNew variables, new variables have their own storage space, so even if the variables in the object change, they will not affectNew variables, can be understood asNew variablesofInitial valueJust deconstruct the values ​​in the object at that moment.

Named import is different, it is not a variableOpen up new space, but only refers to the value in the object, so when the object changes, the value will also change.

So name import is notDeconstruction assignment, it is necessary to distinguish between the two.