首页 > 代码库 > JS基础变量、运算符和分支结构

JS基础变量、运算符和分支结构

[使用JS的三种方式]
   1、HTML标签中内嵌JS(不提倡使用):
   <button onclick="javascript:alert(‘小婊子,真点啊!‘)">有本事点我呀</button>
   2、HTML页面中直接使用JS:
   <script type="text/javascript">
   //JS代码
  </script>
   3、引用外部JS文件:
   <script language="JavaScript" src="http://www.mamicode.com/JS文件路径"></script>
   [注意事项]
   ①页面中JS代码与引用JS代码,可以嵌入到HTML页面的任何位置,但是,位置不同会影响JS代码的执行顺序;
   例如:<script>在body前面,会在页面加载之前执行JS代码;
   ②页面中JS代码,使用type="text/javascript"
   引用外部的JS文件,使用language="JavaScript"
   ③引用外部JS文件的<script></script>标签,必须成对出现,且标签内部不能有任何代码!

 

JS中的注释
单行注释。ctrl+/
段落注释 ctrl+shift+/
 

【JS中的变量】
 * 1、JS中变量声明的写法:
   * var width = 10; 使用var声明的变量,只在当前函数作用域有效
   width1=11;不使用var,直接赋值生成的变量,默认为全局变量,整个JS文件有效
   var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔。但赋值需要单独赋,例如上式中,只有c赋为1,a/b为undefined(未定义)
   [声明变量注意事项]
   ①JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的执行
   ②同一变量,可以在多次不同赋值时,修改变量的数据类型。
   var width = 10;//width 为整形变量
   width="哈哈";//width被改为字符串类型
   ③变量可以使用var声明,也可以省略var。[区别]不使用var,默认为全局变量
   ④同一变量名,可以多次用var声明。但是并没有任何含义,也不会报错。第二次之后的声明,只会被理解为赋值;
 2、变量的命名规范:
   ①变量名只能有字母、数字、下划线、$组成
   ②开头不能是数字
   ③变量区分大小写,大写字母与小写字母为不同变量
 3、变量名命名要符合驼峰法则:
   ①变量开头为小写,之后每个单词首字母大写(或单词之间用下划线分隔);
   liwenhaoIsShuaiGe √
   li_wenhao_is_shuai_ge √
   liwenhaoisshuaige ×
 4、JS中的变量的数据类型
  Undefined:未定义,用var声明的变量,没有进行初始化赋值。var a;
  Null:表示为空的引用。例如,空对象、空数组。
  Boolean:真假,可选值true/false;
  Number:数值类型,可以是小数,也可以是整数。
  String:字符串类型,用""或‘‘包裹的内容,成为字符串。
  Object(复杂数据类型):后续讲解,函数、数组等...

5、常用的数值函数:
  ① isNaN:用于判断一个变量或常量是否为NaN(非数值)
  使用isNaN判断时,会尝试使用Number()函数进行转换,如果能转换为数字,则不是非数值,结果为false
  "111"纯数字字符串,false
  "" 空字符串,false
  "ka"包含其他字符的字符串,true
  true/false 布尔类型,false
  
  ②Number():将其他类型转换为数值类型
  [字符串类型转数值]
  >>>字符串为纯数值字符串,会转为对应的数字  "111"——111
  >>>字符串为空字符串时,会转为0   ""——0
  >>>字符串包含其他非数字字符时,不能转换  "111a"——NaN
  
  [布尔Boolean类型转数值]
  true——1  false——0
  
  [null/Undefined转数值]
  null——0   undefined——NaN
  
  [object类型转数值]
  (以后再了解)先调用valueOF方法,确定函数是否有返回值,再根据上述各种情况判断
  
  ③parseInt:将字符串转为数值类型
  >>>空字符串,不能转。结果为NaN
  >>>纯数值字符串,能转  "123"——123   "123.65"——123(小数转化时,直接抹掉小数点,不进行四舍五入)
  >>>包含其他字符的字符串,会截取第一个非数值字符前的数值部分
   "123a456"——123     "a123b456"——NaN
  >>>parseInt只能转string类型,Boolean/null/undefined 均为NaN
  
  ④parseFloat:将字符串转为数值
  >>>使用方式同parseInt。但是,当转化小数字符串时,保留小数点;转化整数字符串时,保留整数;
   "123.5"——123.5   "123"——123
   
  ⑤typeof:用来检测变量数据类型
  未定义——undefined        字符串——string        true/false——boolean
  数值——number             对象/null——object      函数——function

[JS中的输出语句]
    * 1、文档中打印输出:document.write();
    * document.wirte();
    * 输出语句,将write的()中的内容打印在浏览器屏幕上;
    *
    * 使用时注意,除变量/常量以外的任何内容,打印时必须放到""中。变量/常量必须放到""外。
    * 打印的内容同时有多部分组成时,之间用+链接;
    * 例如:document.write("左手中的纸牌:"+left+"<br/>")
    *
    * 2、弹窗输出:alert();
    * alert();
    * 弹窗警告,()中的使用方式,同上
    *
    * 3、弹窗输入:
    * prompt("请输入您的名字:","你二大爷");
    * 两部分参数:①输入框上面的提示信息,可选
    *     ②输入框里面的默认信息,可选
    * 两部分之间用逗号分隔,只写一部分时,默认为提示信息;
    *
    * 可以定义变量接收输入内容,例如var name=prompt("请输入您的名字:");点击确定按钮,输入成功;点击取消按钮,name=null;

