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>