devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web-3 JS_web3.js文档

作者：菜鸟追梦旅行 | 2024-04-18 09:03:02

赞

踩

web3.js文档

JavaScript

基本概念：js是一门客户端脚本语言，运行在客户端浏览器中的，每个浏览器都有一个js的解析引擎，JS是是一个弱类型的语言

脚本语言：不需要编译的，直接可以被浏览器解析运行的

功能：用来增强用户和html页面的交互，也可以用来控制html元素

现在的javaScript：ECMAScript+JavaScript特有的东西（DOM+COM）

JS在HTML中的用法


1，行内写法，将js代码写在html标签中
2，文档内部写法，将js代码写在一对<script> 标签中
3，外部引入js文件 ， 将js代码，单独写在一个文件中，使用<script>标签引入进

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. 	<head>
  5. 		<meta charset="utf-8" />
  6. 		<title></title>
  7. 	</head>
  8. 	<!-- 外部引入方式 -->
  9. 	<script src="js/test.js"></script>
  10. 	
  11. 	<!-- 行内引入方式 -->
  12. 	<body>
  13. 		<button onclick="javascript:alert('按钮被点击了')" >按钮</button>
  14. 	</body>
  15. 	<!-- 文档内容部编写方式 -->
  16. 	<script>
  17. 		alert("弹出弹框");
  18. 	</script>
  19. </html>
alert("你好啊，这是外部引入的js代码")

JS中的常用内容

注释 ： 和Java中一样

1.注释：单行注释：//

多行注释：/* */

输出内容：

1.弹出弹框 alert()

2.在页面上输出document write()

3.控制台输出 console.log()

4.通过dom展现到标签中 document.getElementBy("id"值).innerHTML='展示内容'

JS中的数据类型

1.原始数据类型

Number:整数、小数 、NaN(not a number)非数字

String：双引号或者单引号括起来的

Boolean:true 或者false

Null: null

Undefined:undefined(未被定义的)

2、引用数据类型：对象、数组、函数......

JS中的变量

变量的概念：程序运行的过程中，用来存储数据的一个名称，值可以发生改变的，本质上是内存的一个空间

Java是强类型语言，js是弱类型语言，声明变量的区别

强类型：开辟内存空间时，必须要指定一个类型，将来该空间只能存放指定的类型。

弱类型：开辟空间的时候，不指定存放的类型，可以存放任意的数据类型

语法： var 变量名 = 值；let 变量 = 值；const 变量名 = 值；

  1. var a = 10;
  2. 		a = "abc";
  3. 		a = true;
  4. 		a = undefined;
  5. 		b =  200;
  6. 		//Number类型
  7. 		var num  =100.1;
  8. 		var num2 =200;
  9. 		var num3 =NaN;
  10. 		console.log(num);
  11. 		console.log(typeof(num));
  12. 		//字符串类型
  13. 		var s1="abc";
  14. 		var s2='abc'
  15. 		var s3=s1+s2;
  16. 		console.log(s3);
  17. 		//boolean
  18. 		var b1 =true;
  19. 		//Null
  20. 		var s4=null;
  21. 		var s5=undefined;
  22. 		var s6;
  23. 		console.log(s4);
  24. 		console.log(s5);
  25. 		console.log(s6);
  26. 		
  27. 		function fun(){
  28. 			var name='jack';
  29. 			 age=18;
  30. 			 let gender='男';
  31. 			
  32. 		}
  33. 		console.log(name);//var定义的是全局变量，在整个script中都有效
  34. 		console.log(gender);//变量未声明 let定义的是局部变量（方法内生效，方法外无效）
  35. 		
  36. 		
  37. 		console.log(5/3);//js中除法会返回小数
  38. 		console.log(5%3);

JS中的运算符

赋值运算符：

赋值运算符 ： =
算数运算符 ： + - * / %
        js中除法会返回小数
比较运算符 ： > < >= <= == ===
        == : js中的==是判断值是否相同，不同类型，值相同也返回true
        === ： js中的=== 判断值和类型是否都相同，如果都相同，则返回true
        逻辑运算符 ：&&，|| ，！
                !取反，在js中可以完成数据隐式的转换

  1. 	console.log(5/3);//js中除法会返回小数
  2. 		console.log(5%3);
  3. 		var num4=100;
  4. 		var num5="100";
  5. 		console.log(num4 == num5);//true
  6. 		console.log(num4 === num5);//false

逻辑运算符 &&，||，！

js中的&&也具有短路效果，用法与java中的短路与&&一致，而 || 相对的也具有短路或的作用

