2020 August 07 Web开发

JS基础(二)-数据类型转换、运算符、流程控制、数组

数据类型转换

将其它类型转换为字符串

  1. 调用被转换数据类型的toString()方法

    1. 代码举例：

       var num1 = 10;
 var res1 = num1.toString(); 
 console.log(res1); // 10
 console.log(typeof res1); // String
 var num2 = true;
 var res2 = num2.toString(); 
 console.log(res2); // true
 console.log(typeof res2); // String

    2. null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错

       var num3 = undefined;
 var res3 = num3.toString(); // 报错
 console.log(res3);

 var num4 = null;
 var res4 = num4.toString(); // 报错
 console.log(res4);

 var num5 = NaN;
 var res5 = num5.toString();
 console.log(res5); // NaN
 console.log(typeof res5); // String
    3. 该方法不会影响到原变量，它会将转换的结果返回

    4. 数值类型的toString()，可以携带一个参数，输出对应进制的值

        var num7 = 20;
 var res7 = num7.toString(2);
 var res8 = num7.toString(8);
 var res9 = num7.toString(10);
 var res10 = num7.toString(16);
 console.log(res7); // 10100
 console.log(res8); // 24
 console.log(res9); // 20
 console.log(res10); // 14
  2. 将被转换的数据传入String()函数中
    1. String()函数存在的意义：
      1. 有些值没有toString()，这个时候可以使用String()。比如：undefined和null

    2. 对于Number和Boolean实际上就是调用的toString()方法

       var num1 = 10;
 var res1 = String(num1); 
 console.log(typeof res1); // String
 var num2 = true;
 var res2 = String(num2); 
 console.log(typeof res2); // String

    3. 对于null和undefined，就不会调用toString()方法(因为这两个没有这个方法).而是在内部生成一个新的字符串

       var num3 = undefined;
 var res3 = String(num3);
 console.log(res3); // undefined
 console.log(typeof res3); // String

 var num4 = null;
 var res4 = String(num4);
 console.log(res4); // null
 console.log(typeof res4); // String
  3. 将被转换的数据和+”“连接到一起
    1. 任何数据和 +”” 连接到一起都会转换为字符串

    2. 内部实现原理和String()函数一样

       var num1 = 10;
 var res1 = num1 + "";
 console.log(res1); // 10
 console.log(typeof res1); // String

 var num2 = true;
 var res2 = num2 + "";
 console.log(res2); // true
 console.log(typeof res2); // string

 var num3 = undefined;
 var res3 = num3 + "";
 console.log(res3); // undefined
 console.log(typeof res3); // string

 var num4 = null;
 var res4 = num4 + "";
 console.log(res4); // null
 console.log(typeof res4); // string

