ES6: enhanced object writing & deconstruction & let/const

Enhanced writing of objects

When defining the properties and methods of objects, it has a more convenient and simple way to write

var name = "fzb";
var age = 21;
var address = "address";

var info = {
  name: name,
  // A simple way to write attributes
  age,
  say: function () {
    console.log(this.name + " say~");
  },
  // A simple way to write functions
  eat() {
    console.log(this.name + " eat~");
  },
  // Calculated attribute name
  [address]: "changsha",
};

console.log(info.name); // fzb
console.log(info.age); // 21
info.say(); // fzb say~
info.eat(); // fzb eat~
console.log(info[address]); // changsh

deconstruction

Array deconstruction

var names = ["fzb", "gj", "sal"];

// Array deconstruction
var [name1, name2, name3] = names;
console.log(name1); // fzb
console.log(name2); // gj
console.log(name3); // sal

Elements of deconstruction surface

Use to carry out space occupation

var names = ["fzb", "gj", "sal"];

// Deconstruct only the last element
var [, , name3] = names;
console.log(name3); // sal

Deconstruction default

var names = ["fzb", "gj", "sal"];

// Set a default value for trees that cannot be deconstructed
var [name1, name2, name3, name4 = "zzw"] = names;
console.log(name1); // fzb
console.log(name2); // gj
console.log(name3); // sal
console.log(name4); // zzw

Deconstruct the remaining values

var names = ["fzb", "gj", "sal"];

// Deconstruct some elements, and the remaining elements are deconstructed into an array
var [name1, ...name2] = names;
console.log(name1); // fzb
console.log(name2); // [ 'gj', 'sal' ]

Object deconstruction

var info = {
  name: "fzb",
  age: 21,
  address: "changsha",
};

// The deconstruction of objects is independent of the deconstruction order
var { address, name, age } = info;
console.log(address); // changsha
console.log(age); // 21
console.log(name); // fzb

rename

If you do not want to use the key in the object as the variable name, you can rename it

var info = {
  name: "fzb",
  age: 21,
  address: "changsha",
};

// rename
var { address: d, name: n, age: a } = info;
console.log(d); // changsha
console.log(n); // 21
console.log(a); // fzb

Deconstruction default

var info = {
  name: "fzb",
  age: 21,
};

// Deconstruction default
var { name, age, address = "china" } = info;
console.log(age); // 21
console.log(name); // fzb
console.log(address); // china

let/const

Basic use and precautions of let/const

let/const is used to declare variables

const name = "fzb";
// It cannot be assigned twice, and an error is reported: TypeError: Assignment to constant variable
// name = "gj";
console.log(name); // fzb

let age = 21;
age = age + 1;
console.log(age); // 22

// Note 1: if const is used to declare an object type, the internal value of the object can be as long as the pointer address pointed to by the variable remains unchanged
const info = {
  age: 21,
};
// info = {}; //  This is bound to report an error and change the direction of info
info.age += 10;
console.log(info); // { age: 31 }

// Note 2: let/const cannot declare objects repeatedly, but var can

var address = "china";
var address = "changsha";
console.log(address); // changsha

let score = 70;
// let score = 100; // SyntaxError: Identifier 'score' has already been declared
console.log(score); // 70

let number = 1;
// let number = 2; // SyntaxError: Identifier 'number' has already been declared
console.log(number); // 1

let/const and scope promotion

var has scope elevation, while let and const have no scope elevation

// For var keyword declaration
console.log(name); // undefined
var name = "fzb";

// For const keyword declaration
// console.log(age);
//Error: referenceerror: cannot access' age 'before initialization
const age = 21;
console.log(age); // 21

// For let keyword declarations
// console.log(height);
//Error: referenceerror: cannot access' height 'before initialization
let height = 188;
console.log(height); // 188

Relationship between let/const and global object window

For var variables declared globally, they will be placed on the window, and one will change and the other will also change

var age = 21;
console.log(window.age); // 21
window.age++;
console.log(age); //22

Variables declared globally by const will not be placed on the window

const age = 21;
console.log(window.age); // undefind

Variables declared globally by let will not be placed on window

let age = 21;
console.log(window.age); // undefind

In the old ECMAScript standard, the GO object is the window object, and the var globally defined variables will appear on the window and change together.

In the new ECMAScript standard, there are no go, VO and AO objects, but variable environment (VE) and variable environment record (VER). It is precisely because of the emergence of new declaration keywords.

Combined with the above example, that is to say, the storage location of the declared variables is no longer GO(window), but the variables declared by var exist in the new storage location and still exist in the window, and interact with each other, while the objects declared by let and const all exist in the new storage location and do not exist in the window. Now the variables are stored in varable_ The storage mode of varableMap, which is a hash table.

Block level scope

Before ES6, there were only two global scopes and function scopes where there were scopes.

The concept of block level scope appeared in ES6

Let / const / function (a little special) / class has the concept of block level scope

if/switch/for has block level scope

{
  var name = "fzb";
  const age = 21;
  let height = 188;
  function sum(n1, n2) {
    return n1 + n2;
  }
  class Person {}
}

console.log(name); // fzb
// console.log(age); // Uncaught ReferenceError: age is not defined
// console.log(height); // Uncaught ReferenceError: height is not defined
console.log(sum(1, 2)); // 3
// console.log(new Person()); //Uncaught ReferenceError: Person is not defined

Summary: how is let/const different from var

let/const does not allow you to define variables with the same name repeatedly, while var can
let/const does not have variable promotion, but var does
The variables defined by let/const will not be added to the window, but the variables declared by var will be
let/const has the concept of block level scope, but var does not

Keywords: Javascript ECMAScript

Added by vandalite on Sat, 02 Oct 2021 02:03:25 +0300

Programming VIP