第一部分：JS操作符

（1）JS操作符的分类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS操作符</title>
</head>
<body>

<script>
    var a = 1;
    var b = 2;
    // 算术运算符   +  、-  、 *  、 /  、 %、++、--
    document.write(a+b + "<br>");    //doucument.write()将内容写入HTML页面
    document.write(a-b + "<br>");
    document.write(a*b + "<br>");
    document.write(a/b + "<br>");
    document.write(a++ + "<br>");    //如果++放a后面则先打印a，现在是1，然后再自增1；
    document.write(++a + "<br>");    //如果++放a前面则先自增1并打印a，现在是2。
    document.write(--a + "<br>")     //--和++同理！
    document.write(b%a + "<br>")     //取余

    var c = 3;
    // 赋值运算符  = 、+=、-=、 *=、/=，%=
    document.write((c=5) + "<br>");        //5
    document.write((c+=1) + "<br>");       //6
    document.write((c-=1) + "<br>");       //5
    document.write((c*=2) + "<br>");       //10
    document.write((c/=2) + "<br>");       //5
    document.write((c%=2) + "<br>");       //1

    var d = '1';
    var e = 1;
    var f = 3;
    // 比较运算符    >、>=、<、<=、==（等于）、===（全等）
    document.write((f>e) + "<br>");        //true
    document.write((f>=e) + "<br>");       //true
    document.write((e==d) + "<br>");       //true      ==等于，但不全等，它会先转换我们的类型，再进行比较
    document.write((e===d) + "<br>")       //false      全等，先比较类型是否一致，如果类型一致再比较值的大小。


    // 逻辑运算符     &&（与）、||（或）、! （非）
    document.write((2>3&&2<5) + "<br>");    //false
    document.write((2>3||2<4) + "<br>");    //true
    document.write((!(2==3)) + "<br>");

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

（2）JS操作符的注意点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS操作符的注意点</title>
</head>
<body>

<script>
    // 算数运算符注意点：
    var a = 10;
    var str = "1";
    document.write((a + str) + "<br>");     //101
    document.write((a - str) + "<br>");     //9
    document.write((a + true) + "<br>");    //11
    document.write((a - false) + "<br>");   //10
    document.write((a + null) + "<br>");    //10
    document.write((a + undefined) + "<br>"); //NaN

    document.write((0.1 + 0.2) + "<br>");   //0.30000000000000004
    document.write((10/3) + "<br>");        //3.3333333333333335

    //逻辑运算符注意点：   0,null,undefined,NaN,''空字符串,false这些在进行判断的时候为假。
    document.write((!null) + "<br>");       //true
    document.write(!0 + "<br>");            //true
    document.write(!1 + "<br>");            //false
    document.write(!undefined + "<br>");    //true
    document.write(!NaN + "<br>");          //true
    document.write(!'' + "<br>");           //true
    document.write(!false + "<br>");        //true
    
</script>

</body>
</html>

第二部分：流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制</title>
</head>
<body>

<script>

    var name = "奶茶";
    //if ... else  语句
    if(name=="奶茶"){
        document.write("我要喝奶茶");
    }else{
        document.write("有没有奶茶？");
    }

    //if ... else if ... else  语句
    a = "帅气";
    if(a=="美丽"){
        document.write("你很美丽啊！");
    }else if(a=="可爱"){
        document.write("你很可爱啊!")
    }else{
        document.write("你很帅气啊！")
    }

    //switch ... case ... default
    var day = 2;
    switch (day){
        case 1:
            document.write("今天星期一");
            break;
        case 2:
            document.write("今天星期二");
            break;
        case 3:
            document.write("今天星期三");
            break;
        default:
            document.write("请输入1-7之间的数字！")
    }


</script>

</body>
</html>

第三部分：循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>

<script>
    // for循环   for(声明循环变量;判断循环条件;更新循环变量)
    for(var i=1;i<=5;i++){      //x先判断后执行
        document.write("我跑了" + i + "圈" + "<br>");
    }

    // while循环                  先判断后执行
    var a = 1;
    while (i<=5){
        document.write("我跑了" + i + "圈" + "<br>");
        i++
    }

    // do ... while循环           先执行后判断
    var b = 1;
    do{
        document.write("我跑了" + i + "圈" + "<br>");
        b++;
    }while(b<=5)

</script>

</body>
</html>

第四部分：字符串方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串方法</title>
</head>
<body>

<script>
    
    var str = "hello world";
    var str1 = "ABCDEFG";

    // 长度                 输出字符串的长度。
    document.write(str.length + "<br>");
    // 下标(两种方法)       查找字符串中对应下标的字符。
    document.write(str[2] + "<br>");       //下标从0开始。  如果下标超出字符串长度，报undefined。
    document.write(str.charAt(2))
    // 替换
    document.write(str.replace("h","y") + "<br>");   //将字符串中的h替换为y，如果是这样写，只会替换匹配到的第一个字符。
    document.write(str.replace(/o/g,"a") + "<br>");  //如果这样写，是替换所有匹配的字符，全局搜索。
    // 分割                  将指定的字符变为逗号实现分割。
    document.write(str.split("o") + "<br>");
    // 索引
    document.write(str.indexOf("d") + "<br>");       //查询指定的字符在字符串中对应的下标。如果在字符串中多次出现，则只查询第一次出现的下标。
    document.write(str.indexOf("o",4) + "<br>");     //指定查询开始的字符下标。这样就可以查询到后面的字符的下标。
    document.write(str.lastIndexOf("l") +"<br>");    //从字符串尾部向头查询指定字符串的下标。  作用：可以快速查询到最后一个指定字符的下标。
    // 截取     左闭右开      .substring(截取部分开始下标，截取部分结束下标加1)
    document.write(str.substring(1,4) + "<br>");     //ell
    // 切割     左闭右开      .slice(切割部分开始下标,切割部分结束下标加1)
    document.write(str.slice(1,4) + "<br>");         //ell
    // 小写变大写
    document.write(str.toUpperCase()+"<br>");       //HELLO WORLD
    // 大写变小写
    document.write(str1.toLowerCase()+ "<br>");     //abcdefg

    
    // 拓展：截取和切割的区别：
    // 第一点：截取会自动比较参数的大小；但是切割不会！
    // 截取：
    document.write(str.substring(1,4) + "<br>");    //ell
    document.write(str.substring(4,1) + "<br>");    //ell
    // 切割：
    document.write(str.slice(1,4) + "<br>");        //ell
    document.write(str.slice(4,1) + "<br>");        //没有东西，即不行！
    // 第二点：截取不能取负值；但是切割可以！
    // 截取：
    document.write(str.substring(-4,-1) + "<br>");  //没有东西，即不行！
    // 切割：
    document.write(str.slice(-4,-1) + "<br>");      //orl

