前端一周02 JavaScript 字符串、 数组

   字符串
  String 用来处理文本(字符串)
  
            字符串的创建
    1. 字面量的创建方式
    //  字面量的声明
    var str = "sfssfsf";   //  用""或者是''括起来的字段就叫字符串
    2.通过new的方式  (构造函数创建)
    //  构造函数创建
    var str = new String('hello');   //  新创建一个对象,并且把存放的值赋予给对象
    3. 直接使用String()创建   
    //  直接使用String() 来去创建
    var str = String('hello');   //  直接办存放的值转换为最原始的字符串并返回值
    属性:length   
    字符串的length是其字符串中所有字符的长度
    获取字符串的长度
    var str = 'www.baidu.com';
    console.log(str.length)
    
   方法:
   
   1.charAt()
        在字符串中获取某个位置的字符
    //  charAt()
        var s = str.charAt(10);
        console.log(s);
    2. charCodeAt()
        获取字符串中某个位置的字符对应的Unicode编码
    
    3.indexOf()
            // 对字符串进行检索
            //  返回回来的值是检索字符在字符串中的下标,没有检索到返回值是-1
            //  检索时时把检索的字符当做是一个整体来处理
        var str = 'www.baidu.com';
        var ind = str.indexOf('comn');
        console.log(ind);
        
    4.match()
        找到匹配正则表达式的集合
        var str = '苏久福今年25,苏久福是男生,苏久福身高190';
        var reg = /苏久福/g;
            
        var arr = str.match(reg);
        console.log(arr);
        
    5.replace()
        替换匹配正则表达式的字符
        var str = '苏久福今年25,苏久福是男生,苏久福身高190';
        var reg = /苏久福/g;
        var newStr = str.replace(reg,'王瑞');
        console.log(newStr);
    6.slice()
        //  截取字符串,可以传入两个参数,一个是startSlice,一个是endSlice
        //  如果只传入一个参数,那么就会默认从参数对应的下标开始截取一直到结束
        var str = '苏久福今年25,苏久福是男生,苏久福身高190';
        var ss = str.slice(0,3);   //  [start,end)  
        console.log(ss);
    
    7.split()
        将字符串分割为数组,通过制定的字符来分割
        var str = '苏久福今年25,苏久福是男生,苏久福身高190';
        var arr = str.split(',');
        console.log(arr);
    
    8. substr()  substring()
        提取指定位置在字符串中的字符
        //   substr()   substring()
        //  这两个方法如果只传入一个参数,他们结果是一致的
        //  substr  第二个参数代表从第一个参数位置开始截取的字符长度
        //  substring  第二个参数也是提取字符的下标,从小的开始提取到大的下标位置
        var str = 'www.baidu.com';
            
        var newstr = str.substr(5,1);
        console.log(newstr);
        var newstr1 = str.substring(5,0);  // [5,10)
        console.log(newstr1);
        console.log(newstr == newstr1);   // true
    
    9. toUpperCase()   toLowerCase()
        toUpperCase()   将字符转换为大写
        toLowerCase()   将字符转换为小写
        
    //  toUpperCase()
        
        var str = 'www.baidu.com';
        
        var newstr = str.toUpperCase();
        console.log(newstr);

       数组
    Array 用于单个变量存储多个值
    var arr = [1,2,3,4,5];    
        找值通过下标去寻找
    创建
        1.  字面量
        var arr = [];   //  字面量创建
        
        2.  new 
        var arr = new Array();      // 返回一个空数组
        
        var arr1 = new Array(2);    //   返回一个规定了size(元素个数)的数组
        
        var arr2 = new Array(1,3,5,10,9);   //   返回了一个定义了初始值的数组
            
        console.log(arr,arr1,arr2);
   
    属性:
        length   返回数组的长度/返回数组元素的总个数
   
    方法:
        1. concat()
           将多个数组合并并返回合并后的数组
           var arr1 = [1,2,3];
            var arr2 = [4,5,6];
            var arr3 = [7,8,9];
            
            var arr = arr1.concat(arr2,arr3);
            console.log(arr);
        
        2.push()
                   将要添加的元素作为数组最后一个添加到数组中
            var arr = [];
            arr.push(1);
            
            arr.push(3);
            console.log(arr);       
                   
        3.pop()
            删除最后一个元素并返回
            //   push   pop
                
            var a = arr.pop()
            console.log(a);
            console.log(arr);
        
        4. unshift()
            将要添加的元素作为数组的第一个元素添加到数组中
            
        5. shift()
            删除数组的第一个元素并返回
        
        6.reverse()
            将数组元素反序来排列
            //  reverse
            var arr = [1,2,3,4,5,6,7,8,9];
            var newArr = arr.reverse()
            console.log(newArr);
        7.slice()
            在已有的数组中返回制定的元素
            // slice
            var arr = [1,2,3,4,5,6,7,8,9];
            var newArr = arr.slice(5,7);  //  [5,7)
            console.log(newArr);
        8.sort()
            对数组进行排序
            //  sort
            var arr = [12,2,34,34,13,1000,24];
            var arr1 = arr.sort(function(b,a){
                return b-a;     //  函数中的第一个参数 - 函数中的第二个参数  代表正序排列(从小到大)
                                //  函数中的第二个参数 - 函数中的第一个参数  代表反序排列(从大到小)
            })
            console.log(arr1);
        9.splice()
            删除元素并向数组中添加新元素
            //  splice
            var arr = ['sss','aaa','bbb'];
            var arr1 = arr.splice(1,1,'ccc');   //  返回删除的元素
            //  splice 第一个参数删除的开始下标  ,第二个参数代表删除元素的个数 , 第三个参数 代表要想数组中添加的新元素、位置为删除元素在原来数组中的位置
            console.log(arr,arr1);
            
        10. join()    toString()
            将数组转换为字符串
            //  join
            var arr = ['hello','world','sujiufu'];
            var str = arr.join("====");
            // 通过制定的字符将数组中所有的元素链接成一个字符串返回
            console.log(str);
            //  toString
            var str = arr.toString();
            //  把所有的元素直接转换为字符串返回,
                          并且数组中元素分隔符也加到了字符串中
            console.log(str);

   数据传输格式
   
   JSON
        JSON ?
        JSON 指Javascript对象表示法,  JavaScript Object Notation
        JSON 是轻量级的文本数据传输格式
        JSON 独立于语言
            JSON使用了javascript语法来描述数据对象,但是JSON仍旧独立于语言和平台,JSON解析器和JSON库支持许多不同的编程语言。
        JSON 具有自我描述性,更容易的去理解。
        
        为什么要使用JSON?
            JSON对于我们应用来说,JSON比XML更容易的去使用
            
        JSON语法?怎么去书写?
            JSON 主要是以键值对的形式存在
            
        JSON的值可以接收哪几种类型?
            String
            Number
            Boolean
            Array
            Object
            Null
            
        //  复杂类型
        
        Array
        Object
        
        JSON中Array?
            数组不止是接受简单的数据,还可以接受对象作为元素
        JSON中Object?
            对象里也可以接受对象作为元素,但注意的是需要以键值对的方式存在
        
        怎么使用JSON?

        //   datasrc["键的名字"]              //  [] 这里面可以接收变量
        var name = "ObjectType";
        
        var obj = datasrc[name];
        
        console.log(obj["option"]);
        
        //   datasrc.ObjectType               // 不能接受变量
        var name = "ObjectType";
        
        var obj = datasrc.ObjectType;
        
        console.log(obj["option"]);
        
        js方式去引入的
        
        JSON文件?
          .json  扩展名 
          不能使用单引号,必须得使用双引号,
          每一个键值对之间必须的使用,隔开
          
        JSON两个重要的方法?
        
            JSON 转换为字符串的方法
                JSON.stringify(json);
          
          
            字符串转换为JSON
                JSON.parse(str);
   
            注意:字符串转换为JSON,那么字符串必须是json严格格式的字符串
   
   
   XML
   
        和HTML很像很像
        XML  被设计用来传输和存储数据的
        
        XML  可扩展标记语言  (EXtensible Markup Language)
   
        XML  宗旨是传输数据      HTML 是用来显示数据
        
        XML  中可以自由的定义标签
        
        XML  也具有自我描述性
        
        XML文件?
            标志      <?xml version="1.0" encoding="utf-8"?>
            标签一定是闭合双标签
                <root> </root>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" id="username" />
            <input type="password" id="password" />
            <button id="login">登录</button>
            <button id="regist">注册</button>
        </form>
        
        <script>
        //   后台
        var database = {};     //  database  是数据库
        
        database.users = [];      //  创建一个表
        
        database.users.push({           //  向表中插入一条数据
            "id":1,
            "username":"admin",
            "password":"123456",
            "type":"admin"
        })
        
        //   注册的registFun
        function registFun(option){        //   注册接受数据
            var flag = true;
            database.users.forEach(function(e,i){//传一个函数 e代表每一个元素i每个元素的索引值
                if(e.username == option.name){
                    flag = false;
                }
            })
            if(flag){
                var lenOld = database.users.length;
                database.users.push({           //  注册
                    "id":database.users.length+1,
                    "username":option.name,
                    "password":option.password,
                    "type":"user"
                })
                var lenNew = database.users.length;
                if(lenNew - lenOld == 1){
                    return '{"ok":true,"mes":"注册成功"}';        //   后台给前台返回一个字符串
                }else{
                    return '{"ok":false,"mes":"注册失败"}'; 
                }
            }else{
                return '{"ok":false,"mes":"用户名存在"}';
            }
            
        }
        
        //   登录的loginFun
        function loginFun(str){    ///   op 就是前台发送过来的数据
            //   查询用户名是否存在
            var obj = null;     //  用户   默认用户是null
            database.users.forEach(function(e){
                if(e.username == op.name){
                    obj = e;
                }
            })
            if(obj != null){
                if(obj.password == op.password){
                    return '{"ok":true,"mes":"登陆成功"}';
                }else{
                    return '{"ok":false,"mes":"密码错误"}';
                }
            }else{
                return '{"ok":false,"mes":"用户不存在"}';
            }
        }
        
        
        
        
        //   前台
        
        var regist = document.getElementById('regist');
        var login = document.getElementById('login');
        var username = document.getElementById('username');
        var password = document.getElementById('password'); 
        
        //  注册
        regist.onclick = function(){           //  注册完成
            var user = username.value;
            var pass = password.value;
            if(user !== "" && user.length>=3 && pass != "" && pass.length>=6){
                var result = registFun({            //   后台发送数据    并接受返回的消息
                        "name":user,
                        "password":pass
                    });
                var json = JSON.parse(result);
                if(json.ok){
                    alert(json.mes);
                }else{
                    alert(json.mes);
                }
            }
            return false;
        }
        
        
        //   登录
        
        login.onclick = function(){
            var user = username.value;
            var pass = password.value;
            if(user !== "" && user.length>=3 && pass != "" && pass.length>=6){
                //   往后台发送请求
                var result = loginFun({     //  {} 向后台发送的数据
                    "name":user,
                    "password":pass
                });
                var json = JSON.parse(result);
                if(json.ok){
                    alert(json.mes);
                }else{
                    alert(json.mes);
                }
            }
            return false;
        }
        
        
        /*
         
         *      1.前台获取用户输入的用户名和密码
         *      2.验证用户名和密码的格式是否正确
         *      3.开始往后台发送数据
         * 
         *      4.后台接受数据,并且需要对数据做相应的处理                                 class User{}
         *          //   'username=admin&password=123456'
         *          //   {username:admin,password:123456}
         *          //   '{"username":"admin","password":123456}'
         *      5.处理数据,拿到相应的参数  
         *      6.  login -> 登录功能            public void login(username,password){}
         *          regist -> 注册功能      public void regist(username,password){}
         * 
         *      7. 程序处理完以后返回相应的结果                         //   重定向     登陆成功                      
         *                                       //   重载      登陆失败
         * 
         *      //   需要向前台发送数据          
         * 
         *      7.程序处理完返回相应的结果并发送给前台
         * 
         *      8.接受后台发送回来的消息                   //  '{"ok":true,"mes":"登录成功"}'
         * 
         *      9.处理发送回来的消息                          //     登录成功    跳转页面                       登录失败          显示错信息
         * 
         * 
         * 
         * 
         * 
         * 
         * */
        
        
        </script>
        
        
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容