浅谈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小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
JS 表单验证大全
2011/11/23 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
Django中ORM的基本使用教程
2020/12/22 Python
Java程序员面试90题
2013/10/19 面试题
写求职信有什么意义
2014/02/17 职场文书
数控专业自荐书范文
2014/03/16 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
小学节能减排倡议书
2014/05/15 职场文书
股指期货心得体会
2014/09/13 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
党员民主生活会材料
2014/12/15 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python