看懂《书源规则:从入门到入土》(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的话,这整个大括号里的代码都会被执行一遍 t耐克嘴

如果不想发生这种情况怎么办呢?在你要停止的地方写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

------------------

结语&真心话&预告:

说实话吧,这章真不能叫图文,一张图都没有 受虐滑稽 。之前有征集过意见可惜没人回复。

其实这章在草稿箱里写好了很久了,一直犹豫该不该发。算了,发吧,看不懂的再在评论问吧。

这章讲的只是常规的语法,一些乱七八糟的写法真的不想写,不想教坏读者。写得难受维护的人更难受。

下一章想讲讲对象类型和对象操作。有什么建议的欢迎在评论区提出来。