day04

A.今天学到了什么

1.数组

1.1命名方式

   <script>
        // 直接量的方式
        var arr=[1,2,3];
        // 构造函数的方式（了解）
        var b =new Array();
        b[0]=1;
        // 检测一个数据是不是数组
        // instanceof 返回boolean值
        // Array.isArray();返回boolean值
        console.log(b instanceof Array);
    </script>

1.2 增加

  <script>
        // push  从后增加
        var arr=[1,2,3];
        arr.push(4);
        console.log(arr);
        // unshift  从头添加
        arr.unshift(0);
        console.log(arr);
    </script>

1.3 concat增加

    <script>
        var arr=[1,2,3];
        var b=arr.concat(4);
        console.log(arr);
        console.log(b);
    </script>

1.4数组的克隆

    <script>
        var arr=[1,2,3];
        var b=[];
        // 1.push
        for(var i=0;i<arr.length;i++){
            b.push(arr[i]);
        }
        console.log(b);
        // 2.concat
        var c=[4,5,6];
        var d=c.concat([7,8]);
        console.log(d);
    </script>

1.5 数组删除

    <script>
        // 从后面删除
        var arr=[1,2,3];
        arr.pop();
        // console.log(arr);
        // 从头删除
        arr.shift();
        console.log(arr);
    </script>

1.6 数组的修改

    <script>
        var arr=[1,2,3,4];
        arr.splice(1,1,"h");
        console.log(arr);
    </script>

1.7 查询

    <script>
       var arr=[1,2,3,4];
    //    indexOf 查询对应的下标
    //  arr.slice(开始的下标 结束的下标)  不包含结束的下标
       var  a=arr.indexOf(4);
       var b=arr.slice(0,2);
       console.log(b);
    //    传一个参数
       var c=arr.slice(0);
       console.log(c);
    </script>

1.8 splice用法

    <script>
        // 1.增加
         var arr=[1,2,3,4];
        //  arr.splice(2,0,"hello");
        //  console.log(arr)
        //  2.删除
        arr.splice(2,1);
        console.log(arr)
    </script>

#######1.9 join 的用法

    <script>
        //  w3cschool
        // join 将数组转为一个字符串
        var arr=["hello","world","good"];
        var b=arr.join();
        var c=arr.join("|");
        var d=arr.join("");
        console.log(d);
    </script>

2 数组排序

  <script>
        var arr=[232,34,235,65,82,934,93,6,43]
        // 升序
        var b=arr.sort(function(a,b){
            return a-b;
            // 降序 b-a
        });
        console.log(b);
    </script>

3 数组求和

    <script>
        var arr=[123,3,343,343];
        // 求和
        var b=arr.reduce(function(a,b){
            return a+b;
        });
        var c=arr.reverse();
        // console.log(b);
        console.log(c);
        // 二维数组
        var arr1=[[1,2],[2,3],[3,4],[4,5],"hello"];
        console.log(arr1[0][0]);

    </script>

4 swiper轮播

http://3.swiper.com.cn/

5 字符串常用方法

1.获取字符串的长度

        var str="hello world";
        var len=str.length;
        // console.log(len);

2.增加

        var add=str.concat("add");
        // console.log(add);

3.查询 输出对应下标的字符

        var char=str.charAt(2);
        // console.log(char);

4.indexOf 输出对应字符的下标

        var b=str.indexOf("l");
        // console.log(b);
        // 截取
        var c=str.slice(1,4);
        // console.log(c);
        // 基本类型的方法不能改变原来的值
        // substr(index,length)
        // substring(startindex,endindex)
        var e=str.substr(1,3);
        var d=str.substring(1,4);
        // console.log(e);

5.将字符串分割成数组

        var h=str.split("");
        console.log(h);
        // 
    </script>

6 字符串的其他方法

 <script>
        // search 方法   返回搜索值的下标
        // 如果字符不存在 返回-1
        var a ="hello world ";
        var b=a.search("h");
        console.log(b);
        // match 方法   返回一个数组
        // 如果字符不存在 返回null
        var c=a.match("e");
        console.log(c);
        // replace  替换掉第一个hello字符
        var d=a.replace("hello","good");
        // 替换所有的字符
        var e=a.replace(/l/g,"*");
        console.log(e);
    </script>

