search

博客列表 >JS数据类型和流程控制

JS数据类型和流程控制

王佳祥
王佳祥原创
2020年08月12日 14:49:21592浏览

JS数据类型和流程控制

一、js数据类型

1.Number类型

  • 浮点数值：必须包含一个小数点，且小数点后必须有一位数字

  • 整数：没有小数点的数值

  • NaN即非数值（Not a Number），是一个特殊的数值;

  • isNaN() 接收一个参数，该函数会帮我们确定这个参数是否‘非数值’，是返回true,不是返回false

  • 数值转换:

    number()：用于任何数据类型

    1.   var num1 = Number("hello world");
    2.   console.log(num1);//NaN
    4.   var num2 = Number("");
    5.   console.log(num2);//0
    7.   var num3 = Number("000011");
    8.   console.log(num3);// 11
    10.   var num4 = Number(true);
    11.   console.log(num4);//1

    parseInt()和parseFloat() 专门把字符串转成数值

    1.   var num5 = parseInt('1234blue');
    2.   console.log(num5);//1234
    4.   var num6 = parseInt('');
    5.   console.log(num6);//NaN
    7.   var num7 = parseInt('0xA');
    8.   console.log(num7);//10
    1.   var num9 = parseFloat('1234blue');
    2.   console.log(num9);//1234
    4.   var num10 = parseFloat('0xA');
    5.   console.log(num10);//0

    parseFloat(): 只解析十进制值

2.String类型

  • stringl类型：由0或多个16位Unicode字符串组成的字符序列，即字符串，可由单引号和双引号表示；

  • toString（）：将数值转成字符串。

  • 在不知道要转换的值是不是null和underfined的情况下，可以使用String()方法。该函数可以将任何类型的值转成字符串。

  1. var str = "zifuchuan";
  2. console.log(typeof str);//返回string
  4. var num = 10;
  5. alert(num.toString()); //"10"
  7. var value1 = 10;
  8. alert(String(value1));//"10"

3.Boolean类型

  • 布尔值：返回true,false

  • 将一个值转换成Boolean值，可以调用转换函数Boolean()；

  • 返回的是true还是false ，其规则如下：

数据类型 true false
Boolean true false
String 非空字符串 “ “(空字符串)
Number 非零数字 0 和NaN
Object 非空对象 null
Underfined N/A（不适用） underfined 
  1. var bu = false;
  2. console.log(typeof false);//false
  4. var fl = Boolean("hello");
  5. console.log(f1);//true

4.Null

  • null值为空，null值表示一个空对象指针；

  • 如果定义一个变量用于保存一个对象，那么最好将这个变量的值初始化为null,这样只要检查null值就可以知道变量是否保存了一个对象的引用

  1. var nu = null;
  2. //返回一个空对象
  3. console.log(typeof null);

5.Underfined

  • Underfined类型只有一个值，即underfined;使用var声明变量但未初始化时，这个变量的值就是underfined;
  1. //undefined 未定义
  2. var un = undefined;
  3. //返回undefined
  4. console.log(typeof un);
  5. //undefined的值等于null,但类型不同
  6. //返回true
  7. console.log(null == undefined);
  8. //返回false
  9. console.log(null === undefined);

