上周给大家介绍了一下JS基础中一点东西,今天给大家介绍一下JS基础中一个重要部分,循环和函数。

04-JS中的循环结构

  一、【循环结构的步骤】

  1、首先要先声明循环变量。

  2、判断循环条件

  3、执行循环体操作

  4、更新循环变量

  然后循环执行2-4,直到条件不成立时跳出循环。

  二、【while循环】

  1、while循环()中的表达式,运算结果可以是多种类型,但是最终都会转为真假,转换规则同if结构

  (1)、boolean类型:true为真,false为假

  (2)、string类型:所有非空字符串为真,空字符串为假

  (3)、number类型:一切非零数字为真,零为假

  (4)、null、undefined、NaN:全为假

  (5)、object类型:全为真。

  2、代码示例:

    var num=1;                                           //声明循环变量
    while (num<=10){                                 //判断循环条件
      document.write(num+"<br />");
      num++;                                         //更新循环变量
    }

  3、while循环的特点:先判断,后执行

  三、【do-while循环】

  1、do-while循环与while循环几乎是一模一样的,唯一不同的便是do-while循环特点:先执行,后判断,即使初始条件不成立,do-while循环也执行一次

  2、代码示例:

    var num=10;
    do{
      document.write(num+"<br/>");
      num--;
    }while(num>=0);

  四、【for循环】

  1、for循环有三个表达式:声明循环变量;判断循环条件;更新循环变量。

  2、三个表达式之间用分号分隔,三个表达式都可以省略,但是两个分号缺一不可。

  3、for循环的执行特点:先判断后执行;与while相同。

  4、for循环三个表达式都可以有多部分组成:第二部分多个判断条件用&& ||链接,第一三部分用逗号分隔。

  5、代码示例: 

    for (var num =1,num1=10;num<=10;num++,num1--) {
      document.write(num);
    }

  五、【循环控制语句】

  1、break:跳出本层循环,继续执行循环后面的语句,如果循环有多层嵌套,则break只能跳出一层。

  2、continue:跳过本次循环剩余的代码,继续执行下一次循环。

  (1)、对于for循环,continue之后执行的语句是循环变量更新语句

  (2)、对于while、do-while循环,continue之后执行的语句是条件判断,因此使用时必须将continue放到i++之后使用,否则continue将跳过i++导致死循环。

  3、return:只能用在函数中。(后面讲)

  循环的内容其实不是很多,还有一个循环嵌套的内容,所谓的循环嵌套通俗的讲就是循环中再套着一层循环。循环的内容是比较少,但是在JS中却有着巨大的作用,需要多做练习来掌握,来锻炼自己的逻辑思维能力。练习题网上都能搜到,想要学好循环就去多做练习吧!

05-JS中的函数

 一、【函数的声明及调用】

  1、函数的声明格式:

    function 函数名(参数1,参数2,...){
      //函数体代码
      return 返回值;
    }

  2、 函数的调用

  (1)、直接调用:函数名(参数1的值,参数2的值,....);

  (2)、 事件调用方式:直接在HTML标签中,使用事件名="函数()"

    eg:<button onmouseout="SaySth('你好啊','red')">点击按钮,打印内容</button>

  3、函数中的注意事项

  (1)、 函数名必须要符合小驼峰法则,首字母小写之后每个单词首字母大写 ;

  (2)、 函数名后面的括号中可以有参数,也可以没有参数,分别称为有参函数和无参函数;

  (3)、 声明函数时的参数列表称为形参列表,形式参数。(变量的名字); 

        function saySth(str,color){}
      调用函数时的参数列表,称为实参列表,实际参数。(变量的赋值);
        saySth("你好","red");

  (4)、函数的形参列表个数与实参列表个数没有实际关联关系。函数参数的个数,取决于实参列表。如果实参列表的个数<形参列表,则未赋值的形参,将为Undefind。

  (5)、函数可以有返回值,使用return返回结果,调用函数时,可以使用一个变量接收函数的返回结果。如果函数没有返回值,则接收的结果为Undefined;

    function func(){
      return="haha";
    }
    var num=func();//num="haha";

  (6)、函数中变量的作用域(在js只有函数拥有自己的作用域)

  >>>在函数中,使用var 声明的变量,为局部变量。只能在函数内部访问;

  >>> 不用var声明的变量,为全局变量,在函数外部也能访问;

  >>>函数的形参列表,默认为函数的局部变量,只能在函数内部使用。

  (7)、函数的声明与函数的调用没有先后之分,即可以在声明函数(检查)前调用函数(执行)

  二、【匿名函数的声明使用】

  1、声明一个匿名函数直接赋值给某一个事件

    window.onload=function(){}

  2、使用匿名函数表达式(称为变量函数),将匿名函数赋值给一个变量

    声明:var func=function(){}

     调用:func();

  注意:使用匿名函数表达式时,函数的调用语句必需放在函数生命语句之后!!

  3、自执行函数:

  (1)、!function(){}();//可以使用多种运算符开头,一般用!

       !function(形参列表){}(实参列表);

  (2)、(function(){}());//使用()将函数及函数后的括号包裹

          (function(){})();//使用()只包裹函数部分

  三种写法的特点:
  (1)、使用!开头结构清晰,不容易混乱,推荐使用

  (2)、能够表明匿名函数与调用的()为一个整体,官方推荐使用

  (3)、无法表明函数与之后()的整体性,不推荐使用。

  三、【函数的内部属性】

  1、arguments对象

  (1)、作用:用于储存调用函数时的所有实参。当我们调用函数并用实参赋值时,实际上参数列表已经保存到arguments数组中,可以在函数中使用arguments[n]的形式调用,n从0开始。

  (2)、arguments数组的个数取决于实参列表,与形参列表无关,但是,一旦第n个位置的形参、实参、arguments都存在时,形参将与arguments绑定,同步变化(即在函数中修改形参,arguments也会改变,修改arguments的值,形参也会改变)。

  (3)、arguments.callee 是arguments的重要属性,表示arguments所在函数的引用地址,在函数里面可以使用arguments.callee()调用函数本身。在函数内部调用函数自身的写法叫做递归。

  (4)、递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为上下两部分

    递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行上半部分,直到执行完最内层函数

    归:当最内层函数执行以后,再从最内层函数开始,逐渐执行函数的下半部分。

  用一句话概括:当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行,直到最内层函数执行完以后,再逐步向外执行。 

    //递归调用
    var num = 1;
    function func(){
      console.log(num);
      num++;
      if(num<=4){
      arguments.callee();//递归调用语句。
      }
      num--;
      console.log(num);
    }
    func();

    

