var和let和const

Posted 2021-06-20 摸摸大123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了var和let和const相关的知识，希望对你有一定的参考价值。

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);

以上是关于var和let和const的主要内容，如果未能解决你的问题，请参考以下文章