JavaScript基础语句

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript基础语句相关的知识,希望对你有一定的参考价值。

一、前言:

  有过学习其他语言的经历,会比较好上手。但是,没有学过也无关大雅。只要认真学,都会学好。毕竟,都只是一些基础的语句。关键在于要会运用。 掌握好语句的嵌套,以及要的逻辑思维能力,就已经成功一大半了。

二、JS中的变量和输入输出

  使用JS的三种方式

    1. 在html标签中直接内嵌js (并不提倡使用)不符合W3C关于内容与行为分离的要求!!!!
          

<button onclick="alert(‘快点点点点啊‘)">点啊</button>

     
    2. 在HTML页面中,使用<script></script>标签包裹代码;

<script type="text/javascript">
//js代码
</script>

     <script></script>标签可以放在页面的任何位置 也可放多个,但一般只放一个

    3.  引入外部的JS文件
      <script language="JScript"src="js文件路径"></script>
    注意事项
      1.  <script></script>可以嵌入到页面的任意位置,但是位置的不同,会导致js代码执行的顺序不同
        比如<script></script>放到<body></body>前面则js代码会在页面加载之前就执行
      2.  引入外部的JS代码,<script></script>必须是成对出现的标签。而且,标签中不能再有任何的代码      

JS中的变量
    1.JS中变量声明的写法
      var num = 10;  // 使用var声明的变量属于局部变量,只在当前作用域内有效。
          但是,如果是在<script>中直接声明,那就相当于是全局变量

      num = 10;    // 不用var声明的变量,默认为全局变量,在整个JS文件中(该语句下面)都有效。

      var x=8,y, z = 10;    // 使用一行语句同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined

    声明变量的注意事项
        ①.JS中,所有变量的声明,均使用var关键字。变量具体是什么类型,取决于给变量所赋值的类型;
        ②.JS,同一个变量,可以在多次不同赋值时,修改变量的数据类型;
          var a = 10;   // 从初始声明时,a属于整数型
          a =" hahaha”;   // 重赋值时,整数型的a被修改为字符串类型;
        ③. 变量可是使用var声明,也可以不是用var声明;
          【区别】使用 var声明是局部变量,不是用var是全局变量

        ④.只用var声明但是不赋值。结果为undefined。
            例如:var a;//只声明不赋值的a为undefined。但是,如果不声明也不赋值的a,直接使用会报错。

        ⑤.同一变量名,可以多次使用var声明但是后面的var并没有任何作用。第二次使用var声明时,只会被理解为普通的赋值操作

    2.变量名的命名要求
        ①.变量名只能有,字母,数字,下划线组成;
        ②.开头不能是数字;
        ③.变量名区分大小写。大小写字母为不同变量 大写字母一般声明常量

    3.变量名的命名规范
      ①.要符合小驼峰法则(骆驼命名法):
        首字母小写,之后每个单词的首字母大写; 如: myNameIsPengWei     √
      ②.或者使用匈牙利命名法:
          说有字母小写,单词之间用_分隔 my_name_is_peng_wei       √
      ③.mynameispengwei 能用,但是不规范

   4.js中的数据类型 :均用var声明,但变量具体是什么类型,取决于给变量所赋值的类型;
        ndefined:未定义。已经使用var声明的变量,但是没有赋值。 var a;
        null: 表示空的引用。
        boolean:布尔类型。表示真假。只有两个值:true/flase
        number:数值类型。可以是整数,也可以是小数。
        string:字符串类型。用双引号或单引号包裹的内容,称为字符串。
          object:对象类型。后续讲解。。。。

  5.常用的数值函数
    ① isNaN():判断一个变量或常量,是否是NaN(not a number 数值)
            NaN 不等于 NaN
      使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终能够转成数字,则不是NaN,结果为flase

    ② Number()函数:将其他类型的数据尝试转为数值型;
        【字符串类型】
            》》字符串为纯数值字符串,会转为对应的数字:“11”—->11
            》》字符串为空字符串,会转为0; ""-->0
            》》字符串包含任何其他字符时,都不能转;“1a”-->NaN
        【Boolean类型】
          true->1 flase->0
        【null和undefined类型】
             null->0 undefined->NaN
        【object】
          *(后续讲解)
  ③ ParseInt():将字符串转为整数类型
    》》空字符串,不能转。“”-->NaN
    》》包含其他字符的字符串会截取第一个非数值字符串前的数字部分
        “12a23”-->"12" "aqw12"-->NaN
    》》parseInt()只能转字符串和整型(能将小数转为整数),转其他类型,全是NaN

    ☆☆ 【Number函数与ParseInt函数的区别】 重点
        1.number函数能转各种数据类型,parseint函数只能转字符串
        2.两者在转字符串时,结果不完全相同(详见上面解释)

  ④ parsefloat:将字符串转为数值型
      转换规则与parseint相同,只是如果有小数,则保留小数点,如果没有小数,则依然是整数;
      “12.5”-->12.5 "12"-->12
  ⑤ typeof:监测变量的数据类型:
      字符串-->string 数值-->Number 未定义-->Undefined
      true/flase-->boolean 对象/noll-->object 函数-->function   

  【js中常用的输入输出语句】
    1.document.write()。将()中的内容打印输出到浏览器屏幕上
      使用时,需注意,除变量常量外的所有内容,必须放到""中。变量和常量之外的内容必须放到""外面
      如果同时有变量和字符串,必须用+链接 eg:document。write("左手中的纸牌"+left+"<br/>");
    2.alert():使用弹窗输出
      弹窗警告,()的内容与上述要求相同
    3.prompt():弹窗输入;
      接受两部分参数
      ① 输入框上面的提示内容,可选
      ② 输入框里面的默认信息,可选
        当只写一部分时,表示输入框上面的提示内容;
        可以定义变量,接受输入的内容。点击确定按钮,变量将被赋值为输入的内容,点击取消按钮,变量将被赋值为null
        输入内容时,默认接受的数据类型都是字符串!!

