js温故而知新5——学习廖雪峰的js教程

mayaohua 发布于2019-08-21 11:36 / 3230人阅读

摘要：表示行的结束，表示必须以数字结束。用表示的就是要提取的分组。方法在匹配成功后，会返回一个，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。贪婪匹配需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。

对象

typeof 123; // "number"
typeof NaN; // "number"
typeof "str"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof Math.abs; // "function"
typeof null; // "object"
typeof []; // "object"
typeof {}; // "object"

1.包装对象

除了这些类型外，JavaScript还提供了包装对象。

number、boolean和string都有包装对象。没错，在JavaScript中，字符串也区分string类型和它的包装类型。包装对象用new创建：

var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String("str"); // "str",生成了新的包装类型

虽然包装对象看上去和原来的值一模一样，显示出来也是一模一样，但他们的类型已经变为object了！所以，包装对象和原始值用===比较会返回false：

typeof new Number(123); // "object"
new Number(123) === 123; // false

typeof new Boolean(true); // "object"
new Boolean(true) === true; // false

typeof new String("str"); // "object"
new String("str") === "str"; // false

所以闲的蛋疼也不要使用包装对象！尤其是针对string类型！！！

如果我们在使用Number、Boolean和String时，没有写new会发生什么情况？

此时，Number()、Boolean和String()被当做普通函数，把任何类型的数据转换为number、boolean和string类型（注意不是其包装类型）：

var n = Number("123"); // 123，相当于parseInt()或parseFloat()
typeof n; // "number"

var b = Boolean("true"); // true
typeof b; // "boolean"

var b2 = Boolean("false"); // true! "false"字符串转换结果为true！因为它是非空字符串！
var b3 = Boolean(""); // false

var s = String(123.45); // "123.45"
typeof s; // "string"

是不是感觉头大了？这就是JavaScript特有的催眠魅力！

总结一下，有这么几条规则需要遵守

不要使用new Number()、new Boolean()、new String()创建包装对象；

用parseInt()或parseFloat()来转换任意类型到number；

用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；

typeof操作符可以判断出number、boolean、string、function和undefined；

判断Array要使用Array.isArray(arr)；

判断null请使用myVar === null；

判断某个全局变量是否存在用typeof window.myVar === "undefined"；

函数内部判断某个变量是否存在用typeof myVar === "undefined"。

最后有细心的同学指出，任何对象都有toString()方法吗？null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。

更细心的同学指出，number对象调用toString()报SyntaxError：

123.toString(); // SyntaxError

遇到这种情况，要特殊处理一下：

123..toString(); // "123", 注意是两个点！
(123).toString(); // "123"

2. Date

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

如果要创建一个指定日期和时间的Date对象，可以用：

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

3.RegExp

在正则表达式中，如果直接给出字符，就是精确匹配。用d可以匹配一个数字，w可以匹配一个字母或数字，所以：

"00d"可以匹配"007"，但无法匹配"00A"；

"ffffd"可以匹配"010"；

"ww"可以匹配"js"；

.可以匹配任意字符，所以：

"js."可以匹配"jsp"、"jss"、"js!"等等。

要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符：

来看一个复杂的例子：d{3}s+d{3,8}。

我们来从左到右解读一下：

d{3}表示匹配3个数字，例如"010"；

s可以匹配一个空格（也包括Tab等空白符），所以s+表示至少有一个空格，例如匹配" "，"		"等；

d{3,8}表示3-8个数字，例如"1234567"。

综合起来，上面的正则表达式可以匹配以任意个空格隔开的带区号的电话号码。

如果要匹配"010-12345"这样的号码呢？由于"-"是特殊字符，在正则表达式中，要用""转义，所以，上面的正则是d{3}-d{3,8}。

但是，仍然无法匹配"010 - 12345"，因为带有空格。所以我们需要更复杂的匹配方式.

要做更精确地匹配，可以用[]表示范围，比如：

