前端(类型 运算符)

0.07字数 151阅读 274

1、标识符:

命名方法:
1、字母、数字、_、$
2、不能用数字开头
3、不能使用关键字,或保留字
4、驼峰命名法xxxYyyZzz

2、数据类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
引用数据类型:
Object 对象

\" 表示"
\' 表示'
\n 表示换行
\t 制表符

3、Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Number</title>
    <script type="text/javascript">
        // var a = 123;
        // a = 456.789;
        // var b = "123";
                // a = Number.MAX_VALUE * Number.MAX_VALUE; //Infinity
        // console.log(typeof a);
        // console.log(typeof b);
        // console.log(a);
        var c = 0.1+0.2;
        console.log(c);


        var f = 0.1;
        var g = 0.2;
        console.log((parseFloat(f)*100+parseFloat(g)*100)/100);//parFloat


    </script>
</head>
<body>
    
</body>
</html>

4、类型的强制转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>强制类型转换</title>
    <script type="text/javascript">
        var a = 123;
        a = true;
        // a = null;
        // a = undefined;
        a = a.toString();//转换类型

        a = 123;
        a = null;
        a = undefined;
        
        String(a);// 必须找个值去接收他

        console.log(a);
        console.log(typeof a);
    </script>
</head>
<body>
    
</body>
</html>

5、转换Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换Number</title>
    <script type="text/javascript">
        var a = "123";
        a = "789abc";//NaN
        a = "      "//0
        a = "";//0
        a = true; //1
        a = false; //0
        a = null; //0
        a = undefined; //NaN
        a = Number(a);

        a = "123.456px";
        //a = Number(a);// NaN
        //a = parseInt(a);//123   //把有效的整数取出  转换成数值 只取出字母前面的 如果没有就返归NaN
        a = parseFloat(a);// 123.456  取数小数点后面

        a = true;//true --> "true"
        a = parseInt(a);//NaN

        console.log(a);
        console.log(typeof a);
    </script>
</head>
<body>
    
</body>
</html>

6、其他进制数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他进制的数字</title>
    <script type="text/javascript">
        //十进制
        var a =123;
        //十六进制
        a = 0x10;//十六进制 16
        a = 0xff;//255
        a = 0xCafe;//51966
        //八进制
        a = 070;//56
        //二进制
        a = 0b10;  //IE不支持二进制 

        a = "070";
        // a = parseInt(a);
        a = parseInt(a,8)//想转几进制 后面填

        console.log(a);
        console.log(typeof a);
    </script>
</head>
<body>
    
</body>
</html>

7、转为Bollean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换为Boolean</title>
    <script type="text/javascript">
        var a = 123;//true
        a = -123;//true
        a = 0;//false
        a = Infinity;//true
        a = NaN;//false

        a = "hello";//true
        a = 'true';//true
        a = 'false';//true
        a = "错误"; //true
        a = "   "; //true
        a = ""; //false

        a = null;//false
        a = undefined;//false
        a = window; //true

        a = Boolean(a);
        
        console.log(a);
        console.log(typeof a);
    </script>
</head>
<body>
    
</body>
</html>

8、运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
        var a = 123;
        var result = typeof a;
        // console.log(result);
        // console.log(typeof a);
        // console.log(typeof result);

        result = a + 1;//124
        result = 456+789;//1245
        result = true+1;//2
        result = true+false;//1
        result = 2+null;//2
        result = 2+NaN;//NaN 任何值和NaN运算结果都是NaN

        result = "123" + "456";//123456


        //console.log(result);

        var str = "卡美多可是当你看"+
        "到喀什注册送"+
        "车库三岔口·擦擦";

        //console.log(str);

        result = 123 + "1"; //1231
        result = true + "hello"; //1231
        //console.log(result);

        var c = 123;
        //c = String(c)
        c = c +"";//转为字符串

        c = null;
        c = c + "";
        
        //console.log(typeof c);
        //console.log(c);
        c = 123;
        //console.log("c = "+ c);

        result = 1+2+"3";//33
        result = "1"+2+3;//123

        result = 100 - 5;//95
        result = 100 - "1";//99
        result = 100 - true; // 99

        result = 2 * 2;//4
        result = 2 * "8"//16
        result = 2 * undefined;//NaN
        result = 2 * null;//0

        // console.log("result = "+result);

        var d = "123";
        //d = Number(d);
        d = d - 0;//转换number
        console.log(typeof d);
        console.log(d);

        result = 9 % 3;//0
        result = 9 % 4;//1
        result = 9 % 5;//4
        console.log("result = " + result);


    </script>
