ES5 對數組方法的擴展 以及 正則表達式

時間  2020-05-26
標籤 es5 數組 方法 擴展 以及 正則 表達式 欄目 正則表達式 简体版
原文   原文鏈接

ES5 對數組的擴展

  1. forEach
  2. map
  3. some
  4. every
  5. indexOf
  6. lastIndexOf

forEach 與 map

語法:javascript

  1. 數組.forEach(function ( v, i ) { })
  2. 數組.map(function ( v, i ) {})

1.   forEach 就是在模擬 jq 中 eachjava

例:var arr = [ 11, 22, 33 ];
        var res = arr.forEach(function ( v, i ) {
            // 遍歷數據
             console.log( i + ', ' + v );
            
//             console.log( this );//window
            
             return true;
        });
        console.log( res );//undefined

        // 該方法不返回數據, 旨在遍歷數組, 在回調函數中 不能使用 this
        // 必須使用參數 v,i 來遍歷元素, 不能直跳出git

2.   例:// map

        var arr = [ 11, 22, 33 ];
        var res = arr.map( function ( v, i ) {
             console.log( i + ', ' + v );
            console.log( this );//window
            return v * 2;
        });
        
        console.log( res );正則表達式

 

補充:var arr = [ 11, 22, 33 ];
//
//        // jq 中 each 方法
//
//        var res = $.each( arr, function ( i, v ) {
//            console.log( i + ', ' + v );//0, 11
//            console.log( this );//Number {[[PrimitiveValue]]: 11}
//            // 若是遍歷的是 對象數組, 而已直接使用 this 表示這個元素
//            // 可是若是是遍歷的基本類型的數組, 就必須使用參數
//            // return true / false; 是否結束循環
//            return false;
//        });
//
//        console.log( res ); // 返回遍歷的數組[11, 22, 33]
//
//
//        // jq 中 map 方法: 映射, 地圖
//        // 將一個具體的東西變成一個抽象的模型
//        // 將一個集合 按照某些規律 變成另外一個集合
//        // [ 1, 2, 3 ], 規律擴大兩倍, [ 2, 4, 6 ]
//        //
//
//        var arr = [ 11, 22, 33 ];
//        var res = $.map( arr, function ( v, i ) {
//             console.log( i + ', ' + v );   // 也能夠實現循環
////             console.log( this );//window
//            // 使用 map 映射, 必須使用 v 和 i, 不能使用 this
//            return v * 2;
//        });
//
//        console.log( res );

express

some 與 every

  1. some 方法表示一些的概念, 該方法調用, 傳入一個函數, 該函數用於對數組中元素的判斷, 只要判斷有 真的這個函數就返回真
  2. every 方法表示每個, 該方法調用, 傳入一個函數, 該函數用於對每個數組元素進行判斷, 必須保證全部的判斷爲真才返回真

例子: 判斷數組中的數字是否都是 偶數數組

 var arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]; // 在判斷的時候 some 獲得的就應該是真, every 獲得的就應該是假 var res1 = arr.some(function ( v, i ) { return v % 2 === 0; }); console.log( res1 ); var res2 = arr.every(function ( v, i ) { // return v % 2 == 0; // 判斷是否每個元素都是 大於等於 0 的 return v >= 0; }); console.log( res2 );

var arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]; // 在判斷的時候 some 獲得的就應該是真, every 獲得的就應該是假 var res1 = arr.some(function ( v, i ) { return v % 2 === 0; }); console.log( res1 ); var res2 = arr.every(function ( v, i ) { // return v % 2 == 0; // 判斷是否每個元素都是 大於等於 0 的 return v >= 0; }); console.log( res2 );

indexOf 和 lastIndexOf

從數組中開始查找某一個元素, 若是找到返回其索引, 不然返回 -1函數

 

filter 方法

該方法是對數組元素進行過濾ui

正則表達式

regular expressionthis

正則表達式是一個包含 正常字符 與 元字符 的用於 匹配的 字符串 對象.atom

若是建立正則表達式對象

1> 構造函數: new RegExp( 'map' ) 2> 字面量: /map/

用於檢查匹配的方法

正則表達式對象.test( 字符串 )

檢查該字符串中是否符合該正則表達式

  1. 驗證輸入的格式
  2. 檢查文字中是否包含須要的信息等

例子: 登陸的時候, 註冊的時候, 通常狀況要求輸入的密碼包含數字字符特殊字符, 長度超 6 位.

經常使用元字符

