面向对象
- 万物皆对象，在JavaScript中同样也有面向对象，思想类似。
类的定义和使用
-
定义格式
-
class 类名{ constructor(变量列表){ 变量赋值; } 方法名(参数列表){ 方法体; return 返回值; } }
-
-
使用格式
-
let 对象名 = new 类名(实际变量值); 对象名.方法名();
-
字面量类定义和使用
-
定义格式
-
let 对象名={ 变量名:变量值, 变量名:变量值, ... 方法名：function(参数列表){ 方法体; return 返回值; }, ... };
-
-
使用格式
-
对象名.变量名 对象名.方法名();
-
继承
- 继承就是让类与类产生父子类的关系，子类可以使用父类有权限的成员
- 继承关键字：extends
- 顶级父类：Object
内置对象
内置对象Number
-
方法名 说明 parseFloat() 将传入的字符串浮点数转换为浮点数 parseInt() 将传入的字符串整数转换为整数 isNaN() 判断传入的值是否是NaN -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //1.parseFloat() 将传入的字符串浮点数转为浮点数 document.write(Number.parseFloat("3.14")+"<br>"); //2.parseInt() 将传入的字符串整数转为整数 document.write(Number.parseInt("3")+"<br>"); document.write(Number.parseInt("312abc")+"<br>");//从数字开始转换，直到不是数字为止 //3. isNan() 判断传入的值是否是NaN //document.write(NaN==NaN);//NaN六亲不认，自己都不认 document.write(Number.isNaN(NaN)); </script> </html>
内置对象Math
-
方法名 说明 ceil(x) 向上取整 floor(x) 向下取整 round(x) 把数四舍五入为最近的整数 random() 随机数，返回的是0.0-0.999999999999……之间的范围 pow(x,y) 幂运算x的y次方 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //向上取整3.4=4 document.write(Math.ceil(3.4)+"<br>"); //向下取整3.4=3 document.write(Math.floor(3.4)+"<br>"); //四舍五入3.4=3 document.write(Math.round(3.4)+"<br>"); //随机数，取0.0-1.0之间的范围(包头不包尾) document.write(Math.random()+"<br>"); //计算2的3次方=8 document.write(Math.pow(2,3)+"<br>"); </script> </html>
内置对象Date
-
构造方法 说明 Date() 根据当前时间创建对象 Date(value) 根据指定毫秒值创建对象 Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11) -
成员方法 说明 getFullYear() 获取年份 getMonth() 获取月份 getDate() 获取天数 getHours() 获取小时 getMinutes() 获取分钟 getSeconds() 获取秒数 getTime() 返回1970年1月1日至今的毫秒数 toLocaleString() 返回本地日期格式的字符串 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //构造方法 //1.Date() 根据当前时间创建对象 let d1 = new Date(); document.write(d1+"<br>"); //2.Date(value) 根据指定毫秒值创建对象 let d2= new Date(10000); document.write(d2+"<br>"); //3.Date(year,month,[day,hours,minutes,seconds,milliseconds])根据指定字段创建对象(月份是0~11) let d3 = new Date(2222,2,2,20,20,20); document.write(d3+"<br>"); //成员方法 //1.getFullYear()获取年份 document.write(d3.getFullYear()+"<br>"); //2.getMonth()获取月份 document.write(d3.getMonth()+"<br>"); //3.getDay()获取天 document.write(d3.getDay()+"<br>"); //4.toLocaleString()返回本地日期格式的字符串 document.write(d3.toLocaleString()+"<br>"); </script> </html>
内置对象String
-
构造方法 说明 String(value) 根据指定字符串创建对象 let s = “字符串” 直接赋值 -
成员方法 说明 length属性 获取字符串长度 charAt(index) 获取指定索引的字符 indexOf(value) 获取指定字符串出现的索引位置，找不到为-1 substring(start,end) 根据指定索引范围截取字符串(含头不含尾) split(value) 根据指定规则切割字符串，返回数组 replace(old,new) 使用新字符串替换老字符串 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //1.构造方法创建字符串对象 let s1 = new String("hello"); document.write(s1+"<br>"); //2.直接赋值 let s2="hello"; document.write(s2+"<br>"); //属性 //1.length 获取字符串的长度 document.write(s2.length+"<br>"); //成员方法 //1.charAt(index) 获取指定索引处的字符 document.write(s2.charAt(4)+"<br>"); //2.indexOf(value) 获取指定字符串出现的索引位置 document.write(s2.indexOf("o")+"<br>"); //3.substring(start,end) 根据指定索引范围截取字符串（含头不含尾） document.write(s2.substring(2,4)+"<br>"); //4.split(value) 根据指定规则切割字符串，返回数组 let s3="王老五,28,女"; let arr=s3.split(","); for(let i=0;i<arr.length;i++){ document.write(arr[i]+"<br>"); } //5.replace(old,new) 使用新字符串替换老字符串(骂人的脏话转为换“富强 文明 和谐 自由 平等 公正”) let s4="你妈还好吗"; let s5=s4.replace("你妈","富强 文明 和谐 自由 平等 公正"); document.write(s5); </script> </html>
内置对象RegExp
-
RegExp就是正则表达式，是一种对字符串进行匹配的规则
-
构造方法 说明 RegExp(规则) 根据指定规则创建对象 let reg=/^规则$/ 直接赋值 -
成员方法 说明 test(匹配的字符串) 根据指定规则验证字符串是否符合 -
规则
-
表达式 说明 [a] 只能是a [abc] 只能是abc中的某一个 [1] 只能是1 [123] 只能是123中的某一个 [a-z] 可以是a-z中的某一个 [A-Z] 可以是A-Z中的某一个 [0-9] 可以是0-9中的某一个 {5} 只能出现5次 {4,6} 只能出现4~6次
-
-
需求一：验证手机号
-
第一位必须为1，第二位必须为3、5、7、8，第三位到是一位必须是数字，总长度为11位
//手机号 规则：必须1开头 第二位必须是3578，剩余的必须是整数，总共11位数 let s = /^[1][3578][0-9]{9}$/; document.write(s.test("13996950123")+"</br>");
-
-
需求二：验证用户名
-
字母、数字、下划线组成，总长度为6~16位
//用户名 //规则：字母、数字、下划线组成。总长度6~16 let s1=/^[a-zA-Z_0-9]{6,16}$/; document.write(s1.test("woshinibaba")+"</br>");
-
内置对象Array
-
很显然这是对数组进行操作的
-
成员方法 说明 push(元素) 添加元素到数组的末尾 pop() 删除数组末尾的元素 shift() 删除数组最前面的元素 includes(元素) 判断数组包含给定的值 reverse() 反转数组中的元素 sort() 对数组元素进行排序 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //定义一个数组 let arr=[1,2,3,4,5,6,7,8,9]; //1.push(元素) 添加元素到数组的末尾 arr.push(10); document.write(arr+"<br>"); //2.pop() 删除数组末尾的元素 arr.pop(); document.write(arr+"<br>"); //3.shift() 删除数组最前面的元素 arr.shift(); document.write(arr+"<br>"); //4.includes(元素) 判断数组中是否包含指定的元素 document.write(arr.includes(3)+"<br>"); //5.reverse() 反转数组 arr.reverse(); document.write(arr+"<br>"); //6.sort() 对数组进行排序 arr.sort(); document.write(arr+"<br>"); </script> </html>
内置对象set
-
JavaScript中的set集合，元素唯一，存取顺序一致。
-
构造方法
-
构造方法 说明 Set() 创建Set集合对象
-
-
成员方法
-
构成员方法 说明 add(元素) 向集合中添加元素 size属性 获取集合长度 keys() 获取迭代器对象 delete(元素) 删除指定元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //1.创建集合对象 let s = new Set(); //2.add 往集合中添加元素 s.add("a"); s.add("b"); s.add("c"); s.add("d"); s.add("e"); //3.size属性，获取集合长度 document.write(s.size+"<br>"); //4.keys() 获取迭代器 let st = s.keys(); for(let i=0;i<s.size;i++){ document.write(st.next().value+"<br>"); } //5.delete() 删除指定元素 document.write(s.delete("b")+"<br>"); </script> </html>
-
内置对象map
-
JavaScript中Map集合，key唯一，存取顺序一致
-
构造方法
-
构造方法 说明 Map() 创建Map集合对象
-
-
成员方法
-
成员方法 说明 set(key,value) 向集合中添加元素 size属性 获取集合长度 get(key) 根据key获取value entries() 获取迭代器对象 delete(key) 根据key删除键值对
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //创建map集合对象 let m = new Map(); //set(key,value) 添加元素 m.set("刘备","蜀"); m.set("关羽","蜀"); m.set("张飞","蜀"); m.set("诸葛亮","蜀"); m.set("曹操","魏"); m.set("曹丕","魏"); m.set("曹植","魏"); m.set("司马懿","魏"); m.set("孙权","吴"); m.set("周瑜","吴"); m.set("甘宁","吴"); m.set("孙策","吴"); m.set("周泰","吴"); m.set("陆逊","吴"); //size属性 获取集合长度 document.write(m.size+"<br>"); //get(key) 根据key获得value document.write(m.get("陆逊")+"<br>"); //entries() 获取迭代器对象 let et = m.entries(); for(let i=0;i<m.size;i++){ document.write(et.next().value+"<br>"); } //delete(key) 根据key删除键值对 document.write(m.delete("周泰")+"<br>"); </script> </html>
内置对象JSON
-
JSON(JavaScript Object Notation):是一种轻量级的数据交换格式
-
它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
-
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提示网络传输效率
-
JSON常用方法
-
成员方法 说明 stringify(对象) 将指定对象转换为json格式字符串 parse(字符串) 将指定json格式字符串解析成对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> //定义天气对象 let weather = { city:"北京", date:"2020-07-04", wendu:"23°~40°", shidu:"22%" }; //1.将天气对象转换为json格式的字符串 let str =JSON.stringify(weather); document.write(str+"<br>"); //2.将json格式字符串解析成js对象 let weather2 = JSON.parse(str); document.write("城市"+weather2.city+"<br>"); document.write("时间"+weather2.date+"<br>"); document.write("温度"+weather2.wendu+"<br>"); document.write("湿度"+weather2.shidu+"<br>"); </script> </html>
-
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
