当前位置：网站首页>[ES6] let, const keywords and deconstruction assignment

[ES6] let, const keywords and deconstruction assignment

2022-07-16 08:32:00 【Su Liang py】

Author's brief introduction ： Su Liang （ Focus on web crawlers , Data analysis , On the way to learning the front end ）
Blog home page ： Su Liang .py The blog of
Series column ：ES6 Basic grammar
Aphorisms ： The sea is wide with fish , The sky is high and the birds are flying .
If you think the blogger's article is good , I hope you can support me for the third time in a row ！！！
Follow the likes collection

List of articles

es Introduce

ES Full name EcmaScript, Is the specification of scripting language , And usually write JavaScript, yes EcmaScript An implementation of , therefore ES New features actually mean JavaScript New features

Why learn new features ？

Grammatical simplicity , Rich in functions
Framework development and Application
Front end development job requirements

Why study es6

ES6 The version change content of is the most , It's a milestone
ES6 Add many new syntax features , Programming is simpler 、 Efficient
S6 Is the front-end development trend , Necessary skills for employment

let keyword

let The key words and var Keywords are also used to declare variables , Just with var There are the following differences ：

Variables cannot be declared repeatedly

stay es6 in let Keyword does not allow repeated declaration of variables , As shown in the figure below, an error will be reported ：Uncaught SyntaxError SyntaxError: Identifier 'name' has already been declared

  let name ='suliang';
  let name = 'xiaoming';

Block level scope

Use let When declaring variables in a code block , Only in code blocks .

{
    
    var name = 'su'
    let age = 21;
}
console.log(name); //su
console.log(age); //ReferenceError: age is not defined

No variable promotion

Use var Keyword when defining a variable , You can output the variable before defining it , The data type is undefined , But use let Keyword when defining variables , It is not allowed to call a variable before declaring it .

console.log(age); //ReferenceError: Cannot access 'age' before initialization
let age = 21;

Does not affect the scope chain

function fun1(){
    
     let num = 10;
     function fun2(){
    
         let num1 = num +15;
         console.log(num1);
     }
     return fun2();
 }
 fun1(); //25

let Keyword small case

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script> //let  Case study  window.onload = function(){
      let items = document.getElementsByClassName('item'); for(let i = 0;i<items.length;i++){
      items[i].onclick = function(){
      items[i].style.backgroundColor = 'yellow' } } } </script>
    <style> div{
      width: 150px; height: 80px; border: 2px solid lightblue; display: inline-block; } </style>
</head>
<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
</html>

When using for When looping through elements , Use var Keyword declaration variables i, May be an error ：TypeError: Cannot read properties of undefined, Because at this time var Declarative i There is no block level scope , Last i The value of is 3, and item[3] non-existent , So it's wrong . While using let Can solve this problem .

window.onload = function(){
    
     let items = document.getElementsByClassName('item');
     for(var i = 0;i<items.length;i++){
    
         items[i].onclick = function(){
    
             items[i].style.backgroundColor = 'yellow'
         }
     }
 }

Insert picture description here

const keyword （ declare constant ）

stay es6 How to add the declaration of constants in , That's using const keyword , It uses const keyword , It has the following characteristics .

The initial value must be given when declaring

The initial value must be given when declaring constants , Otherwise, the report will be wrong ：SyntaxError: Missing initializer in const declaration

Try to use capital letters when declaring constants

const NAME = 'suliang';

The value of a constant cannot be modified

Once the value of a constant is defined, it cannot be modified , Otherwise, the report will be wrong ：TypeError: Assignment to constant variable.

  const NAME = 'suliang';
  NAME = 'xiaoming';

Block level scope

and let equally ,const It also has block level scope

{
    
    const AGE= 15;
}
console.log(AGE) 
//ReferenceError: AGE is not defined

For arrays / Object elements , No modification of constants

const LIST = ['gala','xiaohu','wei','ming'];
LIST.push('breath');
console.log(LIST);
//(5) ['gala', 'xiaohu', 'wei', 'ming', 'breath']

Deconstruct assignment

stay es6 You can assign each value in a constant to multiple variables .

Deconstruction and assignment of arrays

const RNG = ['xiaohu','ming','gala'];
   let [a,b,c] = RNG;
   console.log(a); //xiaohu
   console.log(b); //ming
   console.log(c); //gala

Object's deconstruction assignment

The most commonly used one is usually to assign values to the deconstruction of objects , This makes it easier to call methods of objects .

// Object's deconstruction assignment 
const su = {
    
    name:'suliang',
    age : 21,
    sayName:function(){
    
        console.log(name)
    }
}
let {
    name,age,sayName} = su;
console.log(name); //suliang
console.log(age); //21
console.log(sayName); //ƒ (){console.log(name) }
 // Call object method 
su.sayName(); // Not applicable to deconstruction assignment 
sayName();  // Use assignment to deconstruct