008 Javascript(093 - 100)

[A] 正则表达式

　　　　1. 正则表达式(super string, regular expression):

　　　　　　　　【功能】用于检查用户输入或者准备提交的数据是否符合要求

2. 正则表达式的创建：

　　　　　　　　a. 通过new方法声明正则表达式

　　　　　　　　　　　var a = new RegExp("hellow", "ig");

　　　　　第一个参数：正则表达式，为一个字符串

　　　　　第二个参数：修饰符，修饰符没有顺序。

　　　　　　　　b. 省略new方法声明正则表达式

　　　　　　　　　　　var b = RegExp("hellow", "ig");

　　　　　　　　　　　　　　第一个参数：正则表达式，为一个字符串

　　　　　　　　　　　　　　第二个参数：修饰符，修饰符没有顺序。

　　　　　　　　c. 通过常量进行赋值

　　　　　　　　　　　　　　var c = /hellow/ig

　　　　3. 正则表达式只有两个方法：

　　　　　　　　 a. test

　　　　　　　　　　　　格式：正则.test(字符串)

　　　　　　　　　　　　功能：在字符串中匹配这个正则是否存在

　　　　　　　　　　　　返回值：如果匹配成功返回true，匹配失败返回false。

　　　　　　　　b. exec

　　　　　　　　　　　　格式：正则.exec(字符串)

　　　　　　　　　　　　功能：在字符串中匹配这个正则是否存在

　　　　　　　　　　　　返回值：返回一个数组，数组中包含第一个匹配上的字符串的信息，匹配成功返回该数组，匹配失败，返回null。

　　　　4. 正则也可以使用字符串的一些方法：

　　　　　　　　a. match()

　　　　　　　　　　　　格式：字符串.match(正则)

　　　　　　　　　　　　功能：在字符串中匹配是否有这个正则

　　　　　　　　　　　　返回值：匹配成功返回装有所有匹配到的字符串的数组，匹配失败，返回null。

　　　　　　　　b. replace()

　　　　　　　　　　　　格式：字符串.replace(旧字符串/正则，新字符串)

　　　　　　　　　　　　功能：在字符串中用新字符串将旧的字符串或者符合正则的旧字符串替换

　　　　　　　　　　　　返回值：替换成功的字符串。

　　　　　　　　c. split()

　　　　　　　　　　　　格式：字符串.split(分隔符/正则)

　　　　　　　　　　　　功能：用指定的分隔符或者正则去分割字符串

　　　　　　　　　　　　返回值：分割后的子串组成的数组。

　　　　　　　　d. search()

　　　　　　　　　　　　格式：字符串.search(字符/正则)

　　　　　　　　　　　　功能：查找符合条件的字符或者正则第一个出现的下标

　　　　　　　　　　　　返回值：如果找到返回下标，没找到返回-1.

　　　　5. 元字符

　　　　　　　　　　在正则表达式中有特殊含义的字符

　　　　　　单个数字和字符

　　　　　　　　　　a. · 匹配单个的任意字符

　　　　　　　　　　b. [字符] 匹配所选字符之内的单个字符

　　　　　　　　　　　　　　　　如：[a-z] 表示匹配任意一个字符

　　　　　　　[0-9] 表示匹配任意一个数字

　　　　　　　[a,2,/] 表示匹配"a","2","/"其中的一个字符

　　　　　　　　　　c. [^字符] 匹配除括号内字符的任意一个字符

　　　　如：[^a-z] 表示匹配任意一个非字母字符

　　　　　　　　　　d. \w 匹配单个的字母，数字，下划线，等价于[a-zA-Z0-9_]

　　　　　　　　　　e. \W 匹配除字母，数字，下划线的任意一个字符

　　　　　　　　　　f. \d 匹配单个数字，等价于[0-9]

　　　　　　　　　　g. \D 匹配单个非数字，等价于[^0-9]

　　　　6. 重复字符这里的x，y均表示任意字符

　　　　　　　　　　x？　　匹配0个或者1个x字符

　　　　　　　　　　x+ 　　匹配至少一个x字符

　　　　　　　　　　x* 　　匹配0个或者多个x字符

　　　　　　　　　　x{n} 　　最多匹配n个x字符

　　　　　　　　　　x{m,} 　　至少匹配m个x字符

　　　　　　　　　　x{m,n} 　匹配至少m个，最多n个x字符

　　　　　　　　　　x|y 　　匹配x字符或者y字符，二选一

　　　　7. 空白字符

　　　　　　　　　　\s 匹配任意单个的空白字符，如空格，tab，换行等

　　　　　　　　　　 \S 匹配任意非单个空白字符

　　　　8. 锚字符这里的x表示任意字符

　　　　　　　　　　^x 行首匹配，必须是以x字符开头的字符串

　　　　　　　　　　x$ 行位匹配，必须是以x字符结尾的字符串

　　　　9. 修饰符

　　　　　　　　　　i 忽略大小写

　　　　　　　　　　g 全局匹配

　　　　　　　　　　m 换行匹配，即如果字符串中有换行，则重新计算行首

　　　　10. 转义字符

　　　　　　　　　　　　　　将有特殊含义的字符转换为其本来的字符

　　　　　　　　　　\+字符如：\. \*

[B] localStorage本地存储技术

　　　　即将页面产生的数据可以以本地存储的方式保存在页面，可以供页面调用

1. 本地存储：

localStorage

a. 永久存储

b. 最大存储5M

c. 只能存储string

a. 可以设置过期时间

b. 最大存储4KB

c. 每个域名下面最多存储50条数据

sessionStorage(会话，结合后台使用)

2. localStorage对象的方法

