ES6 -let变量声明以及声明特性

最新推荐文章于 2024-06-01 15:46:07 发布

c323u2bdf

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量242

点赞数

分类专栏： HTML 文章标签： es6 vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_60212533/article/details/128783716

版权

HTML 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

一、声明变量

1.格式

let a;//可以声明一个
let b,c,d;//可以声明多个
let e=100;//除了单纯声明以为，还可以赋初始值
let f=555, g='you' , h=[];//也可以声明多个并赋初始值

2.特性

2.1变量不能重复声明

let a="小明";
let a="小王";

结果如下：

2.2 块级作用域

变量只在代码块里面有效，出了代码块就无效了，读取不到了

//在代码块外读取不到变量girl
{    
    let girl='周周';
}
console.log(girl);

结果：

2.3不存在变量提升

console.log(song);
var song='单人';

结果：

系统不会报错，显示undefined。相当于先声明，再输出（此为变量提升）,let不存在这种现象，直接报错

//相当于先声明，再输出
var song;
console.log(song);
var song='单人';

2.4不影响作用域链

略；

案例：点击切换颜色

<!DOCTYPE html>
<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>
    <style>
        .item{
            width: 200px;
            height: 100px;
            border: 1px solid blueviolet;
            float: left;;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="page-header">点击切换颜色</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>