3.标准对象
3.1.概念
typeof操作符获取对象的类型
typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
不要使用new Number()、new Boolean()、new String()
用parseInt()或parseFloat()来转换任意类型到number;
用String()来转换任意类型到string,或者直接调用某个对象的toString()方法;
判断Array要使用Array.isArray(arr);
判断null请使用myVar === null;
判断某个全局变量是否存在用typeof window.myVar === 'undefined';
函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
number对象调用toString()报SyntaxError:
123.toString(); // SyntaxError
123..toString(); // '123', 注意是两个点!
(123).toString(); // '123'
3.2.Date
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,
Date.now() //获取时间戳
以number形式表示的时间戳
创建一个指定日期和时间的Date对象
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
JavaScript的月份范围用整数表示是0~11,0表示一月,1表示二月
var d = Date.parse('2015-06-24T19:49:22.875+08:00');
返回的不是Date对象,而是一个时间戳
时间戳转换为一个Date
var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
3.3.RegExp
创建一个正则表达式
var re1 = /ABC\-001/; // 直接通过/正则表达式/写出来
var re2 = new RegExp('ABC\\-001');
匹配字符串
re1.test('010-1234x'); // false
切分字符串
'a b c'.split(/\s+/); // ['a', 'b', 'c']
'a,b, c d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']
分组
()表示的就是要提取的分组(Group)
var re = /^(\d{3})-(\d{3,8})$/;
re.exec('010-12345'); // ['010-12345', '010', '12345']
re.exec('010 12345'); // null
贪婪匹配
正则匹配默认是贪婪匹配
必须让\d+采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0匹配出来,
加个?就可以让\d+采用非贪婪匹配:
全局搜索
JavaScript的正则表达式还有几个特殊的标志,最常用的是g,表示全局匹配:
var r1 = /test/g;
// 等价于:
var r2 = new RegExp('test', 'g');
全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当我们指定g标志后,每次运行exec(),正则表达式本身会var s = 'JavaScript, VBScript, JScript and ECMAScript';
var re=/[a-zA-Z]+Script/g;
// 使用全局匹配:
re.exec(s); // ['JavaScript']
re.lastIndex; // 10
re.exec(s); // ['VBScript']
re.lastIndex; // 20
re.exec(s); // ['JScript']
re.lastIndex; // 29
re.exec(s); // ['ECMAScript']
re.lastIndex; // 44
re.exec(s); // null,直到结束仍没有匹配到
i标志,表示忽略大小写,
m标志,表示执行多行匹配。
3.4.JSON
概念
JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。
数据类型
number:和JavaScript的number完全一致;
boolean:就是JavaScript的true或false;
string:就是JavaScript的string;
null:就是JavaScript的null;
array:就是JavaScript的Array表示方式——[];
object:就是JavaScript的{ ... }表示方式。
JSON还定死了字符集必须是UTF-8
JSON的字符串规定必须用双引号""
Object的键也必须用双引号""
序列化
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
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, ' ');
第二个参数用于控制如何筛选对象的键值
如果我们只想输出指定的属性,可以传入Array:
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
还可以传入一个函数,这样对象的每个键值对都会被函数先处理:
精确控制如何序列化
定义一个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.parse()
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
可以接收一个函数,用来转换解析出的属性:
JSON.parse('{"name":"小明","age":14}', function (key, value) {
// 把number * 2:
if (key === 'name') {
return value + '同学';
}
return value;
}); // Object {name: '小明同学', age: 14}
4.面向对象编程
4.1.概念
面向对象的两个基本概念:
类:类是对象的类型模板,
实例:实例是根据类创建的对象
Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,
// 原型对象:
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
4.2.创建对象
概念
JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。
当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。
ex
创建一个Array对象:
var arr = [1, 2, 3];
其原型链是:
arr ----> Array.prototype ----> Object.prototype ----> null
Array.prototype定义了indexOf()、shift()等方法,因此你可以在所有的Array对象上直接调用这些方法。
函数也是一个对象,它的原型链是:
foo ----> Function.prototype ----> Object.prototype ----> null
构造函数
定义一个构造函数
function Student(name) {
this.name = name;
this.hello = function () {
alert('Hello, ' + this.name + '!');
}
}
用关键字new来调用这个函数,并返回一个对象
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!
注意:如果不写new,这就是一个普通函数,它返回undefined。但是,如果写了new,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;。
原型链是:
xiaoming ↘
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun ↗
注意:为了区分普通函数和构造函数,按照约定,构造函数首字母应当大写,而普通函数首字母应当小写,这样,一些语法检查工具如jslint将可以帮你检测到漏写的new。
可以编写一个createStudent()函数,在内部封装所有的new操作。
//构造函数
function Student(props) {
this.name = props.name || '匿名'; // 默认值为'匿名'
this.grade = props.grade || 1; // 默认值为1
}
//共享方法
Student.prototype.hello = function () {
alert('Hello, ' + this.name + '!');
};
//封装 new操作
function createStudent(props) {
return new Student(props || {})
}
4.3.原型继承
在大部分情况下,可以使用
Child.prototype = new Parent();
4.4.class继承
ES6开始引入calss
ex:
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);
}
}