开发工程师必备————【Day20】JavaScript数据类型，函数与面向对象，BOM和DOM

今日内容概要

• JS基本数据类型补充
• JS常见运算符
• 流程控制
• 函数与面向对象
• JS的BOM与DOM操作

JS基本数据类型补充

JS数据类型之布尔值

1.布尔值（Boolean）

• python中bool：
  True；False：0 None ‘’ [] {} …
• JS中boolean：
  true；false：(空字符串)、0、null、undefined、NaN

2.null与undefined的区别

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

如图： null可以理解为曾经拥有过 现在暂时空了
undefined可以理解为从来没拥有过

JS数据类型之对象(object)

1.JS中对象的特点：

• 在JS中也是一切皆对象,字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。
• JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
• 对象只是带有属性和方法的特殊数据类型。

2.对象之数组(相当于python中的列表)

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

• 常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素连接成字符串
.concat(val, …)	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

3.列举几个常用方法：
（1）forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)

（2）splice()

语法：

splice(index,howmany,item1,.....,itemX)

（3）map()

语法：

map(function(currentValue,index,arr), thisValue)

JS数据类型之自定义对象(object)

自定义对象(相当于python中的字典)
1.两种定义方式：

方式一：
let d1 = {'name':'jason','pwd':123}

方式二：
let d2 = new Object()

2.取值
自定义对象操作数据值的方式更加简单直接使用句点符

d1.name
'jason'

ps:思考python中如何让字典也可以通过句点符操作字典的数据值

运算符

1.算数运算符

这里由于的x++和++x在出现赋值运算式，
x++会先赋值再进行自增1运算，
而++x会先进行自增运算再赋值！
var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

2.比较运算符

>;>=;<;<=;!=;==;===;!==

== 弱等于(自动转换成相同数据类型)

5 == '5'
true

=== 强等于(不自动转换)

5 === '5'
false

3.逻辑运算符

JS中	Python中
&&	等价于python中的and
两个竖杠	等价于python中的or
!	等价于python中的not

4.赋值运算符

=;+=; -=; *=; /=;

流程控制

1.分支结构

• 单if分支

语法：
if(条件){条件成立之后执行的代码}

• if…else分支

语法：
if(条件){
           条件成立之后执行的代码
       }else{
           条件不成立之后执行的代码
       }

• if…elif…else分支

语法：
   	if(条件1){
           条件1成立之后执行的代码
       }else if(条件2){
           条件1不成立条件2成立执行的代码
       }
       else{
           条件不成立之后执行的代码
       }

• switch语法

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

var day = new Date().getDay();
switch (day) {
 case 0:
 	console.log("Sunday");
 	break;
 case 1:
 	console.log("Monday");
 	break;
default:
 console.log("我也不知道星期几！")
}

2.循环结构

• for循环

for(let i=1;i<101;i++){
   console.log(i)
}

举个栗子——打印数组内所有的数据值：

l1 = [11,22,33,44,55,66,77,88,'kk']
for(let i=0;i<l1.length;i++){
   console.log(l1[i])
}

• while循环

语法：
while(条件){
    循环体代码
}

var i = 0;
while (i < 10) {
 console.log(i);
 i++;
}   

• 补充之三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

函数

1.函数语法

# 普通函数定义
function 函数名（形参）{
	函数体代码
	return 返回值
}
#function 定义函数的关键字 相当于python中的def；
#函数名的命名参考变量名 并且js推荐使用驼峰体(Myfunc\MyFunc)
#参数可写可不写
#return返回值（不支持返回多个数据）

# 带参数的函数
function func(a,b){
console.log(a,b)
}

无参函数

function f1(){console.log(111)}
f1()

有参函数

function f2(a,b){console.log(a,b)}
f2()   # 可以调用 相当于传了两个undefined
f2(1)  # 可以调用
f2(1,2)   # 可以调用
f2(1,2,3,4,5)  # 可以调用

js中的函数提供了有个内置关键字arguments：接收所有参数
代码验证：

