JavaScript-6

1.预解析

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 /* 
 8                     1.我们js引擎运行js 分为两步：预解析 代码执行
 9                         -预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面
10                         -代码执行 按照代码书写的顺序从上往下执行
11                     2.预解析分为 变量预解析(变量提升)和函数预解析(函数提升)
12                         -变量提升 就是把所有的变量声明提升到当前作用域的最前面 不提升赋值操作
13                         -函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
14                  */
15                 //函数表达式 调用必须写在函数表达式的下面
16                 fun();
17                 function fun(){
18                     //var a = 9 ; c = 8 ; b = 9;
19                     //a作为局部变量，而b、c作为全局变量
20                     var a = b = c = 9;
21                     console.log(a);//9
22                     console.log(b);//9
23                     console.log(c);//9
24                 }
25                 console.log(b);//9
26                 console.log(c);//9
27                 console.log(a);//a is not defined
28             </script>
29     </head>
30     <body>
31     </body>
32 </html>

2.对象

对象的含义

在 JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事务都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

- 属性：事务的特征，在对象中用属性来表示（常用名词）
- 方法：事务的行为，在对象中用方法来表示（常用动词）
变量属性函数方法的区别

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //变量、属性、函数、方法的区别
 8                 //1.变量和属性的相同点 它们都是用来存储数据的
 9                 var num = 56;
10                 var obj = {
11                     age : 18,
12                     
13                 };
14                 //变量 单独声明并赋值 使用的时候直接写变量名 单独存在
15                 //属性 在对象里面不需要声明的 使用的时候必须是 对象.属性
16                 //2.函数和方法的相同点 都是实现某种功能 做某件事
17                 function fun(){
18                     alert("have fun~~");
19                 }
20                 var obj1 = {
21                     say:function(){
22                         alert("Hi");
23                     }
24                 }
25                 //函数是单独声明 并且调用的 函数名() 单独存在的
26                 //方法在对象里面 调用的时候 对象.方法()
27                 fun();
28                 obj1.say();
29             </script>
30     </head>
31     <body>
32     </body>
33 </html>

创建对象的方式
- 利用字面量创建对象：就是{ }里面包含了表达这个具体事物（对象）的属性和方法
- 利用new Object创建对象
- 利用构造函数创建对象

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //1.利用字面量创建对象{}
 8                 //var obj = {};    创建了一个空对象
 9                 var obj = {
10                     name:'张三丰',
11                     age:99,
12                     sayHi:function(){
13                         console.log("教你打太极");
14                     }
15                 };
16                 /* 
17                     ①{ }里面的属性或者方法我们采取键值对的形式    键 属性名 : 值 属性值 
18                     ②.多个属性或者方法中间用,隔开
19                     ③.方法冒号后面跟的是一个匿名函数
20                     ④.调用对象的属性 我们采取的是 对象名.属性名   .我们理解为"的"
21                     ⑤.调用属性海鸥一种方法对象名['属性名']
22                  */
23                 console.log(obj.name);
24                 console.log(obj['age']);
25                 //2.利用new Object创建对象
26                 var obj2 = new Object();//创建了一个空的对象
27                 obj2.name = '张无忌';
28                 obj2.age = 25;
29                 obj2.sex = "男";
30                 /* 
31                     ①我们利用等号 = 赋值的方法 添加对象的属性和方法
32                     ②每个属性和方法之间用;分号结束
33                  */
34                 console.log(obj2);
35                 //3.利用构造函数创建对象。
36                 /* 
37                     使用构造函数的原因
38                         -因为我们前两种创建对象的方式一次只能创建一个对象，某些情况下我们创建的对象
39                         里面的很多属性和方法是大量相同的，我们只能赋值。因此我们可以利用函数的方法
40                         重复这些代码，我们把这个函数称为构造函数。因为这个函数里面封装的是对象。
41                  */
42                 //利用构造函数创建四大天王的对象
43                 /* 
44                     function 构造函数名(){
45                         this.属性 = 值；
46                         this.方法 = function(){
47                             
48                         }
49                     }
50                     new 构造函数名
51                  */
52                 function Star(uname,age,sex){
53                     this.name = uname;
54                     this.age = age;
55                     this.sex = sex;
56                     
57                 }
58                 var ldh = new Star('刘德华',18,'男');//调用函数返回的是一个对象
59                 //1.构造函数名的首字母要大写
60                 //2.我们构造函数不需要return 就可以返回结果
61                 console.log(ldh);
62                 //3.我们调用构造函数必须使用new
63                 //4.我们只要new Star() 调用函数就创建了一个对象
64                 //5.我们的属性和方法前必须添加this
65             </script>
66     </head>
67     <body>
68     </body>
69 </html>

