优雅的JavaScript-基础语法详解

表达式和运算符

表达式：表达式用于JavaScript脚本运行时进行计算的式子，可以包含常量、变量、运算符运算符：操作数据值的操作符   算术运算符：+、-、*、/、%   一元运算符：++、--   ......

算符运算符

1.+   1.如果两个操作符都是数值，执行常规的加法计算   2.如果有一个操作数是字符串，规则如下：       1.如果两个操作数都是字符串，将两个操作数拼接       2.如果只有一个操作数是字符串，则将另一个数转换成字符串，再将两个字符串拼接起来   3.如果有一个操作数是对象、数值、Boolean，则需要调用他们的toString（）方法取得相应的字符串值      注意：         Undefined   /null调用string（）方法将其转换成“Undefined”、“null”2.-   1.如果两个操作数都是数值，进行常规的减法，并返回结果   2.如果有一个操作数是字符串、Boolean、null/Undefined则需要调用number()函数将其转换成数值，根据前面的规则进行减法       注意：          如果转换的结构是NaN，减法的结果就是NaN   3.如果操作数是一个对象，则调用对象的valueOf()方法取得表示该对象的数值      1.如果值为NaN，减法的结果解释NaN      2.如果对象没有valueOf（）这个方法，则调用toString（）方法将得到的字符串转成数值，在进行常规计算            3.*基本：    1.如果操作数都是数值，进行常规计算       1.1   如果两个都是正数，结果是正数       1.2  如果只有一个有操作符号，那么结果为负数       1.3  如果乘积成果了ECMAScript数值的表示范围，返回Infinity或者-Infinity​特殊的规则：    1.如果操作数为NaN，结果为NaN    2.如果是Infinity和0相乘，结果为NaN    3.如果Infinity与非0数值相乘，结果为Infinity或负Infinity，取决于有符号操作数的符号    4.如果Infinity和Infinity相乘，结果为Infinity    5.如果操作数不是一个数值，则需要调用number()方法将其转换成数值，在进行上面的规则   4./特殊：   1.如果零被零除，结果为NaN   2.如果有一个非零的有限数被零除，结果为Infinity和-Infinity，取决于有符号操作符的符号   5.%   var result=26%5;//1   1.如果操作数都是数值，执行常规除法计算，返回除得的余数   2.如果被除数是无穷大而除数是有限大的数值，结果为NaN   3.如果被除数是有限大的数值而除数为0，结果为NaN   4.如果Infinity被Infinity除，结果为NaN   5.如果被除数是有限大的数值而除数是无穷大的数值，结果为被除数   6.如果被除数为0，结果为0；   7.如果有一个操作数不是数值，在后台调用Number()方法，将其转换成数值，在进行上面的运算      

一元运算符

1.只能操作一个值的操作符叫做一元运算符​2.自增++  自减--  在赋值操作时，     1.1  如果递增或递减运算符前置，那么前置的运算符会先累加或累减在赋值     1.2  如果递增或递减运算符后置，那么后置运算符则先赋值在累加或累减        如：      var box=100;      var age=++box;  101      var height=box++;   100    3.其他类型应用一元运算的规则    var box='89'; box++    数值字符串自动转换成数值   //90    var box='ab'; box++    字符串包含非数值转成NaN 、//NaN    var box=false; box++   false转成0，  1    var box=2.3;   box++   直接加1，   3.3  ​例如：   var a=9;     var  b=++a;     a=a+1;     alert(a+" "+b)​

赋值运算

1.定义：将右边的值赋给左边的变量2.复合操作;+=、-=、*=、/=、%=​如：  var num=10;    num=num+10  等价于num+=10;

比较运算符

1.比较运算符的结果Boolean类型（>、>=、<、<=）2.当关系操作符的操作数使用了非数值，需要进行数据转换，完成相对应的功能    1.1  如果两个数都是数值，则执行数值比较    1.2  如果两边都是字符串，比较的是字符串对应的字符编码值    1.3.如果一个操作数是数值，则将另一个操作符转换成数值，进行比较    1.4 如果一个操作数是对象，则需要调用对象的valueOf（）方法，如果没有则调用toString（），将得到的结果根据前面的规则进行比较    1.5 如果一个操作数为Boolean类型，需要将其转换成数值，在进行比较    

