引用类型(下)

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 和\Z 锚①
     向后查找(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 "&lt;";
            case ">":
                return "&gt;";
            case "&":
                return "&amp;";
            case "\"":
                return "&quot;";
        }
    });
}
alert(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
//&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

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); // 可能是数组中包含的任何一个字符串
5.2.5 其他方法
posted @ 2015-12-24 20:23  叫我霍啊啊啊  阅读(83)  评论(0编辑  收藏  举报