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检测分析工具提前发现问题。