一：面向对象
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>
效果：
