zoukankan      html  css  js  c++  java
  • 引用类型(下)

    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 "&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 其他方法
  • 相关阅读:
    js 复制到剪切板
    200-api网关工程过滤器设置
    199-Zuul配置文件
    198-Feign有什么方便之处呢?
    12-sublime中文配置
    098-Servlet为什么直接相应给浏览器的信息会出现乱码?
    097-为什么我们在SpirngBoot中设置了响应头的编码,浏览器解析出来依然回事乱码呢?
    196-为什么SpringBoot框架中不能直接使用@WebServlet的注解?
    195-如何获取Spring容器中的对象?
    194-Spring注入属性的几个注解?
  • 原文地址:https://www.cnblogs.com/huoteng/p/4959174.html
Copyright © 2011-2022 走看看