1. 程式人生 > 實用技巧 >javascript學習(五)之標準物件

javascript學習(五)之標準物件

一、RegExp:正則表示式是一種用來匹配字串的強有力的武器。它的設計思想是用一種描述性的語言來給字串定義一個規則,
          凡是符合規則的字串,我們就認為它“匹配”了,否則,該字串就是不合法的。

      一基礎知識:
              一、建立一個匹配Email的正則表示式;
              二、用該正則表示式去匹配使用者的輸入來判斷是否合法。
                1、用\d可以匹配一個數字,\w可以匹配一個字母或數字,所以:
                2、'\d\d\d'可以匹配'010'3、'\w\w'可以匹配'js'
4、.可以匹配任意字元,所以: 5、'js.'可以匹配'jsp'、'jss'、'js!'等等。 6、要匹配變長的字元,在正則表示式中,用*表示任意個字元(包括0個),用+表示至少一個字元,用?表示0個或1個字元,用{n}表示n個字元,用{n,m}表示n-m個字元: 例子:\d{3}\s+\d{3,8} 1、\d{3}表示匹配3個數字,例如'010'2、\s可以匹配一個空格(也包括Tab等空白符),所以\s+表示至少有一個空格,例如匹配' ','\t\t'等;
3、\d{3,8}表示3-8個數字,例如'1234567'。 綜合起來,上面的正則表示式可以匹配以任意個空格隔開的帶區號的電話號碼。 二、進階 要做更精確地匹配,可以用[]表示範圍,比如: 1、[0-9a-zA-Z\_]可以匹配一個數字、字母或者下劃線; 2、[0-9a-zA-Z\_]+可以匹配至少由一個數字、字母或者下劃線組成的字串,比如'a100','0_Z','js2015'等等; 3、[a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下劃線、$開頭,後接任意個由一個數字、字母或者下劃線、$組成的字串,也就是JavaScript允許的變數名;
4、[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精確地限制了變數的長度是1-20個字元(前面1個字元+後面最多19個字元)。 5、A|B可以匹配A或B,所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'6、^表示行的開頭,^\d表示必須以數字開頭。 7、$表示行的結束,\d$表示必須以數字結束。 8、你可能注意到了,js也可以匹配'jsp',但是加上^js$就變成了整行匹配,就只能匹配'js'了 三、js案例 var re1 = /ABC\-001/; var re2 = new RegExp('ABC\\-001'); // 因為字串的轉義問題,字串的兩個\\實際上是一個\。 3.1、先看看如何判斷正則表示式是否匹配:RegExp物件的test()方法用於測試給定的字串是否符合條件。 var re = /^\d{3}\-\d{3,8}$/; re.test('010-12345'); // true re.test('010-1234x'); // false re.test('010 12345'); // false 3.2、分割字串 案例: 1、'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd'] 2、無論多少個空格都可以正常分割。加入,試試: 'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd'] 3.3、分組:如果正則表示式中定義了組,就可以在RegExp物件上用exec()方法提取出子串來。 除了簡單地判斷是否匹配之外,正則表示式還有提取子串的強大功能。用()表示的就是要提取的分組(Group)。比如: ^(\d{3})-(\d{3,8})$分別定義了兩個組,可以直接從匹配的字串中提取出區號和本地號碼: var re = /^(\d{3})-(\d{3,8})$/; re.exec('010-12345'); // ['010-12345', '010', '12345'] re.exec('010 12345'); // null 3.3.1、exec()方法在匹配成功後,會返回一個Array,第一個元素是正則表示式匹配到的整個字串,後面的字串表示匹配成功的子串。 3.3.2、exec()方法在匹配失敗時返回null。 案例:匹配郵箱:var re =/^[0-9a-zA-Z\.]+@[0-9a-zA-Z]+\.[a-zA-Z]+$/; 二可以驗證並提取出帶名字的Email地址:var re =/^\<([\w\s\w]+)\>\s+([0-9a-zA-Z\.]+@[0-9a-zA-Z]+\.[a-zA-Z]+)$/; 思考題: [a-zA-Z]只包括字母 \w 字母數字,下劃線,unicode文字 二、JSON:是JavaScript Object Notation的縮寫,它是一種資料交換格式。 為了統一解析,JSON的字串規定必須用雙引號"" 在JSON中,一共就這麼幾種資料型別: number:和JavaScript的number完全一致; boolean:就是JavaScript的true或false; string:就是JavaScript的string; null:就是JavaScript的null; array:就是JavaScript的Array表示方式——[]; object:就是JavaScript的{ ... }表示方式。 案例: 'use strict'; var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'] }; var s = JSON.stringify(xiaoming); 或 要輸出得好看一些,可以加上引數,按縮排輸出: var s =JSON.stringify(xiaoming, null, ' '); 結果: { "name": "小明", "age": 14, "gender": true, "height": 1.65, "grade": null, "middle-school": "\"W3C\" Middle School", "skills": [ "JavaScript", "Java", "Python", "Lisp" ] } 第二個引數用於控制如何篩選物件的鍵值,如果我們只想輸出指定的屬性,可以傳入Array: JSON.stringify(xiaoming, ['name', 'skills'], ' '); 如果我們還想要精確控制如何序列化小明,可以給xiaoming定義一個toJSON()的方法,直接返回JSON應該序列化的資料: var xiaoming = { name: '小明', age: 14, gender: true, height: 1.65, grade: null, 'middle-school': '\"W3C\" Middle School', skills: ['JavaScript', 'Java', 'Python', 'Lisp'], toJSON: function () { return { // 只輸出name和age,並且改變了key: 'Name': this.name, 'Age': this.age }; } }; JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}' 反序列化: 拿到一個JSON格式的字串,我們直接用JSON.parse()把它變成一個JavaScript物件: JSON.parse('[1,2,3,true]'); // [1, 2, 3, true] JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14} JSON.parse('true'); // true JSON.parse('123.45'); // 123.45 練習: 用瀏覽器訪問OpenWeatherMap的天氣API,檢視返回的JSON資料,然後返回城市、天氣預報等資訊: 'use strict' var url = 'https://api.openweathermap.org/data/2.5/forecast?q=Beijing,cn&appid=800f49846586c3ba6e7052cfc89af16c'; $.getJSON(url, function (data) { var info = { city: data.city.name, weather: data.list[0].weather[0].main, time: data.list[0].dt_txt }; console.log(JSON.stringify(info, null, ' ')); });