• JS的var和let、const使用(详细讲解)


    let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版。下面我就来详细讲讲var和let的区别

    var和let的区别

    不同点:

    (1)var是全局作用域,let不是

    var 和 let 声明的变量在全局作用域中被定义时,两者非常相似。但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以

    let  a = 'aaa;
    var b = 'bbb'; 
    
    console.log(window.a); // undefined
    console.log(window.b);  //'bbb'

    (2)var没有块级作用域,let有块级作用域

    let有块级作用域,而var没有块级作用域,这是二者最明显的区别。例如:

    var func;
    if(1 == 1){
        var name = "LHS"
        func = function(){
            console.log(name)
        }
    }
    
    name = "ljq";
    func();//输出的:ljq

    一般情况我们都希望把块级内的与块级内数据区分,但var没有块级作用域,只有函数作用域

    如果大家还不理解,我再举例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>闭包</title>
            <style type="text/css">
                div {
                    width: 100px;
                    height: 100px;
                    background: lightgreen;
                    float: left;
                    margin: 20px;
                    font: 30px/100px "microsoft yahei";
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
            <div>g</div>
            <div>h</div>
            <div>i</div>
            <div>j</div>
        </body>
        <script type="text/javascript">
            var divs=document.getElementsByTagName("div");
            for (var i=0;i<divs.length;i++) {
                divs[i].onclick=function(){
                   alert(i);//都是输出:10
                }
            }
        </script>
    </html>

    运行结果,点击输出都是10

    以上问题就是var没有块级作用域,我们可以把函数作用域代替了块级作用域,用闭包解决问题:

    var divs=document.getElementsByTagName("div");
    for (var i=0;i<divs.length;i++) {
        (function(i){
            divs[i].onclick=function(){
                alert(i);
            }
        })(i)
    }

    闭包写起来有点麻烦,但使用let的话就可以一步到位:

    var divs=document.getElementsByTagName("div");
    for (let i=0;i<divs.length;i++) {
        divs[i].onclick=function(){
            alert(i);
        }
    }

    结果跟使用闭包一样,但比闭包简单

    (3)var属于ES5规范,let属于ES6规范

    相同点:

    (1)var和let都有函数级作用域

    const

    (1)const定义的值不可以修改,而且必须初始化

    (2)const是常量,var和let是变量

    (3)常量的含义是指对象不能修改,但是可以改变对象内部的属性,如:

    const app = {
        id:1,
        name:"lhs"
    }
    app.name="ljq";
    console.log(app.name);//输出:ljq

    es6对象字面量增强

    相对于ES5,ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码同时语法更易于理解。那就一起来看看对象增强的功能。

    属性增强写法

    //属性增强写法
    const id = 1;
    const name = "LHS";
    const age = 20
    const app = {
        id,
        name,
        age,
    }
    console.log(app);

    函数增强写法

    //函数增强写法
    const ipp = {
        msg(){
            console.log("函数增强写法");
        }
    }
    ipp.msg();
  • 相关阅读:
    图解持续集成纯命令行实现.Net项目每日构建(流程支持)
    (转) 持续集成(第一版)Martin Fowler等著
    Glut框架示例
    常见希腊字母读法
    【译】VC10中的C++0x特性 Part 2 (2):右值引用
    【排序】排序算法之交换排序
    OpenGL开发环境配置
    Android 上实现水波特效
    有关singleton的资料
    【排序】排序算法之选择排序
  • 原文地址:https://www.cnblogs.com/bushui/p/12203766.html
Copyright © 2020-2023  润新知