function f2(){
	console.log(arguments)
	if (arguments.length === 0){
	console.log('什么参数都没传')
	}else if(arguments.length === 1){
 		console.log('传了一个参数')
	 }else{
 		console.log('传了多个参数')
	 }
}

参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments。

2.匿名函数

function(a,b){
	return a+b;
}

3.箭头函数

var f = function(v){
	return V;
}
var f = V => V;   //箭头前面为形参，箭头指向的是返回值

举个栗子：

var f = () => 5;
//等同于
var f function(){return 5};

var sum = (num1, num2) => num1 + num2;
   // 等同于
var sum = function(num1, num2){
   return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

JS内置对象

1.概念
类似于python中的内置函数或者内置模块
2.语法
var 变量名 = new 内置对象名();

3.Date日期对象

let Dobj = new Date();
dobj
Thu Aug 25 2022 23:38:32 GMT+0800 (中国标准时间)

dobj.toLocaleString()
'2022/8/25 23:38:32'

方法名	功能
getDate()	获取日
getDay()	获取星期
getMonth()	获取月（0-11）
getFullYear()	获取 年份
getMilliseconds()	获取毫秒

4.JSON序列化对象

• 对象转换成JSON格式字符串

JSON.stringify

let d1 = {name: 'jason', pwd: 123};
let sd1 = JSON.stringify(d1)

'{"name":"jason","pwd":123}'

• JSON格式字符串 转换成对象

JSON.parse

let.sd1 = '{"name":"jason","pwd":123}'
let.d2 = JSON.parse(sd1)

{name: 'jason', pwd: 123}

5.RegExp正则对象
两种方法：

//方法一
let reg1 = new RegExp("^[a-zA-z][a-zA-Z0-9]{5,11}");

//方法二
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

正则表达式中 不能有空格

**当在匹配的括号里什么都不写时 自动匹配 undefined **

BOM操作

1.BOM:浏览器对象模型
通过写js代码可以跟浏览器交互

• 打开一个网页窗口

window.open('http://www.baidu.com','','height=100px,width=100px,left=500px')

• 关闭网页窗口

只能关，自己写的打开的页面

window.close()

• 客户端绝大部分信息

userAgent 作为游览器的标识

window.navigtor.userAgent

2.history对象
控制网页前进 或 返回上一页
history.forward()
history.back()

//控制网页 前进一页
window.history.forward()

//控制网页返回上一页
window.history.back()

3.location对象
查看当前网址 或跳转 至某网址
location.href

//查看当前网址
window.location.href
'https://fanyi.youdao.com/'

//跳转至 某网页
window.location.href='www.baidu,com'

刷新网页，重新加载：
location.reload()

window.location.reload()

4.弹出框

• 确认框
  confirm()
  当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

confirm('要爆炸了！！')
//用户点确定 返回True 点取消返回False

• 警告框
  alert()

alert('真的要爆炸了！！')

• 提示框
  prompt
  当提示框出现后 用户需要输入值 然后点击确认或取消按钮 才能继续操作

prompt("你在干神魔？")
//用输入确认 那么 返回值 为输入的值 如果用户点击取消，那么返回值为null

5.计时器

• 定时任务
  setTimeout()

function func1(){
       alert('爆炸时间到！！')
   }
let t = setTimeout(func1,3000)

• 循环定时任务
  setInterval()

function func1(){
       alert('爆炸时间到！！')
   }

let t1 =setInterval(func1,3000)

验证 停止 循环定时任务

var s1 = null
   function showMsg() {
       function func1(){
           alert('爆炸了！')
       }
	t1 = setInterval(func1, 3000)}
   function clearMission(){
       clearInterval(s1)
   }
setTimeout(clearMission, 9000) //定时当 九秒后 调用函数 停止 循环定时
showMsg()  //启动 函数里的循环 定时任务

DOM操作

1.DOM:文档对象模型
通过写js代码可以跟html交互

2.HTML DOM树

3.DOM操作查找标签(节点)
直接查找标签
JS操作html和css操作html学习套路一致 那是先学如何查找标签

• 代码准备

<body>
<div id="d1">div</div>
<div class="c1">div</div>
<div>div</div>
<p class="c1"></p>
<span id="d2">span</span>
</body>

• 根据id 查找 标签
  结果是数组

document.getElementById('d1')

<div id="d1">div</div>

• 根据class 查找标签
  结果是数组

document.getElementsByClassName('c1')

HTMLCollection(2) [div.c1, p.c1]

• 根据 标签类型 获取标签
  结果是数组

document.getElementsByTagName('div')

//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]

涉及到DOM的操作 的JS代码应该放在文档的body标签 内部的最下方

4.间接查找标签

• 代码准备

<body>
<p>111</p>
<p>222</p>
<div id="d1">
 div
 <p>div>p
 <span>div>p>span</span>
 </p>
 <span>div>span</span>
 <p>div>p</p>
</div>
<span>333</span>
<span>5555</span>
</body>

• 存储标签

let div1Ele = document.getElementById('d1')
div1Ele

<div id="d1">
 div
 <p>div&gt;p
 <span>div&gt;p&gt;span</span>
 </p>
 <span>div&gt;span</span>
 <p>div&gt;p</p>
</div>

• 获取 该标签的父标签

document.getElementById('d1').parentElement
div1ELe.parentElement

<body>
<p>111</p>
<p>222</p>
<div id="d1">
 div
 <p>div&gt;p
 <span>div&gt;p&gt;span</span>
 </p>
 <span>div&gt;span</span>
 <p>div&gt;p</p>
</div>
<span>333</span>
<span>5555</span>

</body>

• 获取所有的子标签

div1Ele.children

HTMLCollection(3) [p, span, p]

• 获取 第一子标签

div1Ele.firstElementChild

<p>div&gt;p
 <span>div&gt;p&gt;span</span>
</p>

• 获取最后一个子标签

div1Ele.lastElementChild

<p>div&gt;p</p>

• 获取下一个兄弟标签

div1Ele.nextElementSibling

<span>333</span>

• 获取上一个兄弟标签

div1Ele.previousElementSibling

<p>222</p>

5.DOM操作 操作节点

• 创建标签对象

let aEle = document.createElement('a')  //创建一个a标签

• 给标签添加属性

aEle.href = 'https://www.baidu.com'  //给a标签添加 href属性

• 给标签添加文本

aEle.innerText = '前往百度主页'  //给给 a标签 添加 文本

<a href="https://www.baidu.com">前往百度主页</a>

• 让创建 的标签添加至文档流中（页面上）
  该方式为动态创建 临时有效

div1Ele.append(aEle)  //通过查找到的标签 点 append 添加 创建好的a标签 值末尾

div1Ele.insertBefore(aEle,div1Ele.firstElementChild)  //添加至指定节点的前面

属性操作：

设置标签的自定义属性
setAttribute

//setAttribute 标签可以定义 默认属性也可以定义自定义属性
img1.setAttribute('src','111.png')

img1.setAttribute('aaa','kkk')  
通过点的形式定义的 属性 只能是默认属性

文本操作：

获取标签内所有文本与标签（可以创建子标签）
innerHTML

div1Ele.innerHTML

'\n  div\n  <a href="https://www.baidu.com">前往百度主页</a><p>div&gt;p\n  ><span>div&gt;p&gt;span</span>\n  </p>\n  <span>div&gt;span</span>\n  ><p>div&gt;p</p>\n'  //不同的标签通过撬棍 符分割

//创建子标签
div1Ele.innerHTML= '<h3> 这是innerHTML</h5>'
div1Ele
<div id="d1"><h3> 这是innerHTML</h3></div>

获取标签内文本
innerText

div1Ele.innerText

'div 前往百度主页\n\ndiv>p div>p>span\n\ndiv>span\n\ndiv>p'