【JavaScript_2】语法、标准库、正则表达式

这篇具有很好参考价值的文章主要介绍了【JavaScript_2】语法、标准库、正则表达式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、强制转换
使用Number函数,可以将任意类型的值转化成数值。

Number('324') // 324
Number('324abc') // NaN

Number函数将字符串转为数值,要比parseInt函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

上面代码中,parseInt逐个解析字符,而Number函数整体转换字符串的类型。
另外,parseInt和Number函数都会自动过滤一个字符串前导和后缀的空格。
简单的规则是,Number方法的参数是对象时,将返回NaN,除非是包含单个数值的数组。
背后的逻辑,先调用valueof,再调用toString方法

String函数可以将任意类型的值转化成字符串

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

先调用toString,再调用valueof方法

Boolean()函数可以将任意类型的值转为布尔值。
以下五个值的转换结果为false,其他的值全部为true:undefined null 0(包含-0和+0)NaN ’ '(空字符串)

2、错误处理机制
JavaScript 原生提供Error构造函数,所有抛出的错误都是这个构造函数的实例。

Error存在6个派生对象:
SyntaxError对象是解析代码时发生的语法错误。
ReferenceError对象是引用一个不存在的变量时发生的错误。
RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。
TypeError对象是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。
URIError对象是 URI 相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
eval函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再使用了,只是为了保证与以前代码兼容,才继续保留。
以上这6种派生错误,连同原始的Error对象,都是构造函数。开发者可以使用它们,手动生成错误对象的实例。这些构造函数都接受一个参数,代表错误提示信息(message)。

3、console对象
console的常见用途有两个:
调试程序,显示网页代码运行时的错误信息。
提供了一个命令行接口,用来与网页代码互动。

