成为前端牛马第八天——JS基础开始

最新推荐文章于 2024-08-26 22:34:51 发布

咸鱼茄子煲OvO

最新推荐文章于 2024-08-26 22:34:51 发布

阅读量348

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/m0_67963390/article/details/140613310

版权

一. JS基础

1. 数据类型

JavaScript的数据类型有两大类，第一类是基本数据类型，另一类是引用数据类型

1.1 基本数据类型

undefined | null | 布尔值 | number | string

1.2 引用数据类型

2. typeof数据类型的检测

console.log(typeof 123); //number
      console.log(typeof null); //返回的是Object 空指针对象！！
      console.log(typeof function (params) {}); //函数类型
      console.log(typeof [1, 2]); //返回对象,不能用这种方法判断数组
      console.log(Array.isArray([])); //返回true

3. 数据类型的转换

3.1 字符串,布尔值转数字类型

方法有 Number() parseInt() parseFloat() 除加法的数学运算

/* 一.转数字类型 Number语法 */
      /* 1.字符串转数字 */
         var a = "123";
         var b = Number(a);
         console.log(typeof a, typeof b);
       //  string number

      /* 2.null转数字 会转换成0*/
         var a = null;
         var b = Number(a);
         console.log(typeof a, typeof b, b);
      //object number 0

      /* 3.undefined转数字 会转换成NaN，非数字，本质还是数字类型*/
         var a = undefined;
         var b = Number(a);
         console.log(typeof a, typeof b, b);
      //   undefined number NaN

      /* 4.boolean转数字 true对应1 false对应0 */

      /* 5.小数转换 */
         var a = 123.45;
         var b = Number(a);
         console.log(typeof a, typeof b, b);
      //   number number 123.45

      /* 6.大字母字符串转换 */
         var a = "123abc123";
         var b = Number(a);
         console.log(typeof a, typeof b, b);
      //   string number NaN

/* 二.parseInt 转换方法,主要转换整数,类似于一个数字一个数字转换,遇到字母或是小数点就停止 */
         var a = 123.45;
         var b = parseInt(a);
         console.log(typeof a, typeof b, b);
      //   number number 123 会省略后面的小数

         var a = "123abc123";
         var b = parseInt(a);
         console.log(typeof a, typeof b, b);
      //   string number 123

/* 三.parseFloat 转换方法，与parseInt类似，可以保留小数 */

/* 四.非加法 隐式转换,两边内容都必须是可运算数字*/
      var a = "100.1";
      var b = a - 0;
      console.log(typeof a, typeof b, b);
      //string number 100.1

3.2 数字布尔值转字符串

方法有 String() toString() +运算

/* 一. 转换为字符串类型 String()写法 任何类型皆可转换 */
         let a = null;
         let b = String(a);
         console.log(typeof a, typeof b, b);
      //   object string null

/* 二. toString() 写法 具有限制，值为null和undefined时会报错，可以看做是方法的调用，null和undefined是不能调用方法的*/
         let a = true;
         let b = a.toString();
         console.log(typeof a, typeof b, b);
      //   boolean string true

/* 三. + 加法 */
         let a = true;
         let b = a + "1";
         console.log(typeof a, typeof b, b);
      //   boolean string true1

3.2 转布尔值

Boolean()

/* 一. 类型转换为布尔值 */
/* 只有0,'',undefined,null,NaN 这些值会转换成false，其余都是true */
         let a = "";
         let b = Boolean(a);
         console.log(typeof a, typeof b, b);
      //   string boolean false

4. 变量

变量是储存数据的容器

声明变量的关键字有 var let ，const 主要声明常量

var num = 10

var 的变量提升情况，选择 let 声明更加方便

/* 2.变量提升情况 var关键字 先声明后使用*/
      console.log(num); //undefined
      var num = 10;
      /* 相当于
            var num;
            console.log(num);
            num = 10 
      */

5. 运算符

4.1 数学运算符及自增自减运算

// + - * / %

      /* 倒计时转换效果 */
      let time = 1000;
      let hour = parseInt(time / 60);
      let min = time % 60;
      console.log(hour + ":" + min);

      /* 字符串数学运算 */
      console.log(1 + "2" * 3 + 4);
      //非加号的字符串数学运算都带有隐式转换，会转换成数字类型进行运算

      /* 自增自减运算 ++ --*/
      let num = 10;
      console.log(num++); //10 先输出再运算
      console.log(num); //11

      console.log(++num); //11 先运算再输出

自增自减运算可以通过顺序理解，num++，前是变量，后是运算符，所以是先输出再运算，++num，前是运算符，后是变量，所以是运算后再输出。

4.2 赋值及比较运算符

/* JS的赋值运算符有 = += -= *= /=*/
/* 比较运算符有 == === != !== */
      console.log(true == 1); //true
      console.log("" == 0); //true
      console.log(undefined == 0); //false

4.3 逻辑运算符

      /* 逻辑运算符 || && ! */
      /* 逻辑或 || 一真全真,全假为假 */
      /* 逻辑与 && 全真为真,一假为假 */

      /* || 的运用  默认值操作*/
      let data = "" || "侬好";
      console.log(data); //'侬好'
      //变量赋值没有值时，会将||后的值赋给变量，也就是默认值

      /* && 的运用 */
      let data1 = true && 100; //&& 运算符所有的条件都会执行，有值赋值
      console.log(data1);//100

6. JS语句

javascript 语句
        1.判断语句      if else | if (else if) else | switch
        2.循环语句      for循环 while循环 do while循环
        3.补充          for in 循环key值    for of 循环键值对

if语句

if () {
} else if (){
} else {
}

练习

let weight = 90;
      if (weight <= 90) {
        console.log("身材瘦小");
      } else if (weight > 90 && weight <= 150) {
        console.log("身材强壮");
      } else {
        console.log("身体发福");
      }

switch语句别忘了break跳出

/* switch语句 */
      switch (变量名) {
        case 变量值:
          break;

        default:
          break;
      }

练习

/* switch语句 */
      let vision = 0.5;
      switch (vision) {
        case 1.0:
          console.log("正常视力");
          break;
        case 0.8:
          console.log("轻度近视");
          break;
        case 0.6:
          console.log("中度近视");
          break;
        case 0.5:
          console.log("重度近视");
          break;
        case 0.3:
          console.log("高度近视");
          break;

        default:
          break;
      }

循环语句

/* for循环 */
      for (初始化; 终止条件; 增量) {
        // 循环体代码
      }
      for (let i = 0; i < 5; i++) {
        console.log(i);
      }

/* while循环 */
      while (条件) {
        // 循环体代码
      }
      let i = 0;
      while (i < 5) {
        console.log(i);
        i++;
      }

/* do while 循环 */
      do {
        // 循环体代码
      } while (条件);

      let j = 0;
      do {
        console.log(j);
        j++;
      } while (j < 5);