将其它类型转换为Number类型

  1. 将被转换的数据传入Number()函数中
    1. 字符串 –> 数字
      1. 如果是纯数字的字符串，则直接将其转换为数字
      2. 如果字符串中有非数字的内容，则转换为NaN
      3. 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
    2. 布尔 –> 数字
      1. true 转成 1
      2. false 转成 0
    3. null –> 数字 –> 0

    4. undefined –> 数字 –> NaN

       var str1 = "123";
 var res1 = Number(str1);
 console.log(res1); // 123
 console.log(typeof  res1); // number
 var str2 = "123ab";
 var res2 = Number(str2);
 console.log(res2); // NaN
 var str3 = "";
 var res3 = Number(str3);
 console.log(res3); // 0
 var str4 = "    ";
 var res4 = Number(str4);
 console.log(res4); // 0
 var bool1 = true;
 var res5 = Number(bool1);
 console.log(res5); // 1
 var bool2 = false;
 var res6 = Number(bool2);
 console.log(res6); // 0
 var str5 = null;
 var res7 = Number(str5);
 console.log(res7); // 0
 var str6 = undefined;
 var res8 = Number(str6);
 console.log(res8); // NaN
  2. 将被转换的数据传入parseInt()函数中/parseFloat()函数中
    1. Number()函数中无论混合字符串是否存在有效整数都会返回NaN
    2. 利用parseInt()/parseFloat()可以提取字符串中的有效整数
    3. 两者之前的区别是前者只能提取整数,后者可以提取小数
    4. parseInt()提取字符串中的整数
      1. 从第一位有效数字开始, 直到遇到无效数字
      2. 如果第一位不是有效数字, 什么都提取不到, 会返回NaN
      3. 第一个参数是要转换的字符串，第二个参数是要转换的进制
    5. parseFloat提取字符串中的小数
      1. 会解析第一个. 遇到第二个.或者非数字结束
      2. 如果第一位不是有效数字, 什么都提取不到
      3. 不支持第二个参数，只能解析10进制数
      4. 如果解析的内容里只有整数，解析成整数
    6. 对非String使用parseInt()或parseFloat(), 会先将其转换为String然后在操作
     var str7 = "300px";
 var res9 = parseInt(str7);
 console.log(res9); // 300

 var str8 = "300px250";
 var res10 = parseInt(str8);
 console.log(res10); // 300

 console.log(parseInt("abc123"));  //返回NaN，如果第一个字符不是数字或者符号就返回NaN
 console.log(parseInt(""));        //空字符串返回NaN，Number("")返回0
 var str9 = "20.5px";
 var res11 = parseInt(str9);
 console.log(res11); // 20

 var str10 = "20.5.5.5px";
 var res12 = parseFloat(str10);
 console.log(res12); // 20.5

进制转换

  1. 书写格式
    1. 二进制：需要以0b或者0B开头,比如0b101
    2. 八进制：在前面加个0,比如045
    3. 十六进制：在前面加个0x或者0X,比如0x45

JS中的运算符

  1. JS中的运算符跟C语言基本一样
  2. 不同点：
    1. 和C语言不同的是JavaScript中整数除以整数结果是小数
    2. 任何值和NaN做运算都得NaN
    3. 非Number类型的值进行运算时，会将这些值转换为Number然后在运算
    4. 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
    5. 任何的值和字符串做- * / %法运算, 都会先将字符串转换为Number

    6. 取余运算m%n, n等于0 返回NaN, 其它和C语言一样

       var res4 = 10 / 3;
 console.log(res4); // 3.3333
 var result = 2 + NaN;
 console.log(result); //NaN
 var result = true + 1; // + - * /  %
 console.log(result); // 2
 result = true + false;
 console.log(result); // 1
 result = 2 + null; 
 console.log(result);// 2
 var result = 1 + "123";
 console.log(result); // 1123
 result = 2 + "true";
 console.log(result); // 2true
 var result = 2 - "1"; // - * /  %
 console.log(result); // 1
 result = "2" - "1";
 console.log(result); // 1
 var result = 10 % 0;
 console.log(result); // NaN
  3. 关系运算符
    1. 和C语言不同的是, JavaScript中的关系运算符只会返回true或false
    2. 对于非数值进行比较时，会将其转换为数字然后在比较
    3. 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码

    4. null、undefined 、NaN比较

       console.log(null == 0); // false
 console.log(undefined == 0); // false
 // 永远不要判断两个NaN是否相等
 console.log(NaN == NaN); // false
        
 /*
  * 可以通过isNaN()函数来判断一个值是否是NaN
  *    如果该值是NaN则返回true，否则返回false
  */
 var num = NaN;
 console.log(isNaN(num)); // true
        
 // undefined 衍生自 null, 所以返回true
 console.log(null == undefined); // true;
 console.log(null === undefined); // false;
        
 // == 判断值是否相等
 // == 会进行数据类型转换
 console.log("123" == 123); // true
 // === 判断值和类型时候同时相等
 // === 不会进行数据类型转换
 console.log("123" === 123); // false
  4. 逻辑运算符(!、&&、   )
    1. 对于非Boolean类型的数值, 逻辑运算符会将其换为Boolean类型来判断
    2. 逻辑与
      1. 如果条件A不成立, 则返回条件A的数值本身

      2. 如果条件A成立, 不管条件B成不成立都返回条件B数值本身

         result =  null && 0;
 console.log(result); // null
 var result =  "123" && "abc";
 console.log(result); // "abc"
 result =  "123" && 0;
 console.log(result); // 0
    3. 逻辑或
      1. 如果条件A不成立, 则不管条件B成不成立都返回条件B数值本身

      2. 如果条件A成立, 则返回条件A的数值本身

         var  result =  null || 0;
 console.log(result); // 0
 result =  "123" || "abc";
 console.log(result); // "123"
 result =  "123" || 0;
 console.log(result); // "123"