等于==规则

1.如果两个类型相同，进行==比较2.如果操作数为非数值，需要遵循以下规则：   1.1  一个操作数为Boolean，比较前需要将其转换为数值类型   false：0   true：1   1.2 一个操作符为字符串，先转成数值类型在比较   1.3  一个操作符为对象，则现代用valueOf（）、toString（），将返回值进行比较   1.4 在不需要任何转换的情况下,null / Undefined 是相等的，       注意：这两个值在进行比较时，不能进行类型转换   1.5 一个操作数为NaN，则==返回false   != 返回true   和自身不等      

恒等于===的规则

1.如果类型不相同，就不相等2.如果两个都是数值，并且是同一个值，那么相等  注意：     2.1  如果其中至少一个NaN，那么就不相等，判断一个值是否是NaN，用isNaN()方法3.如果两边都是字符串，每个位置的字符都相等，那么相等，反之不相等4.如两边的值为true 或 false 则相等5.如果两边的值都引用同一个对象或函数，那么相等6.如果两边的值为null或者undefined 那么相等     

其他的运算符

typeOf运算符   typeOf运算符用来返回一个字符串，返回的是操作数的数据类型   对一个值使用typeOf  操作符可能返回字符串      1.“Undefined”   该值没有定义      2.“Boolean”    该值是Boolean值      3.“string”   该值是字符串      4.“number”   该值是数值      5.“Object”   该值是一个对象或者null      6.”function“   该值是一个函数        

逻辑运算符

逻辑非！逻辑非操作符遵循以下规则：  1.如果操作数是一个对象  ，返回false  2.空字符串   true  反之为false  3.数值为0，返回 true  4.任何非0（包括Infinity）   返回false   5.null   返回true  6.NaN   true  7.undefined   true  逻辑与&和&&（短路）  第一个操作数    第二个操作数   结果  true           true        true   false         true        false  true          false       false  false         false      false    2.逻辑与操作可以应用于任何类型的操作数，而不仅仅是Boolean，在一个操作数不是Boolean类型的情况，逻辑与就不一定返回Boolean     遵循以下规则：        1.如果第一个操作数为对象，则返回第二个操作数        2.如果第二个操作数是对象，则只有第一个操作数的求值结果为true的情况下才会返回该对象        3.如果两个操作数都是对象，则返回第二个操作数        4.有一个操作数为null，返回null        5.如果有一个操作数为NaN，返回NaN        6.如果有一个操作数为Undefined则返回Undefined         逻辑或|和||（短路）  第一个操作数    第二个操作数   结果  true           true        true   false         true        true  true          false       true  false         false       false​特殊规则：   1.如果第一个操作数为对象，则返回第一个操作数   2.如果第一个操作数的求值结果为false，则返回第二个操作数   3.如果两个操作数都是对象，则返回第一个操作数   4.有两个操作数为null，返回null   5.如果有两个操作数为NaN，返回NaN   6.如果有两个操作数为Undefined则返回Undefined

三目运算符

称之为条件运算符是ECMAScript中功能最多的运算符​他的形式和Java中一样variable=boolean_ex?true:false;例如：   var iMax=(iNUm1>iNUm2)?iNUm1:iNum2;​

条件语句

1.语句2.条件语句3.if语句4.switch语句

语句

定义：   ECMA规定一组语句（流程控制语句）   语句定义了ECMAScript中主要的语法    条件语句：   1.if语句   2.switch语句 循环语句：    1.while循环语句    2.do...while语句    3.for循环语句   

条件语句

