003 对象

一：面向对象

1.说明

　　面向对象特性：封装，继承，多态

　　js不是面向对象的语言吗，但是可以模拟面向对象的思想

　　js是一门基于对象的语言

　　主要有三种创建方式。

2.第一种方式

　　调用系统的构造函数创建对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第一种方式
 8        var obj = new Object();
 9        obj.name = "tom";
10        obj.age = 19;
11        obj.sex = "F";
12        obj.eat=function () {
13            console.log("======")
14        }
15 
16        console.log(obj.age);
17        obj.eat();
18     </script>
19 </head>
20 <body>
21     <h1>CJ</h1>
22 </body>
23 </html>

3.一次性创建多个对象【工厂模式创建】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第二种方式
 8         function create() {
 9             var obj = new Object();
10             obj.name = "tom";
11             obj.age = 19;
12             obj.sex = "F";
13             obj.eat=function () {
14                 console.log("======"+this.name)
15             }
16             return obj;
17         }
18 
19         var pre = create();
20         pre.eat();
21     </script>
22 </head>
23 <body>
24     <h1>CJ</h1>
25 </body>
26 </html>

4.第二种方式，自定义构造函数

　　与函数有点不同，主要是首字母是大写。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第二种方式
 8         function Person() {
 9             this.name = "tom";
10             this.age = 19;
11             this.sex = "F";
12             this.eat=function () {
13                 console.log("======"+this.age);
14             }
15         }
16 
17         var pre = new Person();
18         pre.eat();
19     </script>
20 </head>
21 <body>
22     <h1>CJ</h1>
23 </body>
24 </html>

5.字面量的方式创建对象

　　缺陷：一次性对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //第三种方式
 8         var pre = {};
 9         pre.name="tom";
10         pre.age=19;
11         pre.eat=function () {
12             console.log("====")
13         }
14 
15         //优化
16         var pp={
17             name:"lily",
18             age:20,
19             eat:function () {
20                 console.log("-----")
21             }
22         };
23 
24 
25     </script>
26 </head>
27 <body>
28     <h1>CJ</h1>
29 </body>
30 </html>

二：操作

1.设置与获取属性

　　赋值有两种方式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //
 8         function Person(name) {
 9             this.name=name;
10         }
11         var person=new Person("tom");
12         console.log(person.name)
13 
14         //
15         person.name="aaa";
16         console.log(person.name)
17 
18         person["name"]="nnn";
19         console.log(person.name)
20 
21     </script>
22 </head>
23 <body>
24     <h1>CJ</h1>
25 </body>
26 </html>

　　效果：

三:Json

1.遍历

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //
 8        var json={
 9            "name":"tom",
10            "age":10
11        }
12 
13        for (var key in json){
14            console.log(key+"===="+json[key]);
15        }
16     </script>
17 </head>
18 <body>
19     <h1>CJ</h1>
20 </body>
21 </html>

　　效果：

四：内置对象

1.说明

　　js主要学习三种对象

　　内置对象----js自带的对象

　　自定义对象-----自定义的构造函数创建的对象

　　浏览器对象------bom时候讲解

2.内置对象

　　Math

　　Date

　　String

　　Array

　　Object

3.Math：自己查文档即可

　　Math 是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象。

　　百度：

　　进入：https://developer.mozilla.org/zh-CN/docs/Web

　　然后可以搜素Math，查看属性与方法。

4.Date常用的方法

　　程序一：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //Date
 8         var date = new Date();
 9         console.log(date.getFullYear());  //年
10         console.log(date.getMonth()+1); //月
11         console.log(date.getDate());  //日
12         console.log(date.getHours());  //小时
13         console.log(date.getMinutes()); //分钟
14         console.log(date.getSeconds());// 秒
15         console.log(date.getDay());    //星期
16     </script>
17 </head>
18 <body>
19     <h1>CJ</h1>
20 </body>
21 </html>

　　效果：

　　程序二：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //Date
 8         var date = new Date();
 9         console.log(date.toDateString());      //英文的日期
10         console.log(date.toLocaleDateString()); //数字格式的日期
11 
12         console.log(date.toTimeString());  //小时分钟秒
13         console.log(date.toLocaleTimeString()); //
14 
15         console.log(date.valueOf());//毫秒数
16     </script>
17 </head>
18 <body>
19     <h1>CJ</h1>
20 </body>
21 </html>

