这是字面量和构造函数的最后一篇内容,其中包括了JSON、正则表达式字面量,基本值类型包装器等知识点。也是十分重要的哦。

五、JSON

  JSON是指JavaScript对象表示以及数据传输格式。它是一种轻量级数据交换格式,且可以很方便地用于多种语言,尤其是在JavaScript中。实际上,对于JSON而言,只是一个数组和对象字面量表示方法的组合:

{"name":"value","some":[1,2,3]}

  JSON和文字对象之间唯一的区别,就是在JSON中,属性名称需要包装在引号中才能成为合法的JSON。而在对象字面量中,仅当属性名称不是有效的标识符时才会需要引号,比如:字符之间有空格{"first name":""Dave}。

  此外,JSON字符串中,不能使用函数或正则表达式字面量。

使用JSON

  注意,并不推荐盲目使用eval()对任意JSON字符串进行求值,其原因在于安全性的影响。如果使用JSON.parse()方法解析字符串,其安全性会更好。

// 一个输入JSON字符串
var jstr = '{"name":"value","some":[1,2,3]}'; // 反模式
var data = eval('(' + jstr + ')'); // 优先使用的方法
var data = JSON.parse(jstr);
console.log(data.name); // value

  与JSON.parse()相对的方法是JSON.stringify()。它可以将任意的对象或数组序列化为一个JSON字符串。

var dog = {
name:'Fido',
dob:new Date(),
legs:[1,2,3,4]
};
var jsonstr = JSON.stringify(dog);

六、正则表达式字面量

  JavaScript中的正则表达式也是对象,可以用两种方法创建:

    1、使用new RegExp()构造函数。

    2、使用正则表达式字面量。

// 正则表达式字面量
var re = /\\/gm; // 构造函数
var re = new RegExp('\\\\','gm');

  正如上面的代码,字面量表示法更加简短,并且不需要使用“类”的构造函数方式思考。优先选择字面量表示法创建正则表达式。

  此外,在使用构造函数时,不仅需要转义引号,还需要双反斜杠。如上代码,这里需要四个反斜杠才能匹配单个反斜杠。使得其难以阅读和修改。

正则表达式字面量语法

  正则表达式字面量表示法使用了斜杠(分隔号“/”)来包装用于匹配的正则表达式模式。在第二个斜杠之后,可以将该模式修改为不加引号的字母形式:

  • g——全局匹配
  • m——多行
  • i——大小写敏感匹配

  模式修改器可以允许任何顺序或者组合方式出现:var re = /pattern/gmi;

  还有一个要注意的是,在ES5之前,字面量在解析时只有一次创建了一个对象。也就是说,如果在一个循环中创建了相同的正则表达式,那么后面返回的对象与前面创建的对象相同,并且所有的属性都将被设置为第一次的值。这种行为已经在ES5中得到了改变,并且字面量会创建新的对象。

  最后要说明的是,调用RegExp()时不使用new的行为与使用new的行为时相同的。

七、基本值类型包装器

  JavaScript有五个基本的值类型:数字、字符串、布尔、null和undefined。除了null和undefined以外,其他三个具有所谓的基本包装对象。可以使用内置构造函数Number(),String()和Boolean()创建包装对象。

  为了说明基本(primitive)数字和数字对象(object)之间的差异,请看:

// 一个基本数值
var n = 100;
console.log(typeof n);//输出"number" // 一个数值Number对象
var nobj = new Number(100);
console.log(typeof nobj);// 输出"object"

  包装对象包含了一些有用的属性和方法。比如,数字对象具有形如toFixed()和toExponential()的方法。字符串对象具有substring()、charAt()、toLowerCase()等方法以及length属性。与基本值类型相比较而言,这些包装对象的方法用起来十分方便,这也是用这种方法创建对象的一个很好的理由。但是这些方法在基本值类型上也能够起作用只要调用这些方法,基本值类型就可以在后台被临时转换为一个对象,并且表现的犹如一个对象。

// 用来作为对象基本字符串
var s = "hello";
console.log(s.toUpperCase());// "HELLO" // 值本身可以作为一个对象
"monkey".slice(3,6); // "key" // 与数值的方法相同
(22 / 7).toPrecision(3); // "3.14"

  由于基本值类型也可以充当对象,只要需要它们这样做,不过通常并没有理由去使用更为冗长的包装构造函数。很显然,比如当可以简单地使用“hi”时,就不必编写“new String("hi");”这样冗长的语句。

// 避免使用以下结构:
var s = new String("my string");
var n = new Number(101);
var b = new Boolean(true); // 更好且更加简单的语句
var s = "my string";
var n = 101;
var b = true;

  通常使用包装对象的原因之一是您有扩充值以及持久保存状态的需要。这是由于基本值类型并不是对象,他们不可能扩充属性。

// 基本字符串
var greet = "Hello there"; // 为了使用split()方法,基本数据类型被转换成对象
greet.split(' ')[0]; // "Hello" // 试图增加一个原始数据类型并不会导致错误
greet.smile = true; // 但是它并不会实际运行
typeof greet.smile; // "undefined"

  上面的代码中,greet只能被临时转换成对象,以使得该方法/属性可以访问,且运行时不会产生错误。另一个方面,如果使用new String()来定义一个对象greet,那么对其扩充的smile属性将会按照预期运行。扩充一个字符串、数字或布尔值的情况比较少见,除非这种行为就是您所需要的,否则可能并不需要包装构造函数。

  当使用时没有带new操作符时,包装构造函数将传递给它们的参数转换成一个基本类型值:

typeof Number(1);// 输出“number”
typeof Number("1");// 输出“number”
typeof Number(new Number());// 输出“number”
typeof String(1);// 输出“string”
typeof Boolean(1);// 输出“boolean”

