JavaScript（一）：变量，数据类型，运算符

一、变量

声明及初始化

    <script>
        // 1、声明一个变量
        var age;
        //2、 赋值
        age=20;
        // 3、控制台输出
        console.log(age);
        // 4、变量的初始化,除了数字之外后面记得添加单引号
        var myname = 'apple';
        console.log(myname);
    </script>

更新变量及输入多个变量

        //1.更新变量
        var myname ='pink老师';
        console.log(myname);
        myname='迪丽热巴';
        console.log(myname);
        //2.声明多个变量
        // var age = 18;var address='火影村'；
        var age = 18,
            address='火影村',
            gz = 2000;

 特殊情况

 命名规范

二、数据类型 

js变量的数据类型只有在程序运行的过程中，根据等号右边的值来确定的。
js是动态语言，变量的数据类型是可以变化的。
数据类型可以分为两大类，分别是简单数据类型和复杂数据类型 

1、Number 

●数字前加0表示八进制，如010表示十进制的8，012表示十进制的10
●数字前加0x表示十六进制，如0xa表示十进制的10

●最大值: Number.MAX_ VALUE ,这个值为: 1.7976931348623157e+308
●最小值: Number.MIN _VALUE,这个值为 : 5e-324

●Infinity ,代表无穷大,大于任何数值
●-Infinity , 代表无穷小,小于任何数值
●NaN,Not a number,代表一个非数值

isNaN方法：判断是否是非数字，如果是数字那么返回false，不是数字返回true。

<script>
        // 八进制
        var num1 = 010;
        console.log(num1);
        // 十六进制
        var num2 = 0x9;
        console.log(num2);
        // 数字型的最大最小值
        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);
        // 无穷大无穷小
        console.log(Number.MAX_VALUE*2);
        // 非数值
        console.log(isNaN('陈'+1));//不是数字true
        console.log(isNaN(1));//false
        console.log(isNaN('pink'));//true
        // isNaN
        // console.log(isNaN(12));
    </script>

2、String

最好使用单引号
字符串可以嵌套，可以用’‘包含"“，也可以用”"包含’'，外双内单，外单内双
如果想要实现换行、空格等效果,需要转义符 ：

length获取字符串长度：

	var str = '  嗷嗷嗷';
    console.log(str.length);//结果是5，空格也是

使用加号+进行字符串的拼接，字符串不管和谁连接，最后结果都是字符串，因为拼接前会把其他类型转换成字符串

console.log('沙漠' + '骆驼'); //结果沙漠骆驼
console.log('年薪' + 60); //结果年薪60
console.log('年薪' + true);  //结果年薪true
console.log(12 + 12); //结果24
console.log('12' + 12); //结果1212

3.Boolean

true是1，false是0

4.Undefined

声明变量但是未赋值，那这个变量就是undefined未定义的数据类型
当然啊，如果这么写：

console.log(undefined + 'shit'); //结果undefinedshit
输出结果还是字符串，但是如果这么写：

console.log(undefined + 1);  //结果NaN
结果就是一个NaN

 5.Null

console.log(null + 'shit');  //结果nullshit
console.log(null + 1);  //结果1

6.typeof

查看数据类型

<script>
        var num = 10;
        console.log(typeof num);//number
        var str = 'pink';
        console.log(typeof str);//string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(typeof vari);//undefined
        var timer = null;
        console.log(typeof timer);//object
        var age = prompt('请输入你的年龄：');
        console.log(age);
        console.log(typeof age);//string,prompt输出的是字符型
    </script>

 通过这个typeof，我们可以知道用户使用prompt输入的数字，实际上是一个string

7.数据类型的转换 

 （1）转换为字符串

最常用的是第三种隐式转换

// 转换为字符串类型的三种方法
        // 1. 变量.toString
        var num=10;
        var str=num.toString();
        console.log(str);//黑色的10
        console.log(typeof str);//string
        // 2.利用String(变量)
        console.log(String(num));//黑色的10
        // 3.利用+拼接字符串的方法
        console.log(num+'');//黑色的10

 （2）转换为数字型

