-
JS狂神说
1什么是js
1.1
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
JavaScript核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。2基础语法
2.1标签
<script> </script>- 1
2.1外部引入
abc.js
js里面只写位于script你里面的文件。
引入文件放在同一目录下，不用写包名。<script scr="abc.js"></script>- 1
2.2浏览器
2.3数字
js划分不细致
123 //整数123 123.5 //小数123.5 1.2555e5 //科学计数法 -5213 //负数 NaN //not a number Infinity //表示无限大- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.4、数据类型
数值、文本、图形、音频·、视频…
=&& 全真为真。全假为假 || 一个为真结果为真 ! 真即是假，假即为真 == 等于(类型不一样，值一样也会判断为true) === 绝对等于(类型一样，值一样，结果为true) 1. NaN==NaN，这个和所有的数值都不相等，包括自己 2. 只能通过isNaN(NaN)来判断这个数是否为NaN- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.5字符
'' ""两种格式包括， 其他的类型用“\.”- 1
- 2
\’ 输出特殊符号 \n 换行 \t tab同功能 \u4e2d \u#### Unicode字符 \x41 Ascll字符 - 多行字符串
//在tab键的上面 esc键下面 'use scrict'; let msg = `你好呀 hello world` console.log(msg);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 模板字符串
let name = "sunwukong"; let age = 3; let mes = `你好呀 ${name}`- 1
- 2
- 3
- 4
- 字符串常量不可变
长度 console.log(student.length) 大小写转换 console.log(student.toUpperCase()) //STUDENT console.log(student.toLowerCase()) //student student.indexOf(‘t’) 输出在字符串中的位置 substring 截取字符串 student.substring(1) //从第一个字符串截取到最后一个字符串 student.substring(1,3) //[1,3) 含头不含尾- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2.6浮点数
防止出现的精度问题
console.log((1/3)===(1-(2/3))) //false console.log(Math.abs(1/3-(1-2/3))<0.000001); //true- 1
- 2
- 3
- 4
3数组
（可以包含所有数据类型）
null 空
undefined 未定义（但凡对于编译器来说未知的就undefined）
//为了保证代码的可读性，尽量使用[]var arr = [1,2,3,null,true,'hello']; new Array (1,12,15,166,255,'world'); arr.length **注意**：加入给arr.length赋值，数组大小就会发生变化，如果赋值元素过小，元素就会丢失 arr.indexOf(3) //2 indexOf 通过元素获得下标索引 字符串的“1”和数字1是不一样的 slice() 截取Array的一部分，返回一个新数组，类似于String里的substring pash() , pop 尾部 pash: 压入到尾部 pop : 弹出尾部的一个元素 pash: 压入到尾部 pop : 弹出尾部的一个元素 unshift() ,shift() 头部 unshift: 压入到头部 shift: 弹出头部的一个元素 排序 arr (3) ["b", "c", "a"] arr.sort() (3) ["a", "b", "c"] 元素反转 resverse (3) ["a", "b", "c"] arr.reverse() (3) ["c", "b", "a"] concat() arr.concat([1,2,3]) (6) ["c", "b", "a", 1, 2, 3] arr (3) ["c", "b", "a"] concat()并没有修改数据，只是会返回一个新的数组 连接符 join (3) ["a", "b", "c"] arr.join('-') "c-b-a" 多维数组 var arr = [[1,2],[3,4],[5,6]] undefined arr[1][1] 4 arr (3) [Array(2), Array(2), Array(2)] 0: (2) [1, 2] 1: (2) [3, 4] 2: (2) [5, 6] length: 3- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
4严格检查模式
’use strict’; 严格检查模式，预防JavaScript的随意性产生的一些问题
必须写在JavaScript的第一行 局部变量建议使用let去定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 前提：IEDA需要设置支持es6语法 'use strict';严格检查模式，预防JavaScript的随意性产生的一些问题 必须写在JavaScript的第一行 局部变量建议使用let去定义 --> <script> 'use strict'; let j = 1; </script> </head> <body> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
5对象
对象是大括号。数组是中括号
每一个属性之间使用逗号隔开，最后一个不需要添加
var 对象名 = { 属性名1 : 属性值1, 属性名2 : 属性值2, 属性名3 : 属性值3 } //定义了一个person对象，它有四个属性 var person = { name : "xiaoming", age : 5, email : "378214218@qq.com", score : 60 }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
JavaScript中对象，{…}表示一个对象，键值对描述属性 xxx ： xxx 多个属性之间使用逗号隔开，最后一个不加逗号
JavaScript中所有的键都是字符串，值是任意对象！
对象赋值person.age = 76 76 person.age 76- 1
- 2
- 3
- 4
- 5
- 使用一个不存在的属性时，不会报错
person.haha undefined- 1
- 2
- 动态的删减属性，通过delete删除对象的属性
delete person.score true person {name: "xiaoming", age: 76, email: "378214218@qq.com"}- 1
- 2
- 3
- 4
- 动态的添加属性，直接给新的属性添加值即可
person.haha = "haha" "haha" person {name: "xiaoming", age: 76, email: "378214218@qq.com", haha: "haha"}- 1
- 2
- 3
- 4
- 判断属性值是否在这个对象中！ xxx in xxx
'age' in person true //继承 'toString' in person true- 1
- 2
- 3
- 4
- 5
- 6
- 判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age') true person.hasOwnProperty('jah') false- 1
- 2
- 3
- 4
- 5
6循环判断
与java一致
forEachvar age=[1,45,5,45,5,3453]; //函数 age.forEach(function (value){ console.log(value) })- 1
- 2
- 3
- 4
- 5
forin
age是索引而已for(var index in object){} for(var num in age) { if(age.hasOwnProperty(num)) { console.log("ok"); console.log(age[num]); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
7map和set
//map=字典 var map=new Map([['tom',100],['jack',30]]);//相当于pythen里面的字典 var name= map.get('tom');//通过key获得value的值 map.set('zhongshan',45);//增加或修改 map.delete("tom"); console.log(name); console.log(map);- 1
- 2
- 3
- 4
- 5
- 6
- 7
set
// set 去重 var set=new Set([4,3,2,1,1,1]); // console.log(set); set.delete(1);//删除 set.add(7);//添加 set.has(3);//是否包含某元素- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
8iterator
遍历数组
//通过for of / for in 下标 let arr = [3,4,5] for(let x of arr){ console.log(x); }- 1
- 2
- 3
- 4
- 5
- 6
map
let map = new Map([['tom',100],['jerry',90],['andy',80]]); for(let x of map ){ console.log(x); }- 1
- 2
- 3
- 4
- 5
遍历set
let set = new Set([5,6,7]); for(let x of set){ console.log(x); }- 1
- 2
- 3
- 4
- 5
3函数及其对象
关键字function
方式1。function abs(x){ if(x >= 0){ return x; } else { return -x; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
方式2
var abs = function(x){ if(x >= 0){ return x; } else { return -x; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在GS中一般不会主动报错。即便传了多个参数也不会。如何规避或者知道传进来的参数有哪些？
手动抛出异常。
var abs = function (x){ //手动抛出异常来判断 if(typeof x!== 'number'){ throw 'Not a Number'; } if(x >= 0){ return x; } else { return -x; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
arguments
arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！var abs = function (x){ console.log("x=>"+x); for(let i = 0; i< arguments.length;i++){ console.log(arguments[i]); } if(x >= 0){ return x; } else { return -x; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
rest 获取除了已经定义的参数之外的所有参数~
function aaa(a,b,...rest){ console.log("a=>"+a); console.log("b=>"+b); console.log(rest); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
1变量作用域
在javascript中，var定义变量实际是有作用域的。假设在函数体中声明，则在函数体外不可以使用
function qj(){ var x = 1; x = x + 1; } x = x + 2; //Uncaught ReferenceError: x is not defined- 1
- 2
- 3
- 4
- 5
- 6
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突（内部函数可以访问外部函数的成员，反之则不行）
function qj(){ var x = 1; x = x + 1; } function qj2(){ var x = 'A'; x = x + 1; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
假设在JavaScript 中 函数查找变量从自身函数开始~，由’内’ 向 '外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
定义变量要定义在函数的最前面。虽然GS会自动提升。但不会提升变量的赋值function qj(){ var x = 1; //内部函数可以访问外部函数的成员，反之则不行 function qj2(){ var y = x + 1; //2 } var z = y + 1; //Uncaught ReferenceError: y is not defined }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
全局变量
//全局变量 x = 1; function f(){ console.log(x); } f(); console.log(x);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
全局对象window
var x = 'xxx'; alert(x); alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下;- 1
- 2
- 3
- 4
alert()这个函数本身也是一个window的变量
var x = 'xxx'; window.alert(x); var old_alert = window.alert; //old_alert(x); window.alert = function(){ }; //发现 alert() 失效了 window.alert(123); //恢复 window.alert = old_alert; window.alert(456);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
function qj(){ var x = 1; function qj2(){ var x = 'A'; console.log('inner'+x); //innerA } qj2(); console.log('outer'+x); //outer1 } qj(); javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错Refrence- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2方法
方法就是把函数放在对象里面。this默认指向调用他的那个对象。
let zhang = { name:'张', birth:2000, age:function (){ //今年-出生的年 let now = new Date().getFullYear() return now - this.birth; } }; //属性 zhang.name //方法,一定要带() zhang.age()- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
this
function getAge(){ //今年-出生的年 let now = new Date().getFullYear() return now - this.birth; } let zhang = { name:'张', birth:2000, age:getAge }; //zhang.age() OK //getAge() NaN this指向window，不存在getAge()函数- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
function getAge(){ //今年-出生的年 let now = new Date().getFullYear() return now - this.birth; } let zhang = { name:'张', birth:2000, age:getAge }; //zhang.age() OK //this指向了zhang，参数为空 getAge.apply(zhang,[]);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
3内部对象
Data
let date = new Date(); date.getFullYear(); //年 date.getMonth(); //月 0~11 date.getDate(); //日 date.getDay(); //星期几 date.getHours(); //时 date.getMinutes(); //分 date.getSeconds(); //秒 date.getTime(); //时间戳 毫秒数 转化 //时间戳转换为本地时间 console.log(new Date(121232121231321)); Date Wed Sep 11 5811 21:13:51 GMT+0800 (中国标准时间) date.toLocaleString() "2021/4/13 下午7:28:31" date.toLocaleDateString() "2021/4/13"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
记时
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 clearInterval() - 方法用于停止 setInterval() 方法执行的函数代码。 setTimeout() - 在指定的毫秒数后执行指定代码。- 1
- 2
- 3
- 4
- 5
4JSON
JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。let user = { name:'zhang', age:3, sex:'男' }; //对象转换为JSON字符串 let jsonUser = JSON.stringify(user) console.log(jsonUser); //{"name":"zhang","age":3,"sex":"男"} //JSON字符串转换为对象，参数为JSON字符串 let json = JSON.parse('{"name":"zhang","age":3,"sex":"男"}'); console.log(json); //Object { name: "zhang", age: 3, sex: "男" }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
区别
var obj = {a:'hello',b:'springmvc'} var json = {"a":"hello","b":"springmvc"}- 1
- 2
- 3
4面向对象编程
1面向对象class继承
<script> 'use strict' class Student { //有参构造 constructor(name) { this.name = name; } //方法 hello(){ alert("hello") } } let xm = new Student("小明") xm.hello() </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
继承
<script> 'use strict' class Student { //有参构造 constructor(name) { this.name = name; } //方法 hello(){ alert("hello") } } class xiaoStudent extends Student{ constructor(name,grade) { super(name); this.grade = grade; } MyGrade(){ alert("小学生") } } let xxs = new xiaoStudent("zfstart",21) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
2BOM对象
JS的诞生就是为了能够让他在浏览器中运行
BOM：浏览器对象模型
winder
//浏览器外部高度 window.outerHeight 804 //浏览器外部宽度 window.outerWidth 699 //浏览器内部高度 window.innerHeight 101 //浏览器内部宽度 window.innerWidth 688- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
navigator
navigator，封装了浏览器的信息
一般情况下我们不会用，因为会被人修改。navigator.appName "Netscape" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0" navigator.platform "Win32"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
screen
screen.width 1536 px screen.height 864 px- 1
- 2
- 3
- 4
- 5
location（重要）
location代表当前页面的URL信息host:"www.baidu.com" //主机 href:"https://www.baidu.com/" //当前指向的位置 protocol:"https:" //协议 reload:f reload() //刷新页面 location.assign("https://www.qq.com") //转向新的地址- 1
- 2
- 3
- 4
- 5
- 6
document
document代表当前页面document.title "百度一下，你就知道" document.title='狂神说' "狂神说"- 1
- 2
- 3
- 4
- 5
获取具体的文档树节点
<dl id = "app"> <dt>JAVA</dt> <dd>javaSE</dd> <dd>javaEE</dd> </dl> <script> let dl = document.getElementById("app"); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
获取cookie
document.cookie 劫持cookie原理 <script src = "劫持js"></script> 恶意人员的页面，它引入一个js文件，里面有获取你浏览器的cookie的js代码，然后发送到他的服务器- 1
- 2
- 3
- 4
- 5
history
history代表浏览器的历史记录history.back() //返回前一个页面 history.forward() //前进- 1
- 2
-
相关阅读:
mac安装python2
搞了三天终于成功跑起来GitHub上的vue-element-admin最新解决办法！(mac系统亲测有效)
12个Python自动化办公的官方文档，中文版只有2个？
Thymeleaf语法详解
测试资深人士推荐的GUI跨平台自动化测试工具
JavaSE期末经典项目—＞＞图书管理系统
Tomcat
排错 rpmbuild -ba ***.spec时出现 警告：发现已安装(但未打包的)文件/错误：警告：发现已安装(但未打包的)文件
计算机考研 创新 简史 专利 量子力学等
《canvas》之第13章 事件操作
- 原文地址：https://blog.csdn.net/m0_62953927/article/details/126137351
