【ES】笔记-let 声明及其特性

let 声明及其特性

  1. 声明变量
    • 变量赋值、也可以批量赋值
        let a;
        let b,c,d;
        let e=100;
        let f=521,g='iloveyou',h=[];
  1. 变量不能重复声明
         let star='罗志祥';
         let star='小猪';

【ES】笔记-let 声明及其特性_第1张图片

  1. 块级作用域,let声明的变量只在块级作用域内有效
        {
            let girl='周杨青';
        }
        console.log(girl)

注意:在 if else while for 中使用let都是块级作用域
在这里插入图片描述

  1. 不存在变量提升

使用var(存在变量提升)

	console.log(girl);
    var  girl = "小刘同学"
 	// 打印结果:undefined

使用let(不存在变量提升)

 	console.log(girl);
    let  girl = "小刘同学"
    // 报错:ncaught ReferenceError: Cannot access 'girl' 

注:变量提升就是在变量创建之前使用(比如输出:输出的是默认值),let不存在,var存在

  1. 不影响作用域链
        {
            let school='德仔同学';
            function fn(){
                console.log(school);
            }
            fn();
            // 打印结果:小刘同学
        }

注:作用域链是代码块内有代码块,跟常规编程语言一样,上级代码块中的局部变量下级可用

  1. let使用案例:
    html代码
   <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案例:点击div更改颜色h2>
	        <div class="item">div>
	        <div class="item">div>
	        <div class="item">div>
	    div>
	body>

JavaScript代码

// 获取class名为item的元素
let items = document.querySelectorAll(".item")

// 遍历绑定元素
for(let i=0;i<items.length;i++){
    items[i].onclick = function(){
        // 修改当前元素的背景颜色
        // 写法一
        // this.style.background = 'pink'
        // 写法二:
        items[i].style.background = "pink"
    }
}

写法二注意事件
在for循环是使用的 i 必须要使用let声明
如果使用var就会报错(原因:var是全局变量)
经过循环之后i的值会变成3,items[i]就会下表越界
let是局部变量
我们要知道点击的时候 i 是那个值

   //使用var相当于是:
    { var i = 0; }
    { var i = 1; }
    { var i = 2; }
    { var i = 3; }
    // 下面的声明会将上面的覆盖掉,所以点击事件每次找到的都是3

    // 而使用let使用var相当于是:
    { let i = 0; }
    { let i = 1; }
    { let i = 2; }
    { let i = 3; }
    
    // 由于let声明的是局部变量,每一个保持着原来的值
    // 点击事件调用的时候拿到的是对应的 i

总结:let声明的变量更加规范合理,尽量使用let来声明和使用变量

你可能感兴趣的:(#,ECMAScript,笔记,es,let)