!=取反，在js中可以完成数据隐式转换

  1. var num4 = -100;
  2. var num5 = "100";
  3. console.log(num4 == num5);//值相等
  4. console.log(num4 === num5); //false
  5. // console.log( 3 < 5 &num4++ < 200);
  6. //非o数字加上取反默认被当做布尔值中的true，o被当做false
  7. console.log ( !num4);
  8. //非空的字符串遇到!取反，也会被当做布尔值中的true,空字符是false
  9. console.log( !num5) ;

一元运算符： ++    --

++a,先将a+1，再将a参与表达式的运算

a++，先将a参与表达式运算，再将a+1

二元运算符： += ，-= ，*= ，/=

三元运算符

变量 =表达式 ？ 值1 ：值2

如果表达式返回true，则变量的最终结果取值1，

如果表达式返回false，则变量的最终结果取值2

JS中的流程控制语句

if -esle 和java中的完全相同

switch case语句和java中的完全相同

JS中的循环语句

for循环：和java中的完全相同

增强for循环

while循环 ：和java中的完全相同

do-while循环：和java中的完全相同

小练习：使用js写一个乘法口诀表

  1. 	<style>
  2. 			table{
  3. 				 border-collapse: collapse;/* 边框塌陷 */
  4. 			}
  5. 	
  6. 			td{
  7. 				border: 1px solid black;
  8. 				padding: 10px;
  9. 				
  10. 			}
  11. 		</style>
  12.  
  13.  
  14.  
  15.  
  16. <script>
  17. 		document.write("<table>");
  18. 		for(var i=1;i<10;i++)
  19. 		{
  20. 				document.write("<tr>");
  21. 			for(var j=1;j<=i;j++){
  22. 				document.write("<td>");
  23. 			document.write(j+"*"+i+"="+(i*j)+"&nbsp");
  24. 			document.write("</td>");
  25. 			}
  26. 		
  27. 		document.write("</tr>");
  28. 		}
  29. 		document.write("<table>");
  30. 	
  31. 	</script>

 JS中常用对象

JS的数组

JS中的数组对象，可以使用单独的变量名。存储多个不同类型的值，其实JS的数组就是一个容器，装了很多元素，JS数组中可以存放任意类型的数据

数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

Array 属性
属性 描述
constructor         返回创建 Array 对象原型的函数。
length         设置或返回数组中元素的数量。
prototype         允许您向数组添加属性和方法。
 

Array 方法

方法

描述

concat()

连接两个或多个数组，并返回已连接数组的副本。

copyWithin()

将数组中的数组元素复制到指定位置或从指定位置复制。

entries()

返回键/值对数组迭代对象。

every()

检查数组中的每个元素是否通过测试。

fill()

用静态值填充数组中的元素。

filter()

使用数组中通过测试的每个元素创建新数组。

find()

返回数组中第一个通过测试的元素的值。

findIndex()

返回数组中通过测试的第一个元素的索引。

forEach()

为每个数组元素调用函数。

from()

从对象创建数组。

includes()

检查数组是否包含指定的元素。

indexOf()

在数组中搜索元素并返回其位置。

isArray()

检查对象是否为数组。

join()

将数组的所有元素连接成一个字符串。

keys()

返回 Array Iteration 对象，包含原始数组的键.

lastIndexOf()

在数组中搜索元素，从末尾开始，并返回其位置。

map()

使用为每个数组元素调用函数的结果创建新数组。

pop()

删除数组的最后一个元素，并返回该元素。

push()

将新元素添加到数组的末尾，并返回新的长度。

reduce()

将数组的值减为单个值（从左到右）。

reduceRight()

将数组的值减为单个值（从右到左）。

reverse()

反转数组中元素的顺序。

shift()

删除数组的第一个元素，并返回该元素。

slice()

选择数组的一部分，并返回新数组。

some()

检查数组中的任何元素是否通过测试。

sort()

对数组的元素进行排序。

splice()

从数组中添加/删除元素。

toString()

将数组转换为字符串，并返回结果。

unshift()

将新元素添加到数组的开头，并返回新的长度。

valueOf()

返回数组的原始值。

JS常用重要方法（数组创建，遍历，排序等）