打开开发者工具以后,顶端有多个面板:
Elements:查看网页的 HTML 源码和 CSS 代码。
Resources:查看网页加载的各种资源文件(比如代码文件、字体文件 CSS 文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
Network:查看网页的 HTTP 通信情况。
Sources:查看网页加载的脚本源码。
Timeline:查看各种网页行为随时间变化的情况。
Performance:查看网页的性能情况,比如 CPU 和内存消耗。
Console:用来运行 JavaScript 命令。

console对象提供的各种静态方法,用来与控制台窗口互动。
console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。
%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格式字符串
占位符输出
console.log(’ %s + %s = %s’, 1, 1, 2)// 1 + 1 = 2
console.log(‘%cThis text is styled!’,‘color:white;background:green;font-size=24px’)
warn方法和error方法也是在控制台输出信息,
它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错。

console.table方法可以将复合类数据转为表格显示。
console.count()方法用于计数,输出函数被调用了多少次。
console.dir(),console.dirxml()
dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
rxml方法主要用于以目录树的形式,显示 DOM 节点。
console.assert方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。这样就相当于提示用户,内部状态不正确。

console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立

console.time(),console.timeEnd()这两个方法用于计时,可以算出一个操作所花费的准确时间。

4、控制台命令行API
$_属性返回上一个表达式的值。
控制台保存了最近5个在 Elements 面板选中的 DOM 元素,$0代表倒数第一个(最近一个),$1代表倒数第二个,以此类推直到$4。
$(selector)返回第一个匹配的元素,等同于document.querySelector()
$$(selector)返回选中的 DOM 对象,等同于document.querySelectorAll。
x ( p a t h ) 方法返回一个数组,包含匹配特定 X P a t h 表达式的所有 D O M 元素。 x(path)方法返回一个数组,包含匹配特定 XPath 表达式的所有 DOM 元素。 x(path)方法返回一个数组,包含匹配特定XPath表达式的所有DOM元素。x(“//p[a]”)
inspect(object)方法打开相关面板,并选中相应的元素,显示它的细节。
getEventListeners(object)方法返回一个对象,该对象的成员为object登记了回调函数的各种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数。
keys(object)方法返回一个数组,包含object的所有键名。
values(object)方法返回一个数组,包含object的所有键值。
monitorEvents(object[, events])方法监听特定对象上发生的特定事件。事件发生时,会返回一个Event对象,包含该事件的相关信息。unmonitorEvents方法用于停止监听。
clear():清除控制台的历史。
copy(object):复制特定 DOM 元素到剪贴板。
dir(object):显示特定对象的所有属性,是console.dir方法的别名。
dirxml(object):显示特定对象的 XML 形式,是console.dirxml方法的别名。

5、debugger语句
debugger语句主要用于除错,作用是设置断点。
Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。

for(var i = 0; i < 5; i++){
  console.log(i);
  if (i === 2) debugger;
}

6、标准库
Object对象
instanceof运算符用来验证,一个对象是否为指定的构造函数的实例。obj instanceof Object返回true,就表示obj对象是Object的实例。

属性描述对象:属性描述对象的各个属性称为“元属性”,因为它们可以看作是控制属性的属性。
Array对象:Array是 JavaScript 的原生对象,同时也是一个构造函数,可以用它生成新的数组。
包装对象:所谓“包装对象”,指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成(包装成)对象。
Boolean对象、Number对象、String对象
Math对象:静态属性、静态方法
Date对象:Date对象是 JavaScript 原生的时间库。有一些静态方法可以返回时间。
RegExp对象:RegExp对象提供正则表达式的功能。

7、正则表达式
正则表达式(regular expression)是一种表达文本模式(即字符串结构)的方法,常常用来按照“给定模式”匹配文本。(给出一个模式,匹配内容是否属于这个模式)

新建正则表达式有两种方法。一种是使用字面量,以斜杠表示开始和结束。
var regex = /xyz/; var regex = /xyz/gim; gim-修饰符
另一种是使用RegExp构造函数。
var regex = new RegExp(‘xyz’);
RegExp.prototype.ignoreCase:返回一个布尔值,表示是否设置了i修饰符。
RegExp.prototype.global:返回一个布尔值,表示是否设置了g修饰符。
RegExp.prototype.multiline:返回一个布尔值,表示是否设置了m修饰符。
RegExp.prototype.flags:返回一个字符串,包含了已经设置的所有修饰符,按字母排序。
RegExp.prototype.lastIndex:返回一个整数,表示下一次开始搜索的位置。该属性可读写,但是只在进行连续搜索时有意义,详细介绍请看后文。
RegExp.prototype.source:返回正则表达式的字符串形式(不包括反斜杠),该属性只读。
RegExp.prototype.test()正则实例对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串。如果正则表达式带有g修饰符,则每一次test方法都从上一次结束的位置开始向后匹配。
RegExp.prototype.exec() 正则实例对象的exec()方法,用来返回匹配结果。如果发现匹配,就返回一个数组,成员是匹配成功的子字符串,否则返回null。
var s = 'x_x’;
var r = /
(x)/;
r.exec(s) // [“_x”, “x”]
exec()方法的返回数组还包含以下两个属性:
input:整个原字符串。
index:模式匹配成功的开始位置(从0开始计数)。

字符串的实例方法之中,有4种与正则表达式有关。
String.prototype.match():返回一个数组,成员是所有匹配的子字符串。
String.prototype.search():按照给定的正则表达式进行搜索,返回一个整数,表示匹配开始的位置。
String.prototype.replace():按照给定的正则表达式进行替换,返回替换后的字符串。
String.prototype.split():按照给定规则进行字符串分割,返回一个数组,包含分割后的各个成员。

replace方法的第二个参数可以使用美元符号$,用来指代所替换的内容。
$&:匹配的子字符串。
$`:匹配结果前面的文本。
$':匹配结果后面的文本。
$n:匹配成功的第n组内容,n是从1开始的自然数。
$ :指代美元符号 :指代美元符号 :指代美元符号

元字符匹配:
点字符(.)匹配除回车(\r)、换行(\n) 、行分隔符(\u2028)和段分隔符(\u2029)以外的所有字符。注意,对于码点大于0xFFFF字符,点字符不能正确匹配,会认为这是两个字符。
/c.t/
上面代码中,c.t匹配c和t之间包含任意一个字符的情况。

位置字符用来提示字符所处的位置,主要有两个字符。
^ 表示字符串的开始位置
$ 表示字符串的结束位置

// test必须出现在开始位置
/^test/.test('test123') // true

// test必须出现在结束位置
/test$/.test('new test') // true

// 从开始位置到结束位置只有test
/^test$/.test('test') // true
/^test$/.test('test test') // false

选择符(|):竖线符号(|)在正则表达式中表示“或关系”(OR)
正则表达式对一些不能打印的特殊字符,也提供了表达方法,具体使用的时候进行了解。

字符类(class)表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内,比如[xyz] 表示x、y、z之中任选一个匹配。
(1)脱字符():如果方括号内的第一个字符是[],则表示除了字符类之中的字符,其他字符都可以匹配。
(2)连字符(-):某些情况下,对于连续序列的字符,连字符(-)用来提供简写形式,表示字符的连续范围。比如,[abc]可以写成[a-c],[0123456789]可以写成[0-9],同理[A-Z]表示26个大写字母。
预定义模式:预定义模式指的是某些常见模式的简写方式。具体使用时了解。
重复类:模式的精确匹配次数,使用大括号({})表示。{n}表示恰好重复n次,{n,}表示至少重复n次,{n,m}表示重复不少于n次,不多于m次。

量词符:量词符用来设定某个模式出现的次数。
? 问号表示某个模式出现0次或1次,等同于{0, 1}

  • 星号表示某个模式出现0次或多次,等同于{0,}
  • 加号表示某个模式出现1次或多次,等同于{1,}。

贪婪模式:默认情况下都是最大可能匹配,即匹配到下一个字符不满足匹配规则为止。这被称为贪婪模式。
组匹配:正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容。
非捕获组: (?:x)称为非捕获组(Non-capturing group),表示不返回该组匹配的内容,即匹配的结果中不计入这个括号。
先行断言: x(?=y)称为先行断言(Positive look-ahead),x只有在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟着百分号的数字,可以写成/\d+(?=%)/。
先行否定断: x(?!y)称为先行否定断言(Negative look-ahead),x只有不在y前面才匹配,y不会被计入返回结果。比如,要匹配后面跟的不是百分号的数字,就要写成/\d+(?!%)/。

8、JSON格式
JSON 对值的类型和格式有严格的规定:
复合类型的值只能是数组或对象,不能是函数、正则表达式对象、日期对象。
原始类型的值只有四种:字符串、数值(必须以十进制表示)、布尔值和null(不能使用NaN, Infinity, -Infinity和undefined)。
字符串必须使用双引号表示,不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面,不能加逗号。
方法:JSON.stringify()方法用于将一个值转为 JSON 字符串。
JSON.stringify()方法还可以接受一个数组,作为第二个参数,指定参数对象的哪些属性需要转成字符串。

var obj = {
  'prop1': 'value1',
  'prop2': 'value2',
  'prop3': 'value3'
};
var selectedProperties = ['prop1', 'prop2'];
JSON.stringify(obj, selectedProperties)
// "{"prop1":"value1","prop2":"value2"}"

JSON.stringify()还可以接受第三个参数,用于增加返回的 JSON 字符串的可读性。
默认返回的是单行字符串,对于大型的 JSON 对象,可读性非常差。第三个参数使得每个属性单独占据一行,并且将每个属性前面添加指定的前缀(不超过10个字符)。

// 默认输出
JSON.stringify({ p1: 1, p2: 2 })
// JSON.stringify({ p1: 1, p2: 2 })
// 分行输出
JSON.stringify({ p1: 1, p2: 2 }, null, '\t')
// {
// 	"p1": 1,
// 	"p2": 2
// }

如果参数对象有自定义的toJSON()方法,那么JSON.stringify()会使用这个方法的返回值作为参数,而忽略原对象的其他属性。

JSON.parse()方法用于将 JSON 字符串转换成对应的值。文章来源地址https://www.toymoban.com/news/detail-536540.html

到了这里,关于【JavaScript_2】语法、标准库、正则表达式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/weixin_54068678/article/details/131561132

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包