1.简介
概念： 一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能：
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
2.基本语法
2.1与HTML结合方式
1.内部js
定义<script>,标签体内容就是js代码
2.外部js
定义<script>,通过src属性引入外部的js文件
注意：
1.<script>可以定义在HTML页面的任何地方，但是定义的位置会影响执行顺序。
2.<script>可以定义多个。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部JS--> <script> alert("hello world"); //定义在head中，先加载script，再加载input标签； </script> <!--外部js--> <script src="js/a.js"></script> </head> <body> <input type="text"> <!--<script> alert("hello world"); //定义在body中，先加载input，再加载script标签； </script>--> </body> </html>
a.js
alert("我是外部的js文件")
2.2注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
2.3数据类型
1. 原始数据类型(基本数据类型)
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型：对象
2.4变量
变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据(java/c)
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。（python）
语法：
var 变量名 = 初始化值;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script> /* //定义变量 var a = 3; alert(a); a = "abc"; alert(a);*/ // 1.定义number类型 var num = 1; var num2 = 1.1; var num3 = NaN; document.write(num + "<br>"); document.write(num2 + "<br>"); document.write(num3 + "<br>"); //2.定义string类型 var str = "abc"; var str2 = 'a'; document.write(str + "<br>"); document.write(str2 + "<br>"); //3.定义boolean var flag = true; document.write(flag + "<br>"); //4.定义null和undefined var obj = null; var obj2 = undefined; var obj3; document.write(obj + "<br>"); document.write(obj2 + "<br>"); document.write(obj3 + "<br>"); </script> </head> <body> </body> </html>
typeof运算符：获取变量的类型。
注：null运算后得到的是object
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script> /* //定义变量 var a = 3; alert(a); a = "abc"; alert(a);*/ // 1.定义number类型 var num = 1; var num2 = 1.1; var num3 = NaN; document.write(num + "----" + typeof (num) + "<br>"); document.write(num2 + "----" + typeof (num2) + "<br>"); document.write(num3 + "----" + typeof (num3) + "<br>"); //2.定义string类型 var str = "abc"; var str2 = 'a'; document.write(str + "----" + typeof (str) + "<br>"); document.write(str2 + "----" + typeof (str2) + "<br>"); //3.定义boolean var flag = true; document.write(flag + "----" + typeof (flag) + "<br>"); //4.定义null和undefined var obj = null; var obj2 = undefined; var obj3; document.write(obj + "----" + typeof (obj) + "<br>"); document.write(obj2 + "----" + typeof (obj2) + "<br>"); document.write(obj3 + "----" + typeof (obj3) + "<br>"); </script> </head> <body> </body> </html>
2.5运算符
1. 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
+(-)：正负号
注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var b = "123"; document.writeln(typeof (b+1)+"<br>"); document.writeln(b+1+"<br>"); var c = +"123"; document.writeln(typeof (c+1)+"<br>"); document.writeln(c+1+"<br>"); var d = +"abc"; document.writeln(typeof (d+1)+"<br>"); document.writeln(d+1+"<br>"); </script> </head> <body> </body> </html>
2. 算数运算符
+ - * / % ...
3. 赋值运算符
= += -+....
4. 比较运算符
> < >= <= == ===(全等于)
5. 逻辑运算符
&& || !
6. 三元运算符
? : 表达式
var a = 3;
var b = 4;
var c = a > b ? 1:0;
语法：
表达式? 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；
2.6流程控制语句
1. if...else...
2. switch:
在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
switch(变量):
case 值:
在JS中,switch语句可以接受任意的原始数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var a = "abc"; switch (a) { case 1: alert("number"); break; case "abc": alert("string"); break; case null: alert(null); break; } </script> </head> <body> </body> </html>
3. while
4. do...while
5. for
2.7JS特殊语法
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
用： 定义的变量是局部变量
不用：定义的变量是全局变量(不建议)
3.基本对象
3.1 Function：函数(方法)对象
1.创建
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}
2.方法
3.属性
length:代表形参的个数
4.特点
1. 方法定义时，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5.调用
方法名称(实际参数列表);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //1.创建方式1 var fun1 = new Function("a", "b", "alert(a);"); fun1(3, 4); alert(fun1.length); //2.创建方式2 function fun2(a, b) { alert(a + b); } fun2(3, 4); //3.创建方式3 var fun3 = function (a, b) { alert(a * b); } fun3(4, 5); /* 求任意两个数的和 */ function fun4(a, b) { return a + b; } var sum = fun4(5, 6); alert(sum) /* 求任意多个数的和 */ function fun5() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } var sum2 = fun5(1, 2, 3); alert(sum2); </script> </head> <body> </body> </html>
3.2array对象
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //1.创建方式 var arr1 = new Array(1, 2, 3); var arr2 = new Array(3); arr2[1] = 8; var arr3 = [4, 5, 6]; document.writeln(arr1 + "</br>"); document.writeln(arr2 + "</br>"); document.writeln(arr3 + "</br>"); document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串 arr3.push("abc"); document.writeln(arr3.join("***") + "</br>"); //按照指定格式拼接字符串 </script> </head> <body> </body> </html>
3.3Date对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var date = new Date(); document.writeln(date+"<br>"); document.writeln(date.toLocaleString()+"<br>"); document.writeln(date.getTime()); </script> </head> <body> </body> </html>
3.4Math：数学对象
1. 创建：
特点：Math对象不用创建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI
3.5正则表达式对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
m如果缺省： {,n}:最多n次
n如果缺省：{m,} 最少m次
3. 开始结束符号
^:开始
$:结束
2. 正则对象：
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //1.方式1 var reg = new RegExp("\\w{6,12}"); var reg2 = /\w{6,12}/; alert(reg.test("zhangsan")); alert(reg2.test("zhangsan")); </script> </head> <body> </body> </html>
3.6Global对象
1. 特点：
全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var str = "大学"; var encode = encodeURI(str); document.writeln(encode + "<br>"); var s = decodeURI(encode); document.writeln(s + "<br>"); var encode1 = encodeURIComponent(str); document.writeln(encode1 + "<br>"); var s1 = decodeURIComponent(encode); document.writeln(s1 + "<br>"); str1 = "https://www.baidu.com?wd=大学"; var encode = encodeURI(str1); document.writeln(encode + "<br>"); var s = decodeURI(encode); document.writeln(s + "<br>"); var encode1 = encodeURIComponent(str1); document.writeln(encode1 + "<br>"); var s1 = decodeURIComponent(encode); document.writeln(s1 + "<br>"); </script> </head> <body> </body> </html>
parseInt():将字符串转为数字
逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
3. URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.javascript语法体系
1）EMCA基础语法（统一）
2）BOM编程（不统一）
3）DOM编程（不统一）
1.1 javascript使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript基础</title> <script> /* javascript的使用方法： 1）内部javacript: a)在html页面中使用<script>标签，在<script>标签体中写js内容 b)弊端：和html代码混杂在一起，不好维护，不好重用 2）外部javascript（推荐使用） */ /* 常用的函数： alert("提示框"); document.write("向浏览器输出内容"); */ // alert("提示框"); // document.write("输出内容"); </script> <!-- 导入外部js文件 注意： 不能使用<script src="01.j/s"> 空标签方式导入 --> <script src="01.js"></script> </head> <body> </body> </html>
document.write("输出内容");
1.2 变量和数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量和数据类型</title> <script type="text/javascript"> /* 1）定义和赋值变量： var 变量名=值; 注意： 1）使用var关键词定义变量，var可以省略的，但是不建议省略var 2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。 3) js是弱类型语言，使用var来定义任何数据类型 4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用 typeof(变量)： 查看变量的数据类型 2)js的数据类型分类： a）number： 无论整数还是小数，都是number类型 b) string: 无论字符还是字符串，都是string类型 c) boolean d) object 对象类型 */ a = 10; document.write('a的值为：' + a + ' 类型为: ' + typeof(a) + '<br/>'); b = 3.14; document.write('b的值为:' + b + ' 类型为: ' + typeof(b) + '<br/>'); c = 'hello'; document.write('c的值为：' + c + ' 类型为: ' + typeof(c) + '<br/>'); d = true; document.write('d的值为：' + d + '<br/>'); e = new Object(); document.write('e的值为：' + e+' 类型为: ' + typeof(e) ); </script> </head> <body> </body> </html>
1.3 类型转换函数
string->number(整数) : parserInt(变量)
string->number(小数): parserFloat(变量)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类型转换函数</title> <script type="text/javascript"> /* string->整数： parseInt(变量) 注意： 1）使用parseInt函数转换时，转换的内容中的第一个是数值类型，就可以继续转换，直到遇到非数组类型为止。 string->小数： parseFloat(变量) */ a = "10"; a = "10a"; document.write("a的类型是(转换前)：" + typeof(a) + "<br/>"); //转换 a = parseInt(a); document.write("a的类型是(转换后)：" + typeof(a) + ",值为：" + a + "<br/>"); b = "3.14"; b = parseFloat(b); document.write("b的类型是(转换后)：" + typeof(b) + ",值为：" + b + "<br/>"); </script> </head> <body> </body> </html>
1.4 运算符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> <script type="text/javascript"> /* 1)算术运算符： + - * / % 2)比较运算符： > < >= <= == 3)逻辑运算符： && || ! 4)三目运算符: 表达式 ? true的结果 : false的结果 注意： 在js中，布尔值可以用true用1来代表，false用0来代表 */ a = 10; b = false; document.write("结果为：" + (a / b) + "<br/>"); document.write("结果为：" + (a + b) + "<br/>"); a = 10; b = 20; document.write("结果为:" + (a < b) + "<br/>"); a = 1; b = true; document.write("结果为:" + (a = b) + "<br/>"); document.write("结果为:" + (false && true) + "<br/>"); document.write("结果为:" + (false || true) + "<br/>"); document.write("结果为:" + (!true) + "<br/>"); age = 12; document.write(age >= 18 ? "成年人" : "未成年人"); </script> </head> <body> </body> </html>
1.5 流程控制语句
if
swtich
for
while
do-while
for-in
with
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程控制语句</title> <script type="text/javascript"> /* 1，显示"*"为三角型，5行，第1行有1个"*"，第2行有2个"*"…… 2，显示乘法口诀。 1*1=1 1*2=2 2*2=4 .... 1*9=9 2*9=18 ... */ for (i = 1; i <= 5; i++) { //行数 for (j = 1; j <= i; j++) { // 控制星星数 document.write("* "); } document.write("<br/>"); } document.write("<hr/>"); for (i = 1; i <= 9; i++) { for (j = 1; j <= i; j++) { document.write(i + "*" + j + "=" + (i * j) + " "); } document.write("<br/>"); } /* for-in语句： for(var 遍历 in 数组|对象){ } 作用： 1）遍历数组 2）对象 注意： 遍历对象的时候，变量是属性的名称，如果获取属性值，则 p[i]; */ //定义数组 arr = [10, 20, 30, 40]; //遍历数组 //使用for循环 for (i = 0; i < arr.length; i++) { document.write(arr[i] + ","); } document.write("<hr/>"); //使用for-in遍历 for (i in arr) { document.write(arr[i] + ","); } //定义对象 function Person(name, age) { this.name = name; this.age = age; } //创建对象 p = new Person("eric", 20); //遍历对象 for (i in p) { document.write(p[i] + "<br/>"); } </script> </head> <body> </body> </html>
1.6函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <script> /* 函数定义： function 函数名称(形式参数列表){ 语句 } 调用函数: 函数名称(实际参数列表); 注意： 1）js的函数使用function定义，但是形式参数列表不能使用var关键词 2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型 3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。 4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。 5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。 6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数 */ function add(a, b) { result = a + b; // document.write('结果为：'+result); return result; } s = add(10, 20); document.write(s); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数练习</title> <script type="text/javascript"> /* 如果大月，显示“该月有31天” 如果小月,显示“该月有30天” 如果2月，显示“该月有28天“ */ function check(){ //alert("调用"); var month = document.getElementById("month").value; //表单输入的内容都是string类型！！ //alert(typeof(month)); //alert(month); //string和number比较，string会自动转换成number类型，再进行比较 /* if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){ alert("该月有31天"); }else if(month==4 || month==6 || month==9 || month==11){ alert("该月有30天"); }else if(month==2){ alert("该月有28天"); }else{ alert("地球上没有这个月份"); } */ //强制转换 month = parseInt(month); switch(month){ case 1: case 3: case 5: case 7: case 8: case 10: case 12: alert("该月有31天"); break; case 4: case 6: case 9: case 11: alert("该月有30天"); break; case 2: alert("该月有28天"); break; default: alert("地球上没有这个月份"); } } </script> </head> <body> 请输入一个月份值：<input type="text" id="month"/><input type="button" value="查询" onclick="check()"/> </body> </html>
1.7基于对象编程
string对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>String对象</title> <script type="text/javascript"> //方式一：定义String对象 str1 = new String("hello"); str2 = new String("hello"); document.write("结果：" + (str1 == str2) + "<br/>"); //valueOf（）:该方法返回对象的内容 document.write("结果：" + (str1.valueOf() == str2.valueOf()) + "<br/>"); //方式二： str1 = "hello"; str2 = "hello"; document.write("结果：" + (str1 == str2) + "<br/>"); /* 常用方法： charAt(): 返回指定索引的内容 indexOf(): 返回首次出现指定字符的索引位置 lastIndexOf(): 返回最后出现指定字符的索引位置 fontcolor(): 直接给字符串添加颜色 replace(): 替换指定的字符串 split(): 使用指定字符串切割字符串，返回字符串数组 substring(start,end); 截取字符串，start：开始索引， end:结束索引 substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度 */ str = "hellojava"; document.write(str.charAt(4) + "<br/>"); document.write(str.indexOf("a") + "<br/>"); document.write(str.lastIndexOf("a") + "<br/>"); document.write(str.fontcolor("#0000ff") + "<br/>"); document.write(str.replace("java", "jxufe") + "<br/>"); document.write(str.substring(5, 9) + "<br/>"); document.write(str.substr(5, 4) + "<br/>"); str = "java-net-php-平面"; strArray = str.split("-"); for (i = 0; i < strArray.length; i++) { document.write(strArray[i] + ","); } </script> </head> <body> </body> </html>
Number对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>number对象</title> <script type="text/javascript"> //方式一：定义Number对象 num1 = new Number(20); num2 = new Number(20); document.write((num1==num2)+"<br/>"); document.write((num1.valueOf()==num2.valueOf())+"<br/>"); //方式二： var num1 = 20; var num2 = 20; document.write((num1==num2)+"<br/>"); document.write((num1.valueOf()==num2.valueOf())+"<br/>"); b1 = new Boolean(true); b2 = new Boolean(true); document.write((b1 == b2) + "<br/>"); document.write((b1.valueOf() == b2.valueOf())+"<br/>"); </script> </head> <body> </body> </html>
Date对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date对象</title> <script type="text/javascript"> //创建日期 date = new Date(); //取当前系统日期时间 java: SimpleDateFormat对象 yyyy-MM-dd 格式化 //document.write(date); //默认格式 //格式： 2015年06月01日 15时12分30秒 //年份 document.write(date.getFullYear()+"年"); //月 document.write((date.getMonth()+1)+"月"); //日 document.write(date.getDate()+"日"); //星期 document.write("星期"+date.getDay()+" "); //时 document.write(date.getHours()+"时"); //分 document.write(date.getMinutes()+"分"); //秒 document.write(date.getSeconds()+"秒"); </script> </head> <body> </body> </html>
数组对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组对象</title> <script type="text/javascript"> /* 注意： 1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。 2) js的数组可以存放任意类型的元素。 */ //方式一：创建数组 //1.1 指定数组长度 // arr = new Array(3); // arr[0] = 1; // arr[1] = 2; // arr[2] = 3; // for (i in arr) { // document.write(i + " , ") // } //1.2 不指定数组长度、默认0个元素 arr = new Array(); arr[0] = 6; arr[1] = 'hello'; arr[2] = true; let i; for (i in arr) { if (!arr.hasOwnProperty(i)) continue; document.write(arr[i] + " , "); } //1.3 指定具体内容 arr = new Array(10, "world", false); //arr = [10,"world",false] 更推荐Python的这种写法 for (i in arr) { if (!arr.hasOwnProperty(i)) continue; document.write(arr[i] + " , "); } /* 常用的方法： join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串 reverse(): 反转数组中的元素 */ document.write("<hr/>"); arr = ["java", "net", "php", "ios"]; let str = arr.join("-"); document.write(str); // for (let i = 0; i < arr.length; i++) { // document.write(arr[i] + ","); // } document.write("<hr/>"); //反转 arr = arr.reverse(); for (let i = 0; i < arr.length; i++) { document.write(arr[i] + ","); } </script> </head> <body> </body> </html>
1.8 自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义对象</title> <script type="text/javascript"> /* 定义对象方式一：有参数的构造函数 （推荐） function 对象名称(形式参数){ 定义属性 定义方法 } 创建对象： var 变量 = new 对象名称(实际参数); */ //定义人对象 function Person(name, age) { //this: 表示当前调用的对象 //定义属性 赋值 this.name = name; this.age = age; //定义方法 this.say = function () { alert("这个对象的方法"); } } //创建人对象 let p = new Person("狗娃", 12); //查看属性 document.write(p.name + '</br>'); document.write(p.age + '</br>'); // p.say(); for (let i in p) { if (!p.hasOwnProperty(i)) continue; document.write(p[i] + '</br>'); } //定义对象方式二： 无参数的构造函数 //定义对象 function Person2() { } //创建对象 let p2 = new Person2(); //追加属性 p2.name = "狗剩"; p2.age = 14; //追加方法 p2.say = function () { alert("狗剩的函数"); }; for (let i in p2) { if (!p2.hasOwnProperty(i)) continue; document.write(p2[i] + '</br>'); } //定义对象的方式三：使用Object对象。 Object对象可以作为任意对象的模板 //创建对象 let p3 = new Object(); //追加属性 p3.name = "狗蛋"; p3.age = 16; //追加方法 p3.say = function () { alert("狗蛋的函数"); }; for (let i in p3) { if (!p3.hasOwnProperty(i)) continue; document.write(p3[i] + '</br>'); } /* 定义对象方式四：使用字面量的形式创建对象。 json语言（了解） */ //创建人对象 let p4 = { //定义属性（属性名：属性值） "name": "铁蛋", "age": 20, //定义方法 "say": function () { alert("铁蛋的函数"); } }; for (let i in p4) { if (!p4.hasOwnProperty(i)) continue; document.write(p4[i] + '</br>'); } </script> </head> <body> </body> </html>
1.9 原型
给内置对象追加方法，相当于扩展对象的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型</title> <!-- 问题： 不使用ArrayUtil工具，但也想实现search和max方法的功能 预期解决方法： 想把search和max方法设计到Array内置对象中 问题：如何给Array对象扩展两个方法呢？ 方案一：拿到Array定义对象的代码，在代码上加 function Array(){ this.join = function(){} this.reverse = function(){} this.saarch = function(){} 追加方法 } 拿不到Array对象的源码，行不通 方案二：使用原型属性给Array对象添加方法 什么是原型？ 1）js的每个对象中都包含有了原型属性（prototype） 2）如果往某个对象的原型属性添加了方法，那么添加的这个方法就会自动地添加到当前对象的方法中。 3) 原型的作用：给内置对象追加方法的 function Array(){ //属性 this.prototype = new Prototype(); //原型对象 this.search = function(){} } 原型对象 function Prototype(){ this.search = function(){} } --> <script type="text/javascript"> /* 给Array追加一个search和max方法 */ Array.prototype.search = function(target){ //遍历 for(let i=0;i<this.length;i++){ if(this[i]==target){ return i; } } return -1; //找不到就是-1 }; Array.prototype.max = function(){ //存储最大值 let max = this[0]; for(let i=1;i<this.length;i++){ if(this[i]>max){ max = this[i]; } } return max; }; let arr = [10,43,21,65,3,87]; let index = arr.search(87); document.write("位置是："+index+"<br/>"); let max = arr.max(); document.write("最大值："+max); </script> </head> <body> </body> </html>