下面是JS数组的一些重要方法

  1. 	<script>
  2. 		//数组的定义
  3. 		//1.使用new关键字来创建数组对象
  4. 	var arr= new Array();
  5. 	var arr1=new Array(3);//创建长度为3的数组
  6. 	console.log(arr[0]);//undefined
  7. 	console.log(arr1[3]);//没有发生数组越界，仍然返回undefined
  8. 		//2.使用new的时候，直接给数组赋初始值
  9. 		var arr2=new Array("1",2,"3",4);
  10. 		console.log(arr2[0]);
  11. 	console.log(arr2[1]);
  12. 	console.log(arr2[2]);
  13. 	console.log(arr2[3]);
  14. 	console.log(arr2[4]);//undefined
  15. 		//3.直接使用中括号[]声明数组
  16. 		var arr3=["hello","world","java"];//java中使用的是大括号
  17. 		console.log(arr3[2]);//java
  18. 		
  19. 		//常见的数组操作
  20. 		//添加
  21. 		//1.直接通过下标来赋值
  22. 		arr[0]="hello";
  23. 		arr[1]="java";
  24. 		arr[2]="world"
  25. 		console.log(arr);
  26. 		//2.使用js Array中的push()方法(添加放在数组的末尾，放回新的数组的长度)
  27. 		var num=arr.push("oracle");
  28. 		console.log(num);//新的数组长度为4
  29. 		console.log(arr);
  30. 		//3.使用unshift()方法（添加放在数组的开头，放回新的数组的长度）
  31. 		 var num1=arr.unshift("mysql")
  32. 		 console.log(num1);//新的数组长度为5
  33. 		 console.log(arr);
  34. 		 //删除数组中的元素
  35. 		 //pop删除最后一个
  36. 		 var s1= arr.pop();
  37. 		 console.log(s1);//oracle
  38. 		 console.log(arr);
  39. 		 //shift删除第一个
  40. 		 var s2 =arr.shift();
  41. 		 console.log(s1);//oracle
  42. 		 console.log(arr);
  43. 		//splice可以同时删除、添加
  44. 		arr.splice(1,1,"orcale","mysql","spring");
  45. 	/* 	第一个数字1是开始操作的下标位置（arr[1]）,第二个数字是删除元素的个数
  46. 		而添加的位置就是从操作的位置开始,后面的元素就是删完元素后重新添加的元素 */
  47. 		console.log(arr);
  48. 		/* 从下标0元素开始操作，删掉两个元素，同时在其位置添加三个元素 */
  49. 		arr.splice(0,2,"nihao","zaijian","chuntian");
  50. 	
  51. 		console.log(arr);	/* 打印arr数组 */
  52. 	
  53. 		/*上面两次splice()方法执行后，遍历数组结果如下所示：
  54. 		 Array(5) [ "hello", "orcale", "mysql", "spring", "world" ]
  55. 		数组.html:55:11
  56. 		Array(6) [ "nihao", "zaijian", "chuntian", "mysql", "spring", "world" ] */
  57. 		
  58. 		
  59. 		//数组的遍历
  60. 		//1普通for循环
  61. 		for (var i = 0; i < arr.length; i++) {
  62. 			console.log(arr[i]);
  63. 		}
  64. 		console.log("---------------------------");
  65. 		//增强for循环
  66. 		for(var key in arr){/* var key 的var 可以加可以不加 */
  67. 			console.log(arr[key])
  68. 		}
  69. 		console.log("-------------------------");
  70. 		/*map方法遍历元素(map方法可以对数组里的元素进行一些人为操作，
  71. 		并将修改后的元素编程一个新数组，同时map方法还可以遍历数组)*/
  72. 		
  73. 		arr.map(function(value,index){
  74. 			/*数组的map方法中传入一个function方法(里面传入元素值value和数组下标index)*/
  75. 			console.log(index +"--" +value);
  76. 		})
  77. 		//其他常用方法
  78. 		//concat()方法：连接多个数组
  79. 		var newArr=arr.concat(arr1,arr2);
  80. 		/*拼接的数组不会在调用方法的数组基础上进行，
  81. 		而是拼接一个形成一个全新数组，所以要创建新的数组来接收*/
  82. 		
  83. 		/*filter()方法：为数组中的每个元素执行的函数。
  84. 		它应该返回一个真值以将元素保留在结果数组中，否则返回一个假值。*/
  85. 		var arr4=[10,15,20,16,9,11,42];
  86. 		//将arr4中大于15的元素
  87. 		var newArr2=arr4.filter(function(num){
  88. 			if (num>15){
  89. 				return num;
  90. 			}
  91. 		})
  92. 		console.log(newArr2);//16,20,42
  93. 		
  94. 		/* ps:这里可以讨论一下js中map方法和filter方法的区别 */
  95. 		
  96. 		//join方法
  97. 		
  98. 		var newArr3 =arr.join("@");
  99. 		console.log(newArr3);//nihao@zaijian@chuntian@mysql@spring@world
  100. 		
  101. 		//sort()
  102. 		var arr5=[10,25,32,4,54,24,52,9,85]
  103. 		arr5.sort();//默认排序是按照每个元素的第一位的大小来排序，
  104. 					//如果第一位数值相同则比较第二位
  105. 		console.log(arr5);//Array(9) [ 10, 24, 25, 32, 4, 52, 54, 85, 9 ]
  106.  
  107.  
  108. 		arr5.sort(function(a,b){
  109. 			return a-b;//这里如果改成return b-a;则按照从大到小进行排序
  110. 			//这里function(a,b)里面的方法进行的大概意思是将数组元素里的值进行前后
  111. 			//大小比较，如果前一个值大于后一个值，则两值进行交换
  112. 			
  113. 		})
  114. 		console.log(arr5);//Array(9) [ 4, 9, 10, 24, 25, 32, 52, 54, 85 ]
  115. 						//数组从小到大进行排序
  116. 		
  117. 	</script>