三、运算符

  1. 算术运算(单目运算符)
    + 加、   -减、    *乘、    /除、    % 取余、    ++ 自增、   -- 自减

  注意::有加减运算时,要注意是否要将数字转为数值型

  ①  +    :有两种作用:链接字符串加法运算
      当+两边全为数字时,进行加法运算;
      当+两边任意一边为字符串时,起链接字符串的作用,链接之后的结果为字符串
      除+外,其余符号运算时,会尝试将作用两边变量用number函数转为数字
  ②  /    :  结果会保留小数点
  ③   ++  :自增运算符,将变量在原有基础上+1
  ④    --   : 自减运算符,将变量在原有基础上-1

    a++与++a的异同
          1. 同: 无论是a++还是a--,运算完后的值均会加1;
          2. 异: a++,先用a的值去运算,,再把a加1
              ++a,先把a+1,再用a+1之后的值去运算。
  例如         

var a = 3,b,c;
b = a++  + 2;        //先用a运算:b = 3 + 2; 再将a+1:a = 4
c = ++a  + 2;        //现将a+1:a = 5;    再用a值运算:c = 5 + 2; 
                     //a=5  b=5 c=7


  2.赋值运算
      = 赋值  +=    -=    *=    /=     %=

     +=: a+=b: 相当于a=a+b;但是,前者的运算效率要比后者快,所以推写法荐前的者

  3.关系运算
    ==等于、===严格等于    !=不等于、  !== 不全等     >、   <、   >=、  <=

    ①  关系运算符,运算之后的结果,只能是boolean类型;
    ②  判断一个数字是否处于某个区间,必须用&&连接
      eg: a<10 && a >0  √      10>a>0 ×  

    ③  ===:  严格等于:要求不但要类型相同,值也必须相同;类型不同,结果直接为false;类型相同,再进行下一步判断
      ==:  等于:类型相同,与===效果一样。类型不同时,会先尝试用number函数将两边转为数字,然后再进行判断
    但是,有个别特例
      alert(null === flase) 结果为false


      var a;
      alert(a == null) 结果为true

      alert(NAN == NaN) 结果为false

      alert(1!="1") 结果为false
      alert (1!=="1")  结果为true

   4.条件运算符(多目运算)
      a>b?true:false
      有两个重要符号: ? 和  :
      当?前面部分,运算结果为true时,执行:前面的代码
      当?前面部分,运算结果为false时,执行:后面的代码

      冒号两边可以为数值,则整个式子可用于赋值。   var a = 1 > 2 ? 1 : 2;
      冒号两边可以为代码块,将直接执行代码。     1 < 2 ? alert(1 : alert(1);
      多目运算符可以多层嵌套。                var a = 1< 2 ? alert(1) : alert(1);


  5.位运算符、 逻辑运算符
    && 与、 || 或、 ! 非(单目运算符)

         &&:两边都成立时结果为true
       ||:两边有任意一边成立时,结果为true

  6.运算符的优先级
    ()          小括号最高
     ! ++ --
    *     / %
    +    -
    >   <    >=   <=
    ==   !=
    &&                    || 和 && 同时存在时,&&优先级高于||
    ||
    =   +=   -=   *=    /=    赋值符最低

 四.分支结构

  1. 多目运算符
    a>b?true:false

  2.  if-else结构
    ①结构的写法
      if(判断条件){
        //条件为true时,执行if的{}
      }else{
        //条件为false时,执行else的{}
      }

    ②.注意事项
      ① else语句块。可以根据情况进行省略。
      ② if和else后面的{}可以省略,但是省略{} 后,if和else后面只能跟一条语句,所以,并不建议省略{}。
    ③   if 的()中的判断条件,支持的情况:

        ① boolean: true为真,flase为假;
        ② string: 非空字符串为真,空字符串为假;
        ③ number: 非0数字为真, 0为假;
        ④ null/undefined/NaN: 全为假;
        ⑤ object: 全为真。

  3. 多重if,阶梯if结构
    ①.结构写法
      if(条件1){
        条件1成立时,支持语句
      }else if(条件2){
        条件1不成立,并且条件2成立时,执行的语句
      }else{
        上述所有条件都不成立时,执行的语句
      }
    
    ②.多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完后,直接跳出结构,不在判断后续分支


   4.嵌套if结构
      ①结构写法
        if(条件1){
          条件1,成立

          if(条件2){
          条件1,并且条件2,成立
          }else{
            条件1成立,条件2不成立
          }
        }else{
           条件1,不成立
        }

    ②.在嵌套if结构中,如果省略{}、则else结构永远属于离它最近的if结构
    ③嵌套结构可以多次嵌套,但是一般不推荐超过三层
        能用多重if结构的时候一般不推荐使用嵌套if。

    5.switch - case结构
      ①.结构写法: 如下
      ②注意事项:
        ① switch机构()中的表达式,可以使用JS支持的各种数据类型。
        ② switch机构在进行判断时,使用 === 判断。
        ③ case后面的表达式(允许有多个语句),可以是各种数据类型,但是,case的值要求各不相同,否则,也只会执行,第一个case
        ④ break作用:执行完case代码后,跳出当前switch机构
          缺少break后果:
              从第一个正确的case项开始执行后面的所有case 和default;
          原因: switch结构在进行判断的时候,只会判断一次正确答案,当遇倒正确的case后,将不再判断后续的项目
        ⑤  switch结构的执行效率要比多重if快。在多路分支中,推荐优先使用switch

五.循环结构

    1.while循环结构的执行步骤
      ①.声明循环变量
      ②判断循环条件
      ③.执行循环体操作
      ④更新循环变量
        然后,循环执行2~4,直到条件不成立时,跳出循环。

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

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

   2.do-while循环结构 
      do-while循环特点:先判断,再执行。
      do-while循环特点:先执行,再判断。即使初始条件不成立,do-while循环也至少循环一次。

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

  3.for循环结构

      1.  for循环有三个表达式:① 声明循环变量; ② 判断循环条件; ③ 更新循环变量
        三个表达式之间,用分号分隔
        for循环的三个表达式都可以省略,但是俩个分号缺一不可

      2.  for循环的执行特点:先判断,再执行;与while相同。

      3  .for循环三个表达式,都可以有多部分组成,第二部分中的多个判断条件用&& ||连接,第一,三部分用逗号连接。

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

          2.  continue:跳过本次循环剩余的代码,继续执行下一次循环。
            ① 对于for循环,continue之后执行的语句,时循环变量更新语句i++;
            ② 对于while,do-while循环,continue之后执行的语句是循环条件判断,
                因此,使用,这两个循环时,必须将continue放到i++之后使用。否则,continue将跳过i++,导致死循环。


  
    for (var num = 1, num1= 20;  num <=  9 && num1  >=   14; num++, num1--) {
        document.write(num + "<br />");
    }

六.函数

    1.函数的声明及调用
        ①.函数的声明格式
            

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

 


      ②函数的调用:
          ① 直接调用: 函数名(参数1的值,参数2 的值,....);
          ② 事件调用方式: 在HTML标签中,使用事件名 = " 函数名(参数1的值,参数2 的值,....)"

<button onclick="saySth(‘blue‘,‘哈哈哈哈‘)">点击,打印</button>

 


    2.函数的注意事项

      ① 函数名必须要符合小驼峰法则:首字母小写,之后每个单词首字母大写

      ② 函数名后面的括号中,可以有参数,也可以没有参数,分别称为有参函数,无参函数。

      ③ 声明函数时的参数列表称为形参列表,形式参数。(变量的名字)
            function saySth(color,str){}
       调用函数时的参数列表,称为实参列表。实际参数(变量的赋值)
            saySth("red","换个影子");

      ④ 函数的形参列表个数与实参列表的个数没有实际关系。
            函数参数的个数,取决于实参列表。
       如果,实参列表的个数,小于形参列表,则未赋值的形参,将为undefined

      ⑤ 函数可以有返回值,使用return返回结果。
        调用函数时,可以使用一个变量接受函数的返回结果。
        如果,函数没有返回值,则接受的结果为undefined。

function fun(){
return "hahah";
}
var num = fun();    //num = hahah    

 


    ⑥ 函数中变量的作用域:
        JS中只有函数才有作用域:函数作用域。
          即,函数{}中的局部变量只能在函数域中使用。而其他的{}(如:for{})中的局部变量能在{}外面使用。
          函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
      不用var声明的变量,为全局变量,在函数外也能访问。
      函数的形参列表,默认为局部变量,只能在函数内部使用。

    ⑦ 函数的声明与函数的调用没有先后之分,即,可以在函数声明之前调用函数

fun();    //在fun声明之前调用也可以
function fun(){
return "hahah";
}


七.匿名函数的声明与使用

  1.声明一个匿名函数直接赋值给某一个事件
        window.onload = function(){}

  2.使用匿名函数表达式,将匿名函数赋值给一个变量。
      声明:var func = function(){}
      调用:func();

    注意:使用匿名函数表达式时,函数的调用语句,必须放在函数声明语句之后!!!!(与普通函数的区别!!!)

  3.自执行函数:
    ① !function(){}();    //可以使用多种运算符开头,但一般用!
    !function(形参列表){}(实参列表);

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

    ③ (f unction(){} )();   //使用()只包裹函数部分

  三种写法的特点:
    ① 使用!开头,结构清晰,不容易混乱,推荐使用;
    ② 能够表明匿名函数与调用的()为一个整体,官方推荐使用;
    ③ 无法表明函数与之后的()的整体性,不推荐使用。

  4.函数的内部属性
    1. Arguments对象
      ① 作用:用于储存调用函数时的所有实参。当我们调用函数,并用实参赋值时,实际上参数列表已经保存到Arguments数组中,
        可以在函数中,使用Arguments[n],的形式调用。n从0开始。
      ② Argument数组的个数,取决于实参列表,与形参无关。
        但是,一旦第n个位置的形参,实参,arguments都存在时,形参将于arguments绑定,同步变化。
           (即在函数中修改形参的值,arguments也会改变。反之,亦成立)

      ③ arguments.callee()是arguments的主要属性。表示arguments所在函数的引用地址;
        在函数里面,可以使用arguments.callee()调用函数本身。
        在函数内部,调用函数自身的写法,叫做递归。
        结构上类似do-while结构

var num = 1;
function func(){            //递归
    console.log(num);            //do,循环开始处
    num++;                        //循环体操作
    if(num<=4){                   //while,判断条件
        arguments.callee();        //
    }    
    num--;                            //
    console.log(num);
}
func();        

代码执行顺序:

技术分享


递归分为两部分:递 和 归。以递归调用语句为界限,可以将函数分为上下两部分。
递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行上半部分。直到执行完最内层函数。
归: 当最内层函数执行完以后,再从最内层函数开始,逐渐执行函数的下半部分。

当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行。

直到最内层函数执行完以后,在逐渐向外执行。

 

console.log(history);

























以上是关于JavaScript基础语句的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础 if 循环 for 循环

提升JavaScript代码的可读性(基础篇)

JSP开发中的基础语法

JavaScript:基础语法

JavaScript基础教程

javascript基础加固3—-语法2