构造函数和对象的区别
- 对象是一个具体的事物
- 构造函数泛指的某一大类它类似于java语言里面的类
- 我们利用构造函数创建对象的过程也称为对象的实例化
new关键字的执行过程

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 /* 
 8                     1.new构造函数可以在内存中创建一个空的对象
 9                     2.this就会执行刚才创建的对象
10                     3.执行构造函数里面的代码 给这个空的对象那个添加属性和方法
11                     4.返回这个对象
12                  */
13             </script>
14     </head>
15     <body>
16     </body>
17 </html>

遍历对象

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //遍历对象
 8                 var obj = {
 9                     name:'周芷若',
10                     age:18,
11                     sex:'女'
12                 };
13                 for(var k in obj){
14                     console.log(k);//k 变量输出 得到的是属性名
15                     console.log(obj[k]);//obj[k]得到的是属性值
16                 }
17                 //我们使用for...in...里面的变量我们喜欢写k或者key
18             </script>
19     </head>
20     <body>
21     </body>
22 </html>

3.内置对象

- JavaScript中的对象分为3中：自定义对象、内置对象、浏览器对象
- 前两种是JS内容基础对象，属于ECMAScript；第三个属于我们JS独有的浏览器对象
- 内置对象就是JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是基本而必要的功能
- JavaScript提供了Math、String、Date等内置对象
Math对象

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //Math数学对象，不是一个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法
 8                 console.log(Math.PI);//Math的一个属性 圆周率
 9                 //1.绝对值方法
10                 console.log(Math.abs(1));
11                 console.log(Math.abs(-1));
12                 console.log(Math.abs('-1'));//隐式转换 会把字符型的'1'转换为数字型
13                 console.log(Math.abs('灭绝师太'));//NaN
14                 //2.取整方法
15                 console.log(Math.floor(1.9));//1  向下取整，小数点后面的数字全部舍去
16                 console.log(Math.ceil(1.000001));//2   向上取整，小数点后的数字全部收入
17                 console.log(Math.round(1.4));//1    四舍五入，就近取整 注意：其他数都是四舍五入 只有.5是往数字变大了的方向取
18                 console.log(Math.round(1.5));//2
19                 console.log(Math.round(-2.5));//-2
20                 console.log(Math.round(-2.6));//-3
21                 //3.随机数 random()
22                 /* 
23                     1.random()返回一个随机的小数[0,1)
24                     2.这个方法里面不跟参数
25                     3.得到两个数之间的随机整数，包括这两个整数
26                         function getRandom(){
27                             var rand = Math.floor(Math.random()*(max-min+1))+min
28                             return rand;
29                         }
30                  */
31             </script>
32     </head>
33     <body>
34     </body>
35 </html>

日期对象
- 日期对象的基本方法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //Date()日期对象 是一个构造函数 必须使用new来调用创建我们的日期对象
 8                 var arr = new Array();//创建了一个数组对象
 9                 var obj = new Object();//创建了一个对象实例
