目录
JS数据类型
布尔值
1.布尔值(Boolean)：区别与python ture与false都是小写
2.false类型：空字符串 0 null undefined NaN
注：null是空 一般在清空变量或指定变量时使用(let name = 'jason' name = null 数据类型object)(以前有过 现在没有了)
undefined没有定义 声明一个变量但未初始化时 改变量默认值是undefied 函数没有明确返回值时 返回值undefied (从未有过)
对象
1.JavaScript中所有的事物都是对象(与python一致都是一切皆对象)：字符串、数值、数组、函数 也可自定义对象
数组
1.数组：使用单独的变量名来存储一系列的值(python中的列表)
let jslist = [1, 'lili', 22.22];
jslist
(3) [1, 'lili', 22.22]
2.内置方法：
| 方法 | 说明 | let jslist = [1, 2] |
|---|---|---|
| .length | 数组的大小 | jslist.length; |
| .push(ele) | 尾部追加元素 | jslist.push(33); |
| .pop() | 获取尾部的元素 | jslist.pop(); pop(填索引值或数据无效 只能获取尾部元素) |
| .unshift(ele) | 头部插入元素 | jslist.unshift('xixi'); |
| .shift() | 头部移除元素 | jslist.unshift('xixi'); |
| .slice(start, end) | 切片 | jslist.slice(0, 2); |
| .reverse() | 反转 | jslist.reverse(); |
| .join(seq) | 将数组元素连接成字符串 | jslist.join(); '33,22.22,lili,1' |
| .concat(val, ...) | 连接数组 | jslist.concat(list1); |
| .sort() | 排序 | list2.sort(); //数字在前 字符串在后 |
| .forEach() | 将数组的每个元素传递给回调函数 | 语法：forEach(function(currentValue, index, arr), thisValue) |
| .splice() | 删除元素，并向数组添加新元素。 | 语法：splice(index,howmany,item1,.....,itemX) |
| .map() | 返回一个数组元素调用函数处理后的值的新数组 | 语法：map(function(currentValue,index,arr), thisValue) |
2.1 forEach()
语法：forEach(function(currentValue, index, arr), thisValue)
数组中每个元素需要调用的函数-必须
参数：currentValue-当前元素(必须)
index-当前元素的索引值(可选)
arr-当前元素所属的数组对象(可选)
thisValue-传递给函数的值一般用'this'值(可选)
let l1 = [1, 3, 5, 7, 9]
l1.forEach(function(value,index,arr){console.log(value,index,arr)});
1 0 (5) [1, 3, 5, 7, 9]
3 1 (5) [1, 3, 5, 7, 9]
5 2 (5) [1, 3, 5, 7, 9]
7 3 (5) [1, 3, 5, 7, 9]
9 4 (5) [1, 3, 5, 7, 9]
2.2 splice()
语法：splice(index,howmany,item1,.....,itemX) 参数：index-规定从何处添加/删除元素(必须)
howmany-规定应该删除的元素个数 必须是数字(必须 可以是0)
item1,.....,itemX-要添加到数组的新元素(可选)
let l1 = [1, 3, 5, 9]
l1.splice(1, 2, 'lili');
(2) [3, 5]
console.log(l1);
(3) [1, 'lili', 9]
2.3 map()
语法：map(function(currentValue,index,arr), thisValue)
数组中每个元素需要调用的函数-必须
参数：currentValue-当前元素的值(必须)
index-当前元素的索引值(可选)
arr-当期元素属于的数组对象(可选)
let l1 = [1, 3, 5, 7, 9];
l1.map(function(value,index,arr){return value + 1;})
(5) [2, 4, 6, 8, 10]
console.log(l1);
(5) [1, 3, 5, 7, 9]
自定义对象
1.自定义对象(相当于python中的字典)
2.定义方式
1.方式一：
let info = {'name':'lili', 'age':18};
undefined
info;
{name: 'lili', age: 18}
typeof info;
'object'
2.方式二：添加元素用句点符的方式
let d1 = new Object();
undefined
d1;
{}
d1.name = 'lili';
'lili'
d1;
{name: 'lili'}
JS常见运算符
1.算数运算符(+ - * ++ --)
let x = 2;
undefined
let x1 = x++; //先赋值x1 = x = 2 再自增1 x = 3(x--原理一致)
undefined
x1;
2
let x2 = ++x; //先自增1 x = 4 再赋值 x2 = x = 4(--x原理一致)
undefined
x2;
4
2.比较运算符(> >= < <= != == === !==)
let a1 = 1;
undefined
let a2 = '1';
undefined
a1 == a2; //弱等于会将不同的数据类型转化成同一种比较
true
a1 === a2; //强等于 不会转换数据类型 python中直接报错
false
3.逻辑运算符(&& || ! 相当于python中的and or not)
let t1 = [1, 3, 9]
undefined
let t2 = 0;
undefined
t1 && t2; //and
0
t1 || t2; //or
(3) [1, 3, 9]
JS流程控制
分支结构
1.单if分支
if(条件){条件成立执行的代码}
let l1 = 99;
undefined
let l2 = 88;
undefined
if(l1 > l2){console.log(l1)};
99
2.if....else....分支
if(条件){
条件成立执行的代码
}else{
条件不成立的代码
}
if(l1 < l2){
console.log(l1)
}else{
console.log(l2)};
88
3.if....else if.....else.....分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}else{
条件1条件2都不成立执行的代码
}
let l1 = 5;
undefined
if(l1 > 5){
console.log(l1)
}else if(l1 < 5){
console.log(0)
}else{
console.log(5)};
5
4.switch(switch中的case句子通常都会加break语句 否则程序会继续执行后续case中的语句)
let day = new Date().getDay();
switch(day){
case 0:console.log("Sunday");
break;
case 1:console.log("Monday");
break;
default:console.log("不知道星期几")};
不知道星期几
循环结构
1.for循环结构
for (let i=0;i<5;i++){
console.log(i)};
VM6698:1 0
VM6698:1 1
VM6698:1 2
VM6698:1 3
VM6698:1 4
2.while循环结构
let i=0;
while (i < 5){
console.log(i);i++;};
VM6875:1 0
VM6875:1 1
VM6875:1 2
VM6875:1 3
VM6875:1 4
三元运算
let a = 1;
let b = 2;
let c = a > b ? a : b; //判断条件 条件成立返回值为a 条件不成立返回值b
2
嵌套
let c = a > b ? a : (b=="2")?a:b;
1
JS函数
分类
1.普通函数
1.1 形参和实参可以不一一对应
function 函数名(形参){
函数体代码
return 返回值
}
function func(a){console.log(a)};
func(1);
1
1.2 限制参数个数需要使用内置关键字arguments
function func(a,b){
if(arguments.length===2){
console.log(a,b)
}else{console.log("需要传两个参数")}};
func();
需要传两个参数
func(1);
需要传两个参数
func(1,2);
1 2
func();
需要传两个参数
2.匿名函数
function(a,b){
return a+b
}
3.箭头函数
let func = function(a){
return a
}
let func = a =>a;
let func = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
名称空间与作用域
1.名称空间
1.1 全局名称空间
1.2 局部名称空间
2.作用域：在函数内部查找 找不到到局部名称空间查找 再到全局名称空间(与python作用域一致)
let name = "lili";
function func(){
let name = "xixi";
function inner(){
console.log(name)
}
inner()
};
func();
xixi
JS内置对象
1.自定义对象
JavaScript的对象(Object)本质上是键值对的集合(Hash结构) 但是只能用字符串作为键
let info ={"name":"lili","age":18};
console.log(info.name);
lili
console.log(info.age);
18
2.Date对象
1.不指定参数
let d1 = new Date();
console.log(d1.toLocaleString());
2022/8/25 20:11:38
2.参数为日期字符串
let d2 = new Date("2022/08/25/ 20:11");
console.log(d2.toLocaleString());
2022/8/25 20:11:00
let d3 = new Date("08/25/2022 20:11");
console.log(d3.toLocaleString());
2022/8/25 20:11:00
3.参数为毫秒
let d4 = new Date(1000);
console.log(d4.toLocaleString());
1970/1/1 08:00:01
console.log(d4.toUTCString());
Thu, 01 Jan 1970 00:00:01 GMT
4.参数为年月日时分秒
let d5 = new Date(2022,08,25,20,11,100);
console.log(d5.toLocaleString());
VM11027:1 2022/9/25 20:12:40
5.Date对象的方法
var d = new Date();
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜）
3.JSON对象
1.序列化：stringify
let info = {'name':'lili','age':18};
let info1 = JSON.stringify(info);
console.log(info1);
VM11474:1 {"name":"lili","age":18}
2.反序列化：parse
JSON.parse(info1);
{name: 'lili', age: 18}
4.RegExp对象
1.正则表达式方式一
let reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
reg1.test('lili090909');
true
2.正则表达式方式二
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5-11}$/g;
reg2.test('lili090909');
false
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5-11}$/
reg3.test('lili090909');
false
reg3.lastIndex;
0
reg2.test('lili090909');
false
reg3.test();
reg3.test(undefined);
let reg4 = /undefined/;
reg4.test();
true
5.Math对象
1.Math.abs(x) 返回数的绝对值
2.Math.exp(x) 返回 e 的指数
3.Math.floor(x) 对数进行下舍入
4.Math.log(x) 返回数的自然对数（底为e）
5.Math.max(x,y) 返回 x 和 y 中的最高值
6.Math.min(x,y) 返回 x 和 y 中的最低值
7.Math.pow(x,y) 返回 x 的 y 次幂
8.Math.random() 返回 0 ~ 1 之间的随机数
9.Math.round(x) 把数四舍五入为最接近的整数
10.Math.sin(x) 返回数的正弦
11.Math.sqrt(x) 返回数的平方根
12.Math.tan(x) 返回角的正切
BOM浏览器对象模型
1.window对象：所有对象都支持window对象 它表示浏览器窗口
2.BOM：通过写JS代码可以和浏览器交互
3.BOM浏览器页面操作：
3.1 window.open():打开新窗口
3.2 window.close():关闭当前窗口
3.3 window.innerHeight：浏览器窗口高度
3.4 window.innerWidth：浏览器窗口的内部宽度
3.5 window.navigator.appName：浏览器全称
3.6 window.navigator.appVersion：浏览器厂商和版本的详细字符串
3.7 window.navigator.userAgent：客户端绝大部分信息
3.8 window.navigator.platform：浏览器运行所在的操作系统
3.9 window.screen.availWidth：可用的屏幕宽度
4.0 window.screen.availHeight：可用的屏幕高度
4.1 window.history.forward()：前进一页
4.2 window.history.back()：后退一页
4.3 window.location.href：获取URL(网址)
4.4 window.location.href="URL"：跳到制定页面
4.5 window.location.reload()：重新加载页面
弹框：
4.6 alert("你看到了吗？")：警告框
4.7 confirm("你确定吗？")：确认框
4.8 prompt("请在下方输入","你的答案")：提示框
4.计时相关：
通过使用JavaScript可以在一定时间间隔之后执行代码 而不是在函数被调用后立即执行 称为计时事件
4.1 setTimeout()语法：
let t=setTimeout("JS语句",毫秒)
4.2 clearTimeout()语法：
clearTimeout(setTimeout_variable)
4.3 setInterval()语法:
setInterval("JS语句",时间间隔)
4.4 clearInterval()语法：
clearInterval(setinterval返回的ID值)
DOM文档对象模型
1.DOM：是一套对文档的内容进行抽象和概念化的方法 当页面被加载时 浏览器会创建页面的文档对象模型
2.HTML DOM树
2.1 DML标准规定HTML文档中的每个成分都是一个节点(node):
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
2.2 JavaScript 可以通过DOM创建动态的 HTML
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
3.查找标签
3.1 直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
3.2 间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
4.节点操作
4.1 创建节点
语法：let divEle = document.createElement("div");
4.2 添加节点
追加子节点语法：somenode.appendChild(newnode);
增加节点语法：somenode.insertBefore(newnode,某个节点);
4.3 删除节点
语法：somenode.removeChild(要删除的节点)
4.4 替换节点
语法：somenode.replaceChild(newnode, 某个节点);
4.5 属性节点
语法：XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性
4.6 文本操作
divEle.innerText
divEle.innerHTML
获取文本节点的值：var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值：var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"