变量

  • 变量指的是在程序中保存数据类型的一个容器
  • 是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中的存储数据
  • 语法: var 变量名=值;

定义变量及赋值

 //定义一个变量var num;//给变量赋值num= 100;//定义一个变量的同时给其赋值var num2=190;
  • 注意:
  1. 一个变量名只能存储一个值
  2. 当再次给一个变量赋值的时候,前面的值就被覆盖了
  3. 变量名区分大小写(js严格区分大小写)

变量名的命名规则和命名规范

  • 规则:必须遵守,不遵守就是错
  1. 一个变量名可以由数字,下划线,字母,$,组成
  2. 严格区分大小写
  3. 不能由数字开头
  4. 不能是保留字或者关键字
  5. 不要出现空格
  • 规范:建议遵守,不遵守会报错
  1. 变量名尽量有意义(语义化)
  2. 遵循驼峰命名规则,由多个单词组成的时候,从第二个首字母开始大写
  3. 不要使用中文

数据类型

数据类型分为基本数据类型和复杂数据类型

基本数据类型

  1. 数值类型

         /* 100100.3科学计数  100e5 进制(二进制0b,八进制0o,十六进制0x)补充知识点:十进制:0~9  二进制:0~1 0b101 八进制:0~7 0o 0o77 十六进制 0~9 a~f a11 b12 c13 d14 f15 正无穷 infinite负无穷NaN*/
    1. 字符串型
    • 被引号包裹的所有内容(可以是单引号也可以是双引号)
     console.log("hell'o' word");console.log(`hahahehe`)
    //  最终会输出两个 这里的回车键原样显示var age = 18 console.log(`我今年 ${age} 岁`) // 反单引号中  原样显示   换行会原样显示, 可以解析变量  如果想解析变量 就要 在变量外边加上 ${}
    1. 布尔类型(boolean)

      • 只有两个(true 或者 false
        //布尔值一定全是小写,必须是小写var yes=true;console.log(yes);
    2. null类型(null)

      • 只有一个,就是 null,表示空的意思,先预留位置
     //null 表示空,什么都没有 先预留着位置var test=null;//null 是个关键字console.log(test);
    1. undefined类型(undefined)

    ​ 仅仅声明,但是没有赋值

           //underfined  仅仅声明,但是没有赋值var test;console.log(test);
    

    判断数据类型

    • 用typeof 关键字来进行判断

    有两种方法

    // 第一种使用方式
    var n1 = 100;
    console.log(typeof n1);// 第二种使用方式
    var s1 = 'abcdefg';
    console.log(typeof(s1));
    

    练习

     var test = 0xabc;//数值型console.log(typeof test);var test = 'hahahah ';//字符串型console.log(typeof test);var test = true;//布尔型console.log(typeof test);var test2;console.log(typeof test2);var test1 = null;//null 是object 的一个特殊类型console.log(test1);
    //typeof 是系统提供的一个工具
    //只有数据类型,没有变量类型
    //返回的两个number是什么类型 再加一个typeof 返回的结果一定是string类型
    console.log (typeof 10 + 100)// 只要加号两边有字符型 他们就会拼接在一起, 就会连在一起(结果:number100)
    

    判断一个变量是不是数字

    • 可以使用 isNaN 这个方法来判断一个变量是不是数字
    • isNaNis not a number
    // 如果变量是一个数字
    var n1 = 100;
    console.log(isNaN(n1)); //=> false// 如果变量不是一个数字
    var s1 = 'Jack'
    console.log(isNaN(s1)); //=> true
    

数据类型的转换

  • 数据类型之间的转换,数值转成字符串,字符串转成布尔,布尔转成数字型

其他数据类型转成数值

number(变量)

可以把一个变量强制转换成数值类型

可以转换小数,会保留小数

可以转换布尔值

遇到不可转换的都会返回 NaN

 //number//转换的内容看成一个整体处理//如果可以转成一个合法的数值, 则转成数字//如果不能转成一个合法的数字,则转成NaN//true->1  false->0var num1 = 'abc123';console.log(num1);var num2 = Number(num1)console.log(typeof (num2))console.log(num2);//无法装成合法数值,就出现nanconsole.log(Number(true));var test;console.log(Number(test));//nanconsole.log(Number(null));//0
  1. parseInt(整型)

从第一位开始检查,是数字就转换,知道一个不是数字的内容

开头就不是数字,那么直接返回 NaN

不认识小数点,只能保留整数

 //整形parseInt()//不管转成什么,都是一位一位对待//如果第一位不能转成合法数值,那么立马输出nan 然后停止转换//如果第一位能转成合法数字  那么保留第一位 然后继续看第二位//以此类推直到结束//true->NaN  flase->NaN//不认小数点var num3 = '123abc';console.log(parseInt(num3));console.log(parseInt(num3,16));//告诉转换器是一个16进制的数字,所以最总结果是转成10进制console.log(parseInt('1010101'));//1010101console.log(parseInt('1010101',2));//2转10进制  85console.log(parseInt('123.45'));//小数点识别不了,不知道转成那个数字,所以停止 ,输出123console.log(parseInt(true));//nanconsole.log(parseInt(NULL));//NANvar test;console.log(parseInt(test));//nan
  1. parseFloat(浮点型)

从第一位开始检查,是数字就转换,知道一个不是数字的内容

开头就不是数字,那么直接返回 NaN

认识一次小数点

//parseFloat()浮点型// 也是以为一位的对待  同parseInt // 如果第一位不能转成合法的值 那么就立马输出 NaN 然后停止转换 // 如果第一位可以转换 那么保留第一位 继续下一位  // 识别小数点var test = '123.45';console.log(parseFloat(test));// 123.45console.log(parseFloat('123.45abc'));// 123.45console.log(parseFloat('abc123.45'));// 123.45var test;console.log(parseFloat(test));// NaNconsole.log(parseFloat(null));
  1. +

    运算符两边都是可运算数字才

    如果运算符任何一边不是一个可运算数字,那么就会返回 NaN(字符串)

    加法不可以用

    //+  除了相加 还有拼接的作用console.log(typeof (1 + 1 + 'abc'));//只要两边有以一个字符串,那麽就是拼接//从左往右运算2+'abc' 2abcconsole.log(typeof ('abc' + 1 + 1));//abc11 开始就见到字符串 后边全是拼接
    

    其他数据转成字符串

    1. 变量.toString()

      有一些数据类型不能使用 toString() 方法,比如 undefinednull

       //toString()//变量.tostring()//数据.tostring()//不能转null 和 undefinedconsole.log(typeof test.toString());console.log(typeof 100e5.toString());console.log(typeof 123.45.toString());//console.log(typeof null.toString());//不可以转会报错var test1 = true;console.log(typeof test1.toString());var test3;//console.log(typeof test3.toString());//不可以转会报错
      
    2. String(变量)

      所有数据类型都可以

       var test = 100;console.log(typeof test);//string()//任何类型都可以使用这个转成字符串//原样显示var y1;console.log(String(y1));
      
    3. 使用加法运算

      在 JS 里面,+ 由两个含义

      字符串拼接: 只要 + 任意一边是字符串,就会进行字符串拼接

      加法运算:只有 + 两边都是数字的时候,才会进行数学运算

        //+  除了相加 还有拼接的作用console.log(typeof (1 + 1 + 'abc'));//只要两边有以一个字符串,那麽就是拼接//从左往右运算2+'abc' 2abcconsole.log(typeof ('abc' + 1 + 1));//abc11 开始就见到字符串 后边全是拼接
      

      其他数据转成布尔

      1. Boolean(变量)

        在 js 中,只有 ''0nullundefinedNaN,这些是 false

        其余都是 true

         // 数值 整数 浮点数 科学计数  非数字NaN 0 0.0// 字符串 "adsf"  'adf'  `adf`   ''  ""// 布尔 true false// null undefined// 复杂数据类型  // functionconsole.log(Boolean(0))console.log(Boolean(0.0))console.log(Boolean('abc'/123))console.log(Boolean(''))console.log(Boolean(""))console.log(Boolean(true))console.log(Boolean(false))console.log(Boolean(null))var test;console.log(Boolean(test)console.log(Boolean(-9999999999e88888888888))// 0 0.0 NaN ""  ''  false  null undefined//  复杂数据类型 引用类型中 如果是空的  结果一定是false // 重点  后边判断  逻辑运算 都会用到  // 转字符串  转数值 转 布尔 上面的都是 明着转换   // 后边知识点 很多隐式转换   // 负无穷 是true
        

运算符

  • 就是在代码里面进行运算的时候使用的符号,不光只是数学运算,我们在 js 里面还有很多的运算方式

数学运算符

  1. +

    只有符号两边都是数字的时候才会进行加法运算

    只要符号任意一边是字符串类型,就会进行字符串拼接

     //  +  //  求和 两边都是数值 或者 布尔//  拼接 只要两边有一个是字符串  那么+ 充当拼接的功能console.log(1+2) // 3console.log(true+false) // 隐式转换  true 1  false 0  结果 1console.log(1+1+'abc') // 2abcconsole.log('abc'+'def'+1+2+4)
  2. -

    会执行减法运算

    会自动把两边都转换成数字进行运算

       // - console.log(100-123) // -23console.log('abc'-123)// NaNconsole.log(true-false) //1
    
  3. *

    会执行乘法运算

    会自动把两边都转换成数字进行运算

      //*console.log(100/50) //2 console.log(100/0) // Infinity   分母为0 返回正无穷// ** 平方console.log(2**3) // 8
    
  4. /

    会执行除法运算

    会自动把两边都转换成数字进行运算

    
    
  5. %

    会执行取余运算

    会自动把两边都转换成数字进行运算

    // % console.log(100%3);//1
    

练习

  //16789秒var time=16789;//分钟min=parseInt(time%3600/60);//分钟hour=parseInt(time/3600);//小时s=parseInt(time%60);//秒console.log('16789秒是'+hour+"小时,"+min+'分钟'+s+'秒')//提取百位 十位 个位// 895var num=895;bai=parseInt(num/100);shi=parseInt(num%100/10);ge=parseInt(num%10);console.log('895的百位数是'+bai ,'895的十位数是'+shi,'895的个位数是'+ge);

赋值运算符

  1. =

    就是把 = 右边的赋值给等号左边的变量名

    var num = 100

    就是把 100 赋值给 num 变量

    那么 num 变量的值就是 100

  2. +=

    var a = 10;
    a += 10;
    console.log(a); //=> 20
    

    a += 10 等价于 a = a + 10

  3. -=

    var a = 10;

    a -= 10;
    console.log(a); //=> 0
    

    a -= 10 等价于 a = a - 10

  4. *=

    var a = 10;
    a *= 10;
    console.log(a); //=> 100
    

    a *= 10 等价于 a = a * 10

  5. /+

    var a = 10;
    a /= 10;
    console.log(a); //=> 1
    

    a /= 10 等价于 a = a / 10

  6. %=

    var a = 10;
    a %= 10;
    console.log(a); //=> 0
    

    a %= 10 等价于 a = a % 10

比较运算符

判断两个数据类型是否一致(补充)

//objiect.is(数据1,数据2)//判断两个数据是否一致  返回的是一个布尔类型的结果//一致为true 不一致为falsealert(Object.is(1,'1'))//falsealert(Object.is(1,1))//truealert(null==undefined)//truealert(Object.is(null,undefined));//falsealert(Object.is(NaN,NaN))//true
  1. ==

    • 比较符号两边的值是否相等,不管数据类型 >

      1 == '1'

      两个的值是一样的,所以得到 true

  2. ===

    • 比较符号两边的值和数据类型是否都相等 >

      1 === '1'

      两个值虽然一样,但是因为数据类型不一样,所以得到 false

            console.log(1==1)// trueconsole.log('1'==1) // true // // 两个= 仅仅是判断值是否相等 不判断类型 console.log('1'===1) // false  === 判断值和类型是否都相等  // = 赋值  // == 值是否相等 (只判断值,不判断类型)// === 值和类型是否都相等 console.log(NaN == NaN)console.log(undefined == null) // true // undefined 派生自 null  console.log(undefined === null) // false  因为类型不一致 console.log(1 == true) // trueconsole.log(1 === true) // false 因为类型不一致
      
  3. !=

    • 比较符号两边的值是否不等 >

      1 != '1'

      因为两边的值是相等的,所以比较他们不等的时候得到 false

  4. !==

    • 比较符号两边的数据类型和值是否不等 >

      1 !== '1'

      因为两边的数据类型确实不一样,所以得到 true

           // console.log(1!='2') //判断值是否不相等 如果不相等 true 否则 false// console.log(1!=='2')// 判断值和类型是否都不相等  是 返回给true 否则 false
      
  5. >=

    • 比较左边的值是否

      大于或等于

      右边的值 >

      1 >= 1 结果是 true

      1 >= 0 结果是 true

      1 >= 2 结果是 false

  6. <=

    • 比较左边的值是否

      小于或等于

      右边的值 >

      1 <= 2 结果是 true

      1 <= 1 结果是 true

      1 <= 0 结果是 false

  7. >

    • 比较左边的值是否

      大于

      右边的值 >

      1 > 0 结果是 true

      1 > 1 结果是 false

      1 > 2 结果是 false

  8. <

    • 比较左边的值是否

      小于

      右边的值 >

      1 < 2 结果是 true

      1 < 1 结果是 false

      1 < 0 结果是 false

逻辑运算符

优先级:非 与 或

  1. &&

    • 进行 且 的运算 >

      符号左边必须为 true 并且右边也是 true,才会返回 true

      只要有一边不是 true,那么就会返回 false

      true && true 结果是 true

      true && false 结果是 false

      false && true 结果是 false

      false && false 结果是 false

      // 逻辑运算符的结果 不一定是布尔类型,会输出原结果// 逻辑与       &&   两边都是true  结果才是true // 两边只要有一个是false 整个结果就是false var test= true && true && true && false && true console.log(test) // falsevar test1= true && true && true && true && true console.log(test1) // truevar test5= true && true && true && false && true  // 遇到false 停止向右走console.log(test5) // falsevar test4 = 'abc' && 123 && true && [1,2,3,'haha',true] && 123.45;console.log(test4);//123.45// 遇到false 停止向右 var test6 = 'haha' && 123 && '' && 0 && 0.0 & 100console.log(test6) // 0
      
      
  2. ||

    • 进行 或 的运算 >

      符号的左边为 true 或者右边为 true,都会返回 true

      只有两边都是 false 的时候才会返回 false

      true || true 结果是 true

      true || false 结果是 true

      false || true 结果是 true

      false || false 结果是 false

       // 逻辑或    ||   两边只要有一个是true  整个结果就是true //  两边都是false  整个结果就是false var test2 = true || false || false || true console.log(test2) // truevar test3 = false || false || false || falseconsole.log(test3) // false // 遇到true 停止向右判断 var test7 = 100 || 0 && 0.0 && NaNconsole.log(test7) // 100 
  3. !

    • 进行 取反 运算 >

      本身是 true 的,会变成 false

      本身是 false 的,会变成 true

      !true 结果是 false

      !false 结果是 true

       // 逻辑非  !  true-> false  false-> true  console.log(!true) //false console.log(!100)  // false
      

练习

 var year = 2000// (能被4整除 && 并且不能被100整除)   或者 || ( 能被400整除)console.log((year%4==0 && year % 100 !=0) || year % 400 ==0)// 身高m  体重 kg  // 体重kg / 身高m的平方 如果在 大于等于18.5 小于等于24.9 var kg = 1.65;m = 60;y = (m / (kg ** 2)) >= 18.5 && ((m / (kg ** 2)) <= 24.5);console.log(y);

拆分百位数

  // //拆分百位数var t = parseInt(origin / 1000); // 千位 console.log(parseInt(origin % 1000 / 100)); // 2console.log(parseInt((origin-t*1000)/100)); // 2var h = parseInt((origin-t*1000)/100); // // //拆分十位数var ten = parseInt(origin %100 / 10); // 千位var ten =parseInt((origin-t*1000-h*100)/10); // 千位console.log(ten); // 3// //拆个位 var one = origin % 10; // 个位console.log(one); //

单位换算

 var origin = 1234567;var day = parseInt(origin / (60*60*24)); // 天var hours = parseInt(origin % (60*60*24) / (60*60)); // 小时var minutes = parseInt(origin % (60*60) / 60); // 分钟var seconds = parseInt(origin % 60); // 秒console.log(day+'天'+hours+'小时'+minutes+'分钟'+seconds+'秒');console.log(`${day}天${hours}小时${minutes}分钟${seconds}秒`);

四舍五入保留小数

/* 1. 小明要到美国旅游,可是那里的温度是以华氏度为单位记录的。- 它需要一个程序将华氏温度(80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。- 提示:摄氏度与华氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32)保留3位小数    100.45678.toFixed(2);  => 100.46 会四舍五入*/var fah=80;cel=parseFloat(5/9.0*(fah-32)).toFixed(2);//方法一:使用函数console.log('华氏摄氏为:'+fah,"摄氏度为:"+ cel);var num3 = 'abc';console.log(Number(num3));//NaN// console.log(('abc' + '123'));方法小结:
var sheshi = 5/9.0*(huashi-32)  // 123.456789
parseInt(sheshi*1000)/1000  //不考虑四舍五入的情况var num = 1234567 % 10 = 7
if(num>=5){console.log(parseInt(shezhi*1000+1)/1000)
}   // 考虑四舍五入 console.log(sheshi.toFixed(3))     // 使用系统系统的方法实现 

自增自减运算符(一元运算符)

  1. ++

    • 进行自增运算

    • 分成两种,前置++后置++

    • 前置++,会先把值自动 +1,在返回

      var a = 10;
      console.log(++a);
      // 会返回 11,并且把 a 的值变成 11
      
    • 后置++,会先把值返回,在自动+1

      var a = 10;
      console.log(a++);
      // 会返回 10,然后把 a 的值变成 11
      

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SzU8oj8z-1660984205757)(C:\Users\hp\Desktop\JN-课上笔记\JS上课资料\QQ图片20220816165743.png)]

  2. --

    • 进行自减运算
    • 分成两种,前置–后置–
    • ++ 运算符道理一样

