前端JS篇：运算符、流程控制、三元运算符、函数、自定义对象、内置对象、json对象、正则对象、BOM与DOM

2022.4.28前端之JavaScript(2)

  • 运算符
  • 流程控制
  • 三元运算符
  • 函数
  • 自定义对象
  • 内置对象
  • json对象
  • 正则对象
  • BOM操作与DOM操作

一、运算符

1、算数运算符

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
var x = 10;
var res1=x++;  // 先赋值后自增1
var res2=++x  // 先自增1后赋值
// undefined
res1
// 10
res2
// 12

2、比较运算符

复制代码
  • 1
  • 2
  • 3
  • 4
  弱等于:自动转换类型
  '5' == 5  // 结果是true,js会自动转换成相同数据类型比较值是否一样
  强等于:不转换类型
  '5' === 5  // 结果是false,判断是否绝对相等

3、逻辑运算符

复制代码
  • 1
  • 2
python中使用 and、or、not
js中使用&&、||、!

二、流程控制

1、if判断

（1）单if分支

复制代码
  • 1
if(){条件成立执行的分支代码块}

（2）if...else分支

复制代码
  • 1
if(条件){条件成立执行的分支代码块}else{条件不成立执行的分支代码块}

（3）if...else if...else分支

复制代码
  • 1
  • 2
  • 3
if(条件1){条件1成立执行的分支代码块}
else if(条件2){条件2}
else{条件1和2都不成立执行的分支代码块}

（4）switch语法

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
var n1 = 1;
switch (n1) {  # n1是参数，对应case的值
    case 0:  # case 相当于
    console.log("干饭");
    break;  # 如果不加break会基于当前位置一直往下运行
    case 1:
    console.log("睡觉");
    break;
    case 2:
    console.log("玩耍")
    default:  # 没有对应条件统一执行default子代码
    console.log("无所事事!!!")
}

2、while循环

复制代码
  • 1
while(循环条件){循环体代码}

3、for循环

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
for(初始值;循环条件;每次循环之后的操作){循环体代码}

# 循环打印0-9的数字
for (var i =0;i<10;i++){console.log(i)}

# 循环打印数组内所有元素
var l1 = [11,22,33,44,55]
for(var i =0,i<li.length;i++){console.log(l1[i])}

三、三元运算符

复制代码
  • 1
  • 2
  • 3
# python中的三元运算
res = 11 if 1 > 2 else 22
# if 条件成立使用前面的值，反之使用后面的值

复制代码
  • 1
  • 2
  • 3
  • 4
// js中的三元运算
res = 1 > 2 ? 11 : 22
// 问号前面的条件成立则使用冒号前面的值，反之使用冒号右面的值
// 三元运算一般情况不推荐嵌套使用

四、函数

1、函数定义与调用

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
function 函数名(参数1,参数2){
    函数体代码
	return 返回值
}
// function 定义函数的关键字，相当于python中的def
// 函数名的命名参考变量名，并且js推荐使用驼峰体（MyFunc\MyFunc）
// 参数可写可不写
// return返回值

函数名(参数1,参数2)  // 正常加括号调用，有参则传参

2、无参函数

复制代码
  • 1
  • 2
function f1(){console.log(111)}
f1()

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
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('传了多个参数')
	}
    
// 1.返回值参数
    return 不支持返回多个数据

// 2.匿名函数：直接不写函数名
    var ff = function (){
    console.log(123)
	}
  
// 3.箭头函数(drf中vue框架会再次接触)
    var f = v => v;  // 箭头左边是形参右边是返回值
    // 等同于：
    var f = function(v){
    return v;
    }
    
    var f = () => 5;  // 匿名函数
    // 等同于：
    var f = function(){return 5};
    
    var sum = (num1, num2) => num1 + num2;  // 多参数函数
    // 等同于
    var sum = function(num1, num2){
    return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
  }

五、自定义对象

相当于python里面的字典

复制代码
  • 1
var d1 = {'name':'jason','age':18}

python字典取值操作js中的自定义对象都有，并且自定义对象还可以直接通过句点符取值 更像一个对象

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// 取值操作
	d1.name  # jason
// 循环取值
	for(var i in d1){
    console.log(d1[i])
  }

定义自定义对象还有一种标准格式(自定义对象 内置对象 第三方对象)

复制代码
  • 1
  • 2
  • 3
  • 4
var d1 = new Object()  // 相当于生成了空字典
...
var d1 = new Date()  // 内置对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");  // 正则对象

六、内置对象

