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);
posted @ 2021-06-20 00:38  摸摸大123  阅读(83)  评论(0)    收藏  举报