JavaScript课程——Day09（数组的迭代方式、正则）

1、数组的迭代方式

迭代：循环、遍历

IE8及以下不支持

　　1.1、forEach

　　作用：没有返回值，代表for循环数组

// 数组.forEach(function (数组项, 数组下标, 数组本身) { });
// 作用：没有返回值，代表for循环数组
var arr = ['刘备', '关羽', '张飞'];
arr.forEach(function (item, index, array) {
    console.log(item, index, array);
});

　　1.2、map

　　作用：循环数组，返回每一项函数调用的结果组成的一个新数组

// 数组.map(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，返回  每一项函数调用的结果组成的一个新数组
var arr = [1, 43, 2, 6];
var n = arr.map(function (item, index, array) {
    return item * 2;
});
console.log(n); // [2, 86, 4, 12]

　　1.3、filter

　　作用：循环数组，如果当前函数调用的结果为真，则将这一项的item放在一个数组中返回

// 数组.filter(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，返回  如果当前函数调用的结果为真，则将这一项的item放在一个数组中返回
var arr = [1, 43, 2, 6, 12];
var n = arr.filter(function (item) {
    return item > 5 && item < 20;
});
console.log(n); // [6, 12]

var arr = [
    { name: '李文涛', num: 86 },
    { name: '张新昊', num: 76 },
    { name: '黄锦标', num: 99 },
    { name: '刘传超', num: 34 },
    { name: '孙传恒', num: 56 },
    { name: '杜旭超', num: 78 }
];
var n = arr.filter(function (item) {
    return item.num >= 60 && item.num < 80
})
console.log(n);

　　1.4、every

　　作用：循环数组，如果每一项都返回真，结果返回真

// 数组.every(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，如果每一项都返回真，结果返回真
var arr = [1, 43, 2, 6, 12];
var n = arr.every(function (item) {
    return item > 0;
});
console.log(n);

　　1.5、some

　　作用：循环数组，只要有一项返回真，结果返回真

// 数组.some(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，只要有一项返回真，结果返回真
var arr = [1, 43, 2, 6, 12];
var n = arr.some(function (item) {
    return item > 20;
});
console.log(n);

2、正则

实现定义好的一些特殊字符，及这些特定字符的组合，组成一个规则字符串，这个字符串就是正则。

正则是操作字符串的

RegExp：正则（regular）   表达式（expression）

　　2.1、写法

• 字面量创建：/检索字符/修饰符;
• 构造函数创建：new RegExp('检索字符','修饰符');

　　构造函数创建的优点：如果有变量，就只能用构造函数方式创建

// 1、字面量
// /检索字符/修饰符;
var re1 = /a/;
console.log(re1);
console.log(typeof re1); // 'object'


// 2、构造函数(如果有变量，就只能用构造函数方式创建)
// new RegExp('检索字符', '修饰符');
var re2 = new RegExp('a');
console.log(re2);

// ---------------------------
var a = 'abc';
var re3 = new RegExp(a);
console.log(re3);

　　2.2、修饰符

// 全局匹配
// 正则默认只匹配成功一次，就不再匹配
// 如果要全部匹配，则加修饰符g
var str = '今天上课，明天上课，后天上课';

var re1 = /上课/;
// var re2 = /上课/g;
var re2 = new RegExp('上课', 'g');
console.log(str.replace(re1, '休息'));
console.log(str.replace(re2, '休息'));

// ---------------------------------------
// 不区分大小写
// 正则默认区分大小写
// 如果要不区分大小写，加修饰符i
var str = 'abCd';
var re1 = /abcd/;
var re2 = /abcd/i;
console.log(re1.test(str)); // false
console.log(re2.test(str)); // true

　　2.3、正则的方法

　　　　2.3.1、test

　　　　作用：检索字符串中是否包含正则要检索的内容，有则返回true，没有则返回false

// 正则.test(字符串)
// 作用：检索字符串中是否包含正则要检索的内容，有则返回 true，没有则返回 false。

var str = 'hello world';
var re = /o/;
console.log(re.test(str)); // true

　　　　2.3.2、exec

　　　　作用：检索到正则表达式规定的内容会返回一个数组，检索不到则返回null