1> 基本元字符 . () [] | 2> 限定元字符 * + ? {n} {n,} {n,m} 3> 首尾元字符 ^ $ 4> 簡寫元字符 \d \D \s \S \w \W 5> 其餘( 不要求 ) 反向引用 \數字 匹配但不捕獲 (?:)1> 基本元字符 . () [] | 2> 限定元字符 * + ? {n} {n,} {n,m} 3> 首尾元字符 ^ $ 4> 簡寫元字符 \d \D \s \S \w \W 5> 其餘( 不要求 ) 反向引用 \數字 匹配但不捕獲 (?:)

元字符

. 除了換行意外的任意字符 [] 表示出如今 [] 中的任意一個字符 () 一方面是提升優先級, 另外一方面分組 | 表示得到, 具備最低優先級 * 緊跟在前面的字符出現 0 次 到 屢次, 默認儘量多的匹配 {0,} + 緊跟在前面的字符出現 1 次 到 屢次, 默認儘量多的匹配 {1,} ? 緊跟的前的字符出現 0 次或 1 次 {0,1} 取消貪婪模式(少用) {n} 緊跟的字符出現 n 次 {n,} 緊跟的字符出現 至少 n 次 {n,m} 緊跟的字符出現 n 到 m 次 ^ 放在正則一開始, 表示匹配必須以 xxx 開頭 放在 [] 中表示 否認, [^abc] $ 放在正則的結尾處, 表示必須以 xxx 結尾 在替換中使用 $數字 表示組引用 \d 數字 digit \D 非數字 \s 空白(空格, 換行, ...) space \S 非空白 [\S\s] 表示任意的一個字符 \w 文字: 數字, 字母, 下劃線 word \W 非文字 \數字 引用前面匹配到的組 <div>...</div> <([^>]+)>[^<]+</\1> (?:). 除了換行意外的任意字符 [] 表示出如今 [] 中的任意一個字符 () 一方面是提升優先級, 另外一方面分組 | 表示得到, 具備最低優先級 * 緊跟在前面的字符出現 0 次 到 屢次, 默認儘量多的匹配 {0,} + 緊跟在前面的字符出現 1 次 到 屢次, 默認儘量多的匹配 {1,} ? 緊跟的前的字符出現 0 次或 1 次 {0,1} 取消貪婪模式(少用) {n} 緊跟的字符出現 n 次 {n,} 緊跟的字符出現 至少 n 次 {n,m} 緊跟的字符出現 n 到 m 次 ^ 放在正則一開始, 表示匹配必須以 xxx 開頭 放在 [] 中表示 否認, [^abc] $ 放在正則的結尾處, 表示必須以 xxx 結尾 在替換中使用 $數字 表示組引用 \d 數字 digit \D 非數字 \s 空白(空格, 換行, ...) space \S 非空白 [\S\s] 表示任意的一個字符 \w 文字: 數字, 字母, 下劃線 word \W 非文字 \數字 引用前面匹配到的組 <div>...</div> <([^>]+)>[^<]+</\1> (?:)

經常使用方法

  1. 正則.test( str ) -> boolean
    • 用來表示這個字符串是否符合咱們的正則表達式
  2. 正則.exec( str ) -> Array
    • 利用正則表達式, 將字符串中符合正則表達式的子字符串截取出來, 存儲到數組中. 可是每次只取一個.
  3. 字符串.replace( 正則, 替換字符|函數 )
    • 將字符串中符合正則表達式的內容, 替換成指定的字符

