【JavaScript】对象
No1:
typeof
操作符获取对象的类型
null
的类型是object
,Array
的类型也是object
,如果我们用typeof
将无法区分出null
、Array
和通常意义上的object——{}
。
No2:
【包装对象】
包装对象用new
创建
var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型
虽然包装对象看上去和原来的值一模一样,显示出来也是一模一样,但他们的类型已经变为object
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
下面是没new的情况
var n = Number('123'); // 123,相当于parseInt()或parseFloat()
typeof n; // 'number' var b = Boolean('true'); // true
typeof b; // 'boolean' var b2 = Boolean('false'); // true! 'false'字符串转换结果为true!因为它是非空字符串!
var b3 = Boolean(''); // false var s = String(123.45); // '123.45'
typeof s; // 'string'
No3:
几条规则需要遵守:
不要使用
new Number()
、new Boolean()
、new String()
创建包装对象;用
parseInt()
或parseFloat()
来转换任意类型到number
;用
String()
来转换任意类型到string
,或者直接调用某个对象的toString()
方法;通常不必把任意类型转换为
boolean
再判断,因为可以直接写if (myVar) {...}
;typeof
操作符可以判断出number
、boolean
、string
、function
和undefined
;判断
Array
要使用Array.isArray(arr)
;判断
null
请使用myVar === null
;判断某个全局变量是否存在用
typeof window.myVar === 'undefined'
;函数内部判断某个变量是否存在用
typeof myVar === 'undefined'
。
No4:
number
对象调用toString()
123..toString(); // '123', 注意是两个点!
(123).toString(); // '123'
这都尼玛什么鬼!
No5:
创建时间
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
JavaScript的月份范围用整数表示是0~11,0
表示一月,1
表示二月……,所以要表示6月,我们传入的是5
!这绝对是JavaScript的设计者当时脑抽了一下,但是现在要修复已经不可能了。砍人的心都有了
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); //
No6:
【RegExp】就是正则表达式
var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001'); re1; // /ABC\-001/
re2; // /ABC\-001/
var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true
re.test('010-1234x'); // false
re.test('010 12345'); // false
【切分字符串】
'a b c'.split(/\s+/); // ['a', 'b', 'c'] 'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd'] 'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd']
【分组】
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null
【贪婪匹配】
var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']
非贪婪匹配
var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']
【全局匹配】--结尾+g
var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g; // 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // re.exec(s); // ['VBScript']
re.lastIndex; // re.exec(s); // ['JScript']
re.lastIndex; // re.exec(s); // ['ECMAScript']
re.lastIndex; // re.exec(s); // null,直到结束仍没有匹配到
No7:
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}; var s = JSON.stringify(xiaoming);//或者JSON.stringify(xiaoming, null, ' ');
console.log(s);
运行结果
{
"name":"小明",
"age":14,
"gender":true,
"height":1.65,
"grade":null,
"middle-school":""W3C" Middle School",
"skills":[
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
如果是
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
运行结果
{
"name": "小明",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}
No8:
【序列化】
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.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
No9:
【prototype】原型(类似通过继承来创建对象)
/ 原型对象:
var Student = {
name: 'Robot',
height: 1.2,
run: function () {
console.log(this.name + ' is running...');
}
}; function createStudent(name) {
// 基于Student原型创建一个新对象:
var s = Object.create(Student);
// 初始化新对象:
s.name = name;
return s;
} var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true
JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。
No10:
原型链
var arr = [1, 2, 3];
其原型链是arr ----> Array.prototype ----> Object.prototype ----> null
Array.prototype
定义了indexOf()
、shift()
等方法,因此你可以在所有的Array
对象上直接调用这些方法。
function foo() {
return 0;
}
其原型链是foo ----> Function.prototype ----> Object.prototype ----> null
Function.prototype
定义了apply()
等方法,因此,所有函数都可以调用apply()
方法。
No11:
【构造函数】
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
xiaoming
的原型链是xiaoming ----> Student.prototype ----> Object.prototype ----> null
No12:
【原型继承】
// PrimaryStudent构造函数:
function PrimaryStudent(props) {
Student.call(this, props);
this.grade = props.grade || 1;
} // 空函数F:
function F() {
} // 把F的原型指向Student.prototype:
F.prototype = Student.prototype; // 把PrimaryStudent的原型指向一个新的F对象,F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F(); // 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent; // 继续在PrimaryStudent原型(就是new F()对象)上定义方法:
PrimaryStudent.prototype.getGrade = function () {
return this.grade;
}; // 创建xiaoming:
var xiaoming = new PrimaryStudent({
name: '小明',
grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // // 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true // 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true
JavaScript的原型继承实现方式就是:
定义新的构造函数,并在内部用
call()
调用希望“继承”的构造函数,并绑定this
;借助中间函数
F
实现原型链继承,最好通过封装的inherits
函数完成;继续在新的构造函数的原型上定义新方法
No13:
【class继承】
class Student {
constructor(name) {
this.name = name;
} hello() {
alert('Hello, ' + this.name + '!');
}
} var xiaoming = new Student('小明');
xiaoming.hello();
看到这,我觉得之前的原型链啥还是不要学的好!
【class继承】
class PrimaryStudent extends Student {
constructor(name, grade) {
super(name); // 记得用super调用父类的构造方法!
this.grade = grade;
} myGrade() {
alert('I am at grade ' + this.grade);
}
}
终于和java的语法统一了,js太多坑爹的语法,希望早日移除
【JavaScript】对象的更多相关文章
- json与JavaScript对象互换
1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...
- javaScript对象-基本包装类型的详解
本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...
- 如何理解javaScript对象?
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- Javascript对象的方法赋值
Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- 关于javascript对象的简单记忆法
关于javascript对象方法的简单记忆法(个人整理) string对象: 大号小号闪烁加链接./big/small/blink/link/ 粗体斜体打字删除线./bold/italics/fixe ...
随机推荐
- 彻底完全卸载 SQL Server 2005 的图文教程
彻底完全卸载 SQL Server 2005 的图文教程 SQL SERVER 2005不象SERVER 2000所有组件都汇总在一起,所以卸载时特别麻烦,如果不按正常的方法卸载,重新安装是不可能安装 ...
- laravel 表单方法伪造
有时候,我们可能需要手动定义发送表单数据所使用的 HTTP 请求方式,而 HTML 表单仅支持 GET 和 POST 两种方式,如果要使用其他的方式,则需要自己来定义实现. HTTP 请求方式概述 最 ...
- java----String解析
String在内存中的分析: public class Demo { public static void main(String[] args){ String a = new String(&qu ...
- Git使用三:git的使用流程
先创建仓库 创建一个文件夹,作为仓库使用 初始化仓库,在仓库目录的命令行下输入:git init 第一步:创建一个文件,并写入内容,这里写入内容的时候,要把编码设置为utf-8 第二步:输入命令将文件 ...
- Yslow web性能测试插件
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修 ...
- AI-跨域、垃圾回收、content_type组见、接口处理
AI-跨域.垃圾回收.content_type组见.接口处理 跨域 为什么有跨域?什么时候遇见的?答:由于浏览器的同源策略 阻止ajax请求 不阻止src请求:在测试时,项目上线后不会遇见跨域.源:协 ...
- mysql 5.7 安装
linux(CentOS6.7) 环境Mysql 5.7.17安装教程分享给大家,供大家参考,具体内容如下: 1系统约定 安装文件下载目录:/data/software Mysql目录安装位置:/us ...
- javac选项以递归方式编译给定目录下的所有Java文件 - IT屋-程序员软件开发技术分享社区
http://www.it1352.com/539276.html #Linux $ find -name“* .java”> sources.txt $ javac @ sources.txt ...
- 【C++ Primer | 15】继承的构造函数
继承的构造函数 子类为完成基类初始化,在C++11之前,需要在初始化列表调用基类的构造函数,从而完成构造函数的传递.如果基类拥有多个构造函数,那么子类也需要实现多个与基类构造函数对应的构造函数. cl ...
- [转] Lodash常用API笔记
原生用法 直接使用的API _.reject 根据条件去除某个元素. var foo = [ {id: 0, name: "aaa", age: 33}, {id: 1, name ...