重点掌握前两种。 

        // 转换为数字型
        // 1.parseInt() 字符型转换为数字型 得到的是整数
        // var age=prompt('请输入年龄：');
        // console.log(parseInt(age));//蓝色的数字
        console.log(parseInt(10.4));//蓝色的10
        console.log(parseInt('120px'));//输出120，没有单位
        console.log(parseInt('num120px'));//NaN
        // 2.parseFloat() 得到的是小数 浮点数
        console.log(parseFloat(3.14));//蓝色的3.14
        console.log(parseFloat('120px'));//120
        console.log(parseFloat('num120px'));//NaN
        // 3.利用Number(变量) 
        var data='123';
        console.log(Number(data));//123蓝色
        console.log(Number('456'));//456蓝色
        // 4.利用- * /隐式转换
        console.log('12'-0);//蓝色的12
        console.log('12'*1);
        console.log('12'/1);

案例1：计算年龄

        // 案例计算年龄
        var year=prompt('请输入您的出生年份：');
        var age=2023-year;//year是字符串类型，但是这里有隐式转换-号 转换为了数字型
        alert('您的年龄是'+age+'岁');

案例2：简单加法器

    <script>
        var num1=prompt('请您输入第一个值:');
        var num2=prompt('请您输入第2个值:');
        var result=parseFloat(num1)+parseFloat(num2);
        // alert('您的结果是'+result+'');
        alert('您的结果是'+result);
    </script>

（3）转换为布尔型

 ●代表空、否定的值会被转换为false ,如"、0、NaN、 null、 undefined
●其余值都会被转换为true

        // 转换为布尔型
        console.log(Boolean('')); // false
            console.log(Boolean(0)); // false
            console.log(Boolean(NaN)); // false
            console.log(Boolean(null)); // false
            console.log(Boolean(undefined)); // false 
            console.log(Boolean('小白')); // true
            console.log(Boolean(12)); // true

三、运算符

（1）算数运算符 

（2）递增递减运算符 

前置自增运算符++n,先+1，后返回值

    <script>
        // 前置自增 先加1，后返回值
        var n=1;
        console.log(++n + 10);//输出12

后置自增运算符 n++,先返回原值，后自加

        // 后置自增 先返回原值 后自加
        var m=1;
        console.log(m++ + 10);//输出11
        console.log(m);//输出2

 练习

        // 练习
        var a=10;
        ++a;// a=11
        var b= ++a + 2;//12+2
        console.log(b);//14

        var c=10;
        c++;// c=11
        var d= c++ + 2;//11+2
        console.log(d);//13

        var e=10;
        var f= e++ + ++e;//1.e++=10 e=11;2.自加1，e=12 在返回值12
        console.log(f);//10+12=22

 

（3） 比较运算符

 

   会默认吧字符串转换为数字型。

        // 会默认吧字符串转换为数字型
        console.log(18=='18');//true

 全等要求 数值类型 完全相同

        // 全等要求 数值类型 完全相同
        console.log(18==='18');//false

 （4）逻辑运算符

逻辑与&&，一个为假就为假，全为真才是真。

逻辑或||，一个为真就为真，全为假才是假。

逻辑与短路运算

 

谁是假就返回谁，遇到真就跳过，遇到假直接返回假，后面不在执行。如果都是真，返回最后一个真。

// 逻辑与短路
console.log(123 && 456 && 7);//7
console.log(0 && 123);//0
console.log(0 && 123 && 456 &&789);//0

 逻辑或短路运算

谁是真就返回谁，遇到假跳过，遇到真直接返回真，后面不在执行。如果都是假，返回最后一个假。 

// 逻辑或短路
console.log(123 || 456);//123
console.log(0 || NaN || undefined);//undefined

应用

// 应用
var g=0;
console.log(123 || g++);
console.log(g);//0

（5） 赋值运算符

 （6）运算符优先级

 一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高 

四、拓展

编译型语言 解释型语言 

类似于请客吃饭:
●编译语言:首先把所有菜做好,才能上桌吃饭
●解释语言:好比吃火锅,边吃边涮,同时进行

 标识符

关键字

保留字