JS中类型及转换方法

数字类型方法

toString()将数字作为字符串返回。

toFixed() 返回带小数位数的数字。

类型相关转换

Number()转换数值，String()转换字符串，Boolean()转换布尔值

parseInt()解析字符串并返回整数。

parseFloat() 解析字符串并返回浮点数。

  1. var num = 10.0254152;
  2. 		console.log(num);
  3. 		var s = num.toString();
  4. 		console.log(s);
  5. 		
  6. 		
  7. 		//保留小数位
  8. 		console.log(num.toFixed());
  9. 		console.log(num.toFixed(2));
  10. 		console.log(num.toFixed(4));
  11. 		console.log(num.toFixed(6));
  12. 		
  13. 		//字符串转数字
  14. 		var str = "100";
  15. 		
  16. 		var n1 = Number(str);
  17. 		console.log(n1 + "--" + typeof(n1));
  18. 		
  19. 		console.log(parseInt("10"));
  20. 		console.log(parseInt("10.25"));
  21. 		console.log(parseInt("10 20 30"));
  22. 		console.log(parseInt("10abc"));
  23. 		
  24. 		
  25. 		console.log(parseFloat("10"));
  26. 		console.log(parseFloat("10.255165"));
  27. 		console.log(parseFloat("10.25 20 30"));
  28. 		console.log(parseFloat("10.12abc"));

JS中的字符串


JavaScript 字符串方法和属性
属性
constructor 返回字符串的构造函数。
length 返回字符串中的字符数。
prototype 允许您向对象添加属性和方法。

方法                            描述
charAt()                  返回指定位置处的字符。
charCodeAt()         返回指定位置处字符编码。
codePointAt()         返回字符串中索引（位置）处的 Unicode 值。
concat()                 返回两个或多个连接的字符串。
endsWith()             返回字符串是否以指定值结尾。
fromCharCode()   将 Unicode 值作为字符返回。
includes()                 返回字符串是否包含指定值。
indexOf()                 返回值在字符串中第一次出现的位置。
lastIndexOf()         返回值在字符串中最后一次出现的位置。
localeCompare()      使用基于本地的顺序来比较字符串。
match()                  在字符串中搜索值或正则表达式，并返回匹配项。
repeat()                 返回拥有多个字符串副本的新字符串。
replace()                 在字符串中搜索值或正则表达式，并返回替换值的字符串。
search()                 检索字符串中与正则表达式匹配的子串。
slice()                   提取字符串的一部分并返回新字符串。
split()                     将字符串拆分为子字符串数组。
startsWith()            检查字符串是否以指定字符开头。
substr()                 从字符串中抽取子串，该方法是 substring() 的变种。
substring()                 从字符串中抽取子串。
toLocaleLowerCase() 使用主机的语言环境返回转换为小写字母的字符串。
toLocaleUpperCase() 使用主机的语言环境返回转换为大写字母的字符串。
toLowerCase()         返回转换为小写字母的字符串。
toString()                 将字符串或字符串对象作为字符串返回。
toUpperCase()         返回转换为大写字母的字符串。
trim()                         返回删除了空格的字符串。
trimEnd()                 返回从末尾删除空格的字符串。
trimStart()                 返回从开头删除空格的字符串。
valueOf()                 返回字符串或字符串对象的原始值。

  1. <script>
  2. 		var s1 = "helloworld";
  3. 		var s2 = "java";
  4. 		
  5. 		console.log(s1.charAt(4)); // o
  6. 		
  7. 		var s3 = s1.concat(s2);
  8. 		console.log(s3);
  9. 		
  10. 		console.log(s1.endsWith("D"));
  11. 		
  12. 		console.log(s1.indexOf("l"));
  13. 		console.log(s1.lastIndexOf("l"));
  14. 		
  15. 		console.log(s1.length);
  16. 		
  17. 		var s4 = s1.replace("l","x");
  18. 		console.log(s4);
  19. 		console.log(s1);
  20. 		
  21. 		var s5 = s1.split("d");
  22. 		console.log(s5);
  23. 		
  24. 		var s6 = s1.substring(1,3); //从第1位截取，截取到第3个
  25. 		console.log(s6);
  26. 		var s6 = s1.substr(1,3);  //从第1位截取，截取3个
  27. 		console.log(s6);
  28. 		
  29. 		
  30. 	</script>

