当前位置：网站首页>Let variable declaration feature of ES6 new feature and its case

Let variable declaration feature of ES6 new feature and its case

2022-07-29 03:45:00 【Haha, APE】

let The keyword is used to declare variables , Use let Declared variables have several characteristics ：
  1. Duplicate statements are not allowed
  2. Has block level scope （ local variable ）
  3. No variable promotion
  4. Does not affect the scope chain

Code demonstration :

1. Duplicate statements are not allowed 
 	// 1. Variables cannot be declared repeatedly 
 	let beautifulGirl = " Xiao Liu "
    let beautifulGirl = " Classmate Liu "
    //  Report errors :Cannot redeclare block-scoped variable 'beautifulGirl'
2. Block level scope （ local variable ）
  	{
    
        var girl = " Xiao Liu "
    }
    console.log(girl);
    //  Print the results :  Xiao Liu 

  	{
    
        let girl = " Xiao Liu "
    }  
    console.log(girl);
    //  Report errors :Uncaught ReferenceError: girl is not definedat
Be careful ： stay ifelsewhilefor Use in let It's all block scope
3. No variable promotion

Use var ( There is variable promotion )

	console.log(girl);
    var  girl = " Xiao Liu "
 	//  Print the results :undefined

Use let ( No variable promotion )

 	console.log(girl);
    let  girl = " Xiao Liu "
    //  Report errors :ncaught ReferenceError: Cannot access 'girl'
notes ： Variable promotion is used before variable creation （ Like output ： The output is the default value ）,let non-existent ,var There is
4. Does not affect the scope chain 
{
    
    let beautifulGirl = " Xiao Liu ";
    function fn(){
    
        console.log(beautifulGirl);
    }
    fn()
    //  Print the results : Xiao Liu 
}
notes ： Scope chain is a code block with code blocks , Just like regular programming languages , Local variables in the upper code block are available to the lower level

let Use cases ：

html Code 

   <style>
        .item {
    
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
    
	<body>
	    <div class="container">
	        <h2 class="page-header">let Case study ： Click on div Change the color </h2>
	        <div class="item"></div>
	        <div class="item"></div>
	        <div class="item"></div>
	    </div>
	</body>

JavaScript Code 

//  obtain class be known as item The elements of 
let items = document.querySelectorAll(".item")

//  Traverse binding elements 
for(let i=0;i<items.length;i++){
    
    items[i].onclick = function(){
    
        //  Modify the background color of the current element 
        //  Writing a 
        // this.style.background = 'pink'
        //  Write two :
        items[i].style.background = "pink"
    }
}

Write 2 pay attention to events
stay for Circulation is used i You have to use let Statement
If you use var You're going to report a mistake ( reason ：var Global variable )
After the cycle i The value of will become 3,items[i] The following table will be crossed
let It's a local variable
We need to know when clicking i That's the value. 

    // Use var Equivalent to :
    { var i = 0; }
    { var i = 1; }
    { var i = 2; }
    { var i = 3; }
    //  The following statement will overwrite the above , So every time you click on an event, you find 3

    //  While using let Use var Equivalent to :
    { let i = 0; }
    { let i = 1; }
    { let i = 2; }
    { let i = 3; }
    
    //  because let Local variables are declared , Each one keeps its original value 
    //  When you click the event call, you get the corresponding  i
summary :let Declared variables are more standardized and reasonable , Use as much as possible let To declare and use variables
原网站

版权声明
本文为[Haha, APE]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130552382415.html

边栏推荐

猜你喜欢

随机推荐