// 正则.exec(字符串);
// 作用：检索到正则表达式规定的内容会返回一个数组，检索不到则返回 null
// 同match

var str = 'hello world';
var re = /o/;
var re2 = /z/;

console.log(re.exec(str)); // ['o', ...]
console.log(re2.exec(str)); // null

　　　　2.3.3、match

　　　　作用：正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null，跟exec方法一样

// 字符串.match(正则);
// 正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null，跟exec方法一样

var str = 'haj123sdk54hask33dkhalsd879';
var re = /d+/g;
console.log(str.match(re));

　　　　2.3.4、split

　　　　作用：按正则匹配的内容拆分成数组

// 字符串.split(正则);
// 作用：按正则匹配的内容拆分成数组

// var str = 'hello web';
// var re = /s/;
// console.log(str.split(re)); // [hello, web]

// -----------------------
var str = '2022-11-12 12:13:10'; // [2022,11,12,12,13,10]
var re = /s|-|:/; // 以空格  或者以-  或者以:
console.log(str.split(re));

　　　　2.3.5、replace

　　　　作用：替换正则匹配的字符串，返回的结果是替换以后的字符串，不影响原字符串

　　　　replace的第二个参数可以使一个字符串，也可以是一个函数，函数的第一个参数就是正则匹配成功的整体，第二个参数就是正则的第一个小括号，以此类推

// 字符串.replace(正则, 新的字符串)
// 作用：替换正则匹配的字符串，返回的结果是替换以后的字符串，不影响原字符串
// replace的第二个参数可以是一个字符串，也可以是一个函数，函数的第一个参数就是正则匹配成功的整体，第二个参数就是正则的第一个小括号，以此类推

var str = '今天上课，明天上课，后天上课';
var re = /上课/g;
console.log(str.replace(re, '休息'));

// ---------------------------------------------------------------
// 手机号中间四位变星
var str = '13344445555'; // 133****9999
var re = /(d{3})(d{4})(d{4})/; // 小括号是分组

// 方式一
var s = str.replace(re, '$1****$3');
console.log(s); // 133****5555

// 方式二
var s = str.replace(re, function ($0, $1, $2, $3) {
    // console.log($0, $1, $2, $3);
    return $1 + '****' + $3;
})
console.log(s); // 133****5555

　　　　2.3.6、search

　　　　作用：返回正则匹配到的第一个字符串的位置，没有返回-1，类似于indexOf

// 字符串.search(正则);
// 返回正则匹配到的第一个字符串的位置，没有返回-1，类似于indexOf

var str = 'hello world';

var re = /o/;
console.log(str.search(re)); // 4
console.log(str.search(/z/)); // -1

　　2.4、其他

　　　　2.4.1、转义字符

d    匹配数字
D    匹配非数字
w    匹配字母和数字及_
W    匹配非字母和数字及_
s    匹配空白字符、空格、制表符和换行符
S    匹配非空白字符

　　　　2.4.2、量词

{4,7}  : 最少出现4次，最多出现7次
{4,} : 最少出现4次，最多不限制
{4} : 正好出现4次
{1,} : 最少出现一次。简写为：+
{0,}  : 至少出现0次。简写为：*
{0,1}  : 出现0次或者1次。简写为：?
+和*的区别：+代表必须有，*代表可以没有。

　　　　2.4.3、或者：|

var re = /s|-|:/; // 以空格  或者以-  或者以:

　　　　2.4.4、分组(小括号)

var re = /(d{3})(d{4})(d{4})/; // 小括号是分组

　　　　2.4.5、点.

// .   除换行以外的任意字符
var str = 'hello web';
var re = /h.*o/; // 0个或多个任意字符
console.log(re.test(str));

// 真正的点用 : .    
var str1 = 'abc.html';
var str2 = 'abcdhtml';
var re = /.html/;
console.log(re.test(str1));
console.log(re.test(str2));

　　　　2.4.6、正则中的中括号及排除

　　　　字符类：即一对中括号代表一个字符

// 中括号：字符类
var str = 'adc';
var re = /a[abcd]c/; // [abcd]即a b c d中的任何一个字符即可
console.log(re.test(str));

var re = /[a-zA-Z0-9]/; // 大小写字母及数字
var re = /[a-d]/; // a-d

