JavaScript中变量以及基本变量类型和变量关键字


前言

详细说说js中的变量,把上一篇拓展完善一下。本文主要介绍有关变量的概念,特别是JavaScript中的变量;JavaScript中变量的基本类型(Number、Boolean、String);JavaScript中的变量关键字var、let、const。


一、变量

基本上每种语言都有变量类型,像C、Java、Python等,但与他们不同的是,JavaScript是弱类型语言,通常来说变量大致分为字符型、数字(又分整数型和浮点数型)、布尔值、对象等。JavaScript中弱类型语言就体现在,我们在为一个变量赋值时,不用考虑它的类型,程序运行时会自动处理。
ps:这里补充一点吧,机器只能识别机器语言(二进制01),Java和js都是高级语言,需要“翻译”成机器语言,但java属于编程语言,通过jvm编译,先“翻译”后执行;js属于脚本语言,在运行过程中进行动态解释,相当于翻译。编译器在执行之前进行,翻译器边执行边运行。

  • 变量的概念:变量其实就是给数据在内存空间中开辟一个存放数据的内存。不同类型的变量和值占用的内存空间大小不同。
  • 变量的使用顺序通常为:先声明、再赋值、再使用(调用或修改)

二、JavaScript中的变量类型

JavaScript虽然是弱类型语言,但所有编程语言本质上还是需要不同数据类型的,这里不展开讨论。

1. Number(数字类型)

相当于把其他语言中的整数型int和浮点型float合并为一个类型——Number。
有关Number类型的基本定义和常用的使用。

    <script>
        var num = 10; // num为数字类型
        var PI = 3.14; // Number型
        // 下面是进制类
        var num1 = 010; // 开头加0为八进制,010转十进制数为8
        var num2 = 0x11; // 开头为0x为十六进制,0x11转十进制为17
        // 数字型最大值最小值
        var num3 = Number.MAX_VALUE; // 最大值
        var num4 = Number.MIN_VALUE; // 最小值
        // 无穷大无穷小
        var num5 = Infinity;
        var num6 = -Infinity;
        // 非数字 
        var num7 = '十' - 10; // num7值为NaN
        // isNaN()方法判断变量是否为数字,是则true,
        var boolean = isNaN('123'); // 结果为false
    </script>

有关Number的转型方法和注意事项。

    <script>
        //转数字型: parseInt()  parseFloat()  Number()  “- * /”符号
        var str = '10';
        console.log(typeof(parseInt(str)));
        console.log(typeof(parseInt('3.14'))); // 取证,为3
        console.log(typeof(parseFloat('3.14'))); // 完整小数
        console.log(parseInt('123abc')); // 结果为123,abc被省略,如果字母开头则为NaN
        console.log(Number('3.14')) // 强制转型,小数也ok
        console.log('12' - 1); // 隐式转换
        console.log('12' * 2); // 隐式转换
        console.log('12' / 3); // 隐式转换
    </script>

2. String(字符串类型)

和其他编程语言的字符串类型相似,在JavaScript中,字符串类型可以用单引号( ’ ’ )或双引号( " " )表示。
有关String类型的基本定义和常用的使用。

    <script>
        // 不转义的情况下,双单引号互相嵌套用可以实现输出双单引号
        var str1 = '这是"一"句话';
        var str2 = "这是'一'句话";
        // 常用的转义:\n(换行),\\(\),\'('),\"("),
        // \t(一个Tab缩进),\b(一个空格),\r\n(相当于一次回车键)
        var len = str1.length; // 获取字符串长度
        var str3 = str1 + str2 + len; // 拼接
        var str4 = str1.replace(/一/,"1"); // 第一个参数为正则,第二个参数为需要替换的字符串
        console.log(str4); // 结果:这是"1"句话
        var str5 = str1.split("一"); // 指定标识分割字符串
        console.log(str5); // 结果为字符串数组:['这是\"'' , '\"句话']
        var str6 = str1.substr(1,4); // 指定从下表1位置开始,切割4个长度的字符串
        console.log(str6); // 结果:是"一"
        var str7 = str1.substring(1,5); // 提取介于下表1至5中间的字符串
        console.log(str7); // 结果:是"一"
        // str.toLowerCase(),把字符串全部转换为小写。
        // str.toUpperCase(),把字符串全部转换为大写。
    </script>

