JavaScript-day06

最新推荐文章于 2022-09-30 16:27:29 发布

最爱谭先森

最新推荐文章于 2022-09-30 16:27:29 发布

阅读量166

点赞数 2

分类专栏： JavaScript基础教程文章标签： java js

本文链接：https://blog.csdn.net/qq_45065517/article/details/106803497

版权

JavaScript基础教程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

复习：

   1、数组遍历
       1) for循环
       2) while循环
       3) do-while循环
       *4) for-in增强for循环
           for(var key in arr){
               key就是数组arr的索引
               arr[key]就是数组arr中的每一个元素
           }

2、判断是否是数组
Array.isArray()

       var arr = [1,2,3];
       var obj = {name:'xpf'}
       Array.isArray(arr); // true
       Array.isArray(obj); // false

       instanceof() 引用数据类型
           判断某一个变量是否是一个构造函数的实例
       typeof() 基本数据类型

   3、数组API
       1) 添加元素、删除元素
           push   在数组的最后新增元素
           pop       将数组的最后一个元素取出来
           shift   将数组的第一个元素删除
           unshift 将元素新增到数组的最前面
       2) 排序方法
           sort()
           var arr = [3,2,1,12,21];
           比较器函数
               sort(function(a,b){
                   if(a>b){
                       return 1; // 从小到大
                   } else {
                       return -1; // 从大到小
                   }
               })
       3) 数组序列化
           将数组转换成字符串
           1. toString()
              没有参数
           2. join()
           3. JSON.stringify()
               JSON.stringify(arr)
       4) 数组截取方法
           1. concat()
               将两个数组拼接，返回合并后的数组
           2. slice()
               从一个数组中截取一个子数组，返回截取到的子数组
           3. splice()
               从使用改方法的数组中删除、新增
       5) 数组迭代方法
           forEach(function(item,index,arr){})
               遍历当前数组，没有返回值
                   item数组的每一项
                   index数组的索引
                   arr当前遍历的数组
           every()
               判断数组中所有的元素是否都符合给定的条件，如果有一个不满足，都返回false
           some()
               判断数组中是否有符合给定条件的元素，如果有一个满足，都返回true
           filter()
               筛选数组中满足给定条件的元素
           map()
               使用给定条件处理数组(映射)
       6) 类数组转换为数组
           arguments --> 迭代器
           1. [...arguments] // 改方法只对拥有迭代器的有效
           2. Array.from(arguments)
           3. Array.prototype.slice.call(arguments)

自己创建一个类数组对象的时候，一定要加迭代器
[Symbol.iterator].Array.prototype[Symbol.iterator]

学习
   1、正则表达式
       1) 含义
           当搜索文本中的数据时，可以使用搜索模式来描述搜索的内容
           也就是说，正则表达式会去查找字符串中符合某个模式的部分

           前端中的表单验证，即对输入框的内容做了限制
               手机号：15700..
               邮箱：zhangsan@163.com

       2) 正则表达式定义方式
           1. 构造函数模式
               var pattern = new RegExp('正则表达式','正则表达式修饰符');

var pattern = new RegExp('ab','img');
console.log(pattern); // /ab/gim

2. 正则表达式字面量
var pattern = /正表达式/正则表达式修饰符;

var pattern2 = /ab/img;
console.log(pattern2); // /ab/gim

           正则表达式修饰符
               i    ignoreCase    执行对大小写不敏感的匹配(忽略大小写)
               g     global        执行全局匹配(查找所有匹配，而不是在找到第一匹配到的字符之后停止匹配)
               m multiline     执行多行匹配

       3) 正则表达式原型属性
           RegExp.prototype.xxx
               RegExp.prototype.global    布尔值，表明这个正则表达式是否带有修饰符g
               RegExp.prototype.ignoreCase 布尔值，表明这个正则表达式是否带有修饰符i
               RegExp.prototype.multiline 布尔值，表明这个正则表达式是否带有修饰符m
               RegExp.prototype.source    正则表达式的字符串表示
               RegExp.prototype.flags      正则表达式修饰符的字符串表示

var pattern = /ab/img;

               console.log(pattern.global); // true
               console.log(pattern.ignoreCase); // true
               console.log(pattern.multiline); // true
               console.log(pattern.source); // 'ab'
               console.log(pattern.flags); // 'img'