JavaScript流程控制

JavaScript中流程控制的概念和C语言中一样,也有顺序结构、选择结构和循环结构

  1. 选择结构if注意点:
    1. C语言中的代码块可以用于控制变量的作用域, 但是JavaScript中的代码块不行 
        {
      var name = "123";
  }
  console.log(name); // 123
  2. Switch注意点
    1. case全等于问题

      1. JavaScript中case判断是否相等时是全等于(===),而不是等于(==),也就是说既会判断类型是否相等又会判断值是否相等

         var str = "123";
 switch (str){
     case 123:
         console.log("123数字");
         break;
     case "123":
         console.log("123字符串"); // 输出123字符串
         break;
     default:
         console.log("default");
         break;
 }

      2. 和C语言不同的是, JavaScript中case后可以是常量也可以是变量

         var num = 120;
 switch (120){
     case num: // 这里可以是变量
         console.log("120"); // 输出120
         break;
     case 110: // 这里可以是常量
         console.log("110");
         break;
     default:
         console.log("default");
         break;
 }
  3. while循环注意点
    1. JavaScript中dowhile循环和C语言中一模一样
  4. for循环注意点
    1. JavaScript中for循环和C语言中一模一样
  5. 三大跳转
    1. JavaScript中没有提供C语言中的goto语句, 但是其它的三大跳转和C语言中一模一样
    2. return
      1. 立即结束所在函数
    3. break
      1. 立即跳出所在switch语句或循环语句, 离开作用范围没有意义
    4. continue
      1. 立即跳出所在循环语句, 离开作用范围没有意义