有关String的转型方法和注意事项。

    <script>
        //转字符串: toString()  String()  “+”拼接符
        var num = 10;
        var str = num.toString(); // 显示转换
        console.log(typeof str);
        console.log(typeof (String(num))); // 强制转换
        console.log(typeof (num + "")); // 显式转换
    </script>

3. Boolean(布尔类型)

几乎所有的编程语言都有布尔类型。它只有唯二的两个值:true和false。用于判断真假与是否。在JavaScript中,由于弱类型语言的原因,在其他类型变量转换成Boolean类型时,有一定的需要知道的规则。
有关Boolean类型的基本定义。

    <script>
        // boolean有两种值,true和false。
        var t = true;
        var b = false;
        // true被当作1,false被当作0
        var v = t + 1;
        var v2 = b + 1;
    </script>

有关String的转型方法和规则。

    <script>
        //转布尔型: Boolean()。当遇到其他类型数据转布尔类型时,有一些规则。
        //空代表false,如:'',"",0,NaN,null,undefined。其余的为true
        console.log(Boolean(''));
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(123));
        console.log(Boolean('啊'));
    </script>

三、JavaScript中变量特殊值:NaN、undefined、null

1. NaN

其实这个NaN值按分类应该在Number中说明,但因为它和undefined、null有一样的特殊性,就单独说说吧。
NaN,Not a Number,意思是“不是数值”。

    <script>
        console.log(0/0); // NaN
        console.log(1/0); // Infinity,正无穷
        console.log(1/-0); // -Infinity,负无穷
        console.log(NaN == NaN); // false
        console.log(isNaN(NaN)); // true
        console.log(isNaN("abc")); // true
        console.log(isNaN(10)); // false
        console.log(isNaN("10")); // false,可隐式转换
        console.log(isNaN(true)); // false,可转为1
    </script>

任何数值操作失败后,都会返回NaN这个值,不会像其他编程语言报错而程序终止运行。
任何运算中如果出现NaN,那么结果一定为NaN,类似于乘法中出现0结果一定为0。
NaN不会等于任何值,包括NaN。
isNaN()函数会先调用对象的valueOf()方法,测试返回值是否可以转成Number,如果不行则会调用toString()方法,再测试能否转成Number。


2. undefined

undefined这个值是属于Undefined类型的,也是这个类型唯一的值,当使用var或let声明了变量而没有赋值(初始化),就默值为undefined。

    <script>
        var name;
        console.log(typeof name); // undefined
        console.log(typeof age); // undefined

		console.log(name); // undefined
        console.log(age); // 报错
    </script>

特别需要注意的是:虽然undefined翻译中文为未定义。但undefined和未定义是完全两回事。未定义的变量会导致程序报错,而undefined只是缺乏对应的值而已。不过它们本质上都无法操作。
undefined在Boolean类型中值为false。
不要人为的给一个变量定义为undefined,这完全是不必要的。


3.null

我们用typeof操作符对null进行操作时,会返回结果“object”,这是因为其本质上为一个空对象指针。

    <script>
        var name = null;
        console.log(typeof name); // object
		console.log(null == undefined); // true
    </script>

undefined本质上时由null值派生来的,所以在操作符“ == ”比较中,结果是true。
在需要预先定义一个对象变量,却需要在后续赋值保存,此时可以预先定义变量为null,后续再赋值新对象的引用。
null与undefined一样,在Boolean类型中的值为false。


三、JavaScript中的变量关键字

这点主要讲JavaScript中三个定义变量关键字var,let,const的介绍、区别、使用场景和需要注意的事项等。希望看完文章的你会有所收获。

1. var

