JavaScript基础教程之flag的用法-白红宇

JavaScript基础教程之flag的用法

阅读量：4195 次

发布时间：2019-05-26

本文共 3611 字，大约阅读时间需要 12 分钟。

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

今天学习了DOM基础方面的知识，可谓是收获颇丰。在重新认真学习JavaScript的过程，对比第一次学习而言，体会就是不一样。虽然整体感觉轻松了许多，但书中还是有很多细小琐碎的知识点值得思索和推敲。在我看来，有一本优秀的入门教程书是多么的重要，因为它不但会提升我学习的兴趣，而且可以促进我更快地学习和掌握知识。至少这本书是我目前为止碰到过的最好的JavaScript基础教程，没有之一。我并不是给这本书打广告，而是真心实意的推荐给大家，全名是。

题外话

当初在大学期间自学web前端的过程中，在图书馆借了很多有关HTML与CSS教程的书，在快速翻看完所有的书之后，选定了这本名为的书，然后就借回去学习了。最主要的原因还是外观吸引了我，对比同类的书，这本书外观新奇而且内容也符合我的要求（因为当时HTML与CSS的基础知识都学完了，想找一本进阶的书学习学习），于是就将它顺理成章地收入囊中了。其实，一般书的整体内容都差不多，粗看目录也看不出来区别，而且基本所有的书都大同小异，只需要根据自己的需求和喜好，花费几分钟的时间大致翻看、浏览一下就能发现这本书是不是你想要的了。

大四第二学期开始，学院给我们组织安排了生产实习，虽然是在学校机房，但总的来说考虑的还算周到，总比没有强吧。其实，就是学院与其他单位进行了合作，在我们找工作之前，找一些人来带着我们做一些小项目，至少能给简历润色几分，不至于到时候简历上的项目经历一栏都是空白，（不过说实话，在这之前我还就真的没有任何web项目经历和经验，一直都在看视频，看书学习，从来没实战过，正想着借此机会练练手呢，谁知道居然讲的是Android项目，只好直接无视）。于是，在实习期间我就一直在看这本书，几乎没听过老师讲课，毕竟与自己的学习方向不符合，在这里浪费时间还不如利用这段时间自学，然后就用了两周的时间把这本书看完了，上面的案例也都自己手动敲了一遍（现在才感觉到：其实手动敲1遍真的太少，因为你会发现没过多久就把书上学到的技巧忘光了，所以复习很重要，当然，理解和记忆同样重要），觉得自己大致掌握了书本中的内容后，就开始出去找工作了。

扯远了，扯远了，不扯了，现在回到正题。

先看一下最终效果图：

效果展示1

我今天的学习内容如下：

1.什么是DOM？
2.DOM结构
3.节点类型
4.如何获取DOM元素；
5.如何创建DOM元素；
6.如何插入DOM元素；
7.如何删除DOM元素；

问题描述：

在练习知识点7案例的过程中，基于案例本身想增加一个功能，在实现的过程中发现了这个问题。有想法但是没办法用代码写出来，测试了好多次都失败了，实在是没办法实现，只能去群里求助大神，最终找到了解决办法。

现场还原

功能说明：为了用原生JS实现动态插入和删除DOM元素。

案例描述：页面中包含一个ul无序列表，一个input输入框和三个按钮。其中，ul元素包含3个li元素。

方法实现：

创建一个li元素节点和一个textNode文本节点，动态获取输入框的value值，赋值给textNode文本节点，然后将得到的textNode文本节点插入li元素当中，接着将组合好的li元素节点尾插在ul元素节点中，可分别实现尾插和头插。

删除呢，就是，判断输入框的值是否和现有li元素的innerHTML值相等，有就删没有就不删，并且提示“删除失败！”。

解释说明：

尾插：appendChild( newnode )方法——在父元素内部的最后一个子元素的后面插入一个新元素

头插：insertChild( newnode , exsitingnode )方法——在父元素内部已存在的任意一个子元素前面插入一个新元素

其实，我称之为“任意子元素之前插入”，可以简称为“头插”。

HTML代码如下:


       
    HTML
    
    CSS
    
    JavaScript

静态页面如图所示：

效果图

JS代码如下：

问题所在：