[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线；

[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如"a100"，"0_Z"，"js2015"等等；

[a-zA-Z\_$][0-9a-zA-Z\_$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；

[a-zA-Z\_$][0-9a-zA-Z\_$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。

A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配"JavaScript"、"Javascript"、"javaScript"或者"javascript"。

^表示行的开头，^d表示必须以数字开头。

$表示行的结束，d$表示必须以数字结束。

你可能注意到了，js也可以匹配"jsp"，但是加上^js$就变成了整行匹配，就只能匹配"js"了.

4.创建一个正则表达式

第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp("正则表达式")创建一个RegExp对象。

两种写法是一样的：

var re1 = /ABC-001/;
var re2 = new RegExp("ABC-001");

re1; // /ABC-001/
re2; // /ABC-001/

注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个实际上是一个。

先看看如何判断正则表达式是否匹配：

var re = /^d{3}-d{3,8}$/;
re.test("010-12345"); // true
re.test("010-1234x"); // false
re.test("010 12345"); // false

RegExp对象的test()方法用于测试给定的字符串是否符合条件。

5.切分字符串

用正则表达式切分字符串比用固定的字符更灵活，请看正常的切分代码：

"a b   c".split(" "); // ["a", "b", "", "", "c"]

嗯，无法识别连续的空格，用正则表达式试试：

"a b   c".split(/s+/); // ["a", "b", "c"]

无论多少个空格都可以正常分割。加入,试试：

"a,b, c  d".split(/[s,]+/); // ["a", "b", "c", "d"]

再加入;试试：

"a,b;; c  d".split(/[s,;]+/); // ["a", "b", "c", "d"]

如果用户输入了一组标签，下次记得用正则表达式来把不规范的输入转化成正确的数组。

6.分组 exec()

除了简单地判断是否匹配之外，正则表达式还有提取子串的强大功能。用()表示的就是要提取的分组（Group）。比如：

^(d{3})-(d{3,8})$分别定义了两个组，可以直接从匹配的字符串中提取出区号和本地号码：

var re = /^(d{3})-(d{3,8})$/;
re.exec("010-12345"); // ["010-12345", "010", "12345"]
re.exec("010 12345"); // null

如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来。

exec()方法在匹配成功后，会返回一个Array，第一个元素是正则表达式匹配到的整个字符串，后面的字符串表示匹配成功的子串。

exec()方法在匹配失败时返回null。

7.贪婪匹配

需要特别指出的是，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符。举例如下，匹配出数字后面的0：

var re = /^(d+)(0*)$/;
re.exec("102300"); // ["102300", "102300", ""]

由于d+采用贪婪匹配，直接把后面的0全部匹配了，结果0*只能匹配空字符串了。

必须让d+采用非贪婪匹配（也就是尽可能少匹配），才能把后面的0匹配出来，加个?就可以让d+采用非贪婪匹配：

var re = /^(d+?)(0*)$/;
re.exec("102300"); // ["102300", "1023", "00"]

JavaScript的正则表达式还有几个特殊的标志，最常用的是g，表示全局匹配，

正则表达式还可以指定i标志，表示忽略大小写，m标志，表示执行多行匹配。

常用正则

（引用）常用正则表达式大全

GPU云服务器云服务器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86922.html

js温故而知新10(操作表单)——学习廖雪峰的js教程

摘要：用操作表单和操作是类似的，因为表单本身也是树。因此，第二种方式是响应本身的事件，在提交时作修改可以在此修改的继续下一步注意要来告诉浏览器继续提交，如果，浏览器将不会继续提交，这种情况通常对应用户输入有误，提示用户错误信息后终止提交。用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。 HTML表单的输入控件主要有以下几种：文本框，对应的，用于输入文本； ...

simon_chen 2019-08-20 15:08 评论0 收藏0
js温故而知新——学习廖雪峰的js教程

摘要：在设计时，有两种比较运算符第一种是比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果第二种是比较，它不会自动转换数据类型，如果数据类型不一致，返回，如果一致，再比较。数据类型和变量数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据...

taohonghui 2019-08-21 11:31 评论0 收藏0
js温故而知新8(浏览器)——学习廖雪峰的js教程

摘要：对象不但充当全局作用域，而且表示浏览器窗口。对象有和属性，可以获取浏览器窗口的内部宽度和高度。对象表示当前页面的信息。由于在浏览器中以形式表示为树形结构，对象就是整个树的根节点。这个行为由浏览器实现，主流浏览器均支持选项，从开始支持。浏览器目前主流的浏览器： IE 6~11：从IE10开始支持ES6标准； Chrome：基于Webkit内核，内置了非常强悍的JavaScript引...

charles_paul 2019-08-20 15:07 评论0 收藏0
js温故而知新4——学习廖雪峰的js教程

摘要：你可能认为调用，和结果应该是，，，但实际结果是全部都是原因就在于返回的函数引用了变量，但它并非立刻执行。返回闭包时牢记的一点就是返回函数不要引用任何循环变量，或者后续会发生变化的变量。真的是看着很晕那闭包另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 评论0 收藏0
js温故而知新2——学习廖雪峰的js教程

摘要：让我们拆开写小明正常结果单独调用函数怎么返回了请注意，我们已经进入到了的一个大坑里。如果单独调用函数，比如，此时，该函数的指向全局对象，也就是。函数 1. arguments JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array： function fo...

Caizhenhao 2019-08-21 11:34 评论0 收藏0
js温故而知新3——学习廖雪峰的js教程

摘要：例如，在一个中，删掉偶数，只保留奇数，可以这么写把一个中的空字符串删掉，可以这么写注意以下的版本没有方法可见用这个高阶函数，关键在于正确实现一个筛选函数。回调函数接收的回调函数，其实可以有多个参数。 1.map 由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果： function po...

zhaot 2019-08-21 11:34 评论0 收藏0