美文网首页
WEB基础入门十:数组和while循环及字符串处理

WEB基础入门十:数组和while循环及字符串处理

作者: 瘦不下去了 | 来源:发表于2018-09-17 23:42 被阅读0次

    1、面向对象的方式创建
    var aRr01 = new Array(1,2,3,'abc');
    2、直接创建
    var aRr02 = [1,2,3,'def'];//推荐使用,性能更高
    3、获取数组的成员数量(长度)
    alert(aRr02.length);//弹出4

    var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
    // alert(aRr03.length);//弹出3
    // alert(aRr03[1].length);//弹出3
    alert(aRr03[1][2]);//弹出c
    

    4、数组常用方法

    • join() 链接数组元素并转为字符串
    • push 向数组最后追加元素
    • pop 删除末尾元素
    • unshift 向最前面插入元素
    • shift 删除第一个(索引为?的)元素
    • reverse 反转
    • indexof 查找元素第一次出现的索引
    • splice(a,b) 从第a索引元素开始,删除b个元素
    • splice(a,b,'e') 从第a索引元素开始,删除b个元素,再插入e
        //var sTr = aRr.join("-");//用-连接数组元素并转为字符串,弹出1-2-3-4
    
            // var sTr = aRr.join('');//用空串连接
            // alert(sTr);//弹出1234
    
            //向数组最后追加元素
            // aRr.push(5);
            // alert(aRr);//1,2,3,4,5
    
            //删除末尾元素
            // aRr.pop();
            // alert(aRr);//1,2,3
    
            //向最前面插入元素0
            // aRr.unshift(0);
            // alert(aRr);//0,1,2,3,4
    
            //删除第一个(索引为0的)元素
            // aRr.shift();
            // alert(aRr);//2,3,4
    
            //反转
            // aRr.reverse();
            // alert(aRr);//4,3,2,1
    
            //查找字母'b'第一次出现的索引
            var aRr2 = ['a','b','c','d','a','b','c','d'];
            var num = aRr2.indexOf('b');
            // alert(num);//1
    
            //从第2索引元素开始,删除1个元素
            // aRr2.splice(2,1);//删除c
            // alert(aRr2);//a,b,d,a,b,c,d
    
            //从第2索引元素开始,删除1个元素,再插入e
            // aRr2.splice(2,1,'e');//把c替换成e
            // alert(aRr2);//a,b,e,d,a,b,c,d
    
            //删除后面的abcd,改为fghi
            aRr2.splice(4,4,'f','g','h','i');
            alert(aRr2);//a,b,c,d,f,g,h,i
    

    5、数组去重

            var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
            var aRr2 = [];
    
            for(var i=0; i<aRr.length; i++){
                //判断元素第一次出现的位置,恰好是当前索引时,就将元素放入新数组
                if(aRr.indexOf(aRr[i]) == i){
                    aRr2.push(aRr[i]);
                }
            }
    

    6、通过标签获取元素

    获取页面上所有的li:var aLi = document.getElementsByTagName('li');
    获取id为list01的ul:var oList = document.getElementById('list01');
    再获取这个ul下的所有li:var aLi = oList.getElementsByTagName('li');

    7、循环语句
    通过循环语句可以反复的执行一段代码多次

    • while循环
    while(条件表达式){
                        语句...
                    }
    

    while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断,如果为true,则继续执行循环体,以此类推,如果值为false,则终止循环

    • do...while循环
    do{
        语句...
    }while(条件表达式)
    

    do...while语句在执行时,会先执行循环体,循环体执行完毕以后,在对while后的条件表达式进行判断,如果结果为true,则继续执行循环体,执行完毕继续判断以此类推,如果结果为false,则终止循环

    实际上这两个语句功能类似,不同的是while是先判断后执行,而do...while会先执行后判断,do...while可以保证循环体至少执行一次,而while不能

    • for 循环
      在for循环中,为我们提供了专门的位置用来放三个表达式:1.初始化表达式;2.条件表达式;3.更新表达式
    for(①初始化表达式;②条件表达式;④更新表达式){
                        ③语句...
                    }
    

    执行初始化表达式,初始化变量(初始化表达式只会执行一次);执行条件表达式,判断是否执行循环,如果为true,则执行循环,如果为false,终止循环,执行更新表达式,更新表达式执行完毕继续重复

    任意一种循环都可以互相嵌套

    8、字符串处理方法

    • split 字符串切断转成数组
    • charAt(a) 获取指定索引a的字符
    • indexof 查看子串第一次出现的位置,没有找到就弹出-1
    • substring 截取子串
    • substring(a,b) 从a开始,截到b(包括开始,不包括结束)
    • toUpperCase() 全部转为大写字母
    • toLowerCase() 全部转为小写字母
            /*字符串切断转成数组*/
            var sTr = '2018-06-20';
            var aRr = sTr.split('-');
            // alert(aRr);//2018,06,20
            // console.log(aRr);
    
            var aRr2 = sTr.split('');
            // console.log(aRr2);
    
            /*实际上就是修改了<title>标签的内容*/
            // document.title = aRr2;
    
            var sTr2 = '#div1';
            var sTr3 = '.div1';
    
            /*获取指定索引的字符*/
            var sTr4 = sTr2.charAt(0);
            if(sTr4 == '#'){
                // alert('id选择器');
            }
    
            /*查看子串第一次出现的位置*/
            var sTr5 = 'Microsoft Yahei';
            var num = sTr5.indexOf('Yahei');
            // alert(num);//10
    
            var num2 = sTr5.indexOf('xihei');
            // alert(num2);//没有找到就弹出-1
    
            /*substring截取子串*/
            //从10开始,截到15(包括开始位置,不包括结束位置)
            // var sTr6 = sTr5.substring(10,15);//Yahei
            //从10开始截取到末尾
            var sTr6 = sTr5.substring(10);//Yahei
            // alert(sTr6);
    
            /*全部转为大写字母*/
            // alert(sTr6.toUpperCase());//YAHEI
            /*全部转为小写字母*/
            alert(sTr6.toLowerCase());//yahei
    

    9、字符串反转
    1、split字符串转成数组
    2、reverse数组反转
    3、join数组转成字符串

    var sTr = "123asdf79888asdfe21"
    var sTr2 = sTr.split('').reverse().join('');
    alert(sTr2);//12efdsa88897fdsa321
    

    10、定时器弹框
    1、setTimeout 只执行一次的定时器
    2、clearTimeout 关闭只执行一次的定时器
    3、setInterval 反复执行的定时器
    4、clearInterval 关闭反复执行的定时器
    11、定时器基本用法

            //单次定时器
            var timer = setTimeout(function(){
                alert('hello!');
            }, 3000);
    
            //清除单次定时器
            clearTimeout(timer);
    
            //反复循环定时器
            var timer2 = setInterval(function(){
                alert('hi~~~');
            }, 2000);
    
            //清除反复循环定时器
            clearInterval(timer2);
    

    12、变量的作用域
    全局变量:函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享;
    局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找;
    函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错
    13、封闭函数

    封闭函数的一般写法
    封闭函数定义:(function(){……})()
    (function(){
                var str = '欢迎访问我的主页';
                alert(str);
            })();//最后的()表示马上执行
    封闭函数其他的写法:在匿名函数前加“!”或者“~”,之后加“()”
    

    14、变量的方式命名函数

        原来的写法:可以提前
            myAlert();
    
            function myAlert(){
                alert('hello!');
            }*/
    
            //函数用变量方式定义:先定义再使用
            // myalert();//提前会报错
            var myAlert = function(){
                alert('hello!');
            }
    
            myAlert();//放在下面可以执行
    

    相关文章

      网友评论

          本文标题:WEB基础入门十:数组和while循环及字符串处理

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