10                 //1.使用Date 如果没有参数 返回当前时间
11                 var date = new Date();
12                 console.log(date);
13                 //2.参数常用的写法 数字型 2019,10,01 或者是 字符串型 '2019-10-1 00:00:00'
14                 var date1 = new Date("2023-3-5 00:00:00");
15                 console.log(date1);
16                 //3.日期格式化 年月日
17                 console.log(date.getFullYear());//返回当前日期的年2022
18                 console.log(date.getMonth()+1);//月份 返回的月份小1月 记得月份加1
19                 console.log(date.getDate());//返回的是几号
20                 console.log(date.getDay());//周一返回的是1 周六返回的是六 但是周日返回的是0
21                 console.log(date.getHours());//获取当前时间的小时
22                 console.log(date.getMinutes())//分
23                 console.log(date.getSeconds());//秒
24             </script>
25     </head>
26     <body>
27     </body>
28 </html>

- 时间戳

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //Date对象是基于1970年1月1日(世界标准时间)起的毫秒数
 8                 //1.通过 valueOf()、getTime()
 9                 var date = new Date();
10                 //就是我们现在的时间距离1970-1-1的总的毫秒数
11                 console.log(date.valueOf());
12                 console.log(date.getTime());
13                 //2.简单的写法
14                 var date1 = +new Date();
15                 console.log(date1);
16                 //3.H5 新增的 获得总的毫秒数
17                 console.log(Date.now());
18             </script>
19     </head>
20     <body>
21     </body>
22 </html>

- 倒计时

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 /* 
 8                     倒计时
 9                     1.核心算法:输入的时间减去现在的时间就是剩余的时间，即倒计时
10                     2.使用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数 得到的就是剩余时间的毫秒数
11                     3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
12                     转换公式:
13                     day: d = parseInt(秒/60/60/24);    //计算天数
14                     hours: h = parseInt(秒/60/60%24);    //计算小时
15                     minute: m = parseInt(秒/60%60);    //计算分钟
16                     seconds: s = parseInt(秒%60);    //计算秒数
17                  */
18                 function countDown(time){
19                      var now = +new Date() / 1000;
20                      var inputTime = +new Date(time) / 1000;
21                      var times = now - inputTime;
22                      var d = parseInt(times/60/60/24);
23                      var h = parseInt(times/60/60%24);
24                      var m = parseInt(times/60%60);
25                      var s = parseInt(times%60);
26                      return d+'天'+h+"时"+m+'分'+s+'秒';
27                 }
28                 alert(countDown("2022-3-14 0:0:0"));
29             </script>
30     </head>
31     <body>
32     </body>
33 </html>

数组对象
- 创建数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //创建数组的两种方式
 8             //1.利用数组字面量
 9             var arr = [1,2,3];
10             console.log(arr[2]);
11             //2.利用new Array()
12             var arr1 = new Array();//创建了一个空的数组
13             arr1 = new Array(2);//这个2表示数组的长度为2 里面有两个空的数组元素
14             console.log(arr1);
15             arr1 = new Array(1,2,3);//等价于[1,2,3] 这样写表示里面有3个数组元素 分别是1,2,3
16             console.log(arr1);
17         </script>
18     </head>
19     <body>
20     </body>
21 </html>

- 检测是否为数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //检测是否为数组
 8             //1.instanceof 运算符 它可以用来检验是否为数组
 9             var arr = [1,2,3];
10             var str = "1,2,3";
11             console.log(arr instanceof Array);
12             console.log(str instanceof Array);
13             //2.Array.isArray(参数)    h5支持的方法 ie9以上版本支持
14             console.log(Array.isArray(arr));
15             console.log(Array.isArray(str));
16             
17         </script>
18     </head>
19     <body>
20     </body>
21 </html>

- 添加删除数组元素