概念：   通过制定判断的表达式的值来决定执行还是跳过某些语句      这些语句是代码的决策点，称之为“分支” 第一种格式：   if(条件){     //代码块   }      当代码块只有一条语句时，可以省略大括号                  这其中的条件可以是任何的表达式，计算的结果不必是Boolean，ECMAScript，会将其转换成Boolean值      第二种：  if（条件）{    //代码块1  }else{    //代码块2  }     第三种：     多重if语句    if（条件）{    //代码块1  }else if(条件){    //代码块  }  else{    //代码块2  }         第四种：      嵌套if        if(条件){          if(条件){           //代码块           }        }​ 

switch语句

switch语句的语法：   switch ()   case value:  statement;   break;    case value:  statement;   break;   default :statement      特点：      1.可以在switch语句中使用任何类型的数据        每一个case的值不一定是常量，可以是变量，表达式      2.每个case按照顺序被求值，直到找到匹配的值或者遇到default语句为止      3.在比较时会使用全等操作符，因此不会发生类型转换（字符串“10”和数值10 不相等）      4,default可以省略      5.break可以省略，穿透         共同点：在一定程度上可以通用  if和switch区别：     1.if一般用于区间、逻辑判断        switch多用于等值比较     2.if使用时嵌套尽量少用，            

循环语句

1.循环语句2.特殊流程控制语句3.二重循环语句4.label语句​循环的四个部分：    1.循环变量初始化    2.循环判断条件    3.循环体    4.迭代部分（循环变量增加或减少的处理）​

while循环语句

格式：   循环变量的初始化：    while(询函条件){      循环操作；      迭代语句；          }

do..while循环

格式：循环变量的初始化；   do{     循环操作；     迭代语句；             }while（循环条件）；         do...while和while的区别：       1.do....while至少执行一次       2.do...while（表达式）的后面一定要有一个分号，用来表示语句的结束                            

for循环

格式：  for(var box=1;box<=5;box++){    alert(box);  }循环顺序：    1.声明变量var box=1;    2.判断条件    3.执行语句体    4.判断循环条件        

加强for

格式：   for(vriable in object){     statement   }   说明：     vriable：通常是一个变量名或表达式或者是var 声明的变量     object：表达式，计算结果是一个对象     通常用枚举对象的属性         

特殊流程控制语句

1.break：2.continue

label语句

语法：   标签名：for(表达式1；表达式2；表达式3){     break 标签名；     或者continue 标签名        }例如：  <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">  for(var i=0;i<5;i++){     bk:     for(var j=0;j<5;j++){         if(i==1&&j==1){             break bk;         }         document.write(i+"  "+j+"<br/>")     }​  }</script></body></html>​总结：    for循环、while循环、do...while循环、for-in    1.可以相互转换    2.可以相互嵌套    3.特殊流程控制语句，可以在其使用    4.循环中可以嵌套分支语句，分支语句也可以嵌套循环    

函数

函数的概念和作用

1.概念：函数就是把完成特定功能的一段代码封装起来，给该功能起一个名（函数名） 注意：函数可以在任何地方调用 2.作用：    1.使程序变得更简洁和清晰    2.便于维护    3.可以提高程序的开发效率    4.提高了代码的重用性 说明：    不使用函数，JavaScript代码必须执行，且执行的时间，执行的部分不可控，使用函数后浏览器不会直接去执行它，只有在调用该函数时才会被浏览器执行          

函数的分类

1.官方定义函数：   alert（）;   parseInt();   parseFolat();   isNaN();2.自定义函数：   用户根据自己的需求定义的函数

函数的命名规范

1.函数名不能包含特殊字符2.函数名最好含义明确3.函数名称最好遵循驼峰标记法或者下划线法4.函数名严格区分大小写5.函数名如果产生重复会覆盖

函数的定义

格式：   1.无参数：     function 函数，名(){       js代码；     }        2.有参数   function 函数名（形式参数列表）{     js代码；   }      3.匿名函数   function（）{     js代码；   }      4.有返回值的函数   function 函数名(形式参数列表){     js代码；     return 返回值；        }     总结：     1.函数需要使用function关键字，必须写     2.函数名---标识符，     3.参数列表只有变量名，没有var关键字        无参函数        只有一个参数        有多个参数     4。{函数体}：         1.有返回值的函数         2.没有返回值的函数   

函数的实参和形参

1.实参和形参：     形参---就是函数在定义时，函数名后面的参数，不能使用var关键字     实参---就是调用时，函数名后面的参数2.传参---赋值：将实参的值赋给形参3.JavaScript语言的特殊之处：   1.不检查实参的类型，不检查形参的个数   JavaScript语言与大多数语言在函数参数上是不一样   JavaScript语言不在乎你传入参数的个数和类型   在JavaScript每个函数的函数体重都有一个arguments对象来访问这个函数的参数，从而获取所有传过的参数4.JavaScript语言可以传入任意多个参数   

函数参数的类型

1.值类型的数据作为参数传递的时候，相当于操作值的副本2.引用传递操作的是参数本身例如：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">​    var a=3,b=5;    var c=a;   //a:3   b;5  c:3    a=b;   // a=5    b=c;    //b:3//实现两个变量值交换的方法    //a,b就是形式参数，代表两个数据​    function change(arr){​        var c=arr[0];        arr[0]=arr[1];        arr[1]=c;    }        var people=new Object();//people 是对象  引用类型    people.name=“李四”;        change(people);        </script></body></html>​

函数的返回值

函数的返回值可以返回：   number string boolean null undefined object   注意：  当函数没有返回值时，其实返回值为undefined​例如： <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">​    /*var flag=confirm("确定删除吗？");    alert(flag);    var a=alert("dgshj")*//*    function test(a,b){       var result=a-b;       return result;//注意return 只能在函数中使用，代码执行到return就结束这个函数    }var num=test(3,5);alert(num);*///求三个数的最大值    function getMax(a,b,c) {        //用return把参数不是数值的情况给排除，并返回提示信息        if (typeof(a) != "number" || typeof(b) != "number" || typeof(c) != "number")        {            return "参数必须都是数字";        } var max=-Infinity;        var min=Infinity;        if(a>max){            max=a;        }        if(b>max){            max=b;        }        if(c>max){            max=c;        }        if(a<min){            min=a;        }        if(b<min){            min=b;        }        if(c<min){            min=c;        }return "最大值："+max+",最小值："+min;​    }alert(getMax(21,40,-4));​​</script></body></html>​

函数的调用

1、函数名（参数）调用   1.1  通过函数名（）进行调用，如果有参数产地相对应的参数即可   1.2  在HTML中默认的全局对象是HTML页面本身，所以函数是属于HTML页面，在浏览器中的页面对象是浏览器窗口（window对象）2.事件驱动：   所有的函数没有调用不会执行，那么函数调用的源头就是事件，之前学过点击事件onclick   成为焦点onfocus  失去焦点  onblur3.如：window.函数（参数）：    注意：       1.在函数体内可以调用另外一个函数       2.函数可以自己调自己（递归）        全局对象：    1.当函数没有被自身对象调用时，this的值就变成全局对象      在web浏览器中全局对象是窗口对象（window对象）    2.函数作为全局对象的调用，会使this,window对象成为全局对象，会使程序容易崩溃      注意对象：    1.函数可以有一个或多个参数，也可以没有    2.函数可以通过return加返回值，如果没有return，默认返回undefined    3.函数不调用不执行    4.JavaScript对大小写敏感，关键字function  必须小写    ，并且必须与函数名相同的大小写来调整函数

变量的作用域

定义：变量起作用的范围，变量的有效范围局部变量：在函数内部的变量，形参也是局部变量全局变量：在函数外部的变量，作用域范围是当前文件的任何地方​说明：    1.JavaScript的变量的作用域是根据方法块来划分的，也就是function的大括号来划分的       注意：function块是划分标准，而for/while并不是作用域的划分标准    2.JavaScript在执行前会对整个脚本文件的声明部分做完整的分析（包括局部变量），从而确定实变量的作用域    3.当全局变量跟局部变量重名时，局部变量的作用域会覆盖全局变量的作用域    4.全局变量位于全局区，局部变量位于栈区

匿名函数

定义函数的两种格式：1.function 函数名(){ //函数体}   2.匿名函数var fun=function(){  //函数体}匿名函数的用处：  1.函数表达式可以储存在变量中，变量可以作为一个函数使用，也可以将匿名函数作为参数传递给其他函数，    如果需要完成一次性的任务，可以用匿名函数        

函数的重载

定义：重载函数时函数的一种特殊情况：允许在同一个范围内声明几个功能类似的同名函数，但是这些同名函数的形式参数（指参数的个数或类型或顺序）必须不同，也可以说同一个运算符完成不同的运算功能，称之为重载函数  1.函数有不同的参数  2.函数有不同的参数类型  但是在JavaScript语言中，如果函数名一样会出现覆盖的情况，无法实现函数的重载  JavaScript并没有重载函数的功能，但是arguments对象可以模拟重载    JavaScript中每个函数都会有一个arguments对象实例arguments,他引用着函数的实参，可以用数组的下标方式“[]”引用arguments的元素    arguments.length为函数实参的个数    arguments.callee引用函数自身

arguments

定义：   arguments对象不能显示创建，只有函数开始时才可用   函数的arguments对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同   索引n实际就是arguments对象的0~n属性的其中一个参数。      注意：   1.arguments的length属性返回调用程序传递给函数的实际参数数目   2.arguments的0~n属性返回一个arguments对象中的各个参数的实际值，相应的值由一个正在执行的函数的arguments属性返回

递归

定义：在函数体内调用本函数递归的满足条件：   1.函数自己调用自己   2.要有出口   3.尽量层层递进   注意：      处理不当就如死循环，递归函数只有在特点的情况下使用

数组

1.数组定义：  值的有序集合，美誉个值都叫做一个元素，每一个元素在数组中都有一个位置，以数字表示，叫索引  特点：   1.JavaScript数组是无类型的，数组的元素可以是任意类型，并且同一个数组中的元素可以是不同类型，   2.ECMAScript语言中数组的长度是可以动态变化的，可以添加和删除元素   3.Array数组是数据的有序列表，索引从0开始   4.ECMAScript同一个数组可以存储不同类型的数据，也可以没有类型，但每一个数组都有length属性   

数组的创建

1.数组字面量方式：  //创建3个字符串的数组  var aColor=["red","yellow","blue"]；  //创建空数组   var aColor=[];       var aColor=[1,2,3,];    bug:       在IE8以及之前显示的个数为4个       IE9,ff,chrome,opera中显示是3个，不要用这种方式去创建数组  注意：    省略数组中的某个值，默认值为undefined        2.构造函数方式：//创建一个空函数 var aColor=new Array(); //创建一个容量为20 的数组  var aColor=new Array(20);//创建一个包含3个字符串元素的数组 var aColor=new Array("red","yellow","blue");  注意：    1.最后一个元素不可以加逗号，会报语法错误    2.使用构造函数法创建数组时，如果只传一个值，这个值是number类型，那么必须是大于等于0的整数，否则语法报错    3.使用构造函数创建数组时，可以省略new关键字（不建议）

数组的长度

length属性：表示数组的长度不同：   JavaScript数组的length属性是可变的，     1.当length被设置的更大时，整个数组的状态事实上不会发生变化，仅仅是length属性值变大     2.当length属性被设置的比原来更小时，则原先数组中国索引大于或等于length元素的值会全部丢失     3.length属性不仅可以被显示设置，他也可以被隐式修改     注意：   1.数组的length属性不是只读的，可以通过数组的length属性向数组的末尾扩大数组的容量，或者可以从数组的末尾移除其他元素   

数组的遍历

定义：获取数组中的每一个元素1.for循环for(var i=0;i<arr.length;i++){  //代码块}​2.加强for循环for (var i in arr){  //代码块}3.forEach：是对数组中每一个元素进行函数体的操作   是ECMAScript5.0新特性   注意：forEach不支持break/continue语句   在低版本的IE中也无法使用      

数组中的常用方法

<!DOCTYPE html><html>​<head>    <meta charset="UTF-8">    <title>demo</title></head>​<body><script type="text/javascript">var arr=["21sd",23,6,0,-2];var str=arr.join("///");//1.join(连接符字符串)，无参的时候默认使用“，”链接，返回值时连接后的字符串，操作对数据并没有影响//alert(typeof str+"  "+str);//alert(arr);​    var arr2=str.split("///");    var s="abc13";// 2.   arr2=s.split("");//alert(arr2);//要在页面输入一个用户名，判断这个用户名是否全部由字母组成​    //数组元素倒置，返回倒置之后的结果，该倒置度数组本身有影响reverse()//    alert(arr.reverse());//alert(arr);//3.sort()  返回排序之后的结果，对齐数组本身有影响//    3.1  sort()无参，按照字符的先后顺序排序//    3.2  sort()有参   参数必须是一个函数//var arr2=[11,22,3,4,56,-54353,555]//arr2.sort(test)//alert(arr2);//   function test(a,b) {//       return a-b;//   }//4.concat();参数可以是任意类型，表示吧参数都链接到原数组上，返回新的数组，该链接对原数组并没有影响、//参数是一个数组时，则将数组中的元素链接到原始数组上//alert(arr.concat(111,"哈哈哈"));//var newArr=arr.concat([false,true]);//alert(newArr[5]);​/*5.slice():      1.slice():返回值是截取数组的一部分，截取对原数组无影响      2.slice()：只有一个参数的时候是起始下标，表示当前的位置一致截取到最末尾      3.slice()：如果有两个参数，第二个参数表示终止下标，截取时会包含起始下标上的字符，不包含终止下标上的字符    注意：      如果下标为负值，责先讲该负值+length获取一个正值，在截取*///alert(arr.slice(2,2))//alert(arr.slice(1,3));​   /* 6.splice():返回值为删除掉的元素组成的新数组，删除会对原数组产生影响，数组的长度也会收到影响splice()：第一个参数表示起始下标，负值责+length在作为起始下标    第二个参数表示要删除元素的个数，如使负值等同于0；    之后的参数表示要插入的数据，如果该方法只有一个参数，表示从起始下标一直删除到末尾    *///    alert(arr.splice(-2,2,false,true,"ddd"));/*var arr3=[1,3,2,5,2,65,1,2,3,3,3,3];for(var i=0;i<arr3.length;i++){    for(var j=i+1;j<arr3.length;j++){        if(arr3[j]==arr3[i]){            arr3.splice(j,1);        }    }​}alert(arr3);*/​​/*7.push():项数组的末尾追加元素，返回追加元素后数组的长度，       参数可以是一个或多个，表示要追加的数据，追加对原数组产生影响*///alert(arr.push(false,true));//alert(arr);​//    8.pop():表示从数组的末尾往外弹出数据//alert(arr.pop());​//9.map();//    var arr=[1,2,3,5,7];//    var newArr=arr.map(function (x,index,ar) {//        return x%2;//    })//10.filter()://11.reduce//12.some();   /* 13.indexOF():在一个数组中查找子元素，若存在，返回该元素的下标，若不存在则返回-1；    注意：indexOF()：从左到右查找，并且只查找一次*/var arr=[1,4,"dsdf",true,"呵呵呵",-234,3];//alert(arr.indexOf(5));​//  13.lastIndexOf（）：从末尾开始查找    var result=arr.lastIndexOf(3);alert(result);14.unshift();向数组的头部插入一个或多个元素，     参数：需要插入的值     返回值：新数组的长度，会改变原来数组的长度​</script></body></html>

数组排序

冒泡排序   1.比较相邻的元素，如果第一个比第二个大，就交换他们两个   2.对每一个相邻元素做同样的工作，从开始的第一对到结束的最后一对选择排序：​<!DOCTYPE html><html>​<head>    <meta charset="UTF-8">    <title>demo</title></head>​<body><script type="text/javascript">var arr=[2,5,0,-1,6];for(var i=0;i<arr.length-1;i++){    for(var j=0;j<arr.length-1;j++){        if(arr[j]>arr[j+1]){            var temp=arr[j];            arr[j]=arr[j+1];            arr[j+1]=temp;​        }​​    }}​for(var i=0;i<arr.length;i++){    var max=arr[i];    var index=i;    for(var j=i+1;j<arr.length;j++){​        if(arr[j]<max){            max=arr[j];            index=j        }    }}function text(a,b) {    if(a>b){        return -1;    }else if(a<b){        return 1;    }else {        return 0;    }}arr.sort(text);    alert(arr);</script></body></html>​