浅谈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 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP精确计算功能示例
2016/11/29 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
Python多进程fork()函数详解
2019/02/22 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
收银员岗位职责
2014/02/07 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
商场收银员岗位职责
2015/04/07 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
详解Python requests模块
2021/06/21 Python