var pattern = /ab/im;

               console.log(pattern.global); // false
               console.log(pattern.ignoreCase); // true
               console.log(pattern.multiline); // true

       4) 正则表达式原型方法
           RegExp.prototype.xxx
               1. RegExp.prototype.test()
                   用法：检测一个字符串是否匹配某个模式
                   参数：待检测的字符串
                   返回值：
                       如果被检测的字符串满足正则表达式的匹配模式，返回true，否则返回false
                   var pattern = /abc/img;
                   var str = 'hello world abc';
                   var result = pattern.test(str);
                   console.log(result); // true

                   var pattern = /abc/img;
                   var str = 'hello world ab c';
                   var result = pattern.test(str);
                   console.log(result); // false

会从hello world abc的第一个字母开始，一个一个检测是否有a，当遇到a的时候，去判断a的后面是否是b，如果是，再去判断b的后面是否是c，如果是，返回true

               2. RegExp.prototype.exec()
                   用法：检测字符串中的正则表达式的匹配 -> 从str中查找出满足正则表达式的字符串
                   参数：待检测的字符串
                   返回值：数组或者null
                       如果正则表达式中有'g'修饰符，这时，在pattern中会维护一个lastIndex属性，记录下一次开始的位置，当第二次执行exec方法的，会从lastIndex开始检索
                       如果正则表达式中没有'g'修饰符，这时，在pattern中不会维护一个lastIndex属性，当第二次执行exec方法的，会从开始位置检索

                       有g修饰符 --> 维护lastIndex
                           执行了一次exec方法
                               var pattern = /abc/img;
                               var str = 'ababc ac ab abcd we';

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 5 下一次检索开始的位置

                           执行了两次exec方法
                               var pattern = /abc/img;
                               var str = 'ababc ac ab abcd we';

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 5 下一次检索开始的位置

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 15 下一次检索开始的位置

                           执行了三次exec方法
                               var pattern = /abc/img;
                               var str = 'ababc ac ab abcd we';

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 5

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 15

console.log(pattern.exec(str)); // null
console.log(pattern.lastIndex); // 0

                       没有g修饰符 --> 不会维护lastIndex
                           var pattern = /abc/img;
                           var str = 'ababc ac ab abcd we';

console.log(pattern.exec(str));
console.log(pattern.lastIndex); // 0

                       错误代码：只打印了两次结果，并没有调用两次exec方法
                           var pattern = /abc/img;
                           var str = 'ababc ac ab abcd we';
                           var result = pattern.exec(str);

console.log(result);
console.log(pattern.lastIndex); // 5

                       此时，我需要匹配abcd或者abce，即找出字符串中满足两种条件的字符串
                           | 表示从左右两侧选择以重符合条件的字符串(或)
                           var pattern = /abc(d|e)/img;
                           var str = 'ababce ac ab abcd we';

console.log(pattern.exec(str)); // abce
console.log(pattern.exec(str)); // abcd

上述代码，找出两个满足条件的字符串时，需要调用两次exec方法

思考：如果说，需要找到字符串中所有满足条件的字符串，该如何实现？

答案：使用循环
while(){}

var pattern = /abc(d|e)/img;
var str = 'ababce ac ab abcd we';

                           console.log(pattern.exec(str));
                           console.log(pattern.exec(str));
                           console.log(pattern.exec(str)); // null
                           说明第三次调用exec方法时，该字符串中已经没有满足条件的字符串

                       -->   循环时，调用exec方法，直到exec() == null时，结束循环
                           var pattern = /abc(d|e)/img;
                           var str = 'ababce ac ab abcd we';

                           var temp = [];
                           while(result = pattern.exec(str)){
                           temp.push(result);
                           }

console.log(temp); // 二维数组

                       思考：如何将满足条件的字符串单独放到一个数组中 --> ['abcd','abce']
                           var pattern = /abc(d|e)/img;
                           var str = 'ababce ac ab abcd we';

                           var temp = [];
                           while(result = pattern.exec(str)){
                           temp.push(result[0]);
                           }

console.log(temp); // ['abcd','abce']

                       match()   --> 字符串方法
                           用法：可在字符串内检索指定的值，找到一个或多个正则表达式的匹配
                           var pattern = /abc(d|e)/img;
                           var str = 'ababce ac ab abcd we';

console.log(str.match(pattern)); // ['abcd','abce']

       5) 正则表达式
           1. 字符类
               .        匹配任何单个字符
               \d        匹配任意的数字，等价于[0-9]
                   /\d/img; ==> /[0-9]/img;
               [0-9]   匹配任意的数字

               \D        匹配任意的非数字，等价于[^0-9]
               [^0-9] 匹配任意的非数字
                   /\D/img; ==> /[^0-9]/img;

