js基本语法

1、变量
变量是存储的数据可以变化的量。
变量，需要先定义，再赋值，最后使用
(1)变量命名规则：
变量名称必须以一个字母或下划线 “_” 开始，后面的字符可以是数字 0-9 ，字母 A-Z 或 a-z。
不能使用JavaScript 关键字(js中的语句单词)或者保留字作为变量名。关键字指代表特殊含义和用途的单词或者字母组合。保留字是指保留起来，未来作为关键字使用的单词或者字母组合。
JS变量名称区分大小写
例：学生姓名(xsXingMing，studentName，teachName)

(2)定义变量的关键字
var，定义变量的常用关键字，表示声明变量，可以当前js的任何位置使用。
let，定义局变量，表示声明的变量，只能在当前作用范围使用(也就是当前“{}”中)。

(3)变量的定义语法格式：(除数组定义之外，语法中的“[]”表示可选项)
var 变量名[=初始值];
例：var a;
       var b=100;

(4)数据类型
    a、数值型(Number)，整数和小数，(按进制分为：二进制，八进制（020，表示十进制16），十进制，十六进制（0x21，表示十六进制33）)
         二进制转十进制：111010     =》0*2^0 +1*2^1+0*2^2+1*2^3+1*2^4+1*2^5=》        0+2+0+8+16+32=58     
    b、字符串型(String)，用“双引号”或“单引号”括起来的0个或多个字符称为“字符串”，单引号和双引号称为"界定符"；
          "空字符串"，没有任何字符的字符串。例：""
          "数值字符串"，全是数字的字符串。例："12565"
          "日期字符串"，完全由英文日期时间构成的字符串。例："2021-09-08"(日期字符串)，"10:53:56"(时间字符串)，"2021-09-08 10:54:01"(日期时间字符串)
           注意："2021年9月10日"在大部分情况下不算是日期字符串

          转义字符：特殊字符需要作为字符串的时候，就转义来输出。
    '(单引号)，表示为：\'         例：console.log('I\'m a teacher.');
    "(双引号)，表示为：\"
    \(斜杠)，表示为：\\
    换行，表示为：\n
    回车，表示为：\r
    制表符，表示为：\t
          注意：回车换行在写入文件和控制台中使用，有效果；在html不会呈现在页面中，但会呈现在代码中。在页面中使用”</ br>“
     c、布尔型(boolean，逻辑型)，结果只有true(真)和false(假)的数据。值只有true与假
          该 类型，主要用于流程控制（要么执行，要么不执行）
          说明：非0为真，0为假。非0的意思为不是0。

    d、undefined(未定义类型)，在判断时，属于”false“
    该类型主要针对对象而言，比如未定义属性，未定义方法等。
    例：<a href="" id="" class="" data=""></a>
                 js代码：

        <script>
            window.οnlοad=function(){
                console.log(document.getElementById("test").id);//可以输出id的值为test，原因在于，id是系统预设的属性
                console.log(document.getElementById("test").data);//不能输出data的值，原因在于，data不系统预设的属性，是用户自定义属性，输出值为"undefined"
            }
        </script>

   e、null(空类型)，未知类型，不确定的数据，不代表有也不代表无。
         当一个变量没有保存有效的数据时或对象不存在时，都将返回null

【注意】0、“”、false、undefined、null区别
共同点
这五个值的共同点是，在if语句中做判断，都会执行false分支。
0、“”、false是有意义的数据
这三个值虽然在if语句中做判断时，表现为“假值”，可它们都是有意义数据。
 undefined与null比较特殊
Undefined表示变量已定义，但没有赋值。Null表示没有对象被返回。虽然null的类型是object，但是null不具有任何对象的特性。

     f、NaN(非数值)，不是一种类型，是一个值
         例：
    console.log(parseInt("a125245"));  //此时，因为第一个字符为非数值，所以结果”NaN“
    console.log(parseInt("122a34"));  //此时结果为”122“，因为在转时，第一个是字值，可以转换，直到遇到非数值时停止转换

     g、数值字符串转换为整数或小数
         parseInt(数值字符串);  //将字符串转换为整数，如果第一个字符为非数值则结果为”NaN“
         parseFloat(数值字符串);  //将字符串转换为小数，如果第一个字符为非数值则结果为”NaN“，中间遇到第一个”.“时，转换为小数点，遇到第二个”.“或非数值时停止转换
       例：
    console.log(parseFloat("56.532.23"));   //结果：56.532

   h、typeof
功能：typeof()是一个一元运算符，以字符串形式返回变量的类型名称。
语法：typeof(变量|数据)  或  typeof 变量|数据
返回值有六种可能：“number”、“string”、“undefined”、“boolean”、“object”、“function”

   i、转换(自动转换，强制转换)
      自动转换(系统转换)，系统将数据自动转换为匹配的类型。
    例：
         console.log(123+"234");  //结果为:123234，原因在于，+如果一边为字符串，另一边为数值时，系统会将数值自动转换为字符串，这种转换就是”自动转换“
      【注意】自动转换容易出现不可知的错误，因此在实际的编程中少用。
       强制转换，使用类型函数，强制将转换成对应类型
    例：
            obj=function(){} //定义对象
            console.log(Boolean(0)); //false
            console.log(Boolean(123));//true
            console.log(Boolean(""));//false
            console.log(Boolean("ab"));//true
            console.log(Boolean(undefined));//false
            console.log(Boolean(null));//false
            console.log(Boolean(obj));//true

      【重点】各类型强制转换的函数
    String(数据)，将数据转换为字符串
    Number(数据)，将数据转换为数值
    Boolean(数据)，将数据转换为逻辑值(布尔值)
    