</script>

</body>
</html>

第五部分：数组方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组方法</title>
</head>
<body>

<script>
    // 定义数组
    var array = ["香蕉","西红柿","椰子","橙子"];

    // 数组的长度
    document.write(array.length + "<br>");                             //4
    // 下标     获取指定下标的数组的值
    document.write(array[2] + "<br>");                                //椰子

    // 追加   加在数组的最后面
    document.write(array.push("无花果") + "<br>");                     //5
    document.write(array + "<br>");                                   //香蕉,西红柿,椰子,橙子,无花果
    // 添加    加在数组的最前面
    document.write(array.unshift("黄瓜") + "<br>");                   //6
    document.write(array + "<br>");                                   //黄瓜,香蕉,西红柿,椰子,橙子,无花果

    // 后删     删除数组的最后一个
    document.write(array.pop() + "<br>");                             //无花果
    document.write(array + "<br>");                                   //黄瓜,香蕉,西红柿,椰子,橙子
    // 前删     删除数组的最前面一个
    document.write(array.shift() + "<br>");                           //黄瓜
    document.write(array + "<br>");                                   //香蕉,西红柿,椰子,橙子

    // 索引       获取指定数组元素的下标
    document.write(array.indexOf("椰子") + "<br>");                   //2
    // 切片      左闭右开   可以取负值
    document.write(array.slice(1,3) + "<br>");                       //西红柿,椰子
    document.write(array.slice(3,1) + "<br>");                       //不可行，没有用哦！
    document.write(array.slice(-3,-1) + "<br>");                     //西红柿,椰子
    // 替换              splice(开始下标,替换个数，替换内容)   替换内容可以没有，可以多于替换个数，可以少于替换个数。
    document.write(array.splice(1,2,"菠萝","杨桃") +"<br>");         //西红柿,椰子
    document.write(array + "<br>");                                  //香蕉,菠萝,杨桃,橙子
    // 拼接               指定数组里面元素之间的符号
    document.write(array.join("-") + "<br>");                        //香蕉-菠萝-杨桃-橙子

    var arr = ["a","d","b","c"];
    // 排序                按照字符集编码进行排序
    document.write(arr.sort() + "<br>");        //正向排序           //a,b,c,d
    document.write(arr.reverse() + "<br>");     //反向排序           //d,c,b,a

    var arr1 = ["a","d","b","c"];
    // 连接               多个数组连接在一起
    document.write(array.concat(arr) + "<br>");                      //香蕉,菠萝,杨桃,橙子,d,c,b,a
    document.write(array.concat(arr,arr1) + "<br>");                 //香蕉,菠萝,杨桃,橙子,d,c,b,a,a,d,b,c
</script>

</body>
</html>

第六部分：补充点常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补充方法</title>
</head>
<body>

<script>
    var num = 1.23;
    console.log(typeof num);                      //number
    // 字符串            将别的数据类型转换为string字符串类型
    console.log(num.toString());                  //1.23
    console.log(typeof num.toString());           //string
    // 小数字符串        .toFixer()里面参数指定保留小数位数
    console.log(num.toFixed(1));                  //1.2
    console.log(typeof num.toFixed(1));           //string
    // 整数              将别的数据类型转换为整数    转换之后数据类型为number
    var str = "1.23 12px";
    var str1 = "123";
    console.log(parseInt(num));                   //1
    console.log(parseInt(str));                   //1
    console.log(parseInt(str1));                  //123
    // 浮点数             将别的数据类型转换为浮点数   转换之后数据类型为number
    console.log(parseFloat(str));                 //1.23
    // 数字               将别的数据类型转换为number,如果不纯是数字则为NaN
    console.log(Number(str));                     //NaN
    console.log(Number(str1));                    //123
    // 判断NaN            要结合Number()使用，先取出数字再进行判断NaN
    console.log(isNaN(Number(str)));             //true
    console.log(isNaN(Number(str1)));            //false
    // 判断数组           判断是不是数组
    var arr = [1,2,3];
    console.log(Array.isArray(arr));             //true
</script>

</body>
</html>

孤寒rm-

发布了65 篇原创文章 · 获赞 50 · 访问量 3574

私信关注

第五天学习web之学习（JavaScript）（二）

第一部分：JS操作符

（1）JS操作符的分类：

（2）JS操作符的注意点：

第二部分：流程控制

第三部分：循环

第四部分：字符串方法

第五部分：数组方法

第六部分：补充点常用方法：

猜你喜欢