In the last article, the comparison between the import and export of AMD and ES6 modules in JavaScript tends to be theoretical. Some students have communicated with each other in wechat groups or in private, so this article summarizes and practices the import and export of JS

Exports will not work when given directly to module.exports

Js array assignment problem: value transfer or reference?

var a = [1.2.3];
var b = a;
a = [4.5.6];
console.log(b);  / / = > [1, 2, 3]
Copy the code

Continue to look at

var a = [1.2.3];
var b = a;
a.pop();
console.log(b);  / / = > [1, 2]
Copy the code

Why is this happening?

Assignments to arrays and objects are passed by reference

Take a look at this (note section)

var a = [1.2.3];// a points to an array [1,2,3];
var b = a;//b points to the array pointed to by a [1,2,3];
a = [4.5.6];//a refers to the new array [4,5,6].
console.log(b);  //b still points to array [1,2,3];
Copy the code

Take a look at this again (note the comment section)

var a = [1.2.3];// a points to an array [1,2,3];
var b = a;//b points to the array pointed to by a [1,2,3];
a.pop();// The array instance pointed to by a has a POP operation
console.log(b);  //=>a and B refer to the same array, a variable, so b is also a variable.
Copy the code

Look at a picture, very graphic description

var test = {
  "name": "zhangshuo"
}
var demo = test;

demo.name = "want you"
// What do you think test is?
console.log(test)//=>{ name: 'want you' }
Copy the code

Here’s a comment to explain it (same here)

var test = {  "name": "zhangshuo"}//test points to an object {"name": "zhangshuo"}
var demo = test;//demo points to the object pointed by test {"name": "zhangshuo"}
demo.name = "want you"{"name": "want you"}
// What do you think test is?
console.log(test)//=>{ name: 'want you' }
Copy the code

Test and demo refer to the same object, so if one of them changes, they both change the same thing, so let’s change the demo up here

var test = {
  "name": "zhangshuo"
}
var demo = test;
  test={
    "name": "Changed this name"
  }
demo.name = "want you"
// What do you think test is?
console.log(test)//=>{name: 'change this name'}
Copy the code

Need I say more about this? Again, this is explained by a comment

var test = {  "name": "zhangshuo"}//test points to an object {"name": "zhangshuo"}
var demo = test;//demo points to the object pointed by test {"name": "zhangshuo"}
  test={ "name": "Changed this name" }{"name": "changed this name"}
demo.name = "want you"{"name": "want you"}
// What do you think test is?
console.log(test)//=>{name: 'change this name'}
Copy the code

Exports/module. Exports/module. Exports/module. Exports/module

  let md = {exps: {}}//md points to an object {exps:{}}
  let exps = md.exps//exps points to the object that md.exps points to. This empty object {}
  md.exps = {a: 1.b: 2}//md.exps points to a new object {a: 1, b: 2}
  exps.c=3{c: 3}
  console.log(md.exps); // New object {a: 1, b: 2}
Copy the code

Exps is module. Exports. Exps is exports

var exports = module.exports;
Copy the code

Module. exports={….. when assigned directly to module.exports }), module.exports points to a new object,exports will fail

Assigning exports directly breaks the link between exports and module.exports

Again, that’s the premise

var exports = module.exports;
Copy the code

Exports is from module, exports points to module. Exports refers to an object that assigns a value directly to exports, i.e

 exports = {a:1}
Copy the code

Exports refers to a new object, not the same object as module.exports, so don’t assign exports directly (exports =…).

Practice => Export

exports

Exports of the output. Js

exports.str='String string'// Export a string
exports.bool=true// Export Boolean
exports.num=123/ / export number
exports.foo=(r) = >{// Export the function
  console.log(The derived function is:${r}`);
}
exports.arr=[1.2.3]// Export the array
exports.obj={ a:1.b:2}// Export objects
Copy the code

input.js

  const iptObj= require('./output.js')
  console.log(iptObj.str);/ / = > string string
  console.log(iptObj.bool);//=>true
  console.log(iptObj.num);/ / = > 123
  console.log(iptObj.arr);//=>[1, 2, 3]
  console.log(iptObj.obj);//=>{ a: 1, b: 2 }
  iptObj.foo('parameters')//=> Export function: parameter
Copy the code

module.exports

The module. The exports of the output. Js

module.exports={
  str:'String string'.bool:true.num:123.foo:(r) = >{
    console.log(The derived function is:${r}`);
  },
  arr: [1.2.3].obj: {a:1.b:2}}Copy the code

input.js

  const iptObj= require('./output.js')
  console.log(iptObj.str);/ / = > string string
  console.log(iptObj.bool);//=>true
  console.log(iptObj.num);/ / = > 123
  console.log(iptObj.arr);//=>[1, 2, 3]
  console.log(iptObj.obj);//=>{ a: 1, b: 2 }
  iptObj.foo('parameters')//=> Export function: parameter
Copy the code

Module. exports’ output.js also supports the following syntax

module.exports.str='String string'
module.exports.bool=true
module.exports.num=123
module.exports.foo=(r) = >{
  console.log(The derived function is:${r}`);
}
module.exports.arr=[1.2.3]
module.exports.obj={ a:1.b:2}
Copy the code

Input. Js unchanged

export

The output of the export. Js

export const srt = 'String string'
export const bool = true
export const num = 123
export const arr = [1.2.3]
export const obj = { a: 1.b: 2}
export function foo(r) {
  console.log(The derived function is:${r}`);
}
Copy the code

input.js

import {str,arr,obj,bool,num,foo} from './output'
console.log(str)
console.log(arr)
console.log(obj)
console.log(bool)
console.log(num)
foo('parameters')
Copy the code

Export output.js can also be written in the following format

const str = 'String string' 
const bool = true
const num = 123
const arr = [1.2.3]
const obj = { a: 1.b: 2}
function foo(r) {
  console.log(The derived function is:${r}`);
}
export {
  str,bool,num,arr,obj,foo
}
Copy the code

Input.js imports support renaming

import {str as STR,arr,obj,bool,num,foo as FOO} from './output'
console.log(STR)
console.log(arr)
console.log(obj)
console.log(bool)
console.log(num)
FOO('parameters')
Copy the code

Continue renaming

import * as newName from './output'
console.log(newName.str)
console.log(newName.arr)
console.log(newName.obj)
console.log(newName.bool)
console.log(newName.num)
newName.foo('parameters')
Copy the code

export default

The export of the default output. Js

export default {
  str: 'String string'.bool: true.num: 123.foo: (r) = > {
    console.log(The derived function is:${r}`);
  },
  arr: [1.2.3].obj: { a: 1.b: 2}}Copy the code

input.js

import defaultObj from './output'
console.log(defaultObj.str)
console.log(defaultObj.arr)
console.log(defaultObj.bool)
console.log(defaultObj.num)
console.log(defaultObj.obj)
defaultObj.foo('ef')//=> The exported function is ef
Copy the code

Export default output.js can also be written as follows

const str = 'String string'
const bool = true
const num = 123
const arr = [1.2.3]
const obj = {a: 1.b: 2}
function foo(r) {
  console.log(The derived function is:${r}`);
}
export default {
  str,
  bool,
  num,
  arr,
  obj,
  foo
}
Copy the code

Input. Js unchanged

conclusion

This article is the summary and practice of the last article

  • Exports will not work when given directly to module.exports
  • Assigning exports directly breaks the link between exports and module.exports
  • Export, export default, exports, module.exports examples of specific usage methods

For more front-end resources, please pay attention to wechat public number “Front-end strangers on cold”.

The original link

Refer to the link

Js array assignment question: Value passing or reference?