(5)运算符
    a、算术运算符、+ - * /  %(取余/取模) ++(自增) --(自减)
    说明：
         +，当前两边是数值时，做算术运算。如果有一边为字符串，则连接字符串运算。    
        例：
              1+1  //2，算术运算
              1+"1"   //11，字符串连接运算
         【技巧】数值转字符串的方法：String(数值)，数值+""
         %，取两个数的余数，
        例：19%10=9
        例：获得123各位上的数值     
              分析：123%10      123/100取整    123/10取整与10的余数

324    parseInt(String(324/100))

    自增(自减)，只作用于变量，每次增加(减)1。（a++相当于a=a+1或a+=1）
    ++(--)在变量之前，作为函数的参数或表达式的一部分时，先将变量加(减)1，再使用变量的值。
    ++(--)在变量之后，作为函数的参数或表达式的一部分时，先使用变量的值，再加(减)1。
        例：
        
            var a=1;
            console.log(a++);
            console.log(a);
    【注意】如果++(--)在前和在后都作为单独的语句时，效果一样。

    b、赋值运算符、= += -= *= /= %=，赋值运算符左边必须是变量，右边可以是任何的表达式(算式，函数，对象，常量)
    例：
          a+=2;   //相当于a=a+2;
          b-=2+a;  //相当于b=b-(2+a)
          c*=7+d*b; //相当于c=c*(7+d*b)
    
    c、关系运算符，又称“比较运算符”。> < >= <=  !=(不等)   ==(等于)   !==(不全等)  ===(全等)
    说明：
         "=="与"==="，区别在于“==”只比较值，不管数据类型；而“===”即要比较值，也要比较类型
        例：
            let a=1;
            let b="1";
            console.log(a==b); //true
            console.log(a===b); //false
            console.log((a+"")===b); //true
            console.log(String(a)===b); //true
    d、逻辑运算符：&&(与)、||(或)、!(非)
    说明:
         &&(短路与)，两边为真为真(一边为假为假) 例：true&&false    true&&true     2>3&&5>2
         ||(短路或)，两边为假为假(一边为真为真)
         !(非)，真为假 ，假为真

    短路与(&&)，即如果与运算中有开始为假，后面都不会进行运算(短路)，结果为假。
    
    e、位运算符：&(位与)、|(位或)、^(位异或)、<<(左移)、>>(右移)、~(位非)
    说明：位运算，在运算之前首先将数值转换成二进制，再进行低位(右)对齐运算。
         &(位与)，相同位上1与1为1，有0则为0；
        例：
            12&7=4
              将12和7转换为二进制1100和111，再低位对齐运算
            1100      12
                     &      111       7
            0100       4
         |(位或)，相同位上有1为1，都为0才为0；
        例：        
            12|7=15
              将12和7转换为二进制1100和111，再低位对齐运算
            1100      12
                     |  111          7
            1111       15
         ^(异或)，相同为0，不同为1；
        例：        
            12^6=10
              将12和7转换为二进制1100和111，再低位对齐运算
            1100       12
                    ^   110         6
            1010       10
      <<(左移)，如果有n<<m，先转二进制，再右边添加m个0，则n放大2的m次方倍
        例：
              2<<3，先将2转二进制10，再在后面加3个0，得10000，为16
    【面试题】请写出将1运算为2的最快算法。答案：1<<1
      >>(右移)，如果有n>>m，先转二进制，再右边减去m个位，如果位数不够则为0，则n缩小2的m次方倍
        例：8>>2，先将8转二进制1000，再在后面减去2个位，得10，为2
              8>>5，先将8转二进制1000，再在后面减去5个位，发现不够，则直接为0
            
   f、 字符串运算符：+(连接)、+=(连接赋值)
    +和+=，如果有一边为字符串，作连接运算。如果不是字符串，可以使用强制转换String(数据)或数据+""
    g、条件运算符
    语法格式：
        [变量=]条件?值1:值2;
    说明：如果条件成立，为值1，否则为值2
        例：
               1<2?1:2; //结果为：1
               opt=a==1?'checked="checked"':'';
    实际案例：
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //window.onload表示将网页全部加载完成后再运算function中的代码
            window.οnlοad=function(){
                let city=document.getElementsByClassName("c");
                let cValue="天津"
                for(i=0;i<city.length;i++){
                    条件语句
                    // if(city[i].value==cValue){
                    //     console.log(cValue);
                    //     city[i].selected=true;
                    // }else{
                    //     city[i].selected=false;
                    // }
                    //使用条件运算符
                    city[i].selected=city[i].value==cValue?true:false;
                }
            }
        </script>
    </head>
    <body>
        根据给的值，默认显示城市<br>
        <select id="city">
            <option class="c" value ="成都">成都</option>
            <option class="c" value ="北京">北京</option>
            <option class="c" value ="上海">上海</option>
            <option class="c" value ="天津">天津</option>
        </select>
    </body>
</html>