八、错误对象

  JavaScript中有一些内置错误构造函数(error constructor),比如Error()、SyntaxError()、TypeError()以及其他,这些错误构造函数都带有throw语句。通过这些错误构造函数创建的错误对象具有下列属性:

  • name:用于创建对象的构造函数的名称属性。它可以是一般的“Error”或者更为专门的构造函数,比如“RangeError”。
  • message:当创建对象时传递给构造函数的字符串。

  错误对象也还有一些其他的属性,比如发生错误的行号和文件名,但这些额外属性都是浏览器扩展属性,在多个浏览器实现中并不一致,因而并不可靠。

  另一方面,throw适用于任何对象,并不一定是由某个错误构造函数所创建的对象,因此可以选择抛出自己的对象:

function genericErrorHandler() {
console.log("错误处理中....")
}
try {
throw {
name: "MyErrortype",//自定义错误类型
message: "oops",
extra: "This is rather embarrassing",
remedy: genericErrorHandler // 指定应该处理该错误的函数
};
} catch (e) {
// 通知用户
alert(e.message);//输出"oops"
// 优美的处理错误
e.remedy(); // 调用函数genericErrorHandler()
}

  错误构造函数以函数的形式调用(不带new)时,其表现行为与构造函数(带new)相同,并且返回同一个错误对象。

  我们这篇文章整体的内容就结束了,我们主要学习了对象字面量、数组字面量、正则表达式字面量、以及构造函数和new、还有一些其他的内置构造函数比如不建议使用的String()、Number()、Boolean()等,此外还讨论了多种不同的Error()构造函数。

  注意:在一般情况下,除了Date()构造函数,很少需要使用其他内置构造函数。

JavaScript 模式》读书笔记(3)— 字面量和构造函数3的更多相关文章

  1. JavaScript模式读书笔记 文章3章 文字和构造

    1.对象字面量     -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数.       ...

  2. JavaScript模式读书笔记 第4章 函数

    2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象    函数能够提供作用域         函数即对象,表现为:         -1,函数能够在执行时动态创建,也 ...

  3. 《JavaScript 模式》读书笔记(3)— 字面量和构造函数1

    新的篇章开始了,本章开始,所有的内容都是十分有价值和意义的.本章主要的内容包括对象字面量.构造函数.数组字面量.正则字面量.基本值类型字面量以及JSON等.在大家的工作和实际应用中也有一定的指导意义. ...

  4. 《JavaScript模式》第3章 字面量和构造函数

    @by Ruth92(转载请注明出处) 第3章:字面量和构造函数 一.创建对象的三种方式 // 对象字面量 var car = {goes: "far"}; // 内置构造函数(反 ...

  5. 《Javascript模式》之对象创建模式读书笔记

    引言: 在javascript中创建对象是很容易的,可以使用对象字面量或者构造函数或者object.creat.在接下来的介绍中,我们将越过这些方法去寻求一些其他的对象创建模式. 我们知道js是一种简 ...

  6. 《javascript模式--by Stoyan Stefanov》书摘--字面量和构造函数

    二.字面量和构造函数 1,能够使用对象字面量时,就没理由使用new Object构造函数 // 一个空对象var 0 = new Object();console.log( o.constructor ...

  7. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

  8. 《你不知道的javascript》读书笔记2

    概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...

  9. JavaScript 模式》读书笔记(3)— 字面量和构造函数2

    上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ...

随机推荐

  1. IDEA如何自动添加注解作者等信息?

    1.点击File 2.点击Settings 3.点击Editor 4.点Live  Templates 5.点击左上角加号选中第2个 6.自定义命名,选中你自己创建的组,点击左上角加号选择第1个选项 ...

  2. 芮勇博士荣获2016年IEEE 计算机学会技术成就奖

    微软亚洲研究院常务副院长 芮勇 日前,电气电子工程师学会(the Institute of Electrical and Electronics Engineers, IEEE)计算机学会(Comp ...

  3. C++走向远洋——55(项目一3、分数类的重载、>>

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  4. python爬虫之字体反爬

    一.什么是字体反爬? 字体反爬就是将关键性数据对应于其他Unicode编码,浏览器使用该页面自带的字体文件加载关键性数据,正常显示,而当我们将数据进行复制粘贴.爬取操作时,使用的还是标准的Unicod ...

  5. sql05

    1.Ado.net Ado.net是一组由微软提供的使用C#操作数据库的类库 2.连接 首先引入: using System.Data.SqlClient; 需要使用连接字符串进行连接 using S ...

  6. JS 获取一段时间内的工作时长小时数

    本来想是想找轮子的,但是并没有找到能用的,多数都是问题很大,所以就自己写了一个 需求说明 支持自选时间段,即开始时间与结束时间根据用户的上班及下班时间判定返回小时数 技术栈 moment.js 思考过 ...

  7. Flex实现九宫格

    写一个靠谱的flex布局 <!DOCTYPE html> <html> <style> .block { padding-top: 30%; margin-top: ...

  8. 前端面试题-HTML语义化标签

    一.HTML5语义化标签 标签 描述 <article> 页面独立的内容区域. <aside> 页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素 ...

  9. scroll-view组件bindscroll实例应用:自定义滚动条

    我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸])嗯,没错.自己 ...

  10. 在服务器上保存图片没有权限该怎么办?Permission denied:xxxxxx

    用Flask框架,写了一个上传图片的接口,把这个Flask服务用nginx+uwsgi部署在了服务器上,保存图片至服务器指定目录,显示没有权限?? 一开始我以为是nginx或者uwsgi影响的(可能很 ...