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

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> 其他( 不要求 )
    反向引用     \数字
    匹配但不捕获    (?:)

元字符

.         除了换行意外的任意字符 

[]         表示出现在 [] 中的任意一个字符

()         一方面是提高优先级, 另一方面分组

|         表示获得, 具有最低优先级

*         紧跟在前面的字符出现 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 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( ""|/./, '' )