EcmaScript笔记2-let变量声明

最新推荐文章于 2022-05-27 08:57:29 发布

ofo300

最新推荐文章于 2022-05-27 08:57:29 发布

阅读量151

点赞数

分类专栏： Web前端ES6笔记文章标签： ecmascript javascript html

本文链接：https://blog.csdn.net/ookami6497/article/details/120230950

版权

Web前端ES6笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

let变量声明及声明特性

声明特性
经典案例，点击div更换颜色

声明特性

例子：let a,b,c;

let 声明特性

1.变量不能重复声明（如果使用var声明变量的话，可以重复声明）

2.块儿级作用域

使用花括号“{}”包裹的一块代码块

let声明的变量只在代码块里面有效（相当于let 声明的为局部变量，var声明的为全局变量）

3.不存在变量提升（变量提升：代码在执行之前会去收集变量）

例如：

console.log(song);
var song = '恋爱达人';

执行结果：
undefined

并没有报错，可以正常执行，这就是代码提升的一个现象。

如果使用let定义便会报错

4.不影响作用域

例如

{
	let school = '希望学校'
	function fn()
	{
		console.log(school);
	}
	fn();
}

运行结果：
希望学校

这里在fn函数的作用域中，没有school这个变量，所以会向上一个作用域中寻找到school变量并输出。

经典案例，点击div更换颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let案例：点击div更改颜色</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitterbootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .item {
            width: 100px;
            height: 50px;
            border: solid 1px rgb(42, 156, 156);
            float: left;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="page-header">let案例：点击div更改颜色</h2>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        // 获取div元素对象
        let items = document.getElementsByClassName('item');
        // 遍历并绑定事件
        for (let i = 0; i < items.length; i++) {
            items[i].onclick = function() {
                // 修改当前元素的背景颜色
                items[i].style.background = 'pink'; // 写法二
            }
        }
    </script>
</body>

</html>

ofo300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
EcmaScript笔记2-let变量声明

let变量声明及声明特性声明特性经典案例，点击div更换颜色声明特性例子：let a,b,c;let 声明特性1.变量不能重复声明（如果使用var声明变量的话，可以重复声明）2.块儿级作用域使用花括号“{}”包裹的一块代码块let声明的变量只在代码块里面有效（相当于let 声明的为局部变量，var声明的为全局变量）3.不存在变量提升（变量提升：代码在执行之前会去收集变量）例如：console.log(song);var song = '恋爱达人';执行结果：undefined
复制链接

扫一扫