一、基本概念 - 1-1基本语法 - 《Javascript》

一、声明变量
二、数据类型
三、运算符和表达式
四、实例

javaScript语法不允许变量的名字中包含空格或标点符号（$除外）

一、声明变量
如果声明一个变量没有赋值的情况下,就会输出undefined

null就是空,在内存中不占据空间

<script>
      /* undefined
      如果声明一个变量没有赋值的情况下,就会输出undefined
      null就是空,在内存中不占据空间
       */
      var a=null;
      console.log(a);
 </script>

1-2、声明提前

声明提前,变量提升
javascript在执行代码的时候会将所有使用var声明的变量,放在作用域的顶部集中创建,

赋值留在原地

<script>
      console.log(a);
      var a = 20;
      function go(){
          console.log("hello world")
      }
      var b ="good"
  </script>

1-3、声明提前的执行代码

<script>
        var a,b;
        console.log(a);
        a = 10;
        b = "good"
</script>

1-4、es

在es6中没有声明提前

<script>
     /* 在es6中没有声明提前 */
     console.log(a);
     let a = 10;
</script>

在es6中，如果属性名和值相同就可以简写

<script>
      /*  */
      var name="cheng";
      var age=21;
      var obj = {
          name,
          age,
      }
      console.log(obj)
  </script>

二、数据类型

原始类型:number,string,boolean,undefined,null

number(只能转纯数字的字符串，小数点也可以识别)
```
   var a = 10，b=20;
```
string 用单引号或双引号包裹的叫string类型
boolean 只有两个值true或false
undefined 一个变量声明没有赋值就是undfined

null null值表示一个空对象

array 数组
向数组中添加元素 array [index] = element;

2-1、强制转换

有3个函数可以把非数值转换为数值：Number()、parseInt()、parseFloat()
parseInt()、parseFloat()专门用于把字符串转换成数值

<script>
/* number,string,boolean */
/* 1.string,boolean -->number
Number()  --强制转换，可以用于任何数据类型
parseInt()
parseFloat()
*/
var a = "12";
var num = Number(a);
var str = "12px"
console.log(typeof num)
console.log(num)
console.log(a)
console.log(Number(str))  //NaN (not a Number) 不是一个数字
</script>

2-2、string-number

parseInt 1.开头的字符必须以数字开头 2.遇到非数字的字符就停止解析
parseFloat
Number —>

局限性:只能识别纯数字的字符串

<script>
      var str = "12.323px";
      console.log(Number(str))
      console.log(parseInt(str))
      console.log(parseFloat(str))
 </script>

2-3、boolean-number

1.只能识别纯数字的字符串 2.只能识别纯boolean类型

<script>
  var t = true;
  var f = false;
  var str = "true"
  console.log(Number(t))
  console.log(Number(f))
  console.log(Number(str))
</script>

2-4、any-string（转换为字符串）

当在不知道要转换的值是不是null或undefined的情况下，还可以使用转型函数String（），这个函数能够将任何类型的值转换为字符串

<script>
  /* String()  toString() */
  var a = 10;
  var t = true;
  console.log(typeof String(a));
  console.log(typeof t.toString())
</script>

2-5、any-boolean

<script>
  /* Boolean()
  Tip:"" NaN undefined null 0  -->false
   */
  var a = 10;
  var b = 0;
  var c = "hello world"
  console.log(Boolean(a))
  console.log(Boolean(b))
  console.log(Boolean(c))
  var str= "";
  console.log(Boolean(null))
</script>

2-6、自动转换

1.在加运算中的自动转换
算术计算中,先将两边的变量转换为Number再计算 Number()
特殊:在加运算中,碰到字符串,+就会启动拼接符的作用

不需要程序员干预,js自动完成的类型转换

场景:主要在算术计算中 +,-,*,/,%

<script>
      /*
       */
       var a = 1;
       var b = true;
       var d = "2"
       var c = "hello world";
       var str = a+b;
       var sum = a+c;
      //  var str = a+Number(b);
      // var sum =String(a)+c;
       console.log(str);
       console.log(sum)
       console.log(a+d);
</script>

三、运算符和表达式

3-1、减运算

在算术运算中,先将变量转换为Number再计算

特殊:在+运算中,如果有一边为字符串,+起到拼接符的作用,结果为字符串

<script>
var a = true;
var b = "3";
var c = 4;
console.log(a-b);
console.log(c-b);
console.log(c-a);
/* Number(a)-Number(b) */
</script>

3-2、比较运算中的自动转换

比较运算返回的结果是boolean 先将两边的值转换为Number再比较

NaN是不能参与计算的,它和任何值做计算,结果都是NaN

<script>
      var a = 10;
      var b = "20"
      var c = "true"
      console.log(a>b);  //false
     //  Number(a)>Number(b)
     console.log(a>c);
     // Number(a)>Number(c)  10>NaN  NaN是不能参与计算的,它和任何值做计算,结果都是NaN
 </script>

3-3、算术运算符

<script>
     /* +,-,*,/,%,++,-- */
     var a = 10;
     var c = 3;
     var b = 2;
     b++;
     c = b++ +4;
     console.log(a%c)
     console.log(a%b)
     console.log(c)
 </script>

3-4、前++ 后++

1.在算术运算中++在前,先自增,后运算
```
     ++在后,先运算,后自增
```

单独使用a都会加一

<script>
      var a = 10;
      a++;  //11
      /* a=a+1 */
      var b = a++ +11;
      console.log(b)
      console.log(a)
  </script>

3-5、比较运算（<,>,<=,>=,==,!=）

1.NaN和任何数据做!=比较时，始终返回true

isNaN(n):本意是判断一个值是否是NaN

<script>
      var a = 10;
      var b = 20;
      console.log(a==b)
      console.log(a!=b)
      console.log(a!="true") //NaN和任何数据做!=比较时，始终返回true
      // isNaN  判断一个值是不是NaN
      console.log(isNaN(NaN))
  </script>

3-6、逻辑运算

&& 逻辑与两边都为true 结果才为true
|| 逻辑或只要有一边为true结果就为true

! 取反

<script>
      var a =20;
      var b = 30;
      var c =40;
      var d =50;
      console.log(a<b && c<d)
      console.log(a<b && c>d)
      console.log(a>b || c<d)
      console.log( !(a>b))
 </script>

3-7、赋值运算

+=,-=,*=,/=,%=

<script>
      var a = 10;
      var b = 20;
      a+=10;
      b-=10;
      // b= b-10;
      /* a=a+10 */
      console.log(a)
      console.log(b)
  </script>

3-8、三目运算

<script>
        var a = 30;
        var b = 20;
        var c = (a>b)?"a大于b":"a小于b";
        console.log(c)
    </script>

四、实例

<title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
         <img @click="handleClick" :src="isPlay?'images/play.png':'images/pause.png'" alt="">
         <p>{{isPlay}}</p>
    </div>

    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    isPlay:false
                }
            },
            methods:{
                handleClick(){
                    this.isPlay = !this.isPlay
                }
            }
        })
    </script>
</body>
</html>

1-1基本语法

一、声明变量