浅谈JavaScript 标准对象


Posted in Javascript onJune 02, 2016

在JavaScript的世界里,一切都是对象。

但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:

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'

可见,numberstringbooleanfunctionundefined有别于其他类型。特别注意null的类型是objectArray的类型也是object,如果我们用typeof将无法区分出nullArray和通常意义上的object——{}

包装对象

numberbooleanstring都有包装对象。没错,在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类型!!!

Date

在JavaScript中,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);

你可能观察到了一个非常非常坑爹的地方,就是JavaScript的月份范围用整数表示是0~11,0表示一月,1表示二月……,所以要表示6月,我们传入的是5!这绝对是JavaScript的设计者当时脑抽了一下,但是现在要修复已经不可能了。

第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串:

var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875

但它返回的不是Date对象,而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date

var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)

时区

Date对象表示的时间总是按浏览器所在时区显示的,不过我们既可以显示本地时间,也可以显示调整后的UTC时间:

var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22',本地时间(北京时区+8:00),显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT',UTC时间,与本地时间相差8小时

那么在JavaScript中如何进行时区转换呢?实际上,只要我们传递的是一个number类型的时间戳,我们就不用关心时区转换。任何浏览器都可以把一个时间戳正确转换为本地时间。

所以,我们只需要传递时间戳,或者把时间戳从数据库里读出来,再让JavaScript自动转换为当地时间就可以了。

要获取当前时间戳,可以用:

if (Date.now) {
  alert(Date.now()); // 老版本IE没有now()方法
} else {
  alert(new Date().getTime());
}

JSON

在JSON中,一共就这么几种数据类型:

•number:和JavaScript的number完全一致;

•boolean:就是JavaScript的true或false;

•string:就是JavaScript的string;

•null:就是JavaScript的null;

•array:就是JavaScript的Array表示方式——[];

•object:就是JavaScript的{ ... }表示方式。

以及上面的任意组合。

序列化

让我们先把小明这个对象序列化成JSON格式的字符串:

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,
  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

使用JSON.stringify()之后:

JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'

要输出得好看一些,可以加上参数,按缩进输出:

JSON.stringify(xiaoming, null, ' ');

结果:

{
 "name": "小明",
 "age": 14,
 "gender": true,
 "height": 1.65,
 "grade": null,
 "middle-school": "\"W3C\" Middle School",
 "skills": [  "JavaScript",  "Java",  "Python",  "Lisp"
 ]
}

第二个参数用于控制如何筛选对象的键值,如果我们只想输出指定的属性,可以传入Array

JSON.stringify(xiaoming, ['name', 'skills'], ' ');

结果:

{
 "name": "小明",
 "skills": [  "JavaScript",  "Java",  "Python",  "Lisp"
 ]
}

还可以传入一个函数,这样对象的每个键值对都会被函数先处理:

function convert(key, value) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}

JSON.stringify(xiaoming, convert, ' ');

上面的代码把所有属性值都变成大写:

{
 "name": "小明",
 "age": 14,
 "gender": true,
 "height": 1.65,
 "grade": null,
 "middle-school": "\"W3C\" MIDDLE SCHOOL",
 "skills": [  "JAVASCRIPT",  "JAVA",  "PYTHON",  "LISP"
 ]
}

如果我们还想要精确控制如何序列化小明,可以给xiaoming定义一个toJSON()的方法,直接返回JSON应该序列化的数据:

var xiaoming = {
  name: '小明',
  age: 14,
  gender: true,
  height: 1.65,
  grade: null,  'middle-school': '\"W3C\" Middle School',
  skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
  toJSON: function () {
    return { // 只输出name和age,并且改变了key:
      'Name': this.name, 'Age': this.age
    };
  }
};
JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

拿到一个JSON格式的字符串,我们直接用JSON.parse()把它变成一个JavaScript对象:

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性:

JSON.parse('{"name":"小明","age":14}', function (key, value) {
  // 把number * 2:
  if (key === 'name') {
    return value + '同学';
  }
  return value;
}); // Object {name: '小明同学', age: 14}

以上这篇浅谈JavaScript 标准对象 就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 #Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 #Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 #Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 #Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 #Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 #Javascript
jquery.validate使用详解
Jun 02 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python装饰器深入学习
2018/04/06 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
《卖木雕的少年》教学反思
2014/04/11 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
暂停营业通知
2015/04/25 职场文书
大学生入党自传2015
2015/06/26 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android