1、 算术运算
       + 加、- 减、* 乘、 / 除、 % 区域、++ 自增、-- 自减
      
       +:有两种作用,链接字符串/加法运算;当+两边均为数字时,进行加法运算;当+两边有任意一边为字符串时,进行字符串链接,连接之后的结果认为字符串
       ++:自增运算符,将变量在原有基础上+1;
       --:自减运算符,将变量在原有基础上-1;
      
   2、  赋值运算
       =  +=  -=  **=  /=  %=
      
       +=:  a+=5;相当于a=a+5;但是前者的执行速率要比后者快。
   3、  关系运算
       == 等于、=== 严格等于、  != 不等于、>、<、>=、<=、
      
       ===:严格等于:类型不同,返回false;类型相同,再进行下一步判断;
       ==:类型相同,同===;类型不同,尝试将等式两边转为数字,再判断;
         特例:null==undefined  √    null===undefined  ×
   4、 条件运算符(多目运算)
       a>b?true:false
       有两个关键符号: ?和:
       当?前面的部分运算结果为true时,执行:前面的代码;
         当?前面的部分运算结果为false时,执行:后面的代码;
    >>>多目运算符可以多层嵌套:
    例如:var jieguo=num>5?"输入太大":(num==5?"蒙对了!":"输入太小");
   5、 逻辑运算符
       && 与、        || 或、      ! 非、

 [运算符的优先级]
      ()
      ! ++ --
      * /  %
      + -
        >  <    >=   <=
      ==  !=
      &&
      ||
      各种赋值 =  +=  *=  /=  %=
      
       [n++与++n的异同]
       n++:先使用n的值进行计算,然后再把n+1;
       ++n:先把n的值+1,然后在用n+1以后的值去运算;
                 相同点:不论是n++还是++n,在执行完代码以后,均会把n+1;

[if-else结构]
    *1、结构写法:
    * if(判断条件){
    *  //条件为true时执行
    * }
    * else{
    *  //条件为false时执行
    * }
    *
    * 2、if()中的表达式,运算之后的结果应该为:
    * ①boolean:true 真     false   假
    * ②string: 非空字符串为真       空字符串为假
    * ③null/NaN/undefined:  全为假
    * ④object:全为真
    * ⑤number:0为假,一切非0均为真
    *
    * 3、else{}结构,可以根据具体情况省略;
    *
    *
    * [多重if、阶梯if]
    * 1、结构写法:
    *  if(条件1){
    *  //条件1成立
    * }else if(条件二){
    *  //条件1不成立&&条件二成立
    *  //else-if部分,可以有N多个
    * }else{
    *  //条件1不成立&&条件二不成立
    * }
    *
    *
    * 2、多重if结构中,各个判断条件是互斥的!只能选择其中一条路。
    *
    *
    * 3、if/else的{}可以省略,但是一般不提倡;
    *  如果省略{},则if/else结构包含的代码,仅为其后最近的一行(分号结束);
    *  如果省略{},则if/else结构永远输入其前方最近的一个if结构。
    *
    * 【嵌套if结构】
    *
    * 1、结构写法:
    * if(条件1){
    *  //条件一成立
    *  if(条件二){
    *   // 条件一成立&&条件二也成立
    *
    * }else{
       // 条件一成立&&条件二不成立
      }
     }else{
      //条件一不成立
     }
    *
    * 2、if结构可以多重嵌套,但是原则上不超过3层
    *
    *
    *
    * 【switch-case结构】
    *
    * 1、结构写法:
    *  switch(表达式){
    *   case 常量表达式1:
    *    语句1;
    *   break;
    *   case 常量表达式2:
    *    语句2;
    *   break;
    *   ……
    *   default;
    *   语句N
    *   break;
    * }
    *
    * 2、注意事项:
    *  ①switch()中的表达式,以及每个case后面的表达式,可以为任何JS支持的数据类型(对象和数组不行);
    *  ②case后面的所有常量表达式,必须各不相同,否则只会执行第一个;
    *  ③case后的常量可以是任何数据类型,同一个switch结构的不同case,可以是多种不同的数据类型;
    *  ④switch在进行判断的时候,采用的是全等判断===。
    *  ⑤break的作用:执行完case代码后,跳出当前switch结构;
    *  缺少break的后果:从正确的case项开始,依次执行所有的case和default。原因:⑥↓
    *  ⑥switch结构在判断时,只会判断一次正确答案,当遇到正确的case项后,将不再判断后续项目,依次往下执行。
    *  ⑦基于⑥,switch结构的执行速率要快于多重if结构,在多路分支时,可优先考虑使用switch结构。

 

JS基础变量、运算符和分支结构