练习
//求 大字符串中"aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava"
//中小字符串java出现的次数

  1. //1,方法一
  2. var str1 = "aaglsgjavafekwegjavakjkwaegnjavafwaegwegjava";
  3. var str2 = "java";
  4.  
  5. var arr = str1.split(str2);
  6. console.log(arr.length-1);
  7.  
  8. //2,方法二
  9. var count = 0;
  10. var flag = true;
  11. while(flag){
  12.   var str3 = str1.replace(str2,"");
  13.   if(str1 != str3){
  14.     count++;
  15.     // console.log(count);
  16.     str1 = str3;
  17.   }else{
  18.     flag = false;
  19.   }
  20. }
  21. console.log(count);

JS正则表达式


RegExp 对象
正则表达式是一种字符模式。
该模式用于对文本进行模式匹配的“搜索和替换”功能。

修饰符
修饰符用于执行不区分大小写和全局的搜索：

修饰符 描述
g 执行全局匹配（查找所有匹配而不是在第一个匹配后停止）。
i 执行不区分大小写的匹配。
m 执行多行匹配。
方括号
方括号用于查找某个范围内的字符：
表达式 描述
[abc] 查找括号之间的abc字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[^0-9] 查找任何不在括号内的字符（任何非数字）。
(x|y) 查找任何指定的选项。

元字符
元字符是具有特殊含义的字符：
元字符 描述
. 查找单个字符，除了换行符或行终止符。
\w 查找单词字符。
\d 查找数字。

量词
量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何以 n 结尾的字符串。
^n 匹配任何以 n 开头的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法
方法 描述
exec() 测试字符串中的匹配项。返回第一个匹配项。
test() 测试字符串中的匹配项。返回 true 或 false。
toString() 返回正则表达式的字符串值。

正则表达式小练习

  1. <script>
  2. 		//匹配电话
  3. 		var tel = "我的电话是:13333338888";
  4. 		var reg = /1[3-9][0-9]{9}/;
  5. 		
  6. 		console.log(reg.exec(tel));
  7. 		console.log(reg.test(tel));
  8. 		
  9. 		console.log(tel.match(reg));
  10. 		
  11. 		//匹配内容
  12. 		var s1 = "gagewgweaAAWEGaa";
  13. 		var reg = /[a]/gi;
  14. 		console.log(s1.match(reg));
  15. 		
  16. 		//匹配日期格式
  17. 		var str1 = "1999-11-10";
  18. 		var reg2 = /^[\d]{4}-[\d]{1,2}-[\d]{1,2}$/;
  19. 		console.log(reg2.test(str1));
  20. 		
  21. 		//写一个邮箱的正则表达式格式
  22. 		// 12314@qq.com    gaweg1241@163.com  waggw3e12@yahool.com.cn
  23. 		
  24. 		var reg3 = /[\w]{2,16}@[\w]{2,10}\.[\w]{2,3}/;
  25. 		var str2 = "12314@qq.com";
  26. 		console.log(reg3.exec(str2));
  27. 	</script>

JS中的对象创建

JS中的对象Object,是以键值对的形式存储属性的集合，每个属性都是自己定义的一个名称，以及名称对应的值。

创建对象的方式：

1，通过对象的构造器来定义

        构造器就是一个构造函数

        函数的定义方法：function(参数){ }

2，通过new Object()来定义

3，通过{}来定义

  1. <script>
  2. 		//1,创建对象，es5中，先去创建对象的构造函数
  3. 		var User = function(userid,username){
  4. 			this.userid = userid;
  5. 			this.username = username;
  6. 		}
  7. 		//通过new关键字结合对象的构造函数，完成对象的创建及初始化
  8. 		var user1 = new User(1001,"jack");
  9. 		console.log(user1.userid);
  10. 		console.log(user1.username);
  11. 		var user2 = new User(1002,"tom");
  12. 		console.log(user2.userid);
  13. 		console.log(user2.username);
  14. 		
  15. 		//2,通过new关键字结合Object对象，创建空对象
  16. 		var user3 = new Object();
  17. 		user3.id = 1003;
  18. 		user3.name = 'lucy';
  19. 		console.log(user3.id);
  20. 		console.log(user3.name);
  21. 		//3, js中可以通过 {} 来直接声明对象，声明的时候进行赋值
  22. 		var user4 = {id:1004,name:"tonny"};
  23. 		console.log(user4.id);
  24. 		console.log(user4.name);
  25. 		
  26. 		var user5 = {};
  27. 		user5.id = 1005;
  28. 		user5.name = 'jandy';
  29. 		console.log(user5.id);
  30. 		console.log(user5.name);
  31. 	</script>

