Web前端之路让前端飞

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

2021-02-20  本文已影响0人  前小小

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

JavaScript主要用途

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 是弱类型语言,对于变量类型的规范比较松散。具体表现如下:

优缺点:

字面量

数字字面量

(1)整数

<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)浮点数

<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

<script>
    // NaN 不是一个正常的数
    console.log(0 / 0)
    console.log(isNaN(0 / 0))
    console.log(isNaN(12))
</script>

字符串字面量

<script>
    // 字符串字面量
    console.log("这是一个字符串#&*")
    // console.log("这是一个"字符串"#&*") 语法错误
    console.log("这是一个'字符串'#&*")
    console.log('abc')
    console.log('a"b"c')
    console.log('123')
    console.log('        ') // 空白字符串
    console.log('') // 空字符串
</script>
上一篇 下一篇

猜你喜欢

热点阅读