zoukankan      html  css  js  c++  java
  • JS基础

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

    [使用JS的三种方式]

    1、在HTML标签中,直接内嵌JS(并不提倡使用);
         <button onclick="alert('真点吗')">点击</button>
    >>> 不符合W3C关于内容与行为分离的要求!!!
    2、在html页面中使用<script></script>标签包裹JS代码;
        <script type="text/javascript">
         alert("1234");
         document.write("<h1>1234567</h1>");
        </script>
    >>>script标签可以放到页面的任何位置。
    3、引入外部的JS文件:
         <button onclick="alert('真点吗')">点击</button>
    [注意事项]
    ① <script></script>可以嵌入到页面的任意位置。但是,位置的不同会导致JS代码的执行顺序不同;
         比如<script></script>放到body前面,则JS代码会在页面加载之前就执行;
    ② 引入外部的JS代码:<script></script>必须是成对出现的标签。而且,标签中不能再有任何的JS代码。

    [JS中的变量]

    1、JS中变量声明的写法:
    var num=10;//使用var声明的变量,属于局部变量,只在当前作用域内有效;
    num=10;//不用var声明的变量,默认为全局变量,在整个JS文件中都有效;
    var x=8,y,z=10;//使用一行语句,同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined;

        [声明变量的注意事项]

      ① JS中所有变量的声明,均使用var关键字。变量具体是什么数据类型,取决于给变量赋值的类型;
      ②  JS中同一个变量,可以在多次不同赋值时,修改变量的数据类型;
               var a=10;//从初始声明是,a属于整数型;
               a="haha";//重复赋值时,整数型的a被修改为字符串类型;
      ③  变量可以使用var声明,也可以不使用var声明。
    [区别] 使用var声明为局部变量,不使用var声明为全局变量;
      ④ 只用var声明但是不赋值。结果为undefined;
           例如:var a;//a为undefined。但是,如果不声明也不赋值的a,直接使用会报错;
      ⑤ 同一变量名可以多次使用var声明,但是,后面的var并没有任何用,第二次再使用var声明时,只会被理解为普通的赋值操作。
    2、变量名的命名要求:
    ①变量名只能有字母、数字、下划线组成;
    ②开头不能是数字;
    ③变量名区分大小写,大写字母和小写字母为不同变量;
    3、变量名的命名规范:
    ① 要符合小驼峰法则(骆驼命名法):
    首字母小写,之后每个单词的首字母大写;
    myNameIsZhaoYi √
    ② 或者使用匈牙利命名法:
    所有字母小写,单词之间用_分隔;
    my_name_is_zhao_yi √
    ③mynameiszhaoyi × 能用,但是不规范
    4、JS中的数据类型:
    ①Undefined:未定义。已经使用var声明的变量但是没有赋值的情况;var a;
    ②Null:表示空的引用。
    ③Boolean:布尔类型。表示真假,只有两个值:true/flase;
    ④Number:数值类型。可以是整数,可以是小数;
    ⑤String:字符串类型。用""或者''包裹的内容,称为字符串;
    ⑥Object:对象类型。
    JS中有六种数据类型,都用var声明,用赋值情况进行区分!
    5、【常用的数值函数】
    ① isNaN():判断一个变量或常量是否是NaN(not a num 非数值);
    使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转为数字,则不是NaN,结果为false。
    ②Number()函数:将其他类型的数值,尝试转为数值型;
    [字符串类型]
    >>>字符串为纯数值字符串,会转为对应的数字;"111"->111
    >>>字符串为空字符串,会转为0;""->0
    >>>字符串包含任何其他字符时,都不能转;"1a"->NaN
    [布尔类型]
    true->1 false->0
    [Null/Undefined]
    Null->0 Undefined->NaN
    [Object]后续讲解。
    ③ParseInt():将字符串转为数值类型;
    >>>纯数值字符串,能转。
    "12"->12;"12.9"->12;(小数转化时,直接抹掉小数点,不进行四舍五入)
    >>>空字符串,不能转。""->NaN
    >>>包含其他字符的字符串,会截取第一个非数值字符串前的数字部分;
    "123a456"->123; "a123b456"->NaN
    >>>ParseInt()只能转字符串,转其他类型,全是NaN.
    [Number和ParseInt函数的区别]
    1.Number函数可以转各种数值类型。ParseInt函数只能转字符串;
    2.两者在转字符串时,结果不完全相同。(详见上面解释)
    ④ ParseFloat:将字符串转为数值型;
    转换规则与ParseInt相同,只是如果有小数,则保留小数点;如果没有小数,则依然是整数;
    "12.5"->12.5 "12"->12
    ⑤ typeof:检测变量的数据类型:
    字符串->String 数值->Number true/false->Boolean
    未定义->Undefined 对象/Null->object 函数->function

    [JS中常用的输入输出语句]

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

    二、JS中的运算符

    1、算术运算(单目运算符)

    + (加)、-(减)、*(乘)、 /(除)、 %(取余)、++(自增) 、--(自减)
    >>> +:有两种作用,分别是连接字符串/加法运算。当+两边全为数字时,进行加法运算;当两边有任意一边为字符串时,
    起连接字符串的作用,连接之后的结果为字符串。
    除加号外,其余运算符号运算时,会先尝试将左右变量用number函数转为数字。
    >>> 除号结果会保留小数点。
    >>> ++自增运算符,将变量在原有基础上+1。
    >>> --自减运算符,将变量在原有基础上-1。
    【a++和++a的异同】
    ①相同点:无论是a++还是++a,运算完之后,a的值均会+1;
    ②不同点:a++先用a的值运算,再把a+1;
    ++a先把a+1,再用a+1之后的值运算。
    eg: var a=3,b,c;
    b=a++ +2;
    c=++a +2;
    alert(a); a=5
    alert(b); b=5
    alert(c); c=7

    2、赋值运算

    =(赋值,将右边的值赋给左边) += -= *= /= %=
    +=:a+=b;相当于a=a+b;但是前者的运算效率要比后者快,所以推荐使用a+=b;

    3、关系运算

    ==(等于)、===(严格等于)、 !=(不等于)、!==(不全等)、>、<、>=、<=
    >>>关系运算符运算之后的结果只能是布尔类型;
    >>>判断一个数字是否处于某个区间,必须用&&连接;
    ===(严格等于):要求不但要类型相同,值也必须相同,类型不同,结果直接为false;类型相同,再进行下一步判断:
    ==(等于):类型相同。与===效果一样。类型不同时,会先尝试用Number函数将两边转为数字,然后再进行判断;
    但是有个别特例:
    Null=false × ;
    Null=undefined √;

    4、条件运算符(多目运算)

    a>b?true:false
    有两个重要符号: ?和:
    当?前面部分,运算结果为true时,执行:前面的代码;
    当?前面部分,运算结果为false时,执行:后面的代码;
    冒号两边可以为数值,则整个式子可用于赋值,
    冒号两边可以为代码块,将直接执行代码。
    多目运算符可以多层嵌套。

    5、位运算符、 逻辑运算符

    &、|、~ &&(与)、||(或)、!(非)
    &&两边都成立结果为true;
    ||两边有一边成立结果就为true;
    !取反值

    6、运算符的优先级

    ①()小括号最高
    ②单目运算符! ++ --
    ③* / %
    ④+ -
    ⑤> < >= <=
    ⑥== !=
    ⑦&&
    ⑧||
    ⑨= += -= *= /=最低的是各种赋值

    三、JS中的分支结构

    【if-else结构】

    1、结构的写法:
    if(判断条件){
    //判断条件为true时,执行if的{}
    }else{
    //判断条件为false时,执行else的{}
    }
    2、注意事项:
    ①else{}语句块可以根据情况进行省略;
    ②if和else后面的{}可以省略,但是省略{}后,if和else后面只能跟一条语句;所以,并不建议省略{};
    3、if的()中的判断条件,支持的情况:(记住)!
    ①布尔类型Boolean:true为真,false为假;
    ②String字符串类型:空字符串为假,所有非空字符串为真;
    ③Number数值类型:0为假,一切非0数字为真;
    ④null/undefined/NaN:全为假;
    ⑤Object:全为真

    【多重if/阶梯if结构】

    1、结构写法:
    if(条件一){
    //条件一成立,执行的操作
    }else if(条件二){
    //条件一不成立&&条件二成立,执行的操作;
    }else{
    //上述所有条件都不成立时执行的操作
    }
    2、多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完以后,直接跳出结构,不再判断后续分支;

    【嵌套if结构】

    1、结构写法:
    if(条件一){
    //条件一成立
    if(条件二){
    //条件一成立&&条件二成立
    }else{
    //条件一不成立
    }
    2、在嵌套if结构中,如果省略{},则else结构永远属于离他最近的一个if结构;
    3、嵌套结构可以多层嵌套,但是一般不推荐超过三层。
    能用多重if结构的一般不推荐使用嵌套if。

    【switch-case结构】

    1、结构写法
    var num=5;
    switch (num+2){
    case 1:
    document.write("第一个case");
    break;
    case 2:
    document.write("第二个case");
    break;
    case 3:
    document.write("第三个case");
    break;
    default:
    document.write("所有case都不成立,执行default");
    break;
    }
    2、注意事项:
    ① switch结构()中的表达式可以是各种JS支持的类型;
    ② switch结构在进行判断的时候,使用的是===判断;
    ③ case后面的表达式可以是各种数据类型,但是值要求各不相同。如果有相同,也只会执行第一个case
    ④ break作用:执行完case代码后,跳出当前switch结构;
    缺少break后果:
    从第一个正确的case项开始,执行后面的所有case,和document;原因:⑤↓
    ⑤switch结构在进行判断的时候,只会判断一次正确答案。当遇到正确的case之后,将不会再判断后续的项目。
    ⑥switch结构的执行效率要比多重if快。在多路分支结构中,推荐优先使用switch。
  • 相关阅读:
    博客园
    未释放的已删除文件
    ssh连接缓慢
    剑指 Offer 38. 字符串的排列
    剑指 Offer 37. 序列化二叉树
    剑指 Offer 50. 第一个只出现一次的字符
    剑指 Offer 36. 二叉搜索树与双向链表
    剑指 Offer 35. 复杂链表的复制
    剑指 Offer 34. 二叉树中和为某一值的路径
    剑指 Offer 33. 二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/1996zy/p/7471041.html
Copyright © 2011-2022 走看看