JavaScript进阶

JavaScript进阶

这一篇文章, 我们会讲述四个关于JavaScript的学习内容

一、条件判断

二、循环

三、函数

四、定时器

一、条件判断

js条件判断的语义 逻辑 和python一样 语法不同
python里面的判断关键字是if
js也是一样, 关键字也是if
if 条件

// if 条件
var a = 10;
var b = 10;
// 最基本的条件判断
if(a === b){
  // 如果条件成立 则执行里面的代码
  console.log("条件成立");
  alert("条件成立");
  // else 后面可以不加条件
}else{
  console.log("条件不成立");
  alert("条件不成立");
}

结果:

控制台:

逻辑判断, 我们在上一篇javascript基础里面讲到过了, 就是三个等号的意思, 如果这方面还是不明白, 需要复习以下之前的内容。

多条件判断
比如说年龄判断
场景:
年龄大于等于50岁 你就不能上网了 小于18岁 不能上网

// let age = 17; // 弹出窗口:你未成年, 不能上网!
// let age = 18; // 弹出窗口:你已经成年了, 可以上网了!
let age = 60; // 弹出窗口:你超过50岁, 还是别上网了!
if(age >= 50){
	alert("你超过50岁, 还是别上网了!");
}else if(age >= 18){
	alert("你已经成年了, 可以上网了!");
}else{
	alert("你未成年, 不能上网!");
}

js和python的逻辑是一样的 只不过写法有点儿区别
逻辑运算符 and --> && --> 与/并且 or --> || --> 或

let a1 = 10;
let b1 = 20;
// &&左右两边条件都为真 才为真 只要有一个条件为假 那就为假
// ||左右两边 只要有一个为真 那就为真
// ! 相当于not, 对结果取反
if(a1 > 10 && b1 > 0){
	console.log("条件成立");
	alert("条件成立");
}else{
	console.log("条件不成立");
	alert("条件不成立");
}
if(a1 > 10 || b1 > 0){
	console.log("条件成立");
	alert("条件成立");
}else{ 
	console.log("条件不成立");
	alert("条件不成立");
}
if(!(a1 > 10 || b1 > 0)){
	console.log("条件成立");
	alert("条件成立");
}else{
	console.log("条件不成立");
	alert("条件不成立");
}

结果:

控制台:

二、循环

1.普通的for循环
for (语句1, 语句2, 语句3){
被执行的代码块
}

// 自增 后置自增i++ 前置自增++i
for (let i = 0; i < 5; i++) {
	console.log(i);
}

结果:

2.根据可迭代对象循环 数组 字符串
注意, 这里有个关键字是of

// 被执行的代码块
let arr = [1, 2, 3, 4, 5]
// let i in arr --> 类似于python语法, js是let i of arr
for (let a of arr) {
	console.log(a);
}

object对象 --> 类似于python当中的字典

let a = {
	name: "Nathan",
	age: 20,
	i: "湖南省"
}
for(let i of a){
	console.log(i);
}

结果发现, 这里报错了
报错信息:i is not iterable
这里有个很关键的点, 如果我们想要对objects对象进行遍历的话, 那就必须使用in这个关键字。

for (let i in a) {
  // 和python一样, 遍历出来都是键 key
  // console.log(i);
  // 如何拿到键 对应的值?
  // console.log(a.i);
  // 打印了三次"湖南省", 他会默认从对象a里面找i键值对, 这不是我们想要的结果
  // 那怎么办呢?
  // 注意:这里面有一个细节
  // 要想拿到对象里面的值 必须要使用 对象[]
	console.log(a[i]);
}

如果这里直接打印:console.log(i);那就会输出所有的键 key
拿到键对应的值的方法, 我们可以想到上一篇写到的对象怎么提取键对应的值。
但结果发现, 这种写法, 打印了三次"湖南省", 他会默认从对象a里面找i键值对, 这不是我们想要的结果。
最终解决办法就是: 使用对象[]的方法去获取objects里面键对应的值。

关于上面这段代码, 大家可以手动尝试去运行下。

while循环 一定是根据条件循环

let _a = 0;
// 只要条件成立, 就会疯狂的执行
// 我们要避免出现死循环, 比如以下情况:
// while(_a == 10){
// 	console.log("死循环");
// }
// 在while循环中, 如果需要结束循环, 那么就要改变条件
while(_a < 10){
	console.log("无限循环");
	// 可以循环一次 让a自增 每循环一次 a都会加1 累加
	_a++;
}

我们要避免死循环而导致网页卡死崩溃的情况, 当while里面的条件一直成立的时候, 就会出现死循环。

break和continue的用法

// break和continue	break: 结束整个循环	continue: 结束当前循环 进入下一个循环
let arr_a = [1, 2, 3, 4]
for(let i of arr_a){
	if(i == 3){
		break;
	}
	console.log(i);
	}