方法名	说明	返回值
push(参数1......)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1 无参数修改原数组	返回它删除的元素的值
unshift(参数1......)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1无参数，修改原数组	并返回第一个元素的值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 /*  
 8                     1.push()在我们数组的末尾添加一个或多个数组元素
 9                         -push是可以给数组追加新的元素
10                         -push()参数直接写数组元素就可以了
11                         -push完毕后，返回的结果是新的数组的长度
12                         -原数组也会发生变化
13                 */
14                 var arr = [1,2,3];
15                 arr.push(4,'张无忌',true);
16                 console.log(arr);
17                 console.log(arr.push(4,'张无忌',true));
18                 /* 
19                     2.unshift()在我们数组的开头添加一个或多个数组元素
20                         -unshift()是可以给数组前面追加新的元素
21                         -unshift()参数直接写数组元素就可以了
22                         -unshift()完毕之后返回的结果是新数组的长度
23                         -原数组也会发生变化
24                  */
25                 arr.unshift(0);
26                 console.log(arr);
27                 /* 
28                     3.pop()它可以删除数组最后的一个元素
29                         -pop()是可以删除数组最后一个元素 记住一次只能删除一个元素
30                         -pop()没有参数
31                         -pop()完毕后 返回的结果是删除的那个元素
32                         -原数组也会发生变化
33                  */
34                 arr.pop();
35                 var result = arr.pop();
36                 console.log(arr);
37                 console.log(result);
38                 /* 
39                     4.shift()它可以删除数组的第一个元素
40                         -shift()是可以删除数组的第一个元素 记住一次只能删除一个元素
41                         -shift()没有参数
42                         -shift完毕之后，返回的结果是删除的那个元素
43                         -原数组也会发生变化
44                  */
45             </script>
46     </head>
47     <body>
48     </body>
49 </html>

- 数组排序

方法名	说明	是否修改原数组
reserve()	点到数组中元素的顺序，无参数	该方法会改变原来的数组，并返回新的数组
sort()	对数组的元素进行排序	该反方会改变原来的数组，返回新的数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //1.数组反转
 8             var arr = [1,2,3,4];
 9             arr.reverse();
10             console.log(arr);
11             //2.数组排序(冒泡排序)
12             var arr1 = [56,7,94,61];
13             arr1.sort(function(a,b){
14                 // return a-b;//升序
15                 return b-a;//降序
16             });
17             console.log(arr1);
18         </script>
19     </head>
20     <body>
21     </body>
22 </html>

- 数组索引方法

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组中的最后一个索引	如果存在返回索引号，如果不存在，则返回-1

- 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             //1.toString()把我们的数组转换为字符串
 8             var arr = [1,2,3];
 9             console.log(arr.toString());//1,2,3
10             //2.join(分隔符)
11             console.log(arr.join('ヾ(◍°∇°◍)ﾉﾞ'));
12         </script>
13     </head>
14     <body>
15     </body>
16 </html>

- 补充方法

方法名	说明	返回值
concat()	连接两个或多个数组，不影响原数组	返回一个新的数组
slice()	数组截取(begin,end)	返回被截获的新数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除项目的新数组，注意：这个会影响原数组

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             var arr = [1,2,3,4,5,6];
 8             var arr1 = ["(*^▽^*)","٩(๑>◡<๑)۶","⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄"];
 9             //concat()不会对原数组产生影响，返回组合后的一个新数组
10             var result = arr.concat(arr1);
11             console.log(result);
12             //slice()不会对原数组产生影响，返回的是被截取的数组
13             //注意后面的索引号的数组元素不会被截取，类似于左闭右开
14             result= arr.slice(0,2);
15             console.log(result);
16             //splice()会对原数组产生影响，将原数组分割为剩下的数组和被截取的数组
17             //剩下的作为原数组，被截取的部分则作为返回值
18             result = arr.splice(0,3);
19             console.log(arr);
20             console.log(result);
21         </script>
22     </head>
23     <body>
24     </body>
25 </html>

字符串对象
- 基本包装类型

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //基本包装类型
 8                 var str = "amusementPark";
 9                 console.log(str.length);
10                 //对象和复杂数据类型才有属性和方法 
11                 /* 
12                     基本包装类型:
13                         就是把简单数据类型包装成为了复杂数据类型
14                     创建过程:
15                         1.把简单数据类型包装为复杂数据类型
16                         2.把临时变量的值给str
17                         3.销毁这个临时变量
18                  */
19             </script>
20     </head>
21     <body>
22     </body>
23 </html>