内置对象可以看成是python中的内置方法，内置模块等提前写好直接调用。

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
// Date对象
var d1 = new Date()
d1.toLocaleString()	 // '2022/4/28 10:47:01'
d1.toLocaleDateString()	 // '2022/4/28'
d1.toLocaleTimeString()  // '10:47:01'

// getDate()                 获取日
// getDay ()                 获取星期
// getMonth ()               获取月（0-11）
// getFullYear ()            获取完整年份
// getYear ()                获取年
// getHours ()               获取小时
// getMinutes ()             获取分钟
// getSeconds ()             获取秒
// getMilliseconds ()        获取毫秒
// getTime ()                返回累计毫秒数(从1970/1/1午夜)

小练习：

复制代码
  • 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
// 需求：2017-12-27 11:11 星期三

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  // 定义一个数字与星期的对应关系对象

function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算
    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

	var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;  // 格式化输出
    console.log(strTime)
					};

showTime();

七、JSON对象

复制代码
  • 1
  • 2
  • 3
  • 4
# python中如何序列化反序列
import json
	json.dumps()
	json.loads()

复制代码
  • 1
  • 2
  • 3
// js中如何序列化反序列化
    JSON.stringify()
    JSON.parse()

八、正则对象

1、创建正则表达式的两种方式

复制代码
  • 1
  • 2
  • 3
  • 4
// 方式1：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
// 方式2：
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;  // 推荐使用(简化)

2、使用正则

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; 
reg2.test('jason123')   true

// 括号内什么都不写 就相当于写了undefined
reg2.test() 		   true

// 验证：
var reg3 = /undefined/       直接正则写undefined
reg3.test('jason666')		false
reg3.test('undefined')	     true
reg3.test()					true

// 全局匹配
// 在正则表达式的最后添加一个字母g
var reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg4.lastIndex  // 目前起始位置为0
// 0
reg4.test('jason666')
// true
reg4.lastIndex  // 目前起始位置为8
// 8
reg4.test('jason666')
// false

九、BOM操作（了解）

Browser Object Model是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

1、window操作浏览器

复制代码
  • 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
// 打开子页面
window.open('https://www.baidu.com','','width=400,height=400')  // (网址，名称，大小)， 子页面的操作其实可以通过一些手段传递给父页面(父子联动)

// 关闭页面
window.close()  

// 查看计算机及浏览器版本
window.navigator.appVersion
window.navigator.userAgent

// 前进一页
window.history.forward()

// 后退一页
window.history.back()

// 获取页面的url地址
window.location.href

// 刷新页面
window.location.reload()

// 跳转到指定页面
window.location.href = url

ps:window可以省略不写

2、弹框系列

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
alert("你看到了吗？")   // 页面弹框提示，可点击确认

confirm('要不要敲老赵的天灵盖')  // 页面弹框提示，可点击确认、取消，点击确认返回true，点击取消返回false，至后端服务器

prompt('你还有什么要交代的吗')  // 弹框提示用户输入内容，并且返回内容至后端服务器；也可以通过第二个参数添加默认内容

3、计时器

（1）单次计时

复制代码
  • 1
  • 2
var t = setTimeout(showMsg,9000)  // 9秒钟之后自动执行showMsg
clearTimeout(t)  // 取消定时器

（2）循环定时

复制代码
  • 1
  • 2
var s = setInterval(showMsg,3000)  // 每隔3秒执行一次
clearInterval(s)  // 取消定时器

（3）使用单次计时结束循环定时

复制代码
  • 1
  • 2
  • 3
  • 4
function showMsg() { alert(123) }
var t = setInterval(showMsg,3000)  // 循环定时3秒执行showMsg
function clearMsg() { clearInterval(t) }  // 包装结束循环定时的对象t
setTimeout(clearMsg, 9000)  // 单次定时执行结束对象t的函数

ps：

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕 

解决的措施之一:
  	将script标签写在body内最下方

十、DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素；
但是HTML页面上有很多相同的标签，所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

JS查找标签：

（1）直接查找

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// 1.通过标签名查找标签
document.getElementsByTagName('div')  // 数组套标签对象
// 2.通过class值查找标签
document.getElementsByClassName('c1')  // 数组套标签对象
// 3.通过id值查找标签
document.getElementById('d1')  // 标签对象本身

（2）间接查找

复制代码
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素
// 方法得出的标签对象还可以继续点击上述方法
// 通过间接方法可以顺藤摸瓜，找到每一个标签对象
posted @   马氵寿  阅读(77)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
展开