浅谈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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php-fpm配置详解
2014/02/12 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
js实现拖拽效果
2015/02/12 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
python统计一个文本中重复行数的方法
2014/11/19 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
python 实现图片裁剪小工具
2021/02/02 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
2014年校长工作总结
2014/12/11 职场文书
2015年消防工作总结
2015/04/24 职场文书
统招统分证明
2015/06/23 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python