let arr_a2 = [1, 2, 3, 4]
for(let i of arr_a2){
	if(i == 3){
		continue;
	}
	console.log(i);
}

反引法
python里面的字符串格式化 -->f插值法 将变量插入到字符串里面 f"{变量}"
js的格式化方法:${变量}

let var_a = 10;
console.log(`我今年${var_a}岁`);

结果:

三、函数

函数就是一个封装功能的代码块 可以重复的使用
python里面的函数是def
js中 函数的写法 分为两种
1.普通的写法 function 函数名(){写函数的代码} 调用函数的方法:函数名();

function a(){
	console.log("我是函数a");
}
a(); // 调用函数

2.箭头函数 什么叫做箭头函数? 需要有一个箭头
创建一个变量叫做b, 它里面存着一个箭头函数 一般叫做箭头函数b
区别: 箭头函数 看起来简单 有一个优点 箭头函数里面 没有指针 this

let b = () => {
	console.log("我是函数b");
}
b();

函数里面的参数, 形参和实参

let b1 = (x) => {
	console.log(x);
}
b1(1);

传了形参 都需要有对应的形参来接受 x就是你传过来的1

结果:

在调用函数的时候, 可以往里面传入参数 实参
类似python中的位置参数 形参和实参需要一一对应 不能多也不能少

let b2 = (x, y) => {
	console.log(x, y);
}
b2(1, "Nathan");

结果:

y叫做默认参数 实参可以不传
如果y传了值, 就以传的为准, 如果没有传值, 默认就是20

let b3 = (x, y = 20) => {
	console.log(x, y);
}
b3(1, 30);

结果:

return关键字返回函数值

let b4 = (x, y = 20) => {
	// 通过return 关键字 将函数内部的值返回出去
	return x + y;
}

如果你想看到返回值 就必须要调用函数并赋值, 否则结果是打印不出来的哦。

let result = b4(1);
console.log(result);

结果:

下面我们介绍箭头函数的独有写法, 注意:普通函数不能这么写哦
let b4 = (x, y = 20) => {x + y}
不需要return, 直接写在一行, 这样也可以返回x + y的值

函数嵌套

let _a = () =>{
	console.log("我是函数_a");
	// 在函数a里面调用函数b
	_b();
}
let _b = () =>{
	console.log("我是函数_b");
}
// 调用函数a
_a();

结果:

注意:
函数的执行顺序 和你创建函数的顺序无关
谁先执行, 就先打印谁

作用域

在函数里面 叫做局部作用域 函数外面就叫做全局作用域 局部作用域里面的变量叫做局部变量

let function1 = () => {
	let _a1 = 10;
	console.log(_a1);
}
function1();
// _a1是局部变量
// 函数外面没办法访问
console.log(_a1); // 报错, 因为局部变量在函数外面没办法访问

结果:

四、定时器
在JavaScript当中, 有两个定时器
分别是setTimeOut()和setInterval()
1.setTimeOut()
定时器 setTimeout() 一段时间之后 就会发生的事情

有两个参数 回调函数 => 经过一定的时间之后 会自动执行 不需要手动的去调用 经过的时间 以毫秒为单位 1s约等于1000ms

执行的次数只有一次 不会重复的执行

setTimeout(() => {
	console.log("2秒钟之后执行代码");
}, 2000);

结果:

我们可以看到, 在控制台里面, 过了2秒钟之后, 文字就跳出来了。

2.setInterval()
每个一段时间会执行一次
相当于无限循环

setInterval(() => {
  console.log("我打印了");
}, 3000);

结果:

我们发现每间隔3秒, 会连续不断的打印信息

那我们该怎么解决无限循环的问题呢? 怎么关闭定时器?

比如说我们只想要让它运行一次, 就直接终止循环
解决办法:

var a = 0;
var timeOut = setInterval(() => {
	console.log("我打印了");
	this.a++;
	if(a >= 1){
		clearInterval(this.timeOut);
		if(this.timeOut != null){
			this.timeOut = null;
		}
	}
}, 3000);

结果:

很明显能够看到, 这个"我打印了"只输出一次了。成功解决问题。

那之后实战常用关闭定时器的方法:需要我们用户来关闭 我们需要和网页做交互 点击某个按钮 来让定时器停止。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <button onclick="openTimer()">开启定时器</button>
		<button onclick="closeTimer()">关闭定时器</button>
	</body>
</html>

var interval = null;
var openTimer = () => {
	this.interval = setInterval(() => {
		console.log("1秒钟之后执行代码");
	}, 1000);
}
var closeTimer = () => {
	clearInterval(this.interval);
	if(this.interval != null){
		this.interval = null;
	}
}

结果:

我们点击开始定时器

开启定时器后, 每隔一秒钟就会运行内容
我们再点击关闭定时器

结果:

我们就可以发现, 45一直都没有动, 这就说明我们成功的关闭了定时器。

以上就是js进阶使用的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 大家互相学习一起进步, 欢迎随时来提问题!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!