es6中的面向对象


将来前端开发的过程中，大部分情况下，不需要去通过定义类的方式来完成开发，但是很多时候，我们会去使用别人定义好的类(很多的前端框架中，都有这些定义)

  1. <script>
  2. class Animal{
  3. 			//构造函数
  4. 			constructor(name,age){
  5. 				this.name = name;
  6. 				this.age = age;
  7. 			}
  8. 			say(){
  9. 				console.log("我的名字是"+ this.name
  10. 					+",年龄是" + this.age);
  11. 			}
  12. 		}
  13. 		
  14. 		class Dog extends Animal{
  15. 			constructor(name,age,gender){
  16. 				super(name,age);
  17. 				this.gender = gender;
  18. 			}
  19. 		}
  20. 		var dog = new Dog("旺财",2,"母");
  21. 		dog.say();
  22. 		console.log(dog.gender);
  23. </script>

JS中对象的属性和方法

 js中的属性可以动态的添加

  1. <script>
  2. 		//1.创建一个对象的构造函数,使用new关键字
  3. 		var User =function(userid,username){
  4. 			this.userid=userid;
  5. 			this.username=username;
  6. 			
  7. 		}
  8. 		var user1=new User(1001,"李华");
  9. 		console.log(user1.userid);
  10. 		console.log(user1.username);
  11. 		
  12. 		var user2=new User(1002,"jack");
  13. 		console.log(user2.userid);
  14. 		console.log(user2.username);
  15. 		/* 写法二 */
  16. 		function User(userid,username){
  17. 			this.userid=userid;
  18. 			this.username=username;
  19. 		}
  20. 		//2.通过new关键字，结合object创建空对象
  21. 		var user3=new Object();
  22. 		user3.id=1003;
  23. 		user3.name="lucy";
  24. 		console.log(user3.id);
  25. 		console.log(user3.name);
  26. 		//3.js中可以通过{}来直接声明对象，声明的时候进行赋值
  27. 		var user4={id:1004,name:"tonny"};
  28. 		console.log(user4.id);
  29. 		console.log(user4.name);
  30. 		
  31. 		
  32. 		var user5={};
  33. 		user5.id=1005;
  34. 		user5.name="李四";
  35. 		console.log(user5.id);
  36. 		console.log(user5.name);
  37. 		
  38. 		//对象中的属性
  39. 		console.log(user1.userage);
  40. 		//添加属性
  41. 		//通过对象.属性=值 和 对象[属性名] -值
  42. 		 user1.userage= 20;
  43. 		 user1["gender"]="男";
  44. 		 console.log(user1);
  45. 		 //Object { userid: 1001, username: "李华", userage: 20, gender:"男"}
  46. 		 //删除属性
  47. 		 
  48. 		 delete user1.userage;
  49. 		 console.log(user1);//Object { userid: 1001, username: "李华", gender: "男" }
  50. 		 //Object { userid: 1001, username: "李华", gender: "男" }
  51. 		 //js中的每一个对象都是独立，只要是单独给某个对象添加属性，都不会影响到其他的对象。
  52. 		 //但是统一由同一个构造器创建的多个对象因为构造器相同，
  53. 		 //因此如果创建构造器发生变化，他们的属性会发生变化
  54. 		 
  55. 		 //对象中方法的创建
  56. 		 //对象的方法也可以动态的添加、删除、方法只能通过对象.方法名来创建
  57. 		 user1.product = [];
  58. 		 user1.chooseProduct= function(product){
  59. 			 user1.product.push(product);
  60. 		 }
  61. 		
  62. 		//调用方法
  63. 		user1.chooseProduct("电脑");
  64. 		user1.chooseProduct("手机");
  65. 		user1.chooseProduct("空调");
  66. 		console.log(user1);
  67. 		
  68. 		//对象的遍历
  69. 		//Object.values()、JSON.stringify()
  70. 		var userArr=Object.values(user1);
  71. 		console.log(userArr);//Array(5) [ 1001, "李华", "男", (3) […], chooseProduct(product) ]
  72. 		var userJSON=JSON.stringify(user1);
  73. 		console.log(userJSON);
  74. 		//{"userid":1001,"username":"李华","gender":"男","product":["电脑","手机","空调"]}
  75. 		//json键值对，一个键对应一个值
  76. 		
  77. 	</script>

        js对象方法相应小练习

  1. <script>
  2. 		//练习
  3. 		//创建一个Student对象
  4. 		
  5. 		var Student =function(sname,sage){
  6. 			this.sname=sname;
  7. 			this.sage=sage;
  8. 		}
  9. 		var stu1=new Student("张三",18);
  10. 		var stu2=new Student("李四",20);
  11. 		//动态添加一个班级属性
  12. 		stu1.sclass="终极一班";
  13. 		stu1.classname=[];
  14. 		//添加一个选课方法，将所有的课程加入到课程classname中
  15. 		stu1.chooseClass=function(classname){
  16. 			stu1.classname.push(classname);
  17. 			
  18. 		}
  19. 		stu1.chooseClass("语文");
  20. 		stu1.chooseClass("数学");
  21. 		stu1.chooseClass("英语");
  22. 		console.log(stu1);
  23. 		//创建一个遍历学生对象信息的方法
  24. 		var stuJSONInfo=JSON.stringify(stu1)
  25. 		console.log(stuJSONInfo);
  26. 	</script>

 JS中的函数创建

