面向对象
在java中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。
类的定义和使用
-
定义格式
class 类名{ //构造方法 constructor(变量1,变量2...){ 变量赋值 } //定义方法 方法名(参数列表) { 方法体; return 返回值; } }注意：javaScript中在创建类的时候不需要提前指定属性。
-
使用格式
//创建对象 let 对象名 = new (实际变量值); 对象名.方法名() -
代码示例
//创建一个学生类 class student { //创建构造方法 constructor(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } //创建一个方法 show() { console.log(this.name); console.log(this.age); console.log(this.sex); } } //创建对象 let stu = new student("mini", 4, '女'); //调用方法 stu.show(); //调用属性 stu.name
字面量定义类和使用
-
定义格式
let 对象名 = { 变量名: 变量值, 变量名: 变量值, ... 方法名: function(参数列表) { 方法体; return 返回值; } } -
使用格式
对象名.变量名; 对象名.方法名(); -
代码示例
//创建一个学生类 let student = { //定义变量 name: "不知火舞", age: 36, sex: '女', eat: ["牛欢喜", "红烧狮子头"], //定义方法 show:function(hobby) { console.log(hobby); }, eats: function() { console.log(this.eat[0] + "---" + this.eat[1]); } } //调用属性 student.name //调用方法 student.show("游泳"); student.eats();字面量定义类，有点类似于json格式的使用。
继承
-
继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
-
继承关键字：extends
-
顶级父类：Object
-
代码示例
//定义Person类 class Person{ //构造方法 constructor(name,age){ this.name = name; this.age = age; } //eat方法 eat(){ document.write("吃饭..."); } } //定义Worker类继承Person class Worker extends Person{ constructor(name,age,salary){ super(name,age); //调用父类的构造方法进行赋值操作 this.salary = salary; } show(){ document.write(this.name + "," + this.age + "," + this.salary + "<br>"); } } //使用Worker let w = new Worker("张三",23,10000); w.show(); w.eat();
内置对象
Number
| 方法名 | 说明 |
|---|---|
| parseFloat() | 将传入的字符串浮点数转为浮点数 |
| parseInt() | 将传入的字符串整数转为整数 |
Math
| 方法名 | 说明 |
|---|---|
| ceil(x) | 向上取整 |
| floor(x) | 向下取整 |
| round(x) | 把数四舍五入为最接近的整数 |
| random() | 随机数,返回的是0.0-1.0之间范围(含头不含尾) |
| pow(x,y) | 幂运算 x的y次方 |
Date
-
构造方法
构造方法 说明 Date() 根据当前时间创建对象 Date(value) 根据指定毫秒值创建对象 Date(year,month,[day,hours,minutes,seconds
,milliseconds])根据指定字段创建对象(月份是0~11) -
成员方法
成员方法 说明 getFullYear() 获取年份 getMonth() 获取月份(0~11，0代表1月，1代表2月，以此推类) getDate() 获取天数 getHours() 获取小时 getMinutes() 获取分钟 getSeconds() 获取秒数 getTime() 返回据1970年1月1日至今的毫秒数 toLocaleString() 返回本地日期格式的字符串
String
-
构造方法
构造方法 说明 String(value) 根据指定字符串创建对象 let s = “字符串” 直接赋值 -
成员方法
成员方法 说明 length属性 获取字符串长度 charAt(index) 获取指定索引处的字符 indexOf(value) 获取指定字符串在源字符串中第一次出现的索引位置,找不到为-1 substring(start,end) 根据指定索引范围截取字符串 (含头不含尾) split(value) 根据指定规则切割字符串，返回数组 replace(old,new) 使用新字符串替换老字符串
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中的某一个 \d 任何数字[0-9]的简写 \D 任何非数字的简写 \w 单词字符：[a-zA-Z_0-9]的简写 \W 非单词字符 {5} 只能出现5次 {4,6} 只能出现4到6次 -
代码示例
使用正则表达式验证手机号是否正确
//定义正则表达式，验证手机号11位 let reg1 = /^[1][356789][\d]{9}$/; reg1.test("17764809513");
Array
-
构造方法
构造方法 说明 let arr = [元素1, 元素2…] 直接创建一个数组 -
成员方法
成员方法 说明 push(元素) 添加元素到数组的末尾 pop() 删除数组末尾的元素 shift() 删除数组最前面的元素 includes(元素) 判断数组是否包含给定的值 reverse() 反转数组中的元素 sort() 对数组元素进行排序
Set
-
特点
JavaScript 中的 Set 集合，元素唯一，存取顺序一致。
-
构造方法
构造方法 说明 Set() 创建Set集合对象 -
成员方法
成员方法 说明 add(元素) 向集合中添加元素 size属性 获取集合长度 keys() 获取迭代器对象 delete(元素) 删除指定元素 -
遍历
for(let 变量名 of 要遍历的集合) { } //变量名表示集合中的每个元素，取名可以随意。
Map
-
特点
JavaScript 中的 Map 集合，key 唯一，存取顺序一致。
-
构造方法
构造方法 说明 Map() 创建Map集合对象 -
成员方法
成员方法 说明 set(key,value) 向集合中添加元素 size属性 获取集合长度 get(key) 根据key获取value entries() 获取迭代器对象 delete(key) 根据key删除键值对 -
遍历
for(let 变量名 of 要遍历的集合) { } //变量名表示集合中的每个元素，取名可以随意。
JSON
-
介绍
- JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
- 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的提升网络传输效率。
-
常用方法
成员方法 说明 stringify(对象) 将指定对象转化为json格式字符串 parse(字符串) 将指定json格式字符串解析为对象 -
代码示例
//创建一个对象 let student = { name: "不知火舞", age: 18, show() { console.log(this.name + "----" + this.age); } } //将对象转化为json字符串 let stus = JSON.stringify(student); console.log(stus); //将json字符串转化为一个对象 let student1 = JSON.parse(stus); console.log(student1);
BOM
BOM介绍
-
BOM(Browser Object Model)：浏览器对象模型。
-
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
-
Navigator：游览器对象
-
Screen：显示器屏幕对象
-
History：历史记录对象
-
Window：窗口对象
-
Location：地址栏对象
我们使用较多的就是window对象及location对象
-
Window窗口对象
-
定时器
-
一次性定时器
-
使用定时器
window.setTimeout(功能，毫秒值)
注意：该函数会返回一个定时器的唯一标识，可以通过表示清除定时器。
-
清除一次性定时器
clearTimeout(标识)
-
-
循环定时器
-
使用定时器
window.setInterval(功能，毫秒值)
注意：该函数会返回一个定时器的唯一标识，可以通过表示清除定时器。
-
清除循环定时器
clearInterval(标识)
-
-
代码示例
//弹窗函数 function fun() { alert("hehe"); } //设置一次性定时器 let d1 = window.setTimeout("fun()", 2000); //清除一次性定时器 window.clearTimeout(d1); //设置循环定时器 let d2 = window.setInterval("fun()", 2000); //清除循环定时器 window.clearInterval(d2);
-
-
页面加载事件
-
window.onload：在页面加载完毕后触发此事件的功能。
-
代码示例
//定义页面加载事件 window.onload = function() { alert("页面加载已完成！"); }
-
Location地址栏对象
-
href属性
就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
-
代码示例
定时跳转
//定义变量 let num = 5; //定义跳转函数 function jump() { num--; //判断变量是否为0，为0则进行跳转 if(num == 1) { //跳转到百度网址 location.href = "www.baidu.com"; } //设置span的内容 document.getElementById("time").innerText = num; } //创建定时器 window.setInterval("jump()", 1000);
javaScript封装
-
封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
-
例如，获取元素，删除元素的方法是不是很麻烦啊，尤其是删除元素，每次一删除一个元素都需要找到他的父元素，然后利用父元素再删除子元素，想想都很麻烦；所以我们就可以选择将这些繁琐的步骤封装成一个方法，简化我们的使用。
-
代码示例：封装一个删除元素的方法
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封装一个函数，用于删除自己</title> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> <!-- 引入编写的js --> <script src="js/my.js"></script> <script type="text/javascript"> //获取要删除的子元素 let div1 = document.getElementById("div1"); //调用自定义的方法，进行删除子元素标签 remove(div1); </script> </html>封装的方法
function remove(element) { //找到传入的元素的父元素 let parent = element.parentElement; //利用父元素，删除子元素 parent.removeChild(element); } -
注意：要先引入js，才能调用方法，因为程序的执行是由上往下执行的；要先引入，才能使用。
扫一扫
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