7 正则表达式

7.1写法

        var a="hello world"
            // 正则表达式写法
            var reg=/l/g;
            // var reg=new RegExp("l","g");
            var b=a.replace(reg,"*");
            console.log(b);

7.2 备选字符集

   // 备选字符集
        var c="上海,上天走,上去,上来";
        var reg=/上[海走]/g;
        var d=c.replace(reg,"**");
        console.log(d);
        var e="12334232d"
        var h=/[0-9]/g;
        console.log(e.replace(h,"*"));
        // 字符集
        // [a-z] [A-Z] [0-9]

7.3 预订字符集

  //预定义字符集
        // \d   [0-9]
        // \w 数字 字母或者下划线
        // \s 除换行以外所有的字符   空格 tab .
        // 
        var u="hello 132321"
        var reg=/\d/g;
        console.log(u.replace(reg,"**"));

7.4 量词

    <input type="text" id="txt">
    <button id="btn">btn</button>
    <script>
        // 量词  规定字符出现的次数
        // 正则表达式自带test()方法   返回boolean
        // {9}确定数量
        // {3,6}出现3-6次
        // {3,}至少出现三次
        var txt=document.getElementById("txt");
        var btn=document.getElementById("btn"); 
        var reg=/^\d{6}$/;
        btn.onclick=function(){
            var value=txt.value;
            var result=reg.test(value);
            console.log(result);
            if(result){
                alert("输入的是正确的");
            }else{
                alert("只能输入6位数字");
            }
        }    
        // 不确定数量的量词
        // +   出现一次或多次
        // ？ 出现0次或1次
        // * 出现0次或多次
    </script>

7.5选择和分组

      <input type="text" id="txt">
        <button id="btn">btn</button>
    <script>
        // ^以xx开头   $以xx结尾
        var reg=/^(\+08|0086)?\s*1[3456789]\d{9}$/;
        var txt=document.getElementById("txt");
        var btn=document.getElementById("btn"); 
        btn.onclick=function(){
            var value=txt.value;
            var result=reg.test(value);
            console.log(result);
            if(result){
                alert("输入的是正确的");
            }else{
                alert("请输入正确的电话号码");
            }
        } 
    </script>

7.6 自定匹配位置

  <script>
        // 排除 [^abc]  除了abc
        var a="     hello";
        var reg=/^\s+/g;
        console.log(a);
        console.log(a.replace(reg,""));
        var b="sahenfks";
        var reg=/[^s]/g;
        console.log(b.replace(reg,"e"));
        
    </script>

7.7 电话号码选择

   <script>
        // 以 +08或者0086 可有可无
        // 可以有多个空格或者没有
        // 第一位为1 第二位为3456789 最后九位为数字
        var reg=/^(\+08|0086)?\s*1[3456789]\d{9}$/
    </script

7.8 match

<script>
        // match也可以传正则表达式
        var str = "hello 13231234 434";
        var reg=/\d+/g;
        var arr=str.match(reg);
        console.log(arr);
    </script>

7.9 过滤

  <textarea  id="txt" cols="30" rows="10"></textarea>
    <button id="btn">过滤</button>
    <script>
        var reg= /天猫|淘宝/g;
        var txt=document.getElementById("txt");
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            var value=txt.value;
            var filter=value.replace(reg,"**");
            txt.value=filter;
        
        }
        
    </script>

7.10 邮箱的正则

       <input type="text" id="txt">
        <p id="content"></p>
        <button id="btn">验证</button>
    <script>
        // 一串数字，字幕或下划线@一串数字 英文，一串英文
        var reg=/^\w+@[a-z0-9]+\.[a-z]+$/
        var txt=document.getElementById("txt");
        var btn=document.getElementById("btn");
        var content=document.getElementById("content");
            btn.onclick=function(){
                var value=txt.value;
                var result =reg.test(value);
                if(result){
                  content.innerHTML="邮箱正确";
                  content.style.color="green";
                }else{
                  content.innerHTML="邮箱格式不正确";
                  content.style.color="red";
                }
            }
            
    </script>

7.11总结
字符串中支持正则的方法
strObj.search(regExp)
search()
match()
replace()
split()
正则自带方法
test() 检测一个字符串是否匹配某个模式 返回值为boolean
regExp.test(strObj)