6.Object

  • js中的对象其实就是一组数据和功能的集合；在js中，Object是所有对象的基础，因此所有对象都有基本的属性和方法
  1.       //数组
  2.       var fruits = ["watermelon", "apple", "orange", "peach", "pear"];
  3.       //拿到所有元素
  4.       console.log(fruits);
  5.       //访问索引
  6.       console.log(fruits[1]);
  7.       //数组元素个数
  8.       console.log(fruits.length);
  9.       //typeof只能判断数组是不是对象类型，不能确定它是一个数组
  10.       console.log(typeof fruits);
  11.       //判断数组的正确方式,返回布尔值
  12.       console.log(Array.isArray(fruits));
  13.       //遍历数组
  14.       for (var i = 0; i < fruits.length; i++) {
  15.         console.log(fruits[i]);
  16.       }
  17.       //forEach遍历
  18.       fruits.forEach(function (item, key) {
  19.         console.log("i:", key, "item", item);
  20.       });
  21.       //forEach第二种遍历方式
  22.       fruits.forEach((item, key) => console.log("i:", key, "item:", item));
  23.       //获取部分数组元素
  24.       //slice()
  25.       //语法：arrayObject.slice(start,end)
  26.       /*start    必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。
  27.       也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。*/
  28.       /*end    可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。
  29.       如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。
  30.       如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。*/
  31.       console.log(fruits.slice(0, 3));
  32.       //如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
  33.       console.log(fruits.slice(0));
  34.       //splice() 方法用于添加或删除数组中的元素。
  35.       //语法：array.splice(index,howmany,item1,.....,itemX)
  36.       /*
  37.       index    必需。规定从何处添加/删除元素。
  38.       该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
  39.       howmany    可选。规定应该删除多少元素。必须是数字，但可以是 "0"。
  40.       如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  41.       item1, ..., itemX    可选。要添加到数组的新元素
  42.       */
  43.       //返回值：被删除的元素组成的数组
  44.       //删除操作
  45.       console.log(fruits.splice(1, 2));
  46.       //新增操作
  47.       console.log(fruits.splice(1, 0, "果汁", "黄瓜"));
  48.       console.log(fruits);
  49.       //更新操作
  50.       console.log(fruits.splice(1, 2, "猕猴桃", "甜瓜"));
  51.       console.log(fruits);
  52.       //对象：object
  53.       //js中的数组 类似php索引数组
  54.       //js中的对象 类似php关联数组
  55.       var student = {
  56.         id: 1,
  57.         name: "admin",
  58.         email: "admin@php.cn",
  59.         course: [34, 88, 93],
  60.         "my scroe": {
  61.           php: 90,
  62.           js: 80,
  63.           css: 80,
  64.         },
  65.       };
  66.       //访问对象用点连接 ,非法字符用[]来访问
  67.       console.log(student.email);
  68.       console.log(student.course[1]);
  69.       console.log(student["my scroe"]);
  71.       //遍历对象
  72.       //for.......in.....
  73.       for (key in student) {
  74.         console.log(student[key]);
  75.       }
  76.       //Array.from(obj):将对象转为真正的数组
  77.       //Object.keys()把对象所有属性放到一个数组中
  78.       var keys = Object.keys(student);
  79.       console.log(keys);
  80.       keys.forEach(function (item) {
  81.         console.log(this[item]);
  82.       }, student);

二、函数

1.函数

  1.       //函数
  2.       function f1(a, b) {
  3.         console.log(a + b);
  4.       }
  5.       f1(100, 200);

2.匿名函数

  1.       //匿名函数
  2.       var f2 = function (a, b) {
  3.         console.log(a + b);
  4.       };
  5.       f2(20, 20);

3.立即调用函数

  1.       //立即调用函数
  2.       (function (a, b) {
  3.         console.log(a + b);
  4.       })(100, 100);//返回200
  5.       -(function (a, b) {
  6.         console.log(a + b);
  7.       })(50, 100);//返回150
  8.       ~(function (a, b) {
  9.         console.log(a + b);
  10.       })(50, 100);//返回150
  11.       (function () {
  12.         if (true) {
  13.           var a = 10;
  14.         }
  15.       })();
  16.       console.log(a);//返回underfined
  17.       if (true) {
  18.         var a = 10;
  19.       }
  20.       console.log(a);//返回10

三、流程控制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>流程控制</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>item1</li>
  11.       <li>item2</li>
  12.       <li>item3</li>
  13.     </ul>
  14.     <ul>
  15.       <li>item1</li>
  16.       <li>item2</li>
  17.       <li>item3</li>
  18.     </ul>
  19.       </body>
  20. </html>

