JavaScript学习笔记 - JavaScript数据类型

作者: 梦元_38ab | 来源:发表于2018-10-27 22:52 被阅读0次

2. JavaScript 数据类型

JavaScript是弱类型脚本语言，声明变量时无需指定变量的数据类型，即是变量的数据类型是解释时动态决定的，但JavaScript的值保存在内存中时，也是有数据类型的。基本数据类型:

Number数值类型: 包含整数和浮点数;
Boolean布尔类型: 只有true或false两个值;
String字符串类型: 字符串变量必须用引号括住(单引号或双引号);
Undefined类型: 专门用来确定一个已经创建但没有初始值的变量;
Null类型: 用于表明某个变量的值为空;
【注: 复杂数据类型Object；ECMAScript不支持任何创建自定义类型的机制，所有的值都以上6中数据类型之一】

2.1 Undefined类型

Undefined只有一个值，即是特殊的undefined，在使用var声明变量，但没有对其初始化时，变量的值就是为undefined，这个值主要的目的是为了比较的。
var a;
alert(a); //undefined
对于未初始化的变量与根本不存在的变量(未声明的变量也是不一样的)
var num;
alert(num); // undefined
alert(age); // ReferenceError: age is not defined
注: typeof num和typeof age都返回的是undefined。当在逻辑上，它们的值，一个是undefined，一个是报错；但它们的类型都是undefined，所以定义变量时，尽可能的不要只声明不赋值！

2.2 Null类型

Null类型只有一个值，即特殊值null，它表示变量的值为空或空对象引用，而typeof操作符检测null会返回object；
var box = null;
alert(typeof box); // object

undefined是派生自null的，因此它们的相等性测量返回的是true;
if( null == undefined ) // true
【注意: undefined与null之间的差别比较微妙，undefined表示没有初始值，而null表示变量有值的，只是其值为null！！】

2.3 Boolean类型

Boolean类型只有两个值: true和false，当true不一定等于1，false不一定等于0；另外JS区分大小写的，True和False或其他都不是Boolean类型的值;
var box = true;
alert(typeof box); // boolean
虽然Boolean类型的字面量只有true和false两种，当所有类型的值都有与这个两个Boolean值等价的值。要将一个值转换为其对应的Boolean值，可以使用转型函数Boolean();

            var hello = 'hello world!';
            // 强制性转换
            var helloB = Boolean(hello);
            alert(helloB);  // true 
            // 隐式转换
            if(hello){
            alert('条件为true在这里');    // 执行这条语句
            } else {
            alert('条件为false在这里');
            }

Snip20161226_6.png

2.4 Number类型

Numer类型包括两种数值: 整形和浮点型。
最基本的数值字面量是十进制整数
var num1 = 100; // 十进制整数
八进制字面量(以8为基数)，前导必须是0，八进制序列(0~7);
var num2 = 070; // 八进制
var num3 = 079; // 无效八进制，自动解析为79
var num4 = 08; // 无效八进制，自动解析为8
【注意: 八进制数并不是所有的浏览器都支持的】
十六进制字面量，前面必须是0x，后面是(0 - 9和a - f);
var box = 0xA; // 十六进制，10
var box = 0x1f; // 十六进制，31
浮点型，就是该数值中必须包含一个小数点;
var box = 3.8;
var box = 0.8;
NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数值的操作，未返回数值的情况(这就不会导致代码错误而终止程序，因此不会影响程序执行);0除以0，或者以Infinity(正无穷大)执行算术运算都会产生NaN的结果;
var box = 0 / 0; // NaN
var box = 12 / 0; // Infinity
var box = 12 / 0 * 0;// NaN
【注意: NaN不与任何值相等！！】
isNaN()函数，用来判断这个值到底是不是NaN;
alert(isNaN(NaN)); // true
alert(isNaN(25)); // false, 25是一个数值
alert(isNaN('25')); // false，‘25’是一个字符串数值，可以转为数值
alert(isNaN('Lee')); // true，‘Lee’不能转为数值
alert(isNaN(true)); // false，true可以转为数值1
Number()函数，将非数值转为数值，可以用于任何类型;
alert(Number(true)); // 1，Boolean类型true和false分别对应1和0
alert(Number(25)); // 25，数值类型直接返回
alert(Number(null)); // 0，空对象返回0
alert(Number(undefined)); // NaN，undefined返回NaN
字符串1，只包含数值的字符串，会直接转成成十进制数值，如果包含前导0，即自动去掉
alert(Number('456')); // 456
alert(Number('070')); // 70
字符串2，只包含浮点数值的字符串，会直接转成浮点数值，如果包含前导和后导 0，即自动去掉
alert(Number('08.90')); //8.9
字符串3，如果字符串是空，那么直接转成0
alert(Number('')); // 0
字符串4，如果不是以上三种字符串类型，则返回NaN
alert(Number('Lee123')); //NaN
alert(Number('123aa')); //NaN
parseInt()取整函数，对于Number()函数在转换字符串时比较复杂也不够合理，所以更多会使用到parseInt()，从第一位解析到非整数位置;
alert(parseInt('456Lee')); // 456，会返回整数部分
alert(parseInt('Lee456Lee')); // NaN，如果第一个不是数值，就返回 NaN
alert(parseInt('12Lee56Lee')); // 12，从第一数值开始取，到最后一个连续数值结束
alert(parseInt('56.12')); // 56，小数点不是数值，会被去掉
alert(parseInt('')); // NaN，空返回 NaN
parseFloat()函数，用于浮点数值转换的，和parseInt()一样，从第一位解析到非浮点数位置;
alert(parseFloat('123Lee')); // 123，去掉不是别的部分
alert(parseFloat('123.4.5')); // 123.4，只认一个小数点
alert(parseFloat('0123.400')); // 123.4，去掉前后导