</head>
<body>
    
</body>
</html>

9、一元算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元运算符</title>
    <script type="text/javascript">
        /* + - */
        var a = 123;
        a = +a;//123
        a = -a;//-123

        a = -123;//-123
        a = -a;//123

        a = true;
        a = -a;//-1

        a = "18"
        //a = -a;//-18
        a = +a;//18
        //console.log("a = "+ a);
        //console.log(typeof a);

        var result = 1 + +"2" +3;//6
        //console.log("result = " + result);

        a = null;
        a = undefined;//NaN
        a = +a;
        console.log("a = "+a);
    </script>
</head>
<body>
    
</body>
</html>

10、自增和自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增和自减</title>
    <script type="text/javascript">
        /*
            自增a++ ++a
        */
        var a = 1;
        // a++;
        // a++;
        // console.log(a++);
        //console.log(++a);
        // console.log("a = "+a);

        var c = 10;
        c++;
        // console.log(c++);//11
        // console.log("c = "+c);

        var d = 20;
        //console.log(++d);//21
        //console.log(++d);//22

        var result = d++ + ++d +d;
        //console.log("result "+ result);//64

        d = 20;
        d = d++;
        // console.log("d = "+d);

        var num = 10;
        num--;
        console.log("num = "+num);


    </script>
</head>
<body>
    
</body>
</html>

11、逻辑运算符

逻辑与 、逻辑非 、逻辑或

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
    <script type="text/javascript">
        /*
        JS中为我们提供了三种逻辑运算符
        ! 非
            - !可以用来对一个值进行非运算
            - 所谓非运算就是值对一个布尔值进行取反操作,
                true变false,false变true
            - 如果对一个值进行两次取反,它不会变化
            - 如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反
                所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
                可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样
        
        && 与
            - &&可以对符号两侧的值进行与运算并返回结果
            - 运算规则
                - 两个值中只要有一个值为false就返回false,
                    只有两个值都为true时,才会返回true
                - JS中的“与”属于短路的与,
                    如果第一个值为false,则不会看第二个值
        
        || 或
            - ||可以对符号两侧的值进行或运算并返回结果
            - 运算规则:
                - 两个值中只要有一个true,就返回true
                    如果两个值都为false,才返回false
                - JS中的“或”属于短路的或
                    如果第一个值为true,则不会检查第二个值
         */
        
        var a = true;
        //对a进行非运算
        a = !a;
        //console.log("a = " + a);
        
        var b = 10;
        b = !!b;
        
        //console.log("b = " + b);
        //console.log(typeof b);
        
        //如果两个值都是true则返回true
        var result = true && true;
        
        //只要有一个false,就返回false
        result = true && false;
        result = false && true;
        result = false && false;
        
        //console.log("result = "+result);
        
        //第一个值为true,会检查第二个值
        //true && alert("看我出不出来!!");
        
        //第一个值为false,不会检查第二个值
        //false && alert("看我出不出来!!");
        
        //两个都是false,则返回false
        result = false || false;
        
        //只有有一个true,就返回true
        result = true || false;
        result = false || true ;
        result = true || true ;
        
        //console.log("result = "+result);
        
        //第一个值为false,则会检查第二个值
        //false || alert("123");
        
        //第一个值为true,则不再检查第二个值
        true || alert("123");
    </script>
</head>
<body>

</body>
</html>

推荐阅读更多精彩内容