var和let和const

最新推荐文章于 2024-03-03 18:37:05 发布

深海打捞的喵

最新推荐文章于 2024-03-03 18:37:05 发布

阅读量117

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45493444/article/details/116597699

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

var和let和const

var和let的使用：

在ES5中，if 和for的都没有作用域，想要有作用域必须要借助function的作用域（ES5中只有function有作用域

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
<script src="let和const.js"></script>

</html>

{
    var func;
    if (true) {
        var name = 'why';
        func = function () {
            console.log(name);
        }
        // func()
    }
    name = 'what'
    //在中间可以修改name的值
    //ES5的缺陷
    func()
    // if 的块级作用域必须要借助function
}

在下面代码的第 10 行中的var i = 1，在所有地方的i都会赋值为 1，无论在括号内还是括号外都是 1

{
    // for块级作用域必须要借用function
    var btns = document.getElementsByTagName('button')
    // for(var i = 0; i <btns.length;i++){
    //     btns[i].addEventListener('click',function(){
    //         console.log('第'+i +'个按钮被点击');
    //     })
    // }
  
    for (var i = 0; i < btns.length; i++) {
        (function (num) {
            btns[i].addEventListener('click', function () {
                console.log('第' + num + '个按钮被点击');
            })
        })(i)
        //而闭包可以实现，因为函数自己有自己的作用域，不会受外面的影响，只找属于自己的i

    }
}

{
    console.log('-------ES6定义的let有块级作用域');
    let btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击');
        })
    }

}

var和let的使用的范例

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]()

输出10

若将var改成let

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6]()

输出6

for (let f = 0; f < 3; f++) {
    let f = 'abc';
    console.log(f);
}

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。声明了未初始化

function fn() {
    var a = 1;
    var a = 2;
}

两个let或是一个let一个var会报错

{
    var fn = [];
    for (let i = 0; i < 5; i++) {
        fn[i] = function (x) {
            return x * i;
        };
    }
    console.log(fn[2](10));
}

输出20，若改为var ，则输出50

const的用法

一旦给const修饰的标识符被赋值后，不能修改

const name = 'why'
 name = 'abc'

在使用const 定义标识符，必须进行赋值

  const name,//直接写会报错

常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

const obj = {
        name: 'whr',
        age: 18,
        height: 1.55
        }
    obj.name = 'ww';
    obj.age = 22;
    console.log(obj);

对象字面量的增强写法

ES5的写法

const name = 'wwww';
    const age = 22;
    const height = 1.5
    //ES5的写法
    const obj = {
        name: name,
        age: age,
        height: height,
        run: function () {
            console.log('running1');
        },
        eat: function () {
            console.log('eating1');
        }

    }
    console.log(obj);

ES6的语法糖

    //ES6的写法
    const obj = {
        name,
        age,
        height,
        run() {

        },
        eat() {

        }
    }
    console.log(obj);

深海打捞的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
var和let和const

var和let和constvar和let的使用：在ES5中，if 和for的都没有作用域，想要有作用域必须要借助function的作用域（ES5中只有function有作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫

专栏目录