练习

   var n= 5 var res = n++ + ++n + ++n + n++// 5 + 7 +8+8 console.log(res)console.log(n)//n=9var res2 = n++ + ++n + --n + n-- - --n+ ++n // res2 =9 +11+10+10-8+9// n    =10 11 10  9 8 9

IF 条件分支结构(重点)

if 语句

  • 通过一个 if 语句来决定代码是否执行

  • 语法: if (条件) { 要执行的代码 }

  • 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

    // 条件为 true 的时候执行 {} 里面的代码
    if (true) {alert('因为条件是 true,我会执行')
    }
    // 条件为 false 的时候不执行 {} 里面的代码
    if (false) {alert('因为条件是 false,我不会执行')
    }
    

if else 语句

  • 通过 if 条件来决定,执行哪一个 {} 里面的代码

  • 语法: if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

  • 两个 {} 内的代码一定有一个会执行

    // 条件为 true 的时候,会执行 if 后面的 {}
    if (true) {alert('因为条件是 true,我会执行')
    } else {alert('因为条件是 true,我不会执行')
    }// 条件为 false 的时候,会执行 else 后面的 {}
    if (false) {alert('因为条件为 false,我不会执行')
    } else {alert('因为条件为 false,我会执行')
    }
    

三元运算(扩展)

  • 三元运算,就是用 两个符号 组成一个语句

  • 三元运算只是对 if else 语句的一个简写形式

  • 语法: 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

    var age = 18;
    age >= 18 ? alert('已经成年') : alert('没有成年')
    

SWITCH 条件分支结构(重点)