今日学习内容
JS数据类型
比较我们学过python的数据类型去学习
-
布尔值
python : bool True: 数字 False: 0 None '' [] {}... JS: boolen true false: (空字符串) 0 null undefined NaN null与undefined的区别 null可以理解为曾经拥有过数据值,现在暂时为空 eg:name=null。 undefined可以理解为从来没拥有过任何数据值,只声明为被赋值。 >let n = null undefined >n null >let n1 undefined
-
数组
数值对象的作用:单独的变量名来存储一系列的值。类似于Python的列表。
>var x1 = [11, 22, 33, 44, 55, 'xz']; undefined >typeof x1 'object
常用的方法:(类似python中列表的内置方法)
方法 说明 .length 数组的大小 .push(ele) 尾部追加 .pop() 获取尾部元素 .unshift() 头部插入元素 .shift() 头部移除元素 .slice(start,end) 切片 .reserse() 反转 .join(seq) 将数组元素连接成字符串 .concat(val,...) 连接数组 .
方法 说明 .sort() 排序 .forEach() 将数组的每个元素传递给回调函数 .splice() 删除元素并向数组添加新元素 .map() 返回一个数组元素调用函数处理后的新数组 注意:python列表添加元素有三种方式:append 尾部追加、insert 指定位置添加、extend
forEach
forEach(function(currentValue, index, arr), thisValue) forEach就是for循环thisValue的一个个数交给前面的function里面的数。 还可以用下面这种方式来遍历数组中的元素: >>for(var i = 0; i<x2.length;i++){console.log(i)} 0 1 2 3
参数 | 描述 |
---|---|
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数: currentValue当前元素,必需。 index当前元素的索引值,可选。 arr当前元素所属的数组对象,可选。 |
thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空, "undefined" 会传递给 "this" 值 |
map
在python中相当于映射。
map(function(currentValue,index,arr), thisValue)
>>var x2 = [11, 22, 33, 44]
undefined
>>x2.map(function(a, b, c){return a +10})
Array(4) [ 21, 32, 43, 54 ]
>>x2
Array(4) [ 11, 22, 33, 44 ]
splice
splice(index,howmany,item1,.....,itemX)
删除其中元素,再添加新元素
>>var x1 = ['xz', 'wyb', 'cg', 'bjyx', 11, 22, 33]
undefined
>>x1.splice(3,2,'hahaha')
Array [ "bjyx", 11 ]
>>x1
Array(6) [ "xz", "wyb", "cg", "hahaha", 22, 33 ]
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 必需。规定应该删除多少元素。必须是数字,但可以是 "0"。 如果未规定此参数,则默认删除从index开始到原数组结尾的所有元素。 |
item1, ..., itemX | 可选。要添加到数组的新元素 |
-
自定义对象
js
中所有事物都可以是对象:字符串、数组、数值、...js
可以自定义对象。对象是带有属性和功能的特殊数据类型。
js中的自定义对象相当于python字典
自定义对象的方式有两种 第一种:let d1 = {'name': 'xz', 'pwd': '123'} 第二种:let d2 = new Object() 自定义对象操作数据值的方式更加简单,直接用聚点符。 在python也可以通过聚点符来操作字典的数据值,通过魔法方法。
JS常见运算符
-
算数运算符
自增与Python有区别的。
var z = 10; var r1 = z++; var r2 = ++z;
-
比较运算符
> >= < <= != == === !== == 弱等于,js会自动先转换类型为相同的。 === 强等于,强制js不在类型转换。 !== 强不等于 is 在js中不做运算符。
-
逻辑运算符
&& 相当于 and || 相当于 or ! 相当于 not
-
赋值运算符
= += -= *= /= 与Python赋值运算符相同
JS流程控制
-
分支结构
1.单if分支 if(条件){条件成立后执行的代码} 2.if...else分支 if(条件){ 条件成立后执行的代码 }else{ 条件不成立后执行的代码 } 3.if...else if...else分支 if(条件1){ 条件1成立后执行的代码 }else if(条件2){ 条件1不成立,条件2成立执行的代码 }else{ 条件都不成立后执行的代码 }
switch
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }
-
循环结构
for
for (var i=0;i<10;i++) { console.log(i); } ''' 通常将声明和初始化值,多个条件,自增添加到for循环后面的括号内 ''' 课堂小练习 打印数组内所有的数据值 l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'xz'] for(let i=0;i<l1.length;i++){ console.log(l1[i]) }
while
var i = 0; while (i < 10) { console.log(i); i++; } ''' 通常将现在while前面声明变量,然后在while后括号内写条件,条件成立执行代码并将i变量自增。 循环执行,直到while后面条件不成立为止。 ''' 课堂小练习 打印数组内所有的数据值 l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'xz'] var i = 0 while (i<l1.length){ console.log(l1[i]) i ++ }
三元运算
var a=10,b=20; var x=a>b ?a:(b=="20")?a:b; 三元运算顺序: 先写判断条件a>b 再写条件成立返回的值为a, 条件不成立返回的值为b; 三元运算可以嵌套使用;
JS函数名称与作用域
函数:
python中函数:
def 函数名(形参){
注释
函数体代码
return 返回值
}
js中函数:
function 函数名(形参){
函数体代码
return 返回值
}
j函数中参数的个数不需要一一对应,
如果想要限制参数的个数则需要使用关键字`arguments` 内置关键字
function func(a, b){
if(arguments.length===2){
console.log(a,b)
}else{
console.log('传入参数的个数不对')
}
}
arguments相当于将出传入的参数全部包含成数组,通过索引取出传入后参数。
匿名函数:
function(a, b){
return a + b;
}
在js中匿名函数就是将函数名去掉,其他不变。
可以将其函数绑定一个名字
let f1 = function(a, b){ return a + b;}
箭头函数:
用箭头定义函数ESC6中。
var f = v => v; (前一个v是参数,后一个v是返回值)
相当于
var f = function(v){
return v;
}
(省略了function和return)
如果需要传多个参数或者不需要参数的话就用圆括号来代表参数。
var f = () => 10 相当于 var f = function(){return 10};
var sum = (num1, num2) => num1 + num2;
相当于
var sum = function(num1, num2){return num1 + num2;}
return 返回多个值时,需要将他们包成数组或者对象形式。
闭包函数:
定义:定义在函数体内部的函数,内部的函数用到了外部的名称空间里的名字。
js的函数的全局变量和局部变量:
- 局部变量:js函数内部声明的变量 var,声明变量就开始直到函数体代码运行完就结束。
- 全局变量:声明在函数体代码外的变量,网页的所有脚本和函数都能访问它。声明变量就开始直到页面关闭就结束。
- 与python作用域关系查找一模一样!
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是?
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是?
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
JS内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名();
1.Date对象
var obj = new Date(); //创建Date对象
//getDate() 获取日
obj.getDate()
//getDay () 获取星期
obj.getDay()
//getMonth () 获取月(0-11)
obj.getMonth()
//getFullYear () 获取完整年份
obj.getFullYear()
//getYear () 获取年
obj.getYear()
//getHours () 获取小时
obj.getHours()
//getMinutes () 获取分钟
obj.getMinutes()
//getSeconds () 获取秒
obj.getSeconds()
//getMilliseconds () 获取毫秒
obj.getMilliseconds()
//getTime () 返回累计毫秒数(从1970/1/1午夜)
obj.getTime()
详细Date对象方法参照:https://www.w3school.com.cn/jsref/jsref_obj_date.asp
2.JSON序列化对象
python序列化:
import json
json.dumps()
json.loads()
JS中的序列化:
JSON.stringify()
JSON.parse()
`序列化`对象转换成JSON字符串
>>let bbb = {'name': 'xz', 'pwd': 123}
>>let strbJson = JSON.stringify(bbb) //序列化 json
>>strbJson
"{\"name\":\"xz\",\"pwd\":123}"
`反序列化` JSON字符串转换成对象
>>let ob = JSON.parse(strbJson)
>>ob
Object { name: "xz", pwd: 123 }
3.RegExp对象
定义正则表达式有两种方式:一种是对象,一种是直接初始化用两个斜双杆。
//定义正则表达式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
//正则校验
reg1.test('xz2318')
reg2.test('xz2318')
注意:
正则表达式中不能有空格
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
里面的g表示全局匹配,会发现每匹配同样的数据每次的结果不一致
注意:全局匹配时有一个lastIndex属性
BOM操作
BOM:浏览器对象模型。通过写js代码可以跟跟浏览器交互。
需要借助window对象,它表示浏览器窗口。
常见window方法 | 说明 |
---|---|
window.innerHeight | 浏览器窗口的内部高度 |
window.innerWidth | 浏览器窗口的内部宽度 |
window.open() | 打开新窗口,括号填某个网址,就可以打开该网址的页面 |
window.close() | 关闭当前窗口,括号填某个网址,就可以打开该网址的页面 |
window.open('https://www.python.org/','','height=200px,width=200px,left=500px')
后面参数是调整弹出页面的宽高以及移动的方式,位置。
navigator对象
浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
history对象
window.history
浏览器历史,包含了用户对当前页面的浏览历史,可以前进或者后退一个界面。
history.forward() // 前进一页
history.back() // 后退一页
location对象
window.location
对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
1.提示框:alter()"AAAAA?")
2.确认框:confrim()"你确定吗?")
3.提示框:prompt('你真好看!!!')
计时相关
setTimeout()
每个一定时间之后来执行代码,而不是函数被调用之后立刻执行,被称之为计时事件
定时器相关操作(重要)
function func1(){
alert('终于要干饭了')
}
let t = setTimeout(func1,3000) // 3秒中之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
var s1 = null
function showMsg() {
function func1(){
alert('终于要干饭了')
}
s1 = setInterval(func1, 3000)
}
function clearMission(){
clearInterval(s1)
}
showMsg()
setTimeout(clearMission, 10000)
DOM操作
DOM:文档对象模型。通过写js代码可以跟html交互。
-
标签查找
document.getElementById() 根据id值查找标签 结果直接是标签对象本身,如果没有查找到返回null document.getElementsByClassName() 根据class值查找标签 结果是数组类型,如果没有查找到返回null document.getElementsByTagName() 根据标签名查找标签 结果是数组类型,如果没有查找到返回null ''' <div id="d1">div</div> <div class="c1">div</div> <div>div</div> <p class="c1"></p> <span id="d2">span</span> ''' document.getElementById('d1'); document.getElementById('xxx'); document.getElementsByClassName('c1'); document.getElementsByClassName('xxx'); document.getElementsByTagName('div'); document.getElementsByTagName('xxx');
-
间接查找
parentElement 父节点标签元素 children 所有子标签 firstElementChild 第一个子标签元素 lastElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素
-
节点操作
1.创建一个节点 createElement(标签名) var divEle = document.createElement("div"); 注意:如果有标签对象需要反复使用,可以使用变量存储 2.节点操作 let XXXEle = document.createElement('标签名') XXXEle.id = 'id值' XXXEle.innerText = '内部文本' divEle.append(XXXEle) 注意: 这是动态创建出来的,所以文档中没有展示。 临时往文档添加,不会改变原本代码。 3、属性操作 XXXEle.属性 设置标签的默认属性 XXXEle.setAttribute() 既可以设置标签的默认属性也可以设置标签的自定义属性 let imgEla = document.createElement('img') imgEla.src = '1.png' imgEla.setAttribute('abc',123) imgEla 4、文本操作 divEle.innerHTML 获取标签内部所以的内容,包括标签和内容文本 divEle.innerText 获取标签内的内容文本 divEle.innerHTML = '<h1>好难</h1>' 设置标签内容,能够识别标签 divEle.innerText = '<h1>yue了</h1>' 设置标签内容,不能够识别标签