比较需要注意的是var变量关键字的作用范围和变量提升

    <script>
        // 1.var的作用域为局部变量,作用范围为函数作用域
        function test(){
            var temp = "abc";
        }
        test();
        console.log(temp); // 无法输出

        // 2.var的声明提升,在某局部作用域中,不论在何处定义了var变量,都会被提升到作用域顶部,但仅限于声明
        function test1(){
            console.log(temp);
            var temp = "def";
            // 上两行代码等价于以下三行代码
            // var temp;
            // console.log(temp);
            // temp = "def";
        }
        test1(); // 输出:undefined

        // 3.由于var变量提升的存在,多个相同的var变量名会自己在作用域顶部聚合而不会报错,所以可以在不确定是否声明过时直接使用
        var aaa;
        var aaa; // 不会报错

        // 4.同样由于var变量提升的原因,不要在for循环的条件中使用var关键字
        for (var i = 0; i < 3; i++) {
        }
        console.log(i); // 输出:3

        // 5.var在全局作用域中声明的变量会成为window对象的属性
        var hello = "hello";
        console.log(window.hello); // 输出hello

        // 6.在非JavaScript的严格模式中,可以直接定义变量名赋并赋值,省略前面的关键字,那么就是默认创建了一个全局变量
        function test3(){
            temp = "abc";
        }
        test3();
        console.log(temp); // 输出:abc
    </script>

2. let

let关键字中不存在变量提升,这是与var变量最大的区别,导致许多应用上的差别。

    <script>
        // 1.let和var同样是局部变量,但let的作用范围是块作用域
        // 以下代码将let修改为var即可在if代码块外输出temp,区别所在。
        if(true){
            let temp = "abc";
            console.log(temp); // 输出:abc
        }
        console.log(temp); // 报错:temp未定义。

        // 2.let不允许在同作用域中出现冗余声明,包括混用关键字
        let b;
        let b; // 报错:b已被声明
        var c;
        let c; // 报错:c已经声明

        // 3.因为以作用域为限制,上一点说的冗余声明,在嵌套的块中是允许的
        let d = 1;
        console.log(d); // 输出:1
        if(true){
            let d = 2;
            console.log(d); // 输出:2
        }

        // 4.有关var中的变量提升,在let中并不存在。
        if(true){
            console.log(e); // 不会输出undefined,而是报错:e未定义。
            let e = 2;
        }

        // 5.let变量在全局声明时不会成为window对象的属性,但变量依旧时存在的,需要注意冗余声明
        let hello = "hello";
        console.log(window.hello); // 输出:undefined

        // 6.由于let不存在变量提升,所以在同一页面多个js文件中,需要特别注意同名的变量名。
        // <script> let name = "amy" <\/script>
        // <script> let name = "lihua" <\/script>,由于上一个script里的name声明,这里会报错,换成var则不会。

        // 7.let变量关键字,最长使用的地方为循环体条件内,因为不存在变量提升所以不会污染到外部变量
        for (let i = 0; i < 3; i++) {
        }
        console.log(i); // 输出:i未定义
    </script>

3. const

变量中的一种不允许被修改的常量,类似其他编程语言中的final关键字

    <script>
        // const变量关键字与let在行为上基本类似,包括作用域和变量提升。
        // const类似于java中的final关键字,设置变量为静态常量,声明时必须赋值,且不能修改
        const hello = "hello";
        hello = "hi"; // 报错:给常量赋值
        // 如果const时对象类型,修改对象内部的属性是允许的。
        const hi = {};
        hi.value = "hi"; // 不会报错
    </script>

总结

  • 需要变量是因为我们的数据需要保存。
  • 变量是用来存放数据的,方便使用,类似一个容器装东西。
  • 变量的本质就是一块内存空间
  • 变量需要先申请,然后赋值,然后才能使用(初始化)
  • 变量的规范,是否合法(不能是关键字。由开头字母、_、$组成。但开头不能是数字),是否有意义,驼峰式。
  • 合理使用最适合的变量声明关键字,能有效的提升代码质量。最好不要随意使用var进行变量声明,尽可能的用let或const,明确的作用域、声明位置以及不变的值,由此写出的代码更易理解,也利于一些bug检测分析工具提前发现问题。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值