ECMAScript 6

Posted on

var、let、const

var

Before explaining let and const, let’s first understand var.

The VaR Declaration Statement Declares a variable and optionally initializes it to a value.

  1. VaR is used to declare variables;
  2. The variables declared by VAR have no block level scope and are valid globally;
  3. VAR has the phenomenon of variable promotion, so the variables defined by VAR can be used first and then declared;

example one:

function fn() {
  var a = 1
  console.log(a)    // 1
}
fn()

example two:

function fn() {
  if (true) {
    console.log(a)    // undefined
  } else {
    var a = 1
  }
}
fn()

The above code prints undefined because the VaR variable is promoted. The code is equivalent to:

function fn() {
  var a
  if (true) {
    console.log(a)
  } else {
    a = 1
  }
}
fn()

example three:
Now we have the following code. How can we only expose FN as a global variable?

var a = 1
window.fn1 = function() {
  console.log(a)
}

becausevar a = 1A global variable a is generated

If we wrap the code in a function, the code is as follows:

function fn2() {
  var a = 1
  window.fn1 = function() {
    console.log(a)
  }
}

If like the above, although a is a local variable, this function has the name FN2 and is also a global variable

So use the immediate execution function, and the code is as follows:

(function() {
  var a = 1
  window.fn1 = function() {
    console.log(a)
  }
}())

But this code is too cumbersome, in ES6, using let can easily solve this problem!

let

Let Statement Declares a local variable of the block level scope and optionally initializes it to a value.

  1. Let keyword is used to declare variables;
  2. The variables declared by let keyword cannot be declared repeatedly;
  3. There is a block level scope, which is only available in the declared block or sub block;
  4. There is no variable promotion. You can only declare it before using it;
  5. The variables declared by let have temporary dead zone. As long as let exists in the block level scope, the variables declared by let are bound to this region and are no longer affected by external factors;

example one:

{
  let a = 1
  console.log(a)    // 1
    {
      let a = 2
      console.log(a)    // 2
    }
}

example two:

{
  let a = 1
  console.log(a)    // 1
    {
      console.log (a) // error report
      let a = 2
    }
}

example three:

{
  let a = 1
  console.log(a)    // 1
  Let a = 2 // an error is reported. A has been declared
}

const

Const keyword is used to declare constants. Constants are block level scopes, much like variables defined by let statements. The value of a constant cannot be changed by reassignment and cannot be redeclared.

  1. Const must be given an initial value when it is declared. Once declared, the declared value cannot be changed, let alone repeated declaration;
  2. Const is used to declare read-only constants;
  3. There is a block level scope, which is only available in the declared block or sub block;
  4. The identifier is usually in upper case;
  5. There is no variable promotion. You can only declare it before using it;
  6. The variable declared by const has a temporary dead zone. As long as const exists in the block level scope, the variable declared by const is bound to this region and is no longer affected by external factors;

example one:

{
  const a = 1
  console.log(a)    // 1
  A = 2 // error
}

example two:

const arr = [1, 2, 3]
arr[0] = 2
console.log(arr)    // [2, 2, 3]

const obj = {
  name: 'zww',
  age: 18
}
obj.name = 'lq'
console.log(obj)    // {name: "lq", age: 18}

Note: the element modification of arrays and objects is not a constant modification, and no error will be reported.

Related topics

Question One

var a = 1

function fn() {
    console.log(a)
  } 
? ? ? ? 
fn()

A:

var a = 1

function fn() {
  console.log(a)    // 2
}
a = 2
fn()

Question Two

What will the following code print?

for (var i = 0; i < 5; i++) {}
console.log(i)

A:
The above code is equivalent to:

var i
for (i = 0; i < 5; i++) {}
console.log(i)    // 5

Question Three

What will the following code print?

for (var i = 0; i < 5; i++) {
  function fn() {
    console.log(i)
  }
  button.onclick = fn
}
console.log(i)

A: will print 5

Question Four

What will be printed by clicking the third Li and how to solve this problem?

var liTags =  document.querySelectorAll ('li ') // suppose there are only six li
for (var i = 0; i < liTags.length; i++) {
  liTags[i].onclick = function() {
    console.log(i)
  }
}

A: no matter which Li you click, it will print out 6!

method one:

var liTags = document.querySelectorAll('li')
for (var i = 0; i < liTags.length; i++) {
  let j = i
  liTags[j].onclick = function() {
    console.log(j)
  }
}

method two:

var liTags = document.querySelectorAll('li')
for (var i = 0; i < liTags.length; i++) {
  (function(j) {
    liTags[j].onclick = function() {
      console.log(j)
    }
  })(i)
}

method three:

var liTags = document.querySelectorAll('li')
for (let i = 0; i < liTags.length; i++) {
  liTags[i].onclick = function() {
    console.log(i)
  }
}

reference material

Ruan Yifeng let and const commands

MDN – var

MDN – let

MDN – const

Zhihu – it took me two months to understand

Deconstruction and assignment of variables

ES6 allows to extract values from arrays and objects and assign values to variables according to a certain pattern, which is called deconstruction assignment.

Deconstruction assignment of arrays

let name = ['zww', 'lq', 'lqzww']
let [a, b, c, d] = name
console.log(a, b, c, d);    // zww lq lqzww undefined

Deconstruction assignment of objects

let info = {
name
: 'zww',
age
: 18,
like
: function() {
console
.log("game");
}
}
let { name, age, like } = info
console
.log( Posted in HTML

Leave a Reply

Your email address will not be published.