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 = /^1\d{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 = /^0\d{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);
