前端

作者: 周肸 | 来源:发表于2018-11-29 09:12 被阅读0次

1.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
    <script type="text/javascript">
        /*
        数据类型指的就是字面量的类型
            在JS中一共有六种数据类型
                String 字符串
                Number 数值
                Boolean 布尔值
                Null 空值
                Undefined 未定义
                Object 对象
            
            其中String Number Boolean Null Undefined属于基本数据类型
            而Object属于引用数据类型
        */

        /*
        String字符串
            - 在JS中字符串需要使用引号引起来
            - 使用双引号或单引号都可以,但是不要混着用
            - 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
        */
        var str = 'hello';

        /*
        在字符串中我们可以使用\作为转义字符,当表示一些特殊符号时可以使用\进行转义
            \" 表示 "
            \' 表示 '
            \n 表示换行
            \t 制表符
            \\ 表示\
        */
        str = "我说:\"今天\t天气真不错!\"";
        str = "\\\\\\";
        // console.log(str);

        //输出字面量 字符串str
        // alert("str");

        //输出变量str
        // alert(str);

        var str2 = "hello";
            
        str2 = "你好";
        
        str2 = 3;
    </script>
</head>
<body>

</body>
</html>

2.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
    <script type="text/javascript">
        /*
        运算符也叫操作符
            通过运算符可以对一个或多个值进行运算,并获取运算结果
            比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回
                "number" "string" "boolean" "undefined" "object"

        算数运算符
            当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算
            任何值和NaN做运算都得NaN

            +
                +可以对两个值进行加法运算,并将结果返回
                如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回
                任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
            -
                - 可以对两个值进行减法运算,并将结果返回
            *
                * 可以对两个值进行乘法运算
            /
                / 可以对两个值进行除法运算
            %
                % 取模运算(取余数)
        */      
        var a = 123;
        var result = typeof a;
        // console.log(result);
        // console.log(typeof a);

        result = a + 1;
        result = 456 + 789;
        result = true + 1;
        result = true + false;
        result = 2 + null;
        result = 2 + NaN;
        result = "123" + "456";
        result = "你好" + "小帅哥";
        // console.log(result);

        var str = "锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦";
        // console.log(str);

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

        //任何值和字符串相加都会转换为字符串,并做拼串操作
        /*
        我们可以利用这一特点,来将一个任意的数据类型转换为String
            我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
            这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
        */
        var c = 123;
        c = String(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 - true;//99
        result = 100 - "1";//99

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

        result = 4 / 2;//2
        result = 3 / 2;//1.5
        // console.log("result = "+result);

        /*
        任何值做- * /运算时都会自动转换为Number
        我们可以利用这一特点做隐式的类型转换
            可以通过为一个值 -0 *1 /1来将其转换为Number
            原理和Number()函数一样,使用起来更加简单
        */
        var d = "123";
        d = d - 0;
        // 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>

3.自增与自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增和自减</title>
    <script type="text/javascript">
        /*
        自增 ++
            - 通过自增可以使变量在自身的基础上增加1
            - 对于一个变量自增以后,原变量的值会立即自增1
            - 自增分成两种:后++(a++) 和 前++(++a)    
                无论是a++还是++a,都会立即使原变量的值自增1
                不同的是a++和++a的值不同
                a++的值等于原变量的值(自增前的值)
                ++a的值等于新值 (自增后的值)
        
        自减 --
            - 通过自减可以使变量在自身的基础上减1
            - 自减分成两种:后--(a--) 和 前--(--a)
                无论是a--还是--a都会立即使原变量的值自减1
                不同的是a-- 和 --a的值不同
                    a-- 是变量的原值 (自减前的值)
                    --a 是变量的新值 (自减以后的值)
        */
        var a = 1;
        
        //使a自增1
        //a++;
        //++a;
        
        //console.log("++a = " + ++a);
        //console.log("a++ = " + a++);
        
        //console.log("a = " + a);
        
        
        var c = 10;
        
        //第一次c++,是在10的基础上自增
        c++;
        
        //第二次c++,是在11的基础上自增
        //console.log(c++);
        
        var d = 20;
        
        //console.log(++d);//21
        //console.log(++d);//22
        
        //20 + 22 + 22
        var result = d++ + ++d + d ;

        // console.log("result = " + result);
        
        d = 20
        d = d++;
        /*
        相当于
        var e = d++;
        d = e;
         */
        
        // console.log("d = "+d);
        
        var num = 10;
        
        //num--;
        //--num;
        
        // console.log(num--);
        console.log(--num);
        
        console.log("num = "+num);
    </script>
</head>
<body>

</body>
</html>

相关文章

  • 前端文章系列

    【前端】从0.1开始,创建第一个项目 【前端】初识HTML 【前端】HTML标签 【前端】HTML属性 【前端】C...

  • Web前端小白入门指迷

    大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

  • Web前端

    Web前端 web前端是什么- 定义 职责 web前端基础知识和学习路线 web前端学习的资源 1.Web前端是...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • 前端学习:一个好的前端导航可以更好的学习前端

    前端导航: 前端网课(前端的网络课程,在线网站) 前端资源(有论坛等交流平台) 前端手册(html手册,css手册...

  • 2018-09-25

    前端学习 前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 无标题文章

    #Web前端 - web前端是什么 - 定义 - 职责 - web前端基础知识和学习路线 - web前端学习的...

网友评论

      本文标题:前端

      本文链接:https://www.haomeiwen.com/subject/bohxcqtx.html