a. setItem(name, value) 添加本地存储的对象和其对应的值

还有两种赋值方法添加本地存储的对象：

localStorage.name = value

localStorage[name] = value

b. getItem(name) 获取本地存储的对象和其对应的值

c. removeItem(name) 删除本地存储的对象和其对应的值

[C] this指向强制更改

每个函数中都有一个内置的变量this，this指向当前函数的主人，函数的主人根据上下文去判断。

【注】this指向函数的主人

常见的this的主人判断

1. 全局函数中的this指向window

           function show(){

               alert(this);   

           }

           show();      // 调用时返回window

2. 类中的方法里面的this指向类本身

           var person = {

                userName: "Jack",

                age: 18,

                show: function(){

                     alert(this);    

                }

            }

            person.show();      // 调用时返回person类

3. 在事件对象的函数内部的this指向按钮本身

            window.onload = function(){

                 var oBtn = document.getElementById("btn1");

                 oBtn.onclick = function(){

                     alert(this.innerHTML)   // 返回值为按钮上的文本

                 }

            }

强制改变this指向：

                    示例代码：

                            function show(x, y){

                                alert(`x等于:${x}, y等于:${y}`)

                                alert(this);

                            }

                            show(2,6);

1. call方法

格式：函数名.call();

参数：

　　第一个参数：传入该函数this指向的对象，传入什么就指向什么

　　第二个参数：将原函数的参数往后推延一位

示例代码：

　　show.call("name", 2,6);

　　将show函数内部的this指向强制修改为指向"name"字符串

2. apply方法

格式：函数名.apply();

参数：

　　第一个参数：传入该函数this指向的对象，传入什么就指向什么

　　第二个参数：将原函数的参数组成的数组，第二个参数必须是数组

示例代码：

　　show.apply("name", [2,6]);

　　将show函数内部的this指向强制修改为指向"name"字符串

3. bind方法预设this指向

格式：函数名.bind();

参数：

　　第一个参数：传入该函数this指向的对象，传入什么就指向什么

　　第二个参数：将原函数的参数往后推延一位

　　　返回值：返回值仍然为一个函数，只不过其函数内的this指向已经被改变。

示例代码：

　　show.apply("name", [2,6]);

　　　　将show函数内部的this指向强制修改为指向"name"字符串

【注】上述前两种方法会在强制改变this指向的时候会将函数执行一遍，有正常返回值，并且改变指向只在当前这个调用下有效

当再次调用该函数时，又可重新改变函数中的this指向，若没改变this指向，则其指向为默认值

第三种方法，只是将改变了this指向的这个函数返回，并不会执行函数，相当于this改变后的函数的实例化

bind方法使用技巧：

　　Math.max(10,20,30,40,50) => 返回值为50

　　Math.min(10,20,30,40,50) => 返回值为10

　　这两个函数的参数是位置数量的单个数字，若想传入一个已知的数组，可以使用apply实现

　　Math.max(null,[10,20,30,40,50]) => 返回值为50

　　Math.min(null,[10,20,30,40,50]) => 返回值为10

　　这里，this我们不需要使用，故指向改为null

[D] let 和 const 关键字

var, let 和 const 关键字

1. 局部作用域：

var 关键字声明变量，将变量或者形参所在的函数的大括号作为作用域来处理

2. 块级作用域：

let 关键字用来声明变量, 只要遇到大括号就形成作用域

即在if，while，for，switch等中声明的变量只在各自的大括号里面有效

而且在每个循环中都会声明一个变量，而且互不相同，互不干扰(虽然名字一样)

3. const作用域：

const 关键字声明关键字，它是声明常量

其生成的常量是无法更改的，强行更改会报错

[E] 箭头函数

1. 箭头函数：ECMA6新增的一个新潮的函数写法

【注】箭头函数的使用可以适当省略函数中的function和return关键字，但是可读性差，不推荐大量使用

2. 箭头函数的基本写法

　　　　　　箭头函数：

　　　　var add = x => x + 10;

　　　常规函数：

　　　　 function add(x){

　　　　　　return x + 10;

　　　　}

　　　上述两种方式定义的函数除了写法不一样，意义完全一样。

3. 各种形式的箭头函数：

　　a. 无参数，无返回值的函数

　　var show = () => {

　　　　 alert("hello");

　　 }

　　等同于：

　　function show(){

　　　　alert("hello");

　　}

　　b. 有一个参数，无返回值

　　var xxx = num => {

　　　　 alert(x);

　　 }

　　等同于：

　　function xxx(num){

　　　　alert(num);

　　}

　　c. 有一个参数，有返回值

　　var add = x => {

　　　　代码块;

　　　　 return x + 10;

　　}

　　等同于：

　　function add(x){

　　　　代码块；

　　　　return x +10;

　　}

　　 d. 多个参数，有返回值

　　var show = (x, y) => {

　　　　alert(x + y);

　　}

　　等同于：

　　function show(x, y){

　　　　alert(x + y);

　　 }

4. 推荐使用的场景：

　　　　箭头函数与数组结合会体现一定的优越性

　　var arr = [3,6,5,7,9,8,0,5];

　　1. var newArr = arr.map(item => item * 1.4);

　　2. var newArr = arr.filter(item => item > 4);

5. 箭头函数注意事项：

　　1. 箭头函数不能用new

　　2. 箭头函数如果返回值是一个对象，一定要加()

　　3. 箭头函数中的this，指向的是上一层函数的主人

posted @ 2020-06-09 19:02 CarreyB 阅读(119) 评论(0) 编辑收藏举报

刷新页面返回顶部

Carrrey

008 Javascript(093 - 100)

公告