JavaScript高级篇
文章目录
一、arguments属性
-
1.JavaScript中，每一个函数都包含了一个arguments属性
-
2.arguments属性是一个数组
-
3.在函数调用时，将实参输入到函数的arguments中，再由arguments将数据传递给形参
-
4.arguments属性存在，可以将javascript中函数在调用时传递实参与形参进行匹配，增加
函数调用灵活性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> function fun2() { window.alert("fun2在运行时得到实参个数为：" + arguments.length); for (var i = 0; i < arguments.length; i++) { window.alert("第 " + (i + 1) + " 个实参的值为：" + arguments[i] + " \n它的数据类型为：" + (typeof arguments[i])) } } fun2(123, "str", new Date); </script> </head> <body> </body> </html>
二、function类型对象
-
1.介绍：
- 1.function是java中的一种高级数据类型
- 2.一个function类型对象用于管理一个具体函数
- JavaScript中functio类型相当于Java中methon类型
-
2.function类型对象声明方式：
- 1.标准声明方式
- 2.匿名声明方式
-
3.function类型对象声明方式------标准声明方式
function 函数对象名( ){
命令：
}
-
4.function类型对象声明方式------匿名声明方式
var 函数对象名 = function （参数1，参数2）{命令1; 命令2;}
-
5.function类型对象的创建时机
//浏览器在加载<script>标签的时候，共加载两次 第一次加载，将<script>标签所有以标准形式声明函数对象进行创建 第二次加载，将<script>标签所有命令行按照自上而下的顺序来执行验证代码：
<script type="text/javascript"> //1.标准声明函数对象方式 /** * 在函数声明之前调用和之后调用都可以执行 */ fun1();//命令行 function fun1(){ window.alert("fun1 is run..."); } fun1();//命令行 //2、匿名声明函数对象方式 //fun2（） 在声明前使用无法使用，因为在第一次扫描的时候类未创建 var fun2 = function (){ window.alert("fun2 is run...");} //识别为命令行 在第二次扫描的时候创建 fun2();//可以使用 </script>
三、局部变量与全局变量
-
局部变量：
-
1.定义：在函数执行体内，通过var修饰符声明的变量
function fun1() {
var name = “mike” ; //局部变量
}
-
2.特征：局部变量只能在当前函数执行体使用，不能在函数执行体外使用
-
-
全局变量：
-
定义
- 1.全局变量可以在当前HTML文件中所有的函数中使用
- 2.全局变量被声明时，自动分配给window对象作为属性
-
声明全局变量：
- 第一种方式：直接在script标签下，通过var声明的变量，就是全局变量
- 第二种方式：在函数执行体内，没有通过var修饰符修饰的变量也是全局变量
测试代码
<script type="text/javascript"> //全局变量 var name = "mike"; var age = 23; function fun1(){ var sex = "man" ; //sex属于局部变量 home = "江苏"; //home属于全局变量，当这行命令执行时 它相当于：window。home = ”江苏“ ，需要调用函数，才会生成 window.alert("fun1"+name); } fun1(); window.alert(window.name+window.age); window.alert(window.home); </script>
-
四、object类型对象特征
-
1.【定义】：在JavaScript认为在所有通过【构造函数】生成对象其数据类型都是object类型
-
2.【特征】：object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可
移除属性和方法
-
3.【属性的维护】：
-
第一种维护方案：
-
添加属性：
object 对象.新属性名 = 值;
-
添加函数：
object 对象.新函数对象名 = function( ) { }；
-
-
第二种维护方案：
-
添加属性：
object对象[“新属性名”] = 值；
-
添加函数：
object对象[“新函数对象名”]=function( ){ } ;
-
移除对象属性和方法
delete object.属性名；
delete object.函数名；
测试实例：
<script type="text/javascript"> //第一种方式 var obj1 = new Object();//Javascript内置构造函数 //新增属性 obj1.sid = 1; obj1.name = "hsy"; obj1.sayHello = function (xname){window.alert(this.name+"与"+xname+"说hello");} obj1.sayHello("lvhao"); //移除dname属性 delete obj1.name; //再次调用将显示未定义 undefined window.alert(obj1.name); </script> -
-
五、自定义构造函数
-
1.命令：
-
function 函数对象名（）{
}
-
-
2.调用
- var object类型对象 = new 函数对象名 （）；
-
3.普通函数与构造函数的区分
-
1.函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分
-
2.判断普通函数： var num = 函数对象名（）；
-
3.判读构造函数： var num = new 函数对象名（）
-
4.返回值： 普通函数运行后需要通过return将执行结果返回
构造函数运行后，直接返回一个object类型对象，此时函数return相当于无效
测试：
<script type="text/javascript"> function fun1(){ return "abc"; } //将fun1作为普通函数进行调用 var num1 = fun1(); window.alert("num1= "+num1+" 数据类型为： "+typeof num1); //num1= abc 数据类型为： string //将fun1作为构造函数进行调用 var num2 = new fun1();//函数作为构造函数进行调用时，内部return直接失效 window.alert("num2= "+num2+" 数据类型为： "+typeof num2); //num2= [object Object] 数据类型为： object </script>
-
六、JavaScript中this指向
JavaScript中this指向与Java中的this指向是完全一致的。
- 在构造函数中，this指向当前构造函数生成object类型对象
- 在普通函数，this指向调用当前函数的实例对象
七、模拟HasMap
代码实例
<script type="text/javascript">
/*
* 在Java中存在一个HasMap类型
* 以键值对方式存储数据
* 一次可以存储多个键值对
* 并且要求每一个关键字都是唯一
* 读取可以通过给定关键字读取对应的值
* 器具体使用方式如下
* HashMap map = new HashMap();
* map.put("key1",100)
* map.put("key2",200)
* map.get("key1") ==100
* map.get("key2") ==200
*
* JavaScript中并不存在HasMap类型，要求在JavaScript模拟出一个HashMap类型对象
* 要求具有上述所有功能
*
*
*/
function HashMap(){
var obj = new Object();
this.put = function (key , value){
obj[key]=value;//这句就等于obj。key = value
}
this.get = function (key){
return obj[key];
}
}
var map = new HashMap();
map.put("key1",100);
map.put("key2",200);
var num = map.get("key1");
window.alert(num);
</script>
重点
data.key代表 data里面name = "key"的valuedata[key]代表data里面name = key的value
八、JSON
-
1.前提：JavaScript中得到object类型对象方式
- 方式1：由构造函数生成的对象都是object类型对象
- 方式2：由JSON数据描述格式生成的对象都是object类型对象
-
2.JSON数据描述格式：
- JavaScript中获得object类型对象简化版
-
3.标准命令格式：
var obj = {“属性名1”：值，“属性名2”：值}；
-
4.JSON数组：
专门存放JSON对象的数组被称为JSON数组
-
使用代码实例：
<script type="text/javascript"> var obj = {"name":"张三", "sex":"男", "age":15, "toString": function (){ window.alert(this.name+this.sex+this.age); }} obj.toString(); //JSON最简单的使用方式 var obj1 = {}; //JSON数组使用方式 var jsonArray=[ {"cityId":1,"cityName":"北京市"}, {"cityId":2,"cityName":"上海市"}, {"cityId":3,"cityName":"广州市"}, ]; for(var i=0;i<jsonArray.length;i++){ var obj2 = jsonArray[i]; window.alert(obj2.cityId+obj2.cityName); } </script>
代码实例：
1.利用反射封装JSON工具类
package com.util;
import java.lang.reflect.Field;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/20
* Time: 11:21
*/
public class ReflectUitl {
/**
*将任意类型对象内容转换为JSON格式字符串返回
* @param obj
* @return
*/
public static String jsonObject(Object obj){
Class classFile = null;
Field fieldArray[]=null;
StringBuffer json = new StringBuffer("{");
//field用来存放类的属性，功能有获取当前对象的成员变量的类型，
// 对成员变量重新设值
//1.获得当前对象的class文件
classFile = obj.getClass();
//2.获得class文件的所有属性
fieldArray=classFile.getDeclaredFields();
//3.获得当前对象所有属性的值
for(int i = 0 ;i<fieldArray.length;i++){
Field field = fieldArray[i];
/**
* getName() ： 获取属性的名字
*
* get(Object obj) 返回指定对象obj上此 Field 表示的字段的值
*
* set(Object obj, Object value) 将指定对象变量上此 Field 对象表示的字段设置为指定的新值
*/
field.setAccessible(true);//确保私有属性可以访问使用
String fieldName = field.getName();
try {
Object value = field.get(obj);//将其值返回
//4.将获得的字符串及其值凭借为json格式字符串
//将属性名和属性值进行字符串拼接
json.append("\"");
json.append(fieldName);
json.append("\":");
json.append("\"");
json.append(value);
json.append("\"");
} catch (IllegalAccessException e) {
e.printStackTrace();
}
if((i+1)<fieldArray.length)
json.append(",");
}
json.append("}");
return json.toString();
}
}
oneServlet
package com.controller;
import com.entity.Student;
import com.util.ReflectUitl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/20
* Time: 10:58
*/
public class oneServlet extends HttpServlet {
//对get方法进行处理
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Student stu = new Student(1,"hsy"); //这种传值是错误的，高级类型传的是内存地址
// String stu ="{\"stuId\":10,\"stuName\":\"hsy\"}";
//转换为json格式
String json = ReflectUitl.jsonObject(stu);
//放入请求作用域对象
request.setAttribute("key",json);
//转到jsp运行
request.getRequestDispatcher("/index.jsp").forward(request,response);
}
}
index.jsp
<%--
Created by IntelliJ IDEA.
User: asus
Name: 吕昊
Number: 20180508145
Date: 2021/5/20
Time: 10:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript">
var obj = ${requestScope.key};
window.alert(obj.stuId+obj.stuName);
</script>
</head>
<body>
$END$
</body>
</html>
2.使用JSON工具类
twoServlet
package com.controller;
import com.entity.Dept;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/20
* Time: 23:31
*/
public class twoServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Dept dept = new Dept(1,"徐州工程学院","徐州"); //这种传值是错误的，高级类型传的是内存地址
JSONObject jsonObject = JSONObject.fromObject(dept);//利用json工具类来转换成json字符串
request.setAttribute("key1",jsonObject.toString());
//转到jsp运行
request.getRequestDispatcher("/index_1.jsp").forward(request,response);
}
}
index_1.jsp
<%--
Created by IntelliJ IDEA.
User: asus
Name: 吕昊
Number: 20180508145
Date: 2021/5/20
Time: 23:35
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function fun1(){
var dept = ${requestScope.key1};
document.getElementById("deptNo").value=dept.deptNo;
document.getElementById("deptName").value=dept.deptName;
document.getElementById("loc").value=dept.loc;
}
</script>
</head>
<body onload="fun1()">
<table border="2">
<tr>
<td>部门编号</td>
<td><input type="text" id="deptNo"></td>
</tr>
<tr>
<td>部门名称</td>
<td><input type="text" id="deptName"></td>
</tr>
<tr>
<td>部门编号</td>
<td><input type="text" id="loc"></td>
</tr>
</table>
</body>
</html>
3.使用JSON工具类实现json数组
threeServle
package com.controller;
import com.entity.Dept;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/21
* Time: 0:21
*/
public class threeServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获得一个集合存放部门对象
List DeptList = new ArrayList();
DeptList.add(new Dept(10,"徐州工程学院","徐州"));
DeptList.add(new Dept(20,"淮阴工学院","淮安"));
DeptList.add(new Dept(30,"三江学院","南京"));
JSONArray jsonArray = JSONArray.fromObject(DeptList);//利用json工具类，转换json对象
//调用请求对象，请求作用域对象
request.setAttribute("key2",jsonArray);
//请求转发
request.getRequestDispatcher("/index_2.jsp").forward(request,response);
}
}
index_2.jsp
<%--
Created by IntelliJ IDEA.
User: asus
Name: 吕昊
Number: 20180508145
Date: 2021/5/21
Time: 0:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function fun1(){
var jsonArray = ${requestScope.key2};//获取对象
//利用for循环输出
for(var i=0;i<jsonArray.length;i++){
var jsonObj = jsonArray[i];//获取当前对象
//在页面中创建新的表行
var trDom = document.createElement("tr");//<tr></tr>
var tdDOm_1 = document.createElement("td")//<td>
var tdDOm_2 = document.createElement("td")//<td>
var tdDOm_3 = document.createElement("td")//<td>
tdDOm_1.innerHTML=jsonObj.deptNo;
tdDOm_2.innerHTML=jsonObj.deptName;
tdDOm_3.innerHTML=jsonObj.loc; //向td中插值
trDom.appendChild(tdDOm_1);//插入对应位置 ，插入到tr中
trDom.appendChild(tdDOm_2);
trDom.appendChild(tdDOm_3);
document.getElementById("one").appendChild(trDom);//放入位置
}
}
</script>
</head>
<body onload="fun1()">
<center>
<table border="2" align="center" id="one">
<tr>
<td>部门编号</td>
<td>部门名称</td>
<td>部门地址</td>
</tr>
</table>
</center>
</body>
</html>
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
