1. Date类型
var someDate = new Date(Date.parse("May 25, 2004"));
与 var someDate = new Date("May 25, 2004"); 等价
// GMT 时间 2000 年 1 月 1 日午夜零时
var y2k = new Date(Date.UTC(2000, 0));
// GMT 时间 2005 年 5 月 5 日下午 5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
//简化
// 本地时间 2000 年 1 月 1 日午夜零时
var y2k = new Date(2000, 0);
// 本地时间 2005 年 5 月 5 日下午 5:55:55
var allFives = new Date(2005, 4, 5, 17, 55, 55);
//Date.now()
var start = Date.now();
//调用函数
doSomething();
//取得停止时间
var stop = Date.now(),
result = stop – start;
1.1 继承的方法
//日期比较
var date1 = new Date(2007, 0, 1); //"January 1, 2007"
var date2 = new Date(2007, 1, 1); //"February 1, 2007"
alert(date1 < date2); //true
alert(date1 > date2); //false
- 不同浏览器对 toString() 和 toLocaleString() 有不同的实现;
1.2 日期格式化方法
- toDateString();
- toTimeString();
- toLocaleDateString();
- toLocaleTimeString();
- toUTCString();
- 与 toLocaleString()和 toString()方法一样,以上这些字符串格式方法的输出也是因浏览器而异的,
因此没有哪一个方法能够用来在用户界面中显示一致的日期信息。
1.3 日期/时间组件方法
- getTime() 返回表示日期的毫秒数;与valueOf()方法返回的值相同
- setTime(毫秒) 以毫秒数设置日期,会改变整个日期
- getFullYear() 取得4位数的年份(如2007而非仅07)
- getUTCFullYear() 返回UTC日期的4位数年份
- setFullYear(年) 设置日期的年份。传入的年份值必须是4位数字(如2007而非仅07)
- setUTCFullYear(年) 设置UTC日期的年份。传入的年份值必须是4位数字(如2007而非仅07)
- getMonth() 返回日期中的月份,其中0表示一月, 11表示十二月
- getUTCMonth() 返回UTC日期中的月份,其中0表示一月, 11表示十二月
- setMonth(月) 设置日期的月份。传入的月份值必须大于0,超过11则增加年份
- setUTCMonth(月) 设置UTC日期的月份。传入的月份值必须大于0,超过11则增加年份
- getDate() 返回日期月份中的天数(1到31)
- getUTCDate() 返回UTC日期月份中的天数(1到31)
- setDate(日) 设置日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份
- setUTCDate(日) 设置UTC日期月份中的天数。如果传入的值超过了该月中应有的天数,则增加月份
- getDay() 返回日期中星期的星期几(其中0表示星期日, 6表示星期六)
- getUTCDay() 返回UTC日期中星期的星期几(其中0表示星期日, 6表示星期六)
- getHours() 返回日期中的小时数(0到23)
- getUTCHours() 返回UTC日期中的小时数(0到23)
- setHours(时) 设置日期中的小时数。传入的值超过了23则增加月份中的天数
- setUTCHours(时) 设置UTC日期中的小时数。传入的值超过了23则增加月份中的天数
- getMinutes() 返回日期中的分钟数(0到59)
- getUTCMinutes() 返回UTC日期中的分钟数(0到59)
- setMinutes(分) 设置日期中的分钟数。传入的值超过59则增加小时数
- setUTCMinutes(分) 设置UTC日期中的分钟数。传入的值超过59则增加小时数
- getSeconds() 返回日期中的秒数(0到59)
- getUTCSeconds() 返回UTC日期中的秒数(0到59)
- setSeconds(秒) 设置日期中的秒数。传入的值超过了59会增加分钟数
- setUTCSeconds(秒) 设置UTC日期中的秒数。传入的值超过了59会增加分钟数
- getMilliseconds() 返回日期中的毫秒数
- getUTCMilliseconds() 返回UTC日期中的毫秒数
- setMilliseconds(毫秒) 设置日期中的毫秒数
- setUTCMilliseconds(毫秒) 设置UTC日期中的毫秒数
- getTimezoneOffset() 返回本地时间与UTC时间相差的分钟数。例如,美国东部标准时间返回300。
在某地进入夏令时的情况下,这个值会有所变化。
2. RegExp 类型
//三种模式:
//1. g:global 模式;
//2. i:case-insensitive 模式;
//3. m:multiline 模式;
/*
* 匹配字符串中所有"at"的实例
*/
var pattern1 = /at/g;
/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
var pattern2 = /[bc]at/i;
/*
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
*/
var pattern3 = /.at/gi;
//对元字符进行转义
/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
var pattern1 = /[bc]at/i;
/*
* 匹配第一个" [bc]at",不区分大小写
*/
var pattern2 = /[bc]at/i;
/*
* 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写
*/
var pattern3 = /.at/gi;
/*
* 匹配所有".at",不区分大小写
*/
var pattern4 = /.at/gi;
/*
* 匹配第一个"bat"或"cat",不区分大小写
*/
var pattern1 = /[bc]at/i;
/*
* 与 pattern1 相同,只不过是使用构造函数创建的
*/
var pattern2 = new RegExp("[bc]at", "i");
-
由于 RegExp 构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义。
-
尽量多使用 RegExp 构造函数;
var re = null, i;
for (i=0; i < 10; i++){
re = /cat/g;
re.test("catastrophe");
}for (i=0; i < 10; i++){
re = new RegExp("cat", "g");
re.test("catastrophe");
}
2.1 RegExp 实例属性
- RegExp 的每个实例都具有下列属性,通过这些属性可以取得有关模式的各种信息。
global;
ignoreCase;
lastIndex;
multiline;
source;
2.2 RegExp 实例方法
//exec();
var text = "cat, bat, sat, fat";
var pattern1 = /.at/;
var matches = pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern1.lastIndex); //0
matches = pattern1.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern1.lastIndex); //0
var pattern2 = /.at/g;
var matches = pattern2.exec(text);
alert(matches.index); //0
alert(matches[0]); //cat
alert(pattern2.lastIndex); //3
matches = pattern2.exec(text);
alert(matches.index); //5
alert(matches[0]); //bat
alert(pattern2.lastIndex); //8
//test();
var text = "000-00-0000";
var pattern = /d{3}-d{2}-d{4}/;
if (pattern.test(text)){
alert("The pattern was matched.");
}
var pattern = new RegExp("\[bc\]at", "gi");
alert(pattern.toString()); // /[bc]at/gi
alert(pattern.toLocaleString()); // /[bc]at/gi
2.3 RegExp 构造函数属性
var text = "this has been a short summer";
var pattern = /(.)hort/g;
/*
* 注意: Opera 不支持 input、 lastMatch、 lastParen 和 multiline 属性
* Internet Explorer 不支持 multiline 属性
*/
if (pattern.test(text)){
alert(RegExp.input); // this has been a short summer
alert(RegExp.leftContext); // this has been a
alert(RegExp.rightContext); // summer
alert(RegExp.lastMatch); // short
alert(RegExp.lastParen); // s
alert(RegExp.multiline); // false
}
//短属性名
var text = "this has been a short summer";
var pattern = /(.)hort/g;
/*
* 注意: Opera 不支持 input、 lastMatch、 lastParen 和 multiline 属性
* Internet Explorer 不支持 multiline 属性
*/
if (pattern.test(text)){
alert(RegExp.$_); // this has been a short summer
alert(RegExp["$`"]); // this has been a
alert(RegExp["$'"]); // summer
alert(RegExp["$&"]); // short
alert(RegExp["$+"]); // s
alert(RegExp["$*"]); // false
}
//捕获组
var text = "this has been a short summer";
var pattern = /(..)or(.)/g;
if (pattern.test(text)){
alert(RegExp.$1); //sh
alert(RegExp.$2); //t
}
2.4 模式的局限性
- ECMAScript 正则表达式不支持的特性:
匹配字符串开始和结尾的A 和 锚①
向后查找(lookbehind) ②
并集和交集类
原子组(atomic grouping)
Unicode 支持(单个字符除外,如uFFFF)
命名的捕获组③
s(single,单行)和 x(free-spacing,无间隔)匹配模式
条件匹配
正则表达式注释
3. Function 类型
3.1 没有重载(深入理解)
//没有重载的本质
var addSomeNumber = function (num){
return num + 100;
};
addSomeNumber = function (num) {
return num + 200;
};
var result = addSomeNumber(100); //300
3.2 函数声明与函数表达式
//理解函数声明和函数表达式在解析器中执行的不同
//正常
alert(sum(10,10));
function sum(num1, num2){
return num1 + num2;
}
//报错
alert(sum(10,10));
var sum = function(num1, num2){
return num1 + num2;
};
3.3 作为值的函数
//类似委托
function callSomeFunction(someFunction, someArgument){
return someFunction(someArgument);
}
function add10(num){
return num + 10;
}
var result1 = callSomeFunction(add10, 10);
alert(result1); //20
//巧妙
function createComparisonFunction(propertyName) {
return function(object1, object2){
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if (value1 < value2){
return -1;
} else if (value1 > value2){
return 1;
} else {
return 0;
}
};
}
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}];
data.sort(createComparisonFunction("name"));
alert(data[0].name); //Nicholas
data.sort(createComparisonFunction("age"));
alert(data[0].name); //Zachary
3.4 函数内部属性
//arguments.callee();
//普通的阶乘代码
function factorial(num){
if (num <=1) {
return 1;
} else {
return num * factorial(num-1)
}
}
//解耦后的阶乘代码
function factorial(num){
if (num <=1) {
return 1;
} else {
return num * arguments.callee(num-1)
}
}
//解耦后的优点
var trueFactorial = factorial;
factorial = function(){
return 0;
};
alert(trueFactorial(5)); //120
alert(factorial(5)); //0
//this
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"
//caller,保存函数的函数的引用,因为outer调用了inner,所以指向outer
function outer(){
inner();
}
function inner(){
alert(inner.caller);
}
outer();
//解耦和之后的caller,访问相同的信息
function outer(){
inner();
}
function inner(){
alert(arguments.callee.caller);
}
outer();
3.5 函数的属性和方法
//length,函数希望接受的命名参数的个数
function sayName(name){
alert(name);
}
function sum(num1, num2){
return num1 + num2;
}
function sayHi(){
alert("hi");
}
alert(sayName.length); //1
alert(sum.length); //2
alert(sayHi.length); //0
//prototype
//apply()
function sum(num1, num2){
return num1 + num2;
}
function callSum1(num1, num2){
return sum.apply(this, arguments); // 传入 arguments 对象
}
function callSum2(num1, num2){
return sum.apply(this, [num1, num2]); // 传入数组
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20
//call()
function sum(num1, num2){
return num1 + num2;
}
function callSum(num1, num2){
return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20
//apply() 或 call() 更重要的作用,扩充函数赖以运行的作用域
运行的作用域。下面来看一个例子。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
//bind(),绑定作用域
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
4. 基本包装类型
//要注意的是,使用 new 调用基本包装类型的构造函数,与直接调用同名的转型函数是不一样的。
var value = "25";
var number = Number(value); //转型函数
alert(typeof number); //"number"
var obj = new Number(value); //构造函数
alert(typeof obj); //"object"
4.1 Boolean 类型
var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result); //true
var falseValue = false;
result = falseValue && true;
alert(result); //false
alert(typeof falseObject); //object
alert(typeof falseValue); //boolean
alert(falseObject instanceof Boolean); //true
alert(falseValue instanceof Boolean); //false
- 理解基本类型的布尔值与 Boolean 对象之间的区别非常重要。
当然,我们的建议是永远不要使用 Boolean 对象。
4.2 Number 类型
var num = 10;
alert(num.toString()); //"10"
alert(num.toString(2)); //"1010"
alert(num.toString(8)); //"12"
alert(num.toString(10)); //"10"
alert(num.toString(16)); //"a"
var num = 10;
alert(num.toFixed(2)); //"10.00"
var num = 10.005;
alert(num.toFixed(2)); //"10.01"
var num = 10;
alert(num.toExponential(1)); //"1.0e+1"
var num = 99;
alert(num.toPrecision(1)); //"1e+2"
alert(num.toPrecision(2)); //"99"
alert(num.toPrecision(3)); //"99.0"
var numberObject = new Number(10);
var numberValue = 10;
alert(typeof numberObject); //"object"
alert(typeof numberValue); //"number"
alert(numberObject instanceof Number); //true
alert(numberValue instanceof Number); //false
4.3 String 类型
4.3.1 字符方法
var stringValue = "hello world";
alert(stringValue.charAt(1)); //"e"
var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //输出"101"
var stringValue = "hello world";
alert(stringValue[1]); //"e"
4.3.2 字符串操作方法
var stringValue = "hello ";
var result = stringValue.concat("world");
alert(result); //"hello world"
alert(stringValue); //"hello"
var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!"
alert(stringValue); //"hello"
var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7)); //"lo worl"
var stringValue = "hello world";
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4)); //"lo w"
alert(stringValue.substring(3, -4)); //"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)
4.3.3 字符串位置方法
var stringValue = "hello world";
alert(stringValue.indexOf("o")); //4
alert(stringValue.lastIndexOf("o")); //7
var stringValue = "hello world";
alert(stringValue.indexOf("o", 6)); //7
alert(stringValue.lastIndexOf("o", 6)); //4
var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
var positions = new Array();
var pos = stringValue.indexOf("e");
while(pos > -1){
positions.push(pos);
pos = stringValue.indexOf("e", pos + 1);
}
alert(positions); //"3,24,32,35,52"
4.3.4 trim() 方法
var stringValue = " hello world ";
var trimmedStringValue = stringValue.trim();
alert(stringValue); //" hello world "
alert(trimmedStringValue); //"hello world"
- 此外, Firefox 3.5+、 Safari 5+和 Chrome 8+还支持非标准的
trimLeft()和 trimRight()方法,分别用于删除字符串开头和末尾的空格。
4.3.5 字符串大小写转换方法
var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase()); //"hello world"
alert(stringValue.toLowerCase()); //"hello world"
- 一般来说,在不知道自己的代码将在哪种语言环境中运行的情况下,还是使用针对地区的方法更稳妥一些。
4.3.6 字符串的模式匹配方法
var text = "cat, bat, sat, fat";
var pattern = /.at/;
//与 pattern.exec(text)相同
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern.lastIndex); //0
var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos); //1
var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"
result = text.replace(/at/g, "ond");
alert(result); //"cond, bond, sond, fond"
var text = "cat, bat, sat, fat";
result = text.replace(/(.at)/g, "word ($1)");
alert(result); //word (cat), word (bat), word (sat), word (fat)
function htmlEscape(text){
return text.replace(/[<>"&]/g, function(match, pos, originalText){
switch(match){
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case """:
return """;
}
});
}
alert(htmlEscape("<p class="greeting">Hello world!</p>"));
//<p class="greeting">Hello world!</p>
var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
4.3.7 localeCompare() 方法
var stringValue = "yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo")); //-1
- 对于大小写的比较因国家而异。
4.3.8 fromCharCode() 方法
alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"
4.3.9 HTML 方法
5. 单体内置对象
5.1 Global 对象
5.1.1 URI 编码方法
var uri = "http://www.wrox.com/illegal value.htm#start";
//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURI(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
alert(encodeURIComponent(uri));
var uri = "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start";
//http%3A%2F%2Fwww.wrox.com%2Fillegal value.htm%23start
alert(decodeURI(uri));
//http://www.wrox.com/illegal value.htm#start
alert(decodeURIComponent(uri));
-
一 般 来 说 , 我 们 使 用 encodeURIComponent() 方法的时候要比使用encodeURI()更多,
因为在实践中更常见的是对查询字符串参数而不是对基础 URI进行编码。 -
URI 方法能够编码所有 Unicode 字符,而原来的方法只能正确地编码 ASCII 字符。
因此在开发实践中,特别是在产品级的代码中,一定要使用 URI 方法,
不要使用 escape()和 unescape()方法。
5.1.2 eval() 方法
eval("alert('hi')");
这行代码的作用等价于下面这行代码:
alert("hi");
var msg = "hello world";
eval("alert(msg)"); //"hello world"
eval("function sayHi() { alert('hi'); }");
sayHi();
eval("var msg = 'hello world'; ");
alert(msg); //"hello world"
- 能够解释代码字符串的能力非常强大,但也非常危险。因此在使用 eval()时必须极为谨慎,
特别是在用它执行用户输入数据的情况下。否则,可能会有恶意用户输入威胁你的站点
或应用程序安全的代码(即所谓的代码注入)。
5.1.3 Global 对象的属性
5.1.4 window 对象
var color = "red";
function sayColor(){
alert(window.color);
}
window.sayColor(); //"red"
var global = function(){
return this;
}();
5.2 Math 对象
5.2.1 Math 对象的属性
5.2.2 min() 和 max() 方法
var max = Math.max(3, 54, 32, 16);
alert(max); //54
var min = Math.min(3, 54, 32, 16);
alert(min); //3
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);
5.2.3 舍入方法
alert(Math.ceil(25.9)); //26
alert(Math.ceil(25.5)); //26
alert(Math.ceil(25.1)); //26
alert(Math.round(25.9)); //26
alert(Math.round(25.5)); //26
alert(Math.round(25.1)); //25
alert(Math.floor(25.9)); //25
alert(Math.floor(25.5)); //25
alert(Math.floor(25.1)); //25
5.2.4 random() 方法
//1到 10 之间
var num = Math.floor(Math.random() * 10 + 1);
//2到 10 之间
var num = Math.floor(Math.random() * 9 + 2);
function selectFrom(lowerValue, upperValue) {
var choices = upperValue - lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);
alert(num); // 介于 2 和 10 之间(包括 2 和 10)的一个数值
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];
alert(color); // 可能是数组中包含的任何一个字符串