案例

  1. 寫一個正則表達式, 匹配用戶輸入的數字. 要求是絕對的數字格式. 包含正數, 負數, 0, 小數等.
    • 因爲須要驗證用戶輸入, 那麼就必須嚴格匹配, 而不能是隻是包含字符串. 所以首尾使用 ^$
    • 0 是最簡單的. 正則就是 0
    • 正數
      • 數字使用 \d 表示, 可是有不知道有幾位數字, 所以 \d+
      • 正數要求有 + 號 或 沒有 + 號. 可是 + 又是元字符, 所以須要轉義: +?
      • 即 +?\d+
    • 負數
      • \d+
      • -
      • -\d+
    • 小數
      • 小數必定由小數點, 小數點前是有數字的, 小數點後也是有數字的
      • \d.\d
      • 可是先後有多少數字不肯定, 所以寫上 +
      • \d+.\d+
      • 負數小數
        • +?\d+.\d+
        • -\d+.\d+
    • 因此就有 ^(0|+?\d+|-\d+|+?\d+.\d+|-\d+.\d+)$
  2. 嚴禁的數字處理辦法( 瞭解 )
    • 不容許出現 0 開頭的數字 [1-9]\d*
    • 能夠爲負數或正數或沒有修飾符 ([+-]|)
    • 合併: ([\+\-]|)[1-9]\d*
    • 還須要有一個 0 所以 |0
    • 合併一下 ([\+\-]|)[1-9]\d*|0
    • 小數部分與正數部分是獨立的, 不管是正數, 負數仍是 0 均可以引導小數
      • 前面的部分.\d+
      • 能夠沒有小數, 所以 (|\.\d+)
    • 合併一下:
      • ([\+\-]|)([1-9]\d*|0|)(\.\d+|)
  3. 驗證用戶輸入的郵箱
    • 嚴格匹配, 就必須使用 ^ $
    • 才應該考慮郵箱的格式
      • 數字 @ qq.com
      • 文字 @ 126.com
      • 數字文字 @ yahoo.com.cn
      • ...
      • 郵箱有三個部分組成
        • 名字, 能夠是數字, 英文組成, 長度不限: [\w\d]+
        • 由正常的字符串表示: @
        • 域名: 能夠有數字, 字母 和 點構成: [\w\d\.]+
    • 整合一下: ^[\w\d]+@[\w\d\.]+$
  4. 嚴禁一點的郵箱( 瞭解 )
    • 用戶名: 數字, 字母 下劃線, 點, 連線. 理論上講師非控制字符與特殊字符和空格的任意字符
      • [\w\d\-_\.]+
    • 中間是 @
    • 後面必定是 xxx.xxx.xxx 的結構
      • 只要不是點的就能夠: [\w\d\-_]+
      • .xxx 將剛纔的東西前面加個點 \.[\w\d\-_]+
      • 幾層點不知道, 可是至少有一個
        • [\w\d\-_]+(\.[\w\d\-_]+)+
    • 合併
      • [\w\d\-_\.]+@[\w\d\-_]+(\.[\w\d\-_]+)+

捕獲字符串( 提取字符串 )

方法: exec

語法: 正則對象.exec( 字符串 ) -> 數組

數組中的第 0 項就是匹配到的結果

案例: 截取一個字符串中的全部數字

 var s = '今天的天氣很好, 有 30 幾度, 我都花了 10 塊錢喝水, 打車花了 103 塊錢, 買了一臺電腦花了 9999 元.' var r = /\d+/g; // 若是隻是匹配一個數據, 無所謂, 可是若是須要將所有的都提取出來, 那麼須要使用全局模式, /.../g // 如值獲取一個數據, 調用一次方法便可 var res = r.exec( s ); // 捕獲到的是一個數組, 數組的 第 0 項就是捕獲到的字符串, 其中 index 屬性表示在源字符串中的位置 // 若是須要得到其餘的數據, 須要再次調用方法 res = r.exec( s );var s = '今天的天氣很好, 有 30 幾度, 我都花了 10 塊錢喝水, 打車花了 103 塊錢, 買了一臺電腦花了 9999 元.' var r = /\d+/g; // 若是隻是匹配一個數據, 無所謂, 可是若是須要將所有的都提取出來, 那麼須要使用全局模式, /.../g // 如值獲取一個數據, 調用一次方法便可 var res = r.exec( s ); // 捕獲到的是一個數組, 數組的 第 0 項就是捕獲到的字符串, 其中 index 屬性表示在源字符串中的位置 // 若是須要得到其餘的數據, 須要再次調用方法 res = r.exec( s );

練習: 要求從 剛纔的字符串中取出全部的數字, 存儲到 數組中

 var r = /\d+/g; var m; m = r.exec( str ); // 30 arr.push( m[ 0 ] ); // 第二個元素就再補貨一次 m = r.exec( str ); // 10 arr.push( m[ 0 ] ); // 第三次 m = r.exec( str ); // 103 arr.push( m[ 0 ] ); m = r.exec( str ); // 9999 arr.push( m[ 0 ] ); while( m = r.exec( str ) ) { arr.push( m[ 0 ] ); }var r = /\d+/g; var m; m = r.exec( str ); // 30 arr.push( m[ 0 ] ); // 第二個元素就再補貨一次 m = r.exec( str ); // 10 arr.push( m[ 0 ] ); // 第三次 m = r.exec( str ); // 103 arr.push( m[ 0 ] ); m = r.exec( str ); // 9999 arr.push( m[ 0 ] ); while( m = r.exec( str ) ) { arr.push( m[ 0 ] ); }

替換的方法

語法: 字符串.replace( ""|/./, '' )

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程