JS(二)的更多相关文章

  1. JS二维数组排序组合

    需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...

  2. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  3. js 二维数组 for 循环重新赋值

    javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...

  4. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

  5. Nuxt.js(二、解决首屏速度与SEO)

    Nuxt.js(二.解决首屏速度与SEO) 1.普通的Vue SPA初始化加载速度很慢 在传统的web应用中,当用户请求一个页面时,服务器直接返回一个html文件,浏览器直接渲染出来.但是,在vue应 ...

  6. js 二维码生成 插件

    <div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...

  7. js二维数组与字符串

    1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...

  8. JS二维数据处理逻辑封装探究

    一.目的 定义出一个专门用于处理二维数据的组件,所谓二维数据就是能用二维表格显示出来的数据,所谓处理就是增删改查,很简单. 二.约束 外部程序给该组件传入如下形式的对象,让该组件自行解析. var t ...

  9. 简单又炫酷的two.js 二维动画教程

      前  言 S     N 今天呢给大家介绍一个小js框架,Two.JS.其实在自己学习的过程中并没有找到合适的教程,所以我这种学习延迟的同学是有一定难度的,然后准备给大家整理一份,简单易懂的小教程 ...

  10. js二维码插件总结

    jquery.qrcode.js生成二维码插件&转成图片格式 http://blog.csdn.net/u011127019/article/details/51226104

随机推荐

  1. 在 ASP.NET Core 中执行租户服务

    在 ASP.NET Core 中执行租户服务 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: http://gunna ...

  2. 介绍maven构建的生命周期

    介绍maven构建的生命周期 这篇是 https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html 的 ...

  3. 使用 Gitbook 打造你的电子书

    本文详细讲解了 Gitbook 生成电子书的完整过程,内容包括:安装.命令.配置.文档结构.生成电子书.部署. 限于篇幅,本文不介绍任何 Gitbook 定制化页面的内容. 想看看 Gitbook 在 ...

  4. 以打印日志为荣之logging模块详细使用

    啄木鸟社区里的Pythonic八荣八耻有一条: 以打印日志为荣 , 以单步跟踪为耻; 很多程序都有记录日志的需求,并且日志中包含的信息既有正常的程序访问日志,还可能有错误.警告等信息输出,python ...

  5. HTML Input属性

    HTML Input 属性 value 属性 value 属性规定输入字段的初始值: readonly 属性 readonly 属性规定输入字段为只读(不能修改): readonly 属性不需要值.它 ...

  6. log4j源码解析

    前言:本文将在slf4j的基础上解释log4j的应用,阅读本文前可先行阅读SLF4J源码解析-LoggerFactory(二) 前言概要 在前言中提到的slf4j的基础,其主要是通过logback的a ...

  7. 【Linux】ssh免密登录

    一.ssh免密配置 ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以CentOS为例.有机器A(192.168.1.155),B(192.168. ...

  8. 【详细资料】ICN6211:MIPI DSI转RGB芯片简介

    ICN6211功能MIPI DSI转RGB,分辨率1920*1200,封装QFN48

  9. sql优化策略之索引失效情况二

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp63   接第一篇索引失效分析:http://grefr.iteye.co ...

  10. 基于CAS的SSO(单点登录)实例

    第一步 部署CAS-Server(服务端) 1.从CAS官方网站(http://developer.jasig.org/cas/)下载最新版本的CAS-Server(当前最新版本cas-server- ...