js中的函数主要由：函数名、参数、函数体、返回值这四个部分组成

语法：

function  函数名(参数){

        函数体;

        return 返回值;

}

  1. <script>
  2. 		//函数的声明和调用
  3. 		//1声明的时候指定函数名称
  4. 		function fun1(){
  5. 			console.log("fun1函数被执行了");
  6. 			
  7. 		}
  8. 		//调用函数fun1
  9. 		fun1();
  10. 		//2.构造一个匿名函数，赋值给一个变量（变量的名称就会变成方法的名称）
  11. 		var fun2= function(){
  12. 			fun1();
  13. 			console.log("fun2函数被执行了")
  14. 		}
  15. 		fun2();
  16. 		//3.通过new关键字，调用Function()构造函数
  17. 		var fun3 =new Function(console.log("函数fun3被调用了"));
  18. </script>

函数提升现象（重点，面试可能会问）

  1.  
  2. 	<script>
  3. //函数声明的提升现象
  4. 		//1.
  5. 		 fun =function(x,y){
  6. 			return x-y;
  7. 		}
  8. 		/* 函数声明的提升
  9. 		使用function声明的函数,提升优先级比变里提升要高不会被变量声明覆盖,但是会被变量的赋值覆盖 */
  10. 		//2.
  11. 		function fun(x,y){
  12. 			return x+y;
  13. 		}
  14. 	/* 	为什么返回-1，因为2处声明的函数提升到了最顶部，之后又被1处的函数赋值所覆盖，
  15. 		所以,这里执行的fun其实是1处的函数 */
  16. 		
  17. 		var num =fun(1,2);//-1
  18. 		console.log(num);
  19. 		
  20. 		
  21. 	</script>

执行结果如下

JS中的函数是一个对象


通过typeof()方法测试发现，函数是一个function对象
所以，js中函数也存在一些属性和方法
属性 ：
arguments.length 可以返回函数被调用的时候，传入的参数的个数
方法：
toString() 返回函数的字符串格式

  1. function fun4(a,b){
  2. 			return arguments.length;
  3. 		}
  4. 		var num = fun4(1,2);
  5. 		console.log(num);
  6. 		//toString()方法
  7. 		console.log(fun4.toString());

es6中的函数

箭头函数的用法（非常非常重要）

箭头函数就是允许使用更加简单的写法来表达函数表达式，使用箭头函数的时候可以不写function关键字、return、花括号

  1. <script>
  2. 		//es5
  3. 		var f1=function(a,b){
  4. 			return a+b;
  5. 		}
  6. 		var n =f1(1,2);
  7. 		//es6 箭头函数（让函数更加简洁，并没有其他实际的意义）
  8. 		//使用箭头函数不会发生函数提升问题
  9. 		
  10. 		
  11. 		const f2 = (a,b) => a+b;//const一般修饰常量，因为函数名一般不会被改变，
  12. 		而且使用const不会影响方法功能
  13. 		console.log(f1(1,2));//3
  14. 		console.log(f2(1,2));//3
  15. 		
  16. 	</script>

JS函数中的参数

        js的函数的参数在函数声明的时候，并没有指定类型，参数可以传入任意类型

  1. //无参函数
  2. 		function f3(){
  3. 			console.log("abc");
  4. 		}
  5. 		//有参函数
  6. 		function f4(a,b){
  7. 			console.log(a+b);
  8. 			
  9. 		}
  10. console.log("======================")
  11. 		//不定长的参数
  12. 		function f5(...param){
  13. 			for (var i = 0; i < param.length; i++) {
  14. 				console.log(param[i]);
  15. 			}
  16. 			
  17. 		}
  18. 		f5(1,2,3,5,6,7);

参数的默认值设置

