search

博客列表 >js基础：数据类型，流程控制，json序列化

js基础：数据类型，流程控制，json序列化

暝皑祯π_π
暝皑祯π_π原创
2020年05月24日 20:47:10976浏览

数据类型

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 数据类型
  11.       //   原始类型：number，string，boolean
  12.       // typeof:查看数据类型
  13.       var id = 12;
  14.       var name = "dbname";
  15.       var flag = false;
  16.       console.log(typeof id, typeof name, typeof flag);
  18.       //   特殊类型：null  undefined
  19.       //   null 表示空对象
  20.       //   undefined 专用于表非对象类型变量的空/无
  21.       var bag;
  22.       var hei = undefined;
  23.       console.log(bag);
  25.       //   null和undefined进行数据类型转换的不同之处
  26.       //   console.log(NULL + 100); //100
  27.       //   consloe.log(undefined + 100); //NAN:不是数值
  29.       // 对象类型：array  object  function
  30.       //array：关联数组
  31.       var fruit = ["watermelon", "apple", "orange", "peach", "pear"];
  32.       //   打印数组
  33.       console.log(fruit);
  34.       //   数组元素个数
  35.       console.log(fruit.length);
  36.       //   获取数组中的第几个元素
  37.       console.log(fruit[1]);
  38.       //      Array.isArray():判断是否为数组:返回布尔值
  39.       console.log(Array.isArray(fruit));
  40.       //   slice()获取部分数组元素：参数1：起始值。参数2：结束值。不包括结束值的参数
  41.       console.log(fruit.slice(0, 3));
  42.       // splice(), 可以实现数组的插入, 替换, 删除
  43.       fruit.splice(1, 0, "mango");
  44.       console.log(fruit);
  46.       //   对象：js中的数组类似于php中的索引数组, js中的对象类似于php中的: 关联数组
  47.       //  创建对象
  48.       var study = {
  49.         number: 1135,
  50.         name: "小明",
  51.         gradr: "一年级",
  52.         "test scroe": {
  53.           language: 86,
  54.           mathematics: 95,
  55.           English: 66,
  56.         },
  57.       };
  58.       //   访问对象属性
  59.       //   访问对象成员/属性,方法1 使用点操作符.,方法2 使用操作符[]
  60.       console.log(study.number);
  61.       console.log(study["test scroe"].English);
  62.       //   使用表格的方式显示属性内容
  63.       console.table(study);
  65.       //   函数
  66.       //   函数创建
  67.       function db(a, b) {
  68.         console.log(a + " + " + b + " = ", a + b);
  69.       }
  70.       // 函数访问
  71.       db(5, 60);
  73.       // 匿名函数
  74.       var dm = function (a, b) {
  75.         console.log(a + " * " + b + " = ", a * b);
  76.       };
  77.       dm(12, 35);
  79.   </script>
  80.   </body>
  81. </html>

流程控制

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       //   流程控制：和php一样
  11.       // 分支：单分支
  12.       var girAge = 50;
  13.       if (girAge >= 50) {
  14.         console.log("知名之年");
  15.       }
  16.       //   分支：双分支
  17.       var girAge = 20;
  18.       if (girAge >= 50) {
  19.         console.log("知命之年");
  20.       } else {
  21.         console.log("我还没老");
  22.       }
  23.       //   分支：多分支
  24.       if (girAge >= 50) {
  25.         console.log("知命之年");
  26.       } else if (girAge >= 40) {
  27.         console.log("不惑之年");
  28.       } else if (girAge >= 30) {
  29.         console.log("而立之年");
  30.       } else {
  31.         console.log("我是年轻人");
  32.       }
  34.       //  switch
  35.       switch (true) {
  36.         case girAge > 50:
  37.           console.log("知命之年");
  38.           break;
  39.         case girAge < 50 && girAge > 40:
  40.           console.log("不惑之年");
  41.           break;
  42.         default:
  43.           console.log("我还年轻");
  44.           break;
  45.       }
  47.       fruit = ["watermelon", "apple", "orange", "peach", "pear"];
  48.       //  for循环
  50.       for (var i = 0; i < fruit.length; i++) {
  51.         console.log(fruit[i]);
  52.       }
  54.       // while循环
  55.       var i = 0;
  56.       while (i < fruit.length) {
  57.         console.log(fruit[i]);
  58.         i++;
  59.       }
  61.       //  forEach是数组对象上的方法
  62.       //   fruit:数组
  63.       // item：元素
  64.       // index：元素的索引
  65.       // array：数组
  66.       //   array.forEach(function (item, index, array) {});
  68.       fruit.forEach(function (item) {
  69.         console.log(item);
  70.       });
  71.         </script>
  72.   </body>
  73. </html>

josn序列化

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.     //  forEach是数组对象上的方法
  11.       //   fruit:数组
  12.       // item：元素
  13.       // index：元素的索引
  14.       // array：数组
  15.       //   array.forEach(function (item, index, array) {});
  17.       fruit.forEach(function (item) {
  18.         console.log(item);
  19.       });
  21.       //   JSON对象与它相比有二处不同
  22.       // 1. 没有变量声明: JSON中没有变量概念
  23.       // 2. 没有分号: 因为JSON不是JS语句
  24.       // 3. 属性名: 任何时候都必须添加双引号, 且必须是双引号
  25.       //   josn:数据交换的一种格式，也是一个字符串
  26.       //   JOSN 支持三种数据类型: 简单值, 对象, 数组
  27.       //   简单值
  28.       //   数值: `150`, `3.24`
  29.       //  字符串: `"Hello World!"`,必须使用**双引号**做为定界符
  30.       // -布尔值: `true`, `false`
  31.       //  空值: `null`
  32.       //  注意: 不支持`undefined`
  34.       var object = {
  35.         name: "Peter Zhu",
  36.         age: 29,
  37.         isMarried: true,
  38.         course: {
  39.           name: "JavaScript",
  40.           grade: 99,
  41.         },
  42.         getName: function () {
  43.           return this.name;
  44.         },
  45.         hobby: undefined,
  46.         toString: function () {
  47.           return "继承属性";
  48.         },
  49.       };
  51.       // 序列化对象
  52.       var josnstr = JSON.stringify(object);
  53.       console.log(josnstr);
  55.       //   第二参数如果是数组,可以限制允许序列化的属性
  56.       var josnstr = JSON.stringify(object, ["name", "age"]);
  57.       console.log(josnstr);
  59.       //第二参数不是数组,是函数,可以对对象的属性进行操作
  60.       //   参数1:对象的键。参数2：对象的值
  61.       var josnstr = JSON.stringify(object, function (key, value) {
  62.         switch (key) {
  63.           case "name":
  64.             return "小明";
  66.           // 必须要有default, 才可以输出其它未被处理的属性
  67.           default:
  68.             return value;
  69.         }
  70.       });
  71.       console.log(josnstr);
  73.       //   通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象
  74.       //    使用单引号
  75.       var obj = JSON.parse(josnstr);
  76.       console.log(obj);
  77.      </script>
  78.   </body>
  79. </html>


总结

  • 特殊类型：null 表示空对象 ，undefined 专用于表非对象类型变量的空/无
  • josn属性名: 任何时候都必须添加双引号, 且必须是双引号
  • JSON.parse() 解析josn字符串为json对象
上一条：CORS和JSONP两种方式实现跨域请求下一条：js基础：变量，函数，作用域
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多