Summary of ES6 Common Knowledge Points (1)

“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Hello, everyone. I am L. I have been studying ES6 recently, so I have summarized the common knowledge points in ES6. This article mainly summarizes the knowledge of literal enhancement, array and object deconstruction, var/let/const comparison and so on.

Enhancement of literals

Enhancements to literals include property abbreviations, method abbreviations, and computed property names. When the attribute name is the same as the attribute value, you can abbreviate the attribute. Do not abbreviate methods as arrow functions because of the this pointing problem.

var name = 'hello'
var age = 18

var obj = {
  // 1. Shorthand for attributes
  name,
  age,

  // 2
  foo: function () {
    console.log(this); // obj is the object
  },
  bar() {
    console.log(this); //obj
  },
  baz: () = > {
    console.log(this); // The arrow function does not bind this, which is determined by the upper scope. This is {} globally in Node and window in browser
  },

  // 3. Calculate the attribute name
  [name + 123] :'hahahaha'
}

obj.foo()
obj.bar()
obj.baz()

// obj[name + 234] = 'llllll'
// console.log(obj);
Copy the code

Array and object deconstruction

Array deconstruction

(1) Arrays can be deconstructed in order. Prior to ES6, we used the index of the array to get the value.

var names = ['abc'.'cba'.'nba'] 
/* var item1 = names[0] var item2 = names[1] var item3 = names[2] */ 
// Unpack the array []
var [item1, item2, item3] = names 
console.log(item1, item2, item3); // abc cba nba
Copy the code

(2) Deconstruct any subsequent elements in the array. What if I just want to deconstruct the third element in the array? Then the following methods can be solved.

var [, ,itemz] = names
console.log(itemz); // nba
var [, itema] = names
console.log(itema); // cba

Copy the code

(3) Deconstruct an element and place the following elements in an array.

// Unpack an element and place the following elements in an array
var [itemx, ...items] = names
console.log(itemx, items); // abc [ 'cba', 'nba' ]
Copy the code

(4) Deconstruct the default value.

 var [a, b, c, d = 'dddd'] = names
 console.log(b, d); // cba dddd
Copy the code

Object deconstruction

It is common to deconstruct parameters in functions, such as the Action in Vuex that deconstructs the context to create a commit.

var obj = {
  name: 'hello'.age: 18.height: 1.80
}

// Object deconstruction
var {name, age, height} = obj
console.log(name, age, height); 18 1.8 / / hello
Copy the code

Rename.

/ / renamed
var {name: newName} = obj
console.log(newName); // hello
Copy the code

For the acquired object, we need to process a key, but we can’t determine whether its value exists, we can deconstruct the object and assign the default value.

var {address = "Shanghai"} = obj
console.log(address); / / Shanghai

var {hobby:newHobby='learning'} = obj
console.log(newHobby); / / learning
Copy the code

It is common to deconstruct parameters in functions.

function foo(info) {
  console.log(info.name, info.age); // hello 18
}

foo(obj)

function bar({name, height}) {
  console.log(name, height); / / hello 1.8
}

bar(obj)
Copy the code

Actions in VUex deconstruct the commit

Let and const

const

Const declares a constant and holds data that, once assigned, cannot be modified.

const name = 'abc'
name = 'cba'
Copy the code

TypeError: Assignment to constant variable The error. Note: If you assign a reference type (memory address), then you can find the corresponding object by reference and modify the contents of the object.

const obj = {
  name: 'hello'
}

obj = {}
Copy the code

TypeError: Assignment to constant variable The error. Because obj holds the reference address, it modifies the saved reference address by reassigning the null object.

Const can modify attributes in an object.

const obj = {
  name: 'hello'
}

obj.name = 'world'
console.log(obj.name); // world
Copy the code

Let and const do not allow variables to be declared repeatedly

Let and const do not allow variables to be declared repeatedly, but var does.

var foo = 'abc'
var foo = 'bca'
Copy the code

let foo = 'abc'
let foo = 'cba'
Copy the code

Let /const repeated declaration of variables will report SyntaxError: Identifier ‘foo’ has already been declared

Let and const have no scope enhancement

Scope-raising: In the scope of a declared variable, if the variable can be accessed before the declaration, then we call it scope-raising. There is scope promotion in var, but there is no scope promotion in let and const.

console.log(foo); // undefined
var foo = 'foo' 
Copy the code

Let and const are not scoped but are created during parsing.

console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
let foo = 'foo'
Copy the code

Block-level scopes have been added in ES6 and are valid for types declared by lets, const, function, and class.

{
  let foo = 'foo'
  function demo() {
    console.log('demo');
  }
  class Person {}}Copy the code

We can see that functions can still be called in the outer layer because most browsers have left function without block-level scope for compatibility with previous code.

// console.log(foo); // ReferenceError: foo is not defined
demo() // demo
let p = new Person() // ReferenceError: Person is not defined
Copy the code

if(true) {
  var foo = 'foo'
  let bar = 'bar'
}

console.log(foo); // foo
console.log(bar); // ReferenceError: bar is not defined 
Copy the code

var color = 'red'
switch(color) {
  case 'red':
    var foo = 'foo'
    let bar = 'bar'
}

console.log(foo); // foo
console.log(bar); // ReferenceError: bar is not defined
Copy the code

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

console.log(i); / / 5

for(let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}
console.log(i); // ReferenceError: i is not defined
Copy the code

Application of block-level scope

< button > button1</button>
<button>Button 2</button>
<button>Button 3</button>
Copy the code

Using var, whichever button is clicked will print out that the third button was clicked.

let btns = document.getElementsByTagName('button')
for(var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    console.log('the first' + i + 'One button gets clicked.'); }}console.log(i);
Copy the code

Using let creates block-level scope where clicking on a button prints out which button was clicked.

for(let i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    console.log('the first' + i + 'One button gets clicked.'); }}Copy the code

I can’t access I from the outer layer.