1.单分支

  1.       //单分支
  2.       var age = 49;
  3.       if (age >= 50) console.log("不想奋斗了，累了");

2.双分支

  1.       //双分支
  2.       if (age >= 50) console.log("不想奋斗了，累了");
  3.       else console.log("再努力一把");

3.多分支

  1.       //多分支
  2.       age = 38;
  3.       if (age > 18 && age < 30) console.log("哥没车没房，约不约");
  4.       else if (age >= 30 && age < 50) console.log("哥想有个家");
  5.       else if (age >= 50) console.log("这是真爱");
  6.       else console.log("姐才", age, ",认你当二叔吧");

4.switch 参数为true时表示范围，否则就代表具体的某个值

  1.       //switch
  2.       switch (true) {
  3.         case age > 18 && age < 30:
  4.           console.log("不想奋斗了，累了");
  5.           break;
  6.         case age >= 30 && age < 50:
  7.           console.log("哥想有个家");
  8.           break;
  9.         case age >= 50:
  10.           console.log("这是真爱");
  11.           break;
  12.         default:
  13.           console.log("姐才", age, ",认你当二叔吧");
  14.       }

5.for循环

  1.       //for循环
  2.       var lis = document.querySelectorAll("ul:first-of-type li");
  3.       //for
  4.       for (var i = 0; i < lis.length; i++) {
  5.         lis[i].style.backgroundColor = "blue";
  6.       }

6.while循环

  1.       //while循环
  2.       var lis2 = document.querySelectorAll("ul:last-of-type li");
  3.       var k = 0;
  4.       while (k < lis2.length) {
  5.         lis2[k].style.backgroundColor = "red";
  6.         k++;
  7.       }

四、JSON

1.JSON是什么

  • 全称：（JavaScript Object Notation）js对象表示法

  • json是一种有条理，易于访问的存储信息的方法。它为我们提供了一个可读的数据集合，我们可以通过合理的方式来访问这些数据。

  • json支持三种数据类型：简单值、对象、数组

  • 不支持undefined

  1.  var person = {
  2.         name: "Peter Zhu",
  3.         age: 26,
  4.         isMarried: true,
  5.         course: {
  6.           name: "javascript",
  7.           grade: 99,
  8.         },
  9.         getName: function () {
  10.           return this.name;
  11.         },
  12.         hobby: undefined,
  13.         toString: function () {
  14.           return "继承属性";
  15.         },
  16.       };
  18.       //将js对象转换为json格式的字符串
  19.       var jsonStr = JSON.stringify(person);
  20.       //传入第二个参数数组，对输出的结果进行限制
  21.       jsonStr = JSON.stringify(person, ["name", "age"]);
  22.       //如果第二个参数是一个回调，可以进行动态过滤
  23.       jsonStr = JSON.stringify(person, function (key, value) {
  24.         switch (key) {
  25.           case "age":
  26.             return "年龄不能随便问的";
  28.           case "isMarried":
  29.             return undefined;
  31.           //必须要有default,才可以输出其它未处理的属性
  32.           default:
  33.             return value;
  34.         }
  35.       });
  36.       console.log(jsonStr);

五、学习总结

  • js常见的6种数据类型：数值、字符串、布尔值、null、undefined、对象

  • 流程控制：

  • if…单分支

  • if…else…双分支

  • if…else if…else if…else…多分支

  • switch(true){//参数为true时代表范围，否则代表具体某个值
    case:
    …
    break;
    case:
    …
    break;
    case:
    …
    break;
    default:
    …
    }

  • for循环：for(var i = 0;i < 5;i++){…}

  • while循环：var i = 0; while(i < 5){… i++;}

  • JSON是一种有条理，易于访问的存储信息的方法

  • JSON.stringify(js对象):可以将对象转换成json格式的字符串，当第二个参数为数组时，表示静态过滤；第二个参数为回调函数时，表示动态过滤

上一条：使用pdo类PDOStatement对象的成员方法输出表格下一条：JS基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多