// -------------------------


// 中括号中的取反
var str = 'azc';
var re = /a[^abcd]c/; // 排除a b c d，其它任何字符均可
console.log(re.test(str));

　　　　2.4.7、起始和结束

<input type="text">
<button>判断</button>

<script>
    // 起始和结束
    // ^  行首匹配
    // $  行尾匹配

    var input = document.querySelector('input');
    var btn = document.querySelector('button');

    btn.onclick = function () {
        var v = input.value; // 字符串

        // // 判断手机号
        var re = /^1d{10}$/;
        if (re.test(v)) {
            alert('是手机号')
        } else {
            alert('错误');
        }

        // 判断qq号
        var re = /^[1-9]d{5,11}$/;
        if (re.test(v)) {
            alert('是QQ号')
        } else {
            alert('错误');
        }

    }
</script>

　　　　2.4.8、去除字符串左右的空格

var str = '    吃饭，睡觉，打豆豆   ';

console.log('(' + str + ')');
console.log('(' + str.trim() + ')'); // IE8及以下不支持

// ----------------------------------
// 原理
var re = /^s+|s+$/g;
var s = str.replace(re, '');
console.log('(' + s + ')');

// -----------------------
// 封装函数
function trim(str) {
    var re = /^s+|s+$/g;
    return str.replace(re, '');
}
console.log('(' + trim(str) + ')');

　　　　2.4.9、正则相关实例

// 中文
var str = '小朋ewfsa友dsfdsf你dsf是fdssfd否dsafds有fds很fdsfdf多fds问号';
var re = /[u4e00-u9fa5]/g;
console.log(str.match(re).join(''));

// 邮箱
var str = '2342423@qq.com';
var str = 'feew_fds@163.com';
var re = /^w+@[a-z0-9]+(.[a-z]+){1,3}$/;

// 网址
var str = 'https://www.baidu.com';
var re = /^[a-zA-Z]+://[^s]+$/;

// 身份证
var re = /^[1-9]d{14}|[1-9]d{17}|[1-9]d{16}x$/;

// 座机
var re = /^0d{2,3}-[1-9]d{6,7}$/;

　　2.5、前瞻后顾

• 前瞻：exp1(?=exp2)          查找 exp2 前面的 exp1
• 负前瞻：exp1(?!exp2)       查找后面不是 exp2 的 exp1
• 后顾：(?<=exp2)exp1        查找 exp2 后面的 exp1
• 负后顾：(?<!exp2)exp1      查找前面不是 exp2 的 exp1

var str = '我就是我，来优就业学习，高薪就业，高效就业';

// 前瞻    : exp1(?=exp2)    查找 exp2 前面的 exp1
var re = /就(?=业)/g;     // 就业中的就
var s = str.replace(re, 'jiu');
console.log(s); // 我就是我，来优jiu业学习，高薪jiu业，高效jiu业

// 负前瞻   :  exp1(?!exp2)     查找后面不是 exp2 的 exp1
var re = /就(?!业)/;    // 不是就业中的就
var s = str.replace(re, 'jiu');
console.log(s); // 我jiu是我，来优就业学习，高薪就业，高效就业

var path1 = 'path/hello.html';
var path2 = 'path/nodata.html';
var path3 = 'path/index.html';

// 前瞻     : exp1(?=exp2)    查找 exp2 前面的 exp1
var re = /[a-z]+(?=.html)/;
console.log(path1.match(re)[0]);
console.log(path2.match(re)[0]);
console.log(path3.match(re)[0]);

// 后顾     : (?<=exp2)exp1     查找 exp2 后面的 exp1
var re = /(?<=path/)[a-z]+/;
console.log(path1.match(re)[0]);
console.log(path2.match(re)[0]);
console.log(path3.match(re)[0]);

var str = 'a,1,b,2,c,3'; // a=1,b=2,c=3

// 后顾     : (?<=exp2)exp1     查找 exp2 后面的 exp1
var re = /(?<=[a-z]),/g;
var s = str.replace(re, '=');
console.log(s);

// 负后顾     : (?<!exp2)exp1   查找前面不是 exp2 的 exp1
var re = /(?<!d),/g;
var s = str.replace(re, '=');
console.log(s);