JavaScript数组

  1. JavaScript中数组的概念和C语言几乎一样, 都是指一组有序数据集合
  2. 不同的是由于JavaScript是弱语言, 所以JavaScript的数组中可以存放不同类型的数据
  3. 不同的是JavaScript中的数组是引用类型, 提供了很多便捷的属性和方法, 让我们使用起来更加简单

  4. 定义数组

     var arr1=new Array(); 
 var arr2=new Array("Saab","Volvo","BMW");
 var arr2=new Array(3);
 var arr3=[];
 var arr4=["Saab","Volvo","BMW"];

  5. 使用数组

     var arr1 = new Array();
 arr1[0] = 1;
 arr1[1] = "12";
 arr1[2] = true;
 console.log(arr[0]);
 console.log(arr[1]);
 console.log(arr[2]);

  6. 数组的增删改查

     var arr1 = new Array();
     // 数组追加新增一条数据,res返回新增后的数组长度
     let res = arr.push(3);
     // 追加多个数据
     arr.push(4,5);
     // 数组最前面插入一条数据
     arr.unshift(1);
     // 插入2条数据
     arr.unshift("m","n");
     // 删除数组最后一条数据,res:删除的数据
     let res2 = arr.pop();
     // 删除数据最前面一条数据
    arr.shift()
     //    删除索引为1的数据
     // 从索引为1的元素开始删除，删除1条数据
     // 参数1，开始位置，参数2：删除多少个
     arr.splice(1,1);
  7. 注意点:
    1. C语言中的数组必须在定义时确定长度, 后续不可修改

    2. 而JavaScript中的数组不需要在定义时确定长度, 后续可以动态增长

       let arr = new Array(3);
 arr[0] = 0;
 arr[1] = 1;
 arr[2] = 2;
 // 动态添加数组长度
 arr[3] = 3;
 // [0,1,2,3,4]
 console.log(arr)
    3. 和其他编程语言不同，如果数组对应的索引中没有存储数据，默认存储的就是undefined
    4. JS中访问了数组中不存在的索引不会报错，会返回undefined
      1. 其他编程语言一旦超出索引返回就会报错或者返回脏数据
       let arr = new Array(3);
 // 不会报错，返回undefined
 console.log(arr[66])
    5. JS数组的分配存储空间不一定是连续的
      1. 分配在堆上，不是连续空间

  8. 数组遍历

      var arr3 = [1, "123", true];
 for(var i = 0; i < arr3.length; i++){
     console.log(arr3[i]);
 }
    1. 注意点:
      1. JavaScript中可以通过数组的length属性直接获取数组的长度, 不用像C语言一样额外计算
  9. 数组解构赋值
    1. 结构赋值是ES6中新增的一种赋值方式

    2. 数组解构赋值

       // 解构赋值
 let arr = [1,3,5];
 // let a = a[0];
 // let b = a[1];
 // let c = c[2];
 // ES6结构赋值
 let [a,b,c] = arr;
 console.log("a="+a);
 console.log("b="+b);
 console.log("c="+c);
    3. 注意：
      1. 在数组解构赋值中，等号左边的格式必须和等号右边的格式一模一样，才能够完全结构
      2. 在数组解构赋值中，左边的个数可以和右边的个数不一样
      3. 如果右边的个数和左边的个数不一样，那么我们可以给左边设置指定默认值

      4. 使用ES6中新增的扩展运算符（...）来打包剩余的数据

         let [a,b] = [1,3,5];
 let [a,b,c] = [3];
 //设置默认值
 let [a,b=4, c=5] = [3];
            
 //扩展运算符，只能写在最后一个变量的前面，而且不能有逗号
 let [a,...b] = [1,3,5];
 // 1
 console.log("a="+a);
 // [3,5]
 console.log("b="+b);

  10. 数组常用方法

     // 数组常用方法
let arr = [1,2,3,4,5,6,7,8,9];
// 1. 清空数组
// arr = [];
// arr.length = 0;
// arr.splice(0,arr.length);
// 2. 数组转字符串
let arrstr= arr.toString();
// 3. 将数组转换为指定格式的字符串
// join无参数时，跟toString一样
// let arrStr2 = arr.join();
// 1+2+3...
let arrStr3 = arr.join('+');
// 4. 数组拼接
let arr1 = [1,3,5];
let arr2 = [2,4,6];
// 生成一个新的拼接数组
//  let newarr = arr1.concat(arr2);
// ES6语法拼接
let newarr2 = [...arr1,...arr2];
// 5. 数组内容反向排序
// 注意：该方法会修改原有数组
 let arrrever = arr.reverse();
//  [9,8,7,...]
 console.log(arrrever);
//  [9,8,7,...] 原有数组被修改
console.log(arr);
// 6. 截取数组中指定位置数据
// 左开右闭区间。不包含结束位置
// [1,2,3,4,5]=>[2，3]
let arrslice = arr.slice(1,3);
// 7. 查找元素在数组中的位置
// 找到，index为索引 反之，index为-1，如果有多个，默认返回从左到右第一个索引
let index = arr.indexOf(3);
// 参数1：要查找的数据。参数2：从哪个索引开始查找
let index2 = arr.indexOf(3,4);
// 从右到左查找
let index3 = arr.lastIndexOf(3);
// 8. 如何判断数组中是否包含某个元素
// 方法1：可以通过7的方法查找，判断index是否为-1
// 方法2：ES6语法
let find = arr.includes(4);

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents