zoukankan      html  css  js  c++  java
  • web前端学习(四)JavaScript学习笔记部分(6)-- js内置对象

    1、JS内置对象-什么是对象

    1.1、什么是对象:

      JavaScript中的所有事物都是对象:字符串、数值、数组、函数

      每个对象带有属性和方法

      JavaScript允许自定义对象

    1.2、自定义对象:

      1.定义并创建对象实例

      2.使用函数来定义对象,然后创建新的对象实例

    小纸条:newObject是最大的对象,是所有对象的父类。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        /*三种创建对象的方法*/
        people111 = new Object();
        people111.name = "iwen";
        people111.age = "30";
        document.write("name:"+people111.name + ",age:"+people111.age);
    
        document.write(`<br/>`);
    
        people222 = {name:"iwen",age:"30"};
        document.write("name:"+people111.name + ",age:"+people111.age);
    
        document.write(`<br/>`)
    
        function people333(name,age){
            this.name = name;
            this.age = age;
        }
    
        son = new people333("iwen",30);
        document.write("name:" + son.name + ",age:" + son.age);
    </script>
    </body>
    </html>

    2、JS内置对象-String字符串对象

    2.1、String对象

      String对象用于处理已有的字符串

      字符串可以使用双引号或单引号

    2.2、在字符串中查找字符串:indexOf()

      indexOf()返回给定查找字符串的位置,位置计数从0开始,没有的话返回-1。

    2.3、内容匹配:match()

      匹配会返回给定的字符串,不存在的话会返回null

    2.4、替换内容:replace()

    2.5、字符串大小写的转换:toUpperCase() / toLowerCase()

    2.6、字符串转换为数组:strong>split()

    2.7、字符串属性和方法:

      1.属性:length、prototype、constructor

      2.方法:charAt()、charCodeAt()、concat()、fromCharCode()、indexOf()、lastIndexOf()、match()、replacr()、search()、slice()、substring()、substr()、valueOf()、toLowerCase()、toUpperCase()、split()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        var str = "hello world";
        var str1 = "hello wo cao";
        document.write("字符串长度:"+str.length+`<br/>`);
        document.write(str.indexOf("ello")+`<br/>`);/*查找字符串所在位置,从0开始计数,不存在返回-1*/
        document.write(str.match("world")+`<br/>`);/*查找是否有所给字符串,如果有就返回原字符串,不存在的话就返回null*/
        document.write(str.replace("world","chizenglin")+`<br/>`);/*将参数一的字符串改为参数2的字符串*/
        document.write(str.toUpperCase()+`<br/>`);/*将给定字符串改为大写*/
        var s = str1.split(" ");/*将所给字符串按照所给参数进行转换为数组,这里的是空格*/
        document.write(s[1]+`<br/>`);
    </script>
    </body>
    </html>

    3、JS内置对象-Date日期对象

    3.1、Date对象

      日期对象用于处理日期和时间

    3.2、获得当日的日期

    3.3、常用方法

      getFullYear():获取年份

      getTime():获取毫秒

      setFullYear():设置具体的日期

      getDay():获取星期

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="time1.js"></script>
    </head>
    <body onload="startTime()">
    <div id="timetxt"></div>
    <script>
        var date = new Date();
        document.write(date+`<br/>`);
        document.write(date.getFullYear()+`<br/>`);/*获取当前的年份*/
        document.write(date.getTime()+`<br/>`);/*这个函数是获得从时间基数开始到现在过了多少秒。*/
        date.setFullYear(2010,1,1);/*设置日期和时间*/
        document.write(date+`<br/>`);
    
        function startTime(){
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById("timetxt").innerText = h + ":" + m+":"+s;
            t = setTimeout(function(){
                startTime();
            },500);/*通过设置函数自己调用自己,实现递归调用*/
    
            function checkTime(i){
                if(i<10){
                    i = "0" + i;
                }/*小时、分钟和秒会有个位数,将他们在前面加个0规范表达*/
                return i;
            }
        }
    </script>
    </body>
    </html>

    4、JS内置对象-Array数组对象

    4.1、Array对象:

      使用单独的变量名来存储一系列的值

    4.2、数组的创建:

      如var myArray = ["Hello","iwen","ime"];

    4.3、数组常用方法: 

      concat():合并数组

      sort():排序

      push():末尾追加元素

      reverse():数组元素翻转

     js代码测试:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="array.js"></script>
    </head>
    <body>
    <script>
        var a = ["hello","world"];
        var b = ["baidu","google"];
        var c = a.concat(b);
        document.write(`a:`+ a + `<br/>c:` + c);
        // 函数concat()并不会修改原来数组的值
    
        var str1 = ["4","2","1","5","4.5","-j","-k","-l","j","k","l","-3","-3.5","-6.5","-6","50","7*","abc","`acc"];
        var str11 = ["4","2","1","5","4.5","-j","-k","-l","-3","-3.5","-6.5","-6","50","7*","abc","`acc"];
    
        //我想多了,如果你都给定了是按照
        var str2 = [4,2,1,5,4.5,-3,-6,50,7];
    
        document.write(`<br/>`+str1.sort(function sortNum(a,b){
            return a-b;
            // 指定是按照数字大小比较排序了,就不要再搞一些花里胡哨了,什么数字和字母比较,
            // 给str1按大小比较,他按照什么规则比较大小我也看不懂,毕竟题目就有问题。不懂比较的规则了。。。。
    //    str1和str2的大小比较完全没有相似性。
        }));
        document.write(`<br/>`+str11.sort(function sortNum(a,b){
            return a-b;
        }));
    
        document.write(`<br/>`+str1.sort()+`<br/>`);
        //不指定排序方式,默认是按照字符编码比较的
        document.write(`<br/>`+str1+`<br/>`);/*sort函数是直接在数组内部进行的排序,此时str1已经被修改*/
    
        document.write(`<br/>`+str2.sort()+`<br/>`);
        //不指定排序方式,默认是按照字符编码比较的
    
        // alert("-2">"-3");  //返回了false
    
    </script>
    </body>
    </html>

    5、JS内置对象-Math对象

    5.1、math对象:

      执行常见的算数任务

    5.2、常用方法:

      round():四舍五入

      random():返回0~1之间的随机数

      max():返回最高值

      min():返回最小值

      abs():返回绝对值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        document.write(`Math.round(2.5)=`+Math.round(2.5)+`<br/>`);
        document.write(`Math.round(2.4)=`+Math.round(2.4)+`<br/>`);/*四舍五入*/
        document.write(`Math.random()=`+Math.random()+`<br/>`);/*取[0,1)之内的随机数*/
        document.write(`parseInt(Math.random()*10)=`+parseInt(Math.random()*10)+`<br/>`);/*0-9的随机数,parseInt是向下取整的*/
        document.write(`parseInt(3.99)=`+parseInt(3.99)+`<br/>`);
        document.write(`Math.max(10,20,4,1,2.5)=`+Math.max(10,20,4,1,2.5)+`<br/>`);
        document.write(`Math. max(10,20,4,1,2.5)=`+Math. max(10,20,4,1,2.5)+`<br/>`);
        document.write(`Math.abs(-10.4)=`+Math.abs(-10.4)+`<br/>`);
        document.write(`Math.abs(3.4)=`+Math.abs(3.4)+`<br/>`);
    </script>
    </body>
    </html>
  • 相关阅读:
    pandas 数据类型研究(三)数据类型object与category
    kaggle比赛实践M5-baseline研读
    pd.melt详解--列转行
    kaggle比赛实践M5-数据集介绍
    kaggle比赛实践M5-比赛介绍
    txNLP 335-374
    信息,熵,联合熵,条件熵,互信息(信息增益),交叉熵,相对熵(KL散度)
    框架SpringMVC笔记系列 二 传值
    项目总结笔记系列 Social Hub KT Session1
    读书笔记系列之java性能优化权威指南 一 第一章
  • 原文地址:https://www.cnblogs.com/foreverlin/p/10079333.html
Copyright © 2011-2022 走看看