• web前端----JavaScript对象


    简介:

    在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的

    <script language="javascript">
    var aa=Number.MAX_VALUE; 
    //利用数字对象获取可表示最大数
    var bb=new String("hello JavaScript"); 
    //创建字符串对象
    var cc=new Date();
    //创建日期对象
    var dd=new Array("星期一","星期二","星期三","星期四"); 
    //数组对象
    </script>

     

    一、string对象(字符串)

    1.字符串对象创建

    字符串创建(两种方式)
           ① 变量 = “字符串”
           ② 字串串对象名称 = new String (字符串)

    //        ========================
    //        字符串对象的创建有两种方式
    //        方式一
              var s = 'sffghgfd';
    //        方式二
              var s1 = new String('  hel lo ');
              console.log(s,s1);
              console.log(typeof(s)); //object类型
              console.log(typeof (s1)); //string类型

     

    2.字符串对象的属性和函数

    -------属性
    x.length ----获取字符串的长度
    ------方法 x.toLowerCase() ----转为小写 x.toUpperCase() ----转为大写 x.trim() ----去除字符串两边空格 ----字符串查询方法 x.charAt(index) ----str1.charAt(index);----获取指定位置字符,其中index为要获取的字符索引 x.indexOf(index)----查询字符串位置 x.lastIndexOf(findstr) x.match(regexp) ----match返回匹配字符串的数组,如果没有匹配则返回null x.search(regexp) ----search返回匹配字符串的首字符位置索引 示例: var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 结果为"world" alert(str3); // 结果为15 ----子字符串处理方法 x.substr(start, length) ----start表示开始位置,length表示截取长度 x.substring(start, end) ----end是结束位置 x.slice(start, end) ----切片操作字符串 示例: var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg" x.replace(findstr,tostr) ---- 字符串替换 x.split(); ----分割字符串 var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);//结果为"二" x.concat(addstr) ---- 拼接字符串

    方法的使用

    <script>
    //        ========================
    //        字符串对象的创建有两种方式
    //        方式一
              var s = 'sffghgfd';
    //        方式二
              var s1 = new String('  hel lo ');
              console.log(s,s1);
              console.log(typeof(s)); //object类型
              console.log(typeof (s1)); //string类型
    
    //        ======================
    //        字符串对象的属性和方法
    //           1.字符串就这么一个属性
            console.log(s.length);  //获取字符串的长度
    
    //           2.字符串的方法
            console.log(s.toUpperCase()) ; //变大写
            console.log(s.toLocaleLowerCase()) ;//变小写
            console.log(s1.trim());  //去除字符串两边的空格(和python中的strip方法一样,不会去除中间的空格)
    ////           3.字符串的查询方法
            console.log(s.charAt(3));  //获取指定索引位置的字符
            console.log(s.indexOf('f')); //如果有重复的,获取第一个字符的索引,如果没有你要找的字符在字符串中没有就返回-1
            console.log(s.lastIndexOf('f')); //如果有重复的,获取最后一个字符的索引
            var str='welcome to the world of JS!';
            var str1 = str.match('world');  //match返回匹配字符串的数组,如果没有匹配则返回null
            var str2 = str.search('world');//search返回匹配字符串从首字符位置开始的索引,如果没有返回-1
            console.log(str1);//打印
            alert(str1);//弹出
            console.log(str2);
            alert(str2);
    
    
    //        =====================
    //        子字符串处理方法
            var aaa='welcome to the world of JS!';
            console.log(aaa.substr(2,4)); //表示从第二个位置开始截取四个
            console.log(aaa.substring(2,4)); //索引从第二个开始到第四个,注意顾头不顾尾
            //切片操作(和python中的一样,都是顾头不顾尾的)
            console.log(aaa.slice(3,6));//从第三个到第六个
            console.log(aaa.slice(4)); //从第四个开始取后面的
            console.log(aaa.slice(2,-1)); //从第二个到最后一个
            console.log(aaa.slice(-3,-1));
    
    
    //        字符串替换、、
            console.log(aaa.replace('w','c')); //字符串替换,只能换一个
            //而在python中全部都能替换
            console.log(aaa.split(' ')); //吧字符串按照空格分割
            alert(aaa.split(' ')); //吧字符串按照空格分割
            var strArray = aaa.split(' ');
            alert(strArray[2])
        </script>
    使用方法

    二、Array对象(数组)

    1.创建数组的三种方式

    创建方式1:
    var arrname = [元素0,元素1,….];          // var arr=[1,2,3];
    
    创建方式2:
    var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
    
    创建方式3:
    var arrname = new Array(长度); 
                //  初始化数组对象:
                    var cnweek=new Array(7);
                        cnweek[0]="星期日";
                        cnweek[1]="星期一";
                        ...
                        cnweek[6]="星期六";

    2.数组的属性和方法

    //        ====================
    //        数组对象的属性和方法
              var arr = [11,55,'hello',true,656];
    //      1.join方法
            var arr1 = arr.join('-'); //将数组元素拼接成字符串,内嵌到数组了,
            alert(arr1);                //而python中内嵌到字符串了
    //        2.concat方法(链接)
            var v = arr.concat(4,5);
            alert(v.toString())  //返回11,55,'hello',true,656,4,5
    //        3.数组排序reserve  sort
    //        reserve:倒置数组元素
            var li = [1122,33,44,20,'aaa',2];
            console.log(li,typeof (li));  //Array [ 1122, 33, 44, 55 ] object
            console.log(li.toString(), typeof(li.toString())); //1122,33,44,55 string
            alert(li.reverse());  //2,'aaa',55,44,33,1122
    //         sort :排序数组元素
            console.log(li.sort().toString()); //1122,2,20,33,44,aaa  是按照ascii码值排序的
    //        如果就想按照数字比较呢?(就在定义一个函数)
    //        方式一
            function intsort(a,b) {
                if (a>b){
                    return 1;
                }
                else if (a<b){
                    return -1;
                }
                else{
                    return 0;
                }
            }
            li.sort(intsort);
            console.log(li.toString());//2,20,33,44,1122,aaa
    
    //        方式二
            function Intsort(a,b) {
                return a-b;
            }
            li.sort(intsort);
            console.log(li.toString());
            // 4.数组切片操作
            //x.slice(start,end);
            var arr1=['a','b','c','d','e','f','g','h'];
            var arr2=arr1.slice(2,4);
            var arr3=arr1.slice(4);
            var arr4=arr1.slice(2,-1);
            alert(arr2.toString());//结果为"c,d"
            alert(arr3.toString());//结果为"e,f,g,h"
            alert(arr4.toString());//结果为"c,d,e,f,g"
    //        5.删除子数组
            var a = [1,2,3,4,5,6,7,8];
            a.splice(1,2);
            console.log(a) ;//Array [ 1, 4, 5, 6, 7, 8 ]
    //        6.数组的push和pop
    //        push:是将值添加到数组的结尾
            var b=[1,2,3];
            b.push('a0','4');
            console.log(b) ; //Array [ 1, 2, 3, "a0", "4" ]
    
    //        pop;是讲数组的最后一个元素删除
            b.pop();
            console.log(b) ;//Array [ 1, 2, 3, "a0" ]
            //7.数组的shift和unshift
            unshift: 将值插入到数组的开始
            shift: 将数组的第一个元素删除
            b.unshift(888,555,666);
            console.log(b); //Array [ 888, 555, 666, 1, 2, 3, "a0" ]
    
            b.shift();
            console.log(b); //Array [ 555, 666, 1, 2, 3, "a0" ]
    //        8.总结js的数组特性
    //        java中的数组特性:规定是什么类型的数组,就只能装什么类型.只有一种类型.
    //        js中的数组特性
    //            js中的数组特性1:js中的数组可以装任意类型,没有任何限制.
    //            js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
        </script>
    数组的一些方法和属性

    三、date对象(日期)

    1.创建date对象

         创建date对象
    //        方式一:
            var now = new Date();
            console.log(now.toLocaleString()); //2017/9/25 下午6:37:16
            console.log(now.toLocaleDateString()); //2017/9/25
    //        方式二
            var now2 = new Date('2004/2/3 11:12');
            console.log(now2.toLocaleString());  //2004/2/3 上午11:12:00
            var now3 = new Date('08/02/20 11:12'); //2020/8/2 上午11:12:00
            console.log(now3.toLocaleString());
    
            //方法3:参数为毫秒数
            var nowd3=new Date(5000);
            alert(nowd3.toLocaleString( ));
            alert(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT

    2.Date对象的方法—获取日期和时间

    获取日期和时间
    getDate()                 获取日
    getDay ()                 获取星期
    getMonth ()               获取月(0-11)
    getFullYear ()            获取完整年份
    getYear ()                获取年
    getHours ()               获取小时
    getMinutes ()             获取分钟
    getSeconds ()             获取秒
    getMilliseconds ()        获取毫秒
    getTime ()                返回累计毫秒数(从1970/1/1午夜)

    实例练习

    1.打印这样的格式2017-09-25 17:36:星期一

    function  foo() {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth();
                var day= date.getDate();
                var hour = date.getHours();
                var min= date.getMinutes();
                var week = date.getDay();
                console.log(week);
                var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
                console.log(arr[week]);
    //            console.log(arr[3]);
                console.log(year+'-'+chengemonth(month+1)+'-'+day+' '+hour+':'+min+':'+arr[week])
            }
            function  chengemonth(num) {
                if (num<10){
                    return  '0'+num
                }
                else{
                    return num
                }
            }
            foo()
            console.log(foo())  //没有返回值返回undefined
    
            //三元运算符
             console.log(2>1?2:1)
    View Code

    2.设置日期和时间

    //设置日期和时间
    //setDate(day_of_month)       设置日
    //setMonth (month)                 设置月
    //setFullYear (year)               设置年
    //setHours (hour)         设置小时
    //setMinutes (minute)     设置分钟
    //setSeconds (second)     设置秒
    //setMillliseconds (ms)       设置毫秒(0-999)
    //setTime (allms)     设置累计毫秒(从1970/1/1午夜)
        
    var x=new Date();
    x.setFullYear (1997);    //设置年1997
    x.setMonth(7);        //设置月7
    x.setDate(1);        //设置日1
    x.setHours(5);        //设置小时5
    x.setMinutes(12);    //设置分钟12
    x.setSeconds(54);    //设置秒54
    x.setMilliseconds(230);        //设置毫秒230
    document.write(x.toLocaleString( )+"<br>");
    //返回1997年8月1日5点12分54秒
    
    x.setTime(870409430000); //设置累计毫秒数
    document.write(x.toLocaleString( )+"<br>");
    //返回1997年8月1日12点23分50秒
    设置日期和时间

    3.日期和时间的转换:

    日期和时间的转换:
    
    getTimezoneOffset():8个时区×15度×4分/度=480;
    返回本地时间与GMT的时间差,以分钟为单位
    toUTCString()
    返回国际标准时间字符串
    toLocalString()
    返回本地格式时间字符串
    Date.parse(x)
    返回累计毫秒数(从1970/1/1午夜到本地时间)
    Date.UTC(x)
    返回累计毫秒数(从1970/1/1午夜到国际时间)
    日期和时间的转换:

    四、Math对象(数学有关的)

    //该对象中的属性方法 和数学有关.
       
    
    abs(x)    返回数的绝对值。
    exp(x)    返回 e 的指数。
    floor(x)对数进行下舍入。
    log(x)    返回数的自然对数(底为e)。
    max(x,y)    返回 x 和 y 中的最高值。
    min(x,y)    返回 x 和 y 中的最低值。
    pow(x,y)    返回 x 的 y 次幂。
    random()    返回 0 ~ 1 之间的随机数。
    round(x)    把数四舍五入为最接近的整数。
    sin(x)    返回数的正弦。
    sqrt(x)    返回数的平方根。
    tan(x)    返回角的正切。

    使用

    》》》》》》》》》》

    五、Function对象(重点)

    1.函数的定义

    function 函数名 (参数){
<br>    函数体;
    
        return 返回值;
    
    }

    功能说明:

    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致,大小写是敏感的
    返回值必须使用return
    Function 类可以表示开发者定义的任何函数。

    用 Function 类直接创建函数的语法如下:

    var 函数名 = new Function("参数1","参数n","function_body");

    虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。

    示例:

    var  func2 = new Function('name',"alert("hello"+name);");
        func2('haiyan');

     注意:js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以:

        f(); --->OK
           function f(){
            console.log("hello")
           }
          f();//----->OK
    //

    2.Function 对象的属性

    如前所述,函数属于引用类型,所以它们也有属性和方法。
    比如,ECMAScript 定义的属性 length 声明了函数期望的参数个数。

    alert(func1.length)

     3.Function 的调用

    //    ========================函数的调用
        function fun1(a,b) {
               console.log(a+b)
        }
        fun1(1,2);// 3
        fun1(1,2,3,4); //3
        fun1(1); //NaN
        fun1(); //NaN
        console.log(fun1())
    
    //    ===================加个知识点
        var d="yuan";
        d=+d;
        alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
        alert(typeof(d));//Number
        NaN特点:
        var n=NaN;
        alert(n>3);
        alert(n<3);
        alert(n==3);
        alert(n==NaN);
        alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=
    
        =============一道面试题、、
        function a(a,b) {
            console.log(a+b);
        }
        var a=1;
        var b=2;
        a(a,b)   //如果这样的话就会报错了,不知道是哪个a了。
    View Code

    4.函数的内置对象arguments

    //    函数的内置对象arguments,相当于python中的动态参数
        function add(a,b){
            console.log(a+b);//3
            console.log(arguments.length);//2
            console.log(arguments);//[1,2]
        }
        add(1,2)
    //     ------------------arguments的用处1 ------------------
        function ncadd() {
            var sum = 0;
            for (var i =0;i<arguments.length;i++){
    //            console.log(i);//打印的是索引
    //            console.log(arguments);//Arguments { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 等 2 项… }
                console.log(arguments[i]);//1,2,3,4,5
                sum +=arguments[i]
            }
            return sum
        }
        ret = ncadd(1,2,3,4,5,6);
        console.log(ret);
    
    
    //     ------------------arguments的用处2 ------------------
    
        function f(a,b,c){
            if (arguments.length!=3){
                throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
            }
            else {
                alert("success!")
            }
        }
    
        f(1,2,3,4,5)
    View Code

     5.匿名函数

    /    =======================
        // 匿名函数
        var func = function(arg){
            return "tony";
        };
    
    // 匿名函数的应用
        (function(){
            alert("tony");
        } )()
    
        (function(arg){
            console.log(arg);
        })('123')
    View Code

     

  • 相关阅读:
    PHP中Foreach在引用时的陷阱 j神
    Yii中Session和cookie的用法 j神
    如何解决web大流量、高并发的问题 j神
    PHP无限级分类的递归算法 j神
    关于breadcrumbs j神
    MySQL索引分析和优化 j神
    Yii笔记 j神
    YII中的URL Management j神
    forward与redirect的区别 j神
    网络编程学习笔记
  • 原文地址:https://www.cnblogs.com/TheLand/p/8547433.html
Copyright © 2020-2023  润新知