\w 匹配字符，等价于[a-zA-Z0-9_]
\W 匹配非字符，等价于[^a-zA-Z0-9_]

               ^       匹配开始的字符
                   ^[0-9] 匹配以数字作为开始
               $       匹配结束的字符
                   [0-9]$   匹配以数字作为结束

\s 匹配空白符，tab、space、return...
\S 匹配非空白字符

                   案例一：
                       匹配['123']
                           var str = 'abc123.abc.d1234';
                           //var pattern = /\d\d\d/img;
                           var pattern = /[0-9][0-9][0-9]/img;

console.log(str.match(pattern)); // ['123','123']

                       匹配['123.']
                           错误代码：
                               var str = 'abc123.abc.d1234';
                               var pattern = /\d\d\d./img;

console.log(str.match(pattern)); // ['123.','1234']
注意：此处的.并表示. 而是表示匹配任意的单个字符

                           正确代码：
                               转义，使用\进行转义(. /)
                               var str = 'abc123.abc.d1234';
                               var pattern = /\d\d\d\./img;

console.log(str.match(pattern)); // ['123.']

                       匹配['123.','abc.']
                           var str = 'abc123.abc.d1234';
                           var pattern = /\w\w\w\./img;
                           //var pattern = /[a-zA-Z0-9_][a-zA-Z0-9_][a-zA-Z0-9_]\./img;

console.log(str.match(pattern)); // ['123.','abc.']

                   案例二：
                       var str = 'abcd\n1ac\nqwer\n2zxcv';
                       console.log(str);

                       \n表示换行
                           abcd
                           1ac
                           qwer
                           2zxcv

                       匹配以0-9开始的字符
                           多行匹配 m
                               var str = 'abcd\n1ac\nqwer\n2zxcv';
                               var pattern = /^[0-9]/img;

                               console.log(str.match(pattern)); // ['1','2']
                           取消多行匹配
                               var str = 'abcd\n1ac\nqwer\n2zxcv';
                               var pattern = /^[0-9]/ig;

console.log(str.match(pattern)); // null
只对第一行字符串进行了匹配

                       匹配以d或r结束的字符
                           正确代码
                               var str = 'abdc\n1ac\nqwer\n2zxcv';
                               var pattern = /(d|r)$/img;

console.log(str.match(pattern)); // ['r']

                           错误代码
                               var str = 'abdc\n1ac\nqwer\n2zxcv';
                               var pattern = /d|r$/img; // 解析成匹配d或者以r结束

console.log(str.match(pattern)); // ['d',r']

                   案例三：
                       判断一个手机号位数
                       11位以1开始
                           情况一：没加结束条件 $
                               var str = '15719344291';
                               var pattern = /^1\d{10}/img;

console.log(pattern.test(str)); // true

var str = '157193442912qwer';
var pattern = /^1\d{10}/img;

                               console.log(pattern.test(str)); // true
                               只要字符串满足了以1开始，后面为10个数字的条件之后，不管字符串后面接的什么内容，都会返回true
                           情况二：加了结束条件 $
                               var str = '15719344291';
                               var pattern = /^1\d{10}$/img;

console.log(pattern.test(str)); // true

var str = '157193442912';
var pattern = /^1\d{10}$/img;

console.log(pattern.test(str)); // false
只有当字符串满足以1开始，后面时10个数字的条件，才返回true，多一位少一位都不行

2. 分组
()代表分组，在正则表达式中用()包裹起来的内容代表了一个分组

               案例一：
                   var str1 = 'I come from anhui';
                   var str2 = 'I come from hubei';
                   var pattern = /I come from (jiangsu|anhui|beijing)/img;

console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // false

               案例二：
                   时间格式 2020-04-26
                       var str = '2020-04-26';
                       var pattern = /(\d{4})-(\d{2})-(\d{2})/img;

console.log(pattern.test(str)); // true

var str = '2020/04/26';
var pattern = /(\d{4})-(\d{2})-(\d{2})/img;

console.log(pattern.test(str)); // false

最爱谭先森

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-day06

复习： 1、数组遍历 1) for循环 2) while循环 3) do-while循环 *4) for-in增强for循环 for(var key in arr){ key就是数组arr的索引 arr[key]就是数组arr中的每一个元素 } 2、判断是否是数组 Array.isArray()...
复制链接

扫一扫

专栏目录