03.JavaScript语法中

最新推荐文章于 2022-07-28 20:02:37 发布

表哥说名字长比较帅

最新推荐文章于 2022-07-28 20:02:37 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏： js学习笔记

本文链接：https://blog.youkuaiyun.com/a478269761/article/details/78134388

js学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解JavaScript中的字符串处理技巧，包括合并、拆分、转换等方法，并介绍如何使用定时器实现动画效果、倒计时等功能。同时探讨了类型转换、变量作用域、闭包等高级特性。

一.字符串处理方法

1、字符串合并操作：“ + ”

    var name = 'Tom';
    var age = 18;
    //弹出"我的名字叫做Tom，我的年龄是18岁"
    alert('我的名字叫做'+ name +',我的年龄是'+age+'岁；'  );

2、parseInt() 将数字字符串转化为整数

    var a = 12;
    var b = '23';
    alert(parseInt(a)+parseInt(b));

3、parseFloat() 将数字字符串转化为小数

    var a = 5.6;
    var b = 4.2;
    var c = 0.1;
    var d = 0.2;
    alert(parseFloat(a)+parseFloat(b));
    // alert(parseFloat(c)+parseFloat(d));弹出0.30000000004
    // 相加等于0.30000000004的问题，解决方法是先乘以100，再除以100
    alert((parseFloat(c)*100+parseFloat(d)*100)/100);

4、split() 把一个字符串分隔成字符串组成的数组

    var sTr = '2016-12-5';
    var aRr = sTr.split('-');
    // alert(typeof(aRr));
    for (var i=0;i<aRr.length;i++) {
        alert(aRr[i]);//依次弹出2016，12，5
    }

5、charAt() 获取字符串中的某一个字符

    var sTr1 = '#div1';
    var sTr2 = sTr1.charAt(0);
    alert(sTr2);//弹出#

6、indexOf() 查找字符串是否含有某字符

    var sTr = 'Microsoft yahei';
    var num1 = sTr.indexOf('yahei');
    alert(num); //找到就弹出字符串出现的位置：10，从0开始数
    var num2 = sTr.indexOf('xihei');
    alert(num2);  //没有找到就弹出 -1

7、substring() 截取字符串用法： substring(start,end)（不包括end）

8、toUpperCase() 字符串转大写

9、toLowerCase() 字符串转小写

    var sTr1="abcdefghijklmn"
    var sTr2 = sTr1.substring(10); //从第10个截到结尾,从0开始数
    alert(sTr2);//弹出klmn
    alert(sTr2.toUpperCase());//弹出KLMN

10、字符串反转

    var str = '12345';
    var str2 = str.split('').reverse().join('-');
    alert(str2)//弹出1-2-3-4-5

二、调试程序的方法

1、alert
之前经常使用的，弹出对话框的功能
2、console.log

<script type="text/javascript">
    console.log("123");
</script>

这里写图片描述

二、定时器

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

setTimeout  只执行一次的定时器 
clearTimeout 关闭只执行一次的定时器
setInterval  反复执行的定时器
clearInterval 关闭反复执行的定时器

一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var time1 = setTimeout(myalert,2000);//每隔2秒弹出一个对话框
        var time2 = setInterval(myalert,2000);
        /*
        clearTimeout(time1);
        clearInterval(time2);
        */
        function myalert(){
            alert('ok!');
    }
    </script>
</body>
</html>

定时器制作时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }
    //转换日期
    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }

    //如果是个位数，则补上一个0
    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
</body>
</html>

这里写图片描述
定时器制作倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body > 
<h2>剩余时间:</h2> 
<div id="timer"></div> 

<script language="javascript" type="text/javascript"> 
window.onload=function(){
function leftTimer(){ 
    var leftTime = (new Date(2017,8-1,28,16,20,00)) - (new Date()); //计算剩余的毫秒数 
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
    var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
    var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
    days = checkTime(days); 
    hours = checkTime(hours); 
    minutes = checkTime(minutes); 
    seconds = checkTime(seconds); 
    document.getElementById("timer").innerHTML ='距离2017年8月28日晚16点还剩下'+days+'天'+hours+'时'+minutes+'分'+seconds+'秒';; 
} 
function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
    if(i<10) 
    { 
        i = "0" + i; 
    } 
    return i; 
}
leftTimer();
setInterval(leftTimer,1000); 
}

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

这里写图片描述

三、类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

四、变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

<script type="text/javascript">
    //全局变量
    var a = 12;
    function myalert()
    {
        //局部变量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //弹出12和23
    alert(a);  //弹出12    
    alert(b);  //出错
</script>

这里写图片描述

五、封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：

function changecolor(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}
changecolor();

函数用变量方式定义：

var myalert = function(){

        alert('hello!');
    }
myalert();

封闭函数：把匿名函数用（）包起来，再在后面加（）就成了封闭函数

// 封闭函数定义：(function(){  .... })()
(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}()

完整的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="div1">1232</div>
<script type="text/javascript">
    (function(){
        var oDiv = document.getElementById('div1');
        oDiv.style.color = 'red';
    })();//一开始就执行了
</script>
</body>
</html>

这里写图片描述

六、闭包

什么是闭包

函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机

function aaa(a){      
         var b = 5;      
         function bbb(){
            a++;
            b++;
            alert(a);
            alert(b);
         }
         return bbb;
     }

var ccc = aaa(2);

ccc();
ccc();

封闭函数的形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">

    function aaa(a){      
      var b = 5;      
      function bbb(){
           a++;
           b++;
         alert(a);
         alert(b);
      }
      return bbb;
    }

 var ccc = aaa(2);

 ccc();//弹出3,6
 ccc();//弹出4,7
    </script>
</body>
</html>

用处
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包的用途-存循环的索引值</title>
    <script type="text/javascript">
        window.onload = function(){

            var aLi = document.getElementsByTagName('li');

            // for (var i=0;i<aLi.length;i++) {
            //  aLi[i].onclick=function(){
            //      alert(i);//每一个li的事件绑定了，但i的值却不会保存的，最后为8，点击每一个li都是弹出8
            //  }
            // }

            for(var i=0;i<aLi.length;i++)
            {
                (function(i){

                    aLi[i].onclick = function(){

                        alert(i);//每一个li的绑定点击的i的值都保存了下来             
                    }

                })(i);

            }
            //上面是简化的方式
              // function a(i) {
               //       function b(){
               //       alert(i);
               //   }
               //       return b;
               //   }
               //   aLi[i].onclick=a(i);

        }

    </script>
    <style type="text/css">
        li{
            height:30px;
            background-color: gold;
            margin-bottom:10px;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

第一种情况
这里写图片描述
第二种情况

2、私有变量计数器，外部无法访问，避免全局变量的污染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包的用途-私有变量计数器</title>
    <script type="text/javascript">
        //匿名函数已经执行了一次，a变量存储了起来，count变量是bb函数的定义。
        var count = (function(){

                    var a = 0;

                    function bb()
                    {
                        a++;
                        return a;
                    }

                    return bb;

        })();


        alert(count());//弹出1

        alert(count());//弹出2

        var c = count();

        alert(c);//弹出3

    </script>

</head>
<body>

</body>
</html>