　　效果：

·　　程序三：获取毫秒数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //获取对象的原始值
 8         var date = new Date();
 9         console.log(date.valueOf());//毫秒数
10 
11         //H5方法
12         var now = Date.now();
13         console.log(now);
14 
15         //不支持H5
16         var now2 =+ new Date();
17         console.log(now2)
18     </script>
19 </head>
20 <body>
21     <h1>CJ</h1>
22 </body>
23 </html>

　　效果：

5.String

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         var str = "hello";
 8         console.log(str.length);  //长度
 9         console.log(str.charAt(1)); //取值
10 
11         console.log(str.concat(" world")); //拼接
12 
13         console.log(str.indexOf("e")); //返回字符串的位置
14 
15         console.log(str.slice(1,3)); //截取
16 
17         console.log(str.replace("h","mm")); //替换
18 
19         var arr ="hello,world".split(",");  //切分，返回array
20         console.log(arr[1]);
21 
22         console.log(str.substr(1,2));   //开始位置，个数
23         console.log(str.substring(1,2)); //开始索引，结束索引。不包括结束索引的值
24 
25         console.log("HELLO".toLocaleLowerCase()); //转小写
26         console.log("HELLO".toLowerCase());       //转小写
27 
28     </script>
29 </head>
30 <body>
31     <h1>CJ</h1>
32 </body>
33 </html>

　　效果：

6.Array

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         //创建数组
 8         var arr = new Array();//构造函数的方式
 9         var arr2 = [];//字面量的方式
10 
11         //是不是数组
12         console.log(arr2 instanceof Array);
13         console.log(Array.isArray(arr2));
14 
15         //用于测试每个元素的函数，返回boolean值
16         var arr3 = ["aaaa","bbbb","ccccc"];
17         var result = arr3.every(function (ele, index) {
18             return ele.length>4;
19         });
20         console.log(result);
21 
22         //过滤数组，返回一个新的数组
23         var arr4 = [1,6,3,6,3,7,8,0];
24         arr5 = arr4.filter(function (ele) {   //ele是每个元素
25             return ele>3;
26         });
27         console.log(arr5);
28 
29         //追加值，追加在最后，修改的是原数组的值
30         arr4.push(44);
31         console.log(arr4);
32 
33         //删除，删除最后一个,返回删掉的值，原数组的值被删掉了
34         var arr6 = arr4.pop();
35         console.log(arr6);
36         console.log(arr4);
37 
38         //删除第一个值，返回删掉的值
39         var arr7 = [0,2,4,9,3,5];
40         var arr8 = arr7.shift();
41         console.log(arr8);
42         console.log(arr7);
43 
44         //插入，在第一个位置上插入，返回数组的长度
45         var arr9 = [0,2,4,9,3,5];
46         var arr10 = arr9.unshift(8);
47         console.log(arr10);
48         console.log(arr9);
49 
50         //循环，但是低版本使用不了，可以参看MDN上的兼容问题
51         var arr = [0,2,4,9,3,5];
52         arr.forEach(function (ele, index, array) {
53             console.log(index+'---'+ele);
54         })
55 
56         //join
57         var str = arr.join("|");
58         console.log(str);
59 
60         //map,每个元素都要执行map中的函数，返回一个新的数组
61         var arr = [0,2,4,9,3,5];
62         var root =arr.map(function (ele) {
63             return ele+1;
64         });
65         console.log(root);
66 
67         //反转
68         var arr = [0,2,4,9,3,5];
69         var rr =arr.reverse();
70         console.log(rr);
71 
72         //排序，里面可以自定义自己的排序函数
73         var arr = [0,2,4,9,3,5];
74         var arr2 = arr.sort(function ff(a, b){
75             if(a>b){
76                 return 1;
77             }else if(a==b){
78                 return 0;
79             }else {
80                 return -1;
81             }
82         });
83         console.log(arr2);
84 
85         //插入与删除与替换,splice(开始的位置，删除的个数，替换的元素)。
86         var arr = [0,2,4,9,3,5];
87         arr.splice(2,0,99);  //在2的位置插入一个99，然后不删除项
88         console.log(arr);
89 
90         arr.splice(2,2);  //删除两项，去掉了99和4
91         console.log(arr);
92 
93     </script>
94 </head>
95 <body>
96     <h1>CJ</h1>
97 </body>
98 </html>

　　效果：