看懂《书源规则:从入门到入土》(5)JS入门-语法篇
前言:在上一章中
,我们学会了如何使用正则表达式查找字符串。在本章中,我们将学习用js(JavaScript)对数据进行处理。
免责声明:
该系列(看懂《书源规则:从入门到入土》)图文仅供学习使用,自行编写的规则所造成的后果请自行承担,本人概不负责。
-----------
⚠️前方超高能⚠️
什么是JavaScript?JavaScript(准确说应该是ECMAScript)是一种通常用于网页的脚本语言。
一般来说,所有的编程教程中第一课hello world,但阅读的数据输出方式有点奇葩,这一课跳过
----------
运算符(此处仅讲常用,完整列表见
查看链接
):
=:赋值,把等号右边的值写到左边的变量里。比如
x=1的意思是把变量x的值设置为1。
+ - * / %:前4个不用解释吧
?%是求余,比如
x%y表示求x整除y的余数。
++:自加,给变量原来的值加上(加号个数-1)。比如x++的意思是给x的值加1(即如果原来x的值是1,执行后x的值就是2)。同理:
x+++的意思是给x加2,
x+++++++++++的意思是给x加10
--:自减,和自加同理,不过是减(减号个数-1)
注意:如果在调用时使用自加/自减运算符,运算符在变量前计算再返回,运算符在变量后是先返回再计算
例:
x=1
y=++x
这时x=2 , y=2
x=1
y=x++
此时x=2 , y=1
+=:加赋值,给左边的变量加上右边的值。比如
x+=1和x=x+1最终效果是一样的(但执行效率不一样)。
-= *= /= %=:同理
----------
条件判断:
==:等于。如果左边的值等于右边则返回true,否则返回false。
===:全等于。如果左边的值等于右边且左右两边类型相同则返回true,否则返回false。
例:
1=="1"返回true
1==="1"返回false
1===1返回true
!=:不等于。如果左边的值不等于右边则返回true,否则返回false。
!==:不全等于。如果左边的值不等于右边或左右两边类型不相同则返回true,否则返回false。
>:大于。如果左边的值大于右边则返回true,否则返回false。
< >= <=:小于 大于等于 小于等于。同理
!(英文感叹号):非。如果右边的值是false则返回true,否则返回false
&&:与。如果两边的值都是true则返回true,否则返回false
||(两个分隔号):或。如果两边其中一边返回true则返回true,否则返回false
注意:如果表达式用“与”/“或”将多个子表达式相连,只要其中一个符号能返回true将返回true。
例:x&&y&&z和(x&&y)||(y&&z)效果是一样的!
?和:(英文冒号):如果问号前的值是true则返回问号到冒号间表达式计算结果,否则返回冒号后的表达式计算结果。
例:y=x ? 1 : 2
如果x的值是true,则y=1,否则y=2
------------------
进入编程篇前,先认识下下面这25个单词吧:
break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with
这25个单词叫js关键字,它们不能作为变量名和函数(方法)名!
下面我们开始认识这25个关键字。
-----------------------
js解释器在执行js代码的时候会从上向下一行行依次执行。这是最原始的一种程序结构--顺序结构:
举个例子:
var x=1
x+=1
在这个程序中,我们先通过var关键字声明了一个变量x并赋值1,然后再给这个变量的值加1
--------------------
很明显,这种结构没办法让程序根据不同的情况做出不同的反应。那么,就需要第二种结构--条件结构,让程序根据预设的条件做出预设的反应。
(此处仅讲常见情况,骚操作
及完整列表见
查看链接
)
js中用来编写条件结构的关键字有两套,分别是(if , else)和(switch , case , default)
if/else的语法很简单:
if(条件){如果条件达成就执行这里的代码}
else{如果条件不达成就执行这里的代码}
如果要设置多个条件怎么办呢?这样
if(条件1){如果条件1达成就执行这里的代码}
else{
if(条件2){如果条件2达成就执行这里的代码}
else{如果条件2不达成就执行这里的代码}
}
上面这种情况还能这样写:
if(条件1){如果条件1达成就执行这里的代码}
else if(条件2){如果条件2达成就执行这里的代码}
else{如果所有条件都不达成就执行这里的代码}
注:在"if"和"else"之间,"else if"可以有多个
---------
switch/case/default的语法就复杂一点点了:
switch(变量名){
case 值1:
如果上面括号里指定的变量的值等于值1,从这里开始执行。
case 值2:
如果上面括号里指定的变量的值等于值2,从这里开始执行。
default:
如果上面括号里指定的变量的值均不等于任何一个case后面的值,从这里开始执行。
}
注:case可以有多个
大家看到了,这里的说法变了,不是“执行这里”而是“从这里开始执行”(敲黑板!)。也就是说,如果这里的变量值等于值1的话,这整个大括号里的代码都会被执行一遍
如果不想发生这种情况怎么办呢?在你要停止的地方写break。当执行到break语句后,就会停止执行后面的代码了,就像这样:
switch(变量名){
case 值1:
如果上面括号里指定的变量的值等于值1,从这里开始执行。
break
case 值2:
如果上面括号里指定的变量的值等于值2,从这里开始执行。
break
default:
如果上面括号里指定的变量的值均不等于任何一个case后面的值,从这里开始执行。
break
}
--------------------
如果我们要重复执行同一段代码的话,应该怎么办呢?
复制粘贴几次
?这个也许是一个办法,但一定不是一个优雅的办法。
那么,现在我们认识最后一种结构--循环结构
(此处仅讲常用,完整列表见
查看链接
)
js中用来编写循环结构的关键字有两个,分别是for(常用)和while:
for的语法很简单:
for(初始化代码;循环条件;每次循环结束后执行的代码){需要被循环执行的代码}
我猜肯定有人看得云里雾里,举个常见例子吧。
for(var i=0;i<10;i++){要循环执行的代码}
那么在js解释器执行这段代码的时候,会进行以下流程:
1:执行"var i=0"。
2:判断条件"i<10"是否达成。
3:如果上一步的条件满足则执行大括号里的代码。
4:执行"i++"
重复2~4步......,直到i的值为10后
5:判断条件"i<10"是否达成。
6:因为上一步条件不满足,退出循环,不再执行大括号里的代码。
while语法也很简单但请小心使用:
while(表达式){要循环执行的代码}
如果小括号里的表达式值为true,则执行大括号里的代码。然后再检查小括号里的表达式,重复上述过程。直到检查到小括号里的表达式值为false
举个例子:
var x=true
while(x){
console.log("message")
}
然后你的电脑就爆了
上一句话删掉
,执行流程:
1:执行"var x=true"。
2:检测Boolean(x)的值是否为true。(Boolean函数的作用是把值转换成布尔类型,下一章再解释)
3:如果上一步是true,那么执行“console.log("message")”。(console.log是浏览器提供的一个api(应用程序接口),作用是往浏览器的日志里写一条日志)
重复2~3步,直到Boolean(x)的值为false或执行到break语句
因为这里没法达到停止条件,所以会一直循环下去直到电脑崩溃
--------
break:跳出循环
当执行到break时,会停止执行代码块中后续的代码并离开循环。例
for(var i=0;i<10;i++){
if(i=5){break}
}
当循环5次后,break被执行。然后这个循环就停了
continue:跳过本次循环
当执行到continue时,会停止执行代码块中后续的代码并开始下一个循环。例
for(var i=0;i<5;i++){
if(i=3){
console.log(i)
continue
}
}
则浏览器控制台日志会显示
0
1
2
4
------------------
结语&真心话&预告:
说实话吧,这章真不能叫图文,一张图都没有
。之前有征集过意见可惜没人回复。
其实这章在草稿箱里写好了很久了,一直犹豫该不该发。算了,发吧,看不懂的再在评论问吧。
这章讲的只是常规的语法,一些乱七八糟的写法真的不想写,不想教坏读者。写得难受维护的人更难受。
下一章想讲讲对象类型和对象操作。有什么建议的欢迎在评论区提出来。