将来如果调用函数时，用户没有指定值，方法则会赋予一开始设定的默认值，如果给予了参数值，则会将原先的默认值覆盖。

  1. //函数的默认值
  2. 		function f6(name,age){
  3. 			name= name ||"jack";
  4. 			age =age || 18;
  5. 			console.log(name+"--"+age);
  6. 		}
  7. 		f6();
  8. 		f6("tom");
  9. 		f6("lucy",20);
  10. 		f6(30);

JS函数中的arguments对象

如果函数中调用的参数太多了，可以使用arguments来获取某些参数

  1. //写一个函数，可以找到最小值,调用函数的时候可以传入一些数值
  2. 		//(不指定不定长参数，而是通过arguments对象获取参数)
  3. 		function findMin(){
  4. 			var min =0;
  5. 			for (var i = 0; i < arguments.length; i++) {
  6. 				if(arguments[i]<min){
  7. 					min=arguments[i];
  8. 				}
  9. 			}
  10. 			return min;
  11. 		}
  12. 		var n =findMin(1,25,5.41,557,-9);
  13. 		console.log(n);//-9

JS中this关键字的用法

js中的this，表示拥有当前函数的对象
1、this表示全局对象
        当我们声明的函数的时候，没有将函数声明在对象中，那么函数中的this，就表示当前的窗口对象，也称为全局对象，在浏览器中，全局对象，指的就是window对象
2，this表示当前对象
        如果将函数声明在对象中的时候，函数中的对象，就表示函数的所属对象

  1.  
  2. 		var user={
  3. 			name:"jack",
  4. 			age:20,
  5. 			say:()=>{return this;}, //this使用在箭头函数中，指的是全局对象，
  6. 			//可以把箭头函数当成一个单独的函数，没有特指的对象，找不到对象因此指向全局对象：Window(窗口)
  7. 			show: function(){
  8. 				return this;//而this使用在普通function函数中，指的就是当前调用该show方法的对象也就是user
  9. 				//属于object对象
  10. 			}
  11. 		}
  12. 		var j=user.say();
  13. 		var k=user.show();
  14. 		console.log(j);//指向windo
  15. 		console.log(k);//指向user(隶属于Object)

JS中函数参数的传值方式

  1. <script>
  2. 		//传值调用
  3. 		function fun1(s){
  4. 			s="hello";
  5. 		}
  6. 		var s1="你好";
  7. 		fun1(s1);
  8. 		console.log(s1);//你好
  9. 		
  10. 		//传底子调用
  11. 		function fun2(user){
  12. 			user.name="李四";
  13. 			
  14. 		}
  15. 		var stu ={name:"张三"};
  16. 		fun2(stu);
  17. 		console.log(stu.name);//李四
  18. 		
  19. 		//传函数调用，根据传入的函数完成实际调用
  20. 			//将函数作为参数传入到另一个参数中做运算
  21. 		function add(a,b){
  22. 			return a+b;
  23. 		}
  24. 		function sub(a,b){
  25. 			return a-b;
  26. 		}
  27. 		function operate(a,b,fun){
  28. 			return fun(a,b);
  29. 		}
  30. 		var n=operate(10,20,add);
  31. 		console.log(n);//30
  32. 	</script>

 JS中的比值函数

        用来比较两个数值的大小的，返回值是一个正数、负数、0，返回值是负数，从小到大，正数，从大到小

function（a,b）{

return a-b;

}

JS中内置函数（对象）

数学对象Math

基本和java中的math类相同

math对象方法

方法 描述

abs(x) 返回x的绝对值

ceil(x) 对x进行上舍入

floor(x) 对x进行下舍入

max(x,y,z...n) 返回最高值

min(x,y,z...n)返回最低值

pow(x,y) 返回x的y次幂

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

round(x)把x四舍五入为最接近的整数

日期对象Date

创建date对象

date对象由新的date（）构造函数创建。

有4种方法创建新的日期对象：

new Date（）

new Date(year,month,day,hours,minutes,seconds,milliseconds)

new Date(milliseconds)

new Date(date string)

日期获取方法
获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：
方法 描述
getDate() 以数值返回天（1-31）
getDay() 以数值获取周名（0-6）
getFullYear() 获取四位的年（yyyy）
getHours() 获取小时（0-23）
getMilliseconds() 获取毫秒（0-999）
getMinutes() 获取分（0-59）
getMonth() 获取月（0-11）
getSeconds() 获取秒（0-59）
getTime() 获取时间（从 1970 年 1 月 1 日至今）

  1. <script>
  2. 			var date = new Date();
  3. 			console.log(date.getFullYear());
  4. 			console.log(date.getMonth()+1);
  5. 			console.log(date.getDate());
  6. 			console.log(date.getDay());
  7. 			console.log(date.getHours());
  8. 			console.log(date.getMinutes());
  9. 			console.log(date.getSeconds());
  10. 			console.log(date.getTime());
  11. 		</script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/445067
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号