美文网首页Web前端之路让前端飞
JavaScript的主要用途,变量与字面量

JavaScript的主要用途,变量与字面量

作者: 前小小 | 来源:发表于2021-02-20 17:56 被阅读0次

    JavaScript是面向 Web 的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和 Web 应用必须掌握的基本工具。

    JavaScript主要用途

    • 嵌入动态文本与HTML页面
    • 对浏览器时间做出相应
    • 读写HTML元素
    • 在数据被提交到服务器之前验证数据
    • 检测访客的浏览器信息
    • 控制cookies,包括创建和修改等。
    • 基于node.js技术进行服务器端编程。

    JavaScript变量

    变量相当于容器,值相当于容器内装的东西,而变量名就是容器上贴着的标签,通过标签可以找到 变量,以便读、写它存储的值。

    声明变量
    在 JavaScript中,声明变量使用 var语句。

    示例一:
    在一个 var 语句中,可以声明一个或多个变量,也可以为变量赋值,未赋值的变量初始化为 undefined(未定义)值。当声明多个变量时,应使用逗号运算符分隔。

    var a;  //声明一个变量
    var a,b,c;  //声明多个变量
    var b = 1; //声明并赋值
    document.write(a);  //返回 undefined
    document.write(b);  //返回 1
    

    示例二:
    在 JavaScript 中,可以重复声明同一个变量,也可以反复初始化变量的值。

    1.  var a = 1;
    2.  var a = 2;
    3.  var a = 3;
    4.  document.write(a);  //返回 3
    

    注意:在非严格模式下,JavaScript 允许不声明变量就直接为其赋值,这是因为 JavaScript 解释器能够自动隐式声明变量。隐式声明的变量总是作为全局变量使用。在严格模式下,变量必须先声明,然后才能使用。

    赋值变量
    使用等号=运算符可以为变量赋值,等号左侧为变量,右侧为被赋的值。

    示例
    变量提升。JavaScript 在预编译期会先预处理声明的变量,但是变量的赋值操作发生在 JavaScript 执行期,而不是预编译期。

    document.write(a); //显示undefined
    a =1;
    document.write(a); //显示 1
    var a;
    

    在上面示例中,声明变量放在最后,赋值操作放在前面。由于 JavaScript 在预编译期已经对变量声明语句进行了预解析,所以第一行代码读取变量值时不会抛出异常,而是返回未初始化的值 undefined。第三行代码是在赋值操作之后读取,故显示为数字 1。

    提示:
    JavaScript 引擎的解析方式是:先解析代码,获取所有被声明的变量,然后再一行一行地运行。 这样,所有声明的变量都会被提升到代码的头部,这就叫作变量提升(Hoisting)。

    变量作用域

    变量作用域(Scope)是指变量在程序中可以访问的有效范围,也称为变量的可见性。

    JavaScript 变量可以分为全局变量和局部变量:

    • 全局变量:变量在整个页面脚本中都是可见的,可以被自由访问。
    • 局部变量:变量仅能在声明的函数内部可见,函数外是不允许访问的。

    示例一
    下面示例演示了全局变量和局部变量的关系。

    var a = 1;  //声明并初始化全局变量
    function f(){  //声明函数
    document.write(a);  //显示undefined
    var a = 2;  //声明并初始化局部变量
    document.write(a);  //显示 2
    }
    f(); //调用函数
    

    由于在函数内部声明了一个同名局部变量 a,所以在预编译期,JavaScript 使用该变量覆盖掉全局变量在函数内部的影响。
    而在执行初期,局部变量 a 未赋值,所以在函数内第 1 行代码读取局部变量 a 的值也就是 undefined 了。当执行到函数第 2 行代码时,为局部变量赋值 2,所以在第 3 行中就显示为 2。

    示例二
    下面示例演示了如果不显式声明局部变量所带来的后果。

    var jQuery = 1;
    (function () {
    jQuery = window.jQuery = window.$ = function(){};
    })()
    document.write(jQuery);  //显示函数代码:function(){}
    

    因此,在函数体内使用全局变量是一种危险的行为。为了避免此类问题,应该养成在函数体内使用 var 语句显式声明局部变量的习惯。

    变量类型
    JavaScript 是弱类型语言,对于变量类型的规范比较松散。具体表现如下:

    • 变量的类型分类不严谨、不明确,带来使用的随意性。
    • 声明变量时,不要求指定类型。
    • 使用过程不严格,可以根据需要自动转换变量类型。
    • 变量的转换和类型检查没有一套统一、规范的方法,导致开发效率低下。

    优缺点:

    • 优点:使用灵活,简化了代码编写。
    • 缺点:执行效率低,在开发大型应用时,程序性能会受到影响。

    字面量

    • 字面量(literal)是用于表达一个固定值的表示法,又叫常量
    • 通俗的理解,字面就是所见即所得,js 程序执行到代码中的字面量,会立即知道它是什么类型的数据,值是多少
    • 可以用于表示固定值,比如:数字、字符串、undefined、布尔类型的字面值等

    数字字面量

    • 就是数学意义上的数字
    • 数字字面量区分:整数字面量、浮点数字面量(小数)、特殊值
    • 书写时直接书写字面量,不需要添加任何辅助符号

    (1)整数

    • 整数字面量写法区分进制
    • 整数可以被表示成十进制(基数为10)、八进制(基数为8)以及十六进制(基数为16)
    • 十进制是最基本的数值字面量格式,可以直接在代码中输入
    • 八进制字面值必须带前导0、0O、0o 。八进制整数只能包括数字0-7
    • 十六进制的前缀是0x或0X。后面可以包含数字(0-9)和字母af或AF
    • 在进行算术计算时或者参与程序,所有八进制和十六进制的数字都会被转换成十进制
    <script>
        // 整数字面量
    
        // 十进制
        console.log(10)
        console.log(-10)
    
        // 自己要知道转换成十进制是多少
        // 八进制
        console.log(01) // 8
        console.log(0100) // 8*8 
        console.log(01000) // 8*8*8
        console.log(0o100)
        // 特殊情况
        console.log(089)
        // console.log(0o89) 语法错误 
    
        // 十六进制
        console.log(0x1) // 1
        console.log(0x10) // 16
        console.log(0x100) // 16*16
        console.log(0x110)  // 16*16+16
    </script>
    

    (2)浮点数

    • 数学概念中的小数
    • 包含:整数、小数点、小数部分
    • 浮点数不区分进制,所有的浮点数都是十进制下的数字
    • 注意:如果浮点数是大于0 小于1的,可以省略小数点前面的0不写
    <script>
    // 浮点数字面量
        console.log(1.23)
        console.log(-1.23)
        console.log(0.123)
        console.log(.123)
        console.log(1.23e3) // 科学(e)技术法
        console.log(1.23e-3) 
        console.log(0.1 + 0.2)
    </script>
    

    (3)NaN

    • NaN:(not a number)表示不是一个正常的数,但是还是一个 Number 类型的数字,这个数字没办法用前面的表示方法表示
    • NaN 与任何值都不相等,包括他本身
    • isNaN(): 判断一个数据是不是一个NaN,是返回 true,否返回false
    <script>
        // NaN 不是一个正常的数
        console.log(0 / 0)
        console.log(isNaN(0 / 0))
        console.log(isNaN(12))
    </script>
    

    字符串字面量

    • 字符串是由任意个数的有序或无序的字符组成的串,类似人类的语言,在 JS 中有自己特殊 的写法
    • 组成:字母、汉字、特殊符号、空白等
    • 字符串字面量写法:是用一对单引号(' ')或双引号(“ ”)及引号内的字符构成,引号中间的字符可以有任意多个,也可以是没有字符的空字符串
    • 注意:字符串中如果字符包含了双引号,则其外部应该由单引号标示,反之相同
    <script>
        // 字符串字面量
        console.log("这是一个字符串#&*")
        // console.log("这是一个"字符串"#&*") 语法错误
        console.log("这是一个'字符串'#&*")
        console.log('abc')
        console.log('a"b"c')
        console.log('123')
        console.log('        ') // 空白字符串
        console.log('') // 空字符串
    </script>
    

    相关文章

      网友评论

        本文标题:JavaScript的主要用途,变量与字面量

        本文链接:https://www.haomeiwen.com/subject/vyutfltx.html