ES5 对数组方法的扩展 以及 正则表达式

ES5 对数组的扩展

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

forEach 与 map

语法:

1. 数组.forEach(function ( v, i ) { })
2. 数组.map(function ( v, i ) {})

1.   forEach 就是在模拟 jq 中 each

例: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 来遍历元素, 不能直跳出

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 );

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 方法

该方法是对数组元素进行过滤

正则表达式

regular expression

正则表达式是一个包含 正常字符 与 元字符 的用于 匹配的 字符串 对象.

若是建立正则表达式对象

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( ""|/./, '' )