2.5 String类型

String可以用双引号或单引号表示;
toString()函数，可以把值转为字符串;
var box1 = 11;
alert(typeof box1.toString()); // string
var box2 = true;
alert(typeof box2.toString()); // string
toString()一般是不需要传参，当在数值转为字符串时，可以传递进制参数;
var box = 10;
alert(box.toString()); // 10，默认十进制输出
alert(box.toString(2)); // 1010，二进制输出
alert(box.toString(8)); // 12，八进制输出
alert(box.toString(10)); // 10，十进制输出
alert(box.toString(16)); // a，十六进制输出

练习 2-1：点击选项，使选项出现红色背景色，未被选中的选项恢复灰色背景色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /* 选中时的样式*/
            .active a{
                background: red;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li id="bt1" class="active"><a href="#">娱乐</a></li>
            <li id="bt2"><a href="#">财经</a></li>
            <li id="bt3"><a href="#">体育</a></li>
        </ul>
        
        <script type="text/javascript">
            var oBt1 = document.getElementById('bt1');
            var oBt2 = document.getElementById('bt2');
            var oBt3 = document.getElementById('bt3');
            // 临时变量，用于保存点击按钮是哪个
            var tempBt = oBt1;      
            /*
             * 选中与未选中的状态切换，其实就是有无.active
             * 
             * 选中: 即给对应的li添加className为active
             * 取消选中: 即对应li中className删除
             */ 
            oBt1.onclick = function(){
                // 取消选中
                tempBt.className = "";
                // 记录选中的是谁
                tempBt = oBt1;
                // 改变对应样式
                tempBt.className = 'active';
            }   
            oBt2.onclick = function(){
                // 取消选中
                tempBt.className = "";
                // 记录选中的是谁
                tempBt = oBt2;
                // 改变对应样式
                tempBt.className = 'active';
            }
            oBt3.onclick = function(){
                // 取消选中
                tempBt.className = "";
                // 记录选中的是谁
                tempBt = oBt3;
                // 改变对应样式
                tempBt.className = 'active';
            }
        </script>
    </body>
</html>

练习 2-2：生成1000个按钮(优化处理)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head> 
    <body>
        <!--<input type="button" value="按钮1" />-->      
        <script type="text/javascript">
            var str = '';
            for(var i=1; i<=10000; i++){
//               document.write('<input type="button" value="按钮' + i + '" />');
                
//              str = str + '<input type="button" value="按钮' + i + '" />';

                str += '<input type="button" value="按钮' + i + '" />';
            }           
            document.write(str);
        </script>
    </body>
</html>

JavaScript学习笔记 - JavaScript数据类型

2. JavaScript 数据类型

2.1 Undefined类型

2.2 Null类型

2.3 Boolean类型

2.4 Number类型

2.5 String类型

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读