- 字符串不可变

由于在定义字符串并赋值时，内存开辟了一定的空间存放这个值，当重新给字符串赋值时，系统又会开辟出新的空间对新值进行存放。所以如果频繁的更改字符串的值，就会导致系统内存空间被浪费，严重可导致系统迟缓。

- 根据字符串返回位置

字符串的所有方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新的字符

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //根据字符返回位置
 8                 //str.indexOf('要查找的字符',[起始的位置])
 9                 var str = "改革春风吹满地";
10                 console.log(str.indexOf("风"));
11             </script>
12     </head>
13     <body>
14     </body>
15 </html>

- 根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index 字符串的索引号)	str.charAt(0)
charCodeAt(index)	返回指定位置的字符的ASCII码(index 字符串的索引号)	str.charCodeAt(0)
str[index]	获取指定位置字符	HTML、IE8+支持和charAt()等效

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //1.charAt(index)根据位置返回字符
 8                 var str = "tomato";
 9                 console.log(str.charAt(2));//m
10                 //2.charCodeAt(index)返回相应位置的字符ASCII码
11                 //判断用户按下了哪个键
12                 console.log(str.charCodeAt(2));//109
13                 //3.str[index] H5新增的
14                 console.log(str[0]);
15             </script>
16     </head>
17     <body>
18     </body>
19 </html>

- 字符串操作方法

方法名	说明
concat(str1,str2......)	用于连接两个或多个字符串，拼接字符串，等效于+，+更实用
substr(start,length)	从start位置开始(索引号)，length取的个数，重点记这个
slice(start,end)	从start位置开始，截取到end位置，end取不到(它们都是索引号)
substring(start,end)	从start位置开始，截取到end位置，end取不到，基本和slice相同，但是不接受负值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //1.charAt(index)根据位置返回字符
 8                 var str = "tomato";
 9                 console.log(str.charAt(2));//m
10                 //2.charCodeAt(index)返回相应位置的字符ASCII码
11                 //判断用户按下了哪个键
12                 console.log(str.charCodeAt(2));//109
13                 //3.str[index] H5新增的
14                 console.log(str[0]);
15             </script>
16     </head>
17     <body>
18     </body>
19 </html>

- 其他方法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6             <script>
 7                 //1.替换字符串 replace('被替换的字符','替换为的字符')
 8                 //它只会替换第一个字符
 9                 var str = 'andy';
10                 console.log(str.replace('a','b'));
11                 //2.字符转换为数组 split('分隔符')
12                 var str2 = 'blue,purple,pink,gray';
13                 console.log(str2.split(','));
14                 //转换为大写
15                 console.log(str.toUpperCase());
16                 var str3 = 'LOVE';
17                 //转换为小写
18                 console.log(str3.toLowerCase());
19             </script>
20     </head>
21     <body>
22     </body>
23 </html>

- 练习题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script>
 7             var str = "abaasdffggghhjjkkgfddsssss3444343";
 8             console.log("字符串的长度为:"+str.length);
 9             console.log(str.charAt(0)+","+str.charAt(3)+","+str.charAt(5)+","+str.charAt(9));
10             console.log(str.indexOf('i')+","+str.indexOf('c')+","+str.indexOf('b'));
11             console.log(str.replace('g',22))
12             console.log(str.replace('ss','b'))
13             var result = str.slice(1,6);
14             console.log(result);
15             str = "abaasdffggghhjjkkgfddsssss3444343";
16             var obj = {};
17             for(var i = 0 ; i < str.length ; i++){
18                 var charts = str.charAt(i);
19                 if(obj[charts]){
20                     obj[charts]++;
21                 }else{
22                     obj[charts] = 1;
23                 }
24             }
25             var key = str[0];
26             for (var k in obj){
27                 if(obj[key] < obj[k]){
28                     key = k;
29                 }
30             }
31             console.log("出现次数最多的字符为:"+key+"出现的次数为"+obj[key]);
32         </script>
33     </head>
34     <body>
35     </body>
36 </html>