/*alert在每次循环都会执行，我只想让它在最后一次循环结束后执行。换句话说，也就是在遍历完数组中的所有元素后，发现未找到该元素，此时alert一下，就是不知道这个alert语句应该写在哪个地方。*///简而言之就是，想让找不到的最后一次才弹出显示。

之后实在找不到解决办法，就去群里请教了一番，这才知道原因在哪里——逻辑方面的问题。

因为要等所有的li元素都遍历之后，才能判断li元素中是否包含要插入的元素。

我们不希望看到执行一次循环alert()语句就被触发一次，这显然不行，所以alert()语句就不能在for循环中写。

但是，如果写在循环中，每循环一次都会执行到该语句，所以这个逻辑还有点欠缺。总感觉缺点什么东西，就是不知道到底缺什么。

其实，欠缺的是如何判断这个情况到底有没有发生。

问：哪种情况呢？

答：即【遍历过所有的li元素后，它的innerHTML值都与文本框的value值不相等】 这一情况。

问：通过哪种方式去判断呢？

答：在条件判断（就是if…else…）语句中加上一个标识（或称为开关，信号灯，旗帜）就行了。

比如说，在最开始定义一个标识，这么来说吧，用我们身边的事情举例，通俗易懂。
红绿灯大家都知道吧，红灯停绿灯行，这个规则也是提前制定好的，不能改变。在一开始，马路上就安置了一个红绿灯（即信号灯），而且规定红灯代表警告，禁止通行，绿灯代表允许，可以通行。

问：那么，放置红绿灯（即信号灯）的目的是什么呢？

答：目的就是为了当预定的事件来临时（这里指行人到达路口这一情况），所有人都能根据信号灯的颜色来判断当前应该怎么做，是停止还是通行。

现在就显而易见了，我们可以提前定义一个布尔（Boolean，逻辑）类型的变量，命名为flag，它的特性刚好就能代表那个信号灯，因为布尔类型的变量只有两个取值，false和true，可以分别表示红灯和绿灯。当然也可以定义为0和1，0可以表示alse，1可以表示true。

它应该不陌生吧，平时在好多的代码中都能遇见它。至少我见过好多次，但一直都不知道flag到底是干嘛用的，自然就想不起来用它。也有可能好多人都不知道该怎么使用，那么现在就让我们一起来好好认识一下这个所谓神奇的flag吧。

问：什么是flag呢？

答：它的中文意思是“旗帜，或旗标”，FLAG是电脑程序中用于记录程序状态的一种标记，FLAG只有1（立起）和0（倒下）两个数值，它可以用来帮助程序做复杂条件的判断。但其实呢，flag是程序员自己定义的变量，作为一个标记（志），标记当前的进程，或者标记某种状态，用来控制程序的流向。只是因为在实际使用中方便好记才这么定义的。因为程序要实现的功能很多，为了区分各个程序段实现了什么功能就用标志位的值，然后使用if语句判断标志位的值，进入相应的程序实现相应的功能，当然flag的值由你来决定。

上面介绍了这么多，我们只需要知道：

flag是用来做标志的，程序运行的过程中flag会产生变化，flag=1就是给flag一个初始值1，然后在程序的运行过程中检测flag的值，如果它的值为1，则表示没有发生变化；如果flag的值为0，则表示发生变化了。最终就能以此来判断程序的执行情况。

现在，让我们重新来分析问题：

如果我们预期的不想看到的事件发生了，就手动赋值让flag=0；如果没有发生，就手动赋值让flag=1；刚好对应条件判断语句（就是if…else…）中的两种情况。现在我们也已经有了标识，最后呢，只要在for循环外面再用一次条件判断语句（就是if…else…），在语句内添加上flag产生不同的值时（即我们提前定义好的0和1或者true和false）所对应的不同处理方式，就能得到我们想要的效果了。

别人的思路指示如下图所示：

初始代码

最终代码：

/*核心代码*///定义一个开关作为是否删除成功的标识var flag;for (var i = 0; i < oLi.length; i++) {    if( oLi[i].innerHTML !== value){        //flag值为0，表示删除失败        flag = 0;        continue;    }else{        oUl.removeChild(oLi[i]);        //flag值为1，表示删除成功        flag = 1;    }}//根据flag的值判断是否删除成功if(flag == 1){    alert("删除成功！");}else{    alert("删除失败！");}

最终效果图：

效果展示1