search

博客列表 >front 17 js数据类型-流程控制-json（0811tue）

front 17 js数据类型-流程控制-json（0811tue）

老黑
老黑原创
2020年08月17日 22:04:26525浏览

主要内容：

  1. js数据类型，数组、对象、功能

    • 数组的slice和splice()-实现对数组元素的新增,删除,替换
    • 对象的for in遍历
    • 函数中的IIFE:立即调用函数

  2. 流程控制：基本的if、switch、for、while

  3. js对象的序列化json格式的字符串

1. 基本数据类型，数组、对象、功能

  • 数组的slice和splice()-实现对数组元素的新增,删除,替换
  • 对象的for in遍历
  • 函数中的IIFE:立即调用函数
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>数据类型与访问方式</title>
  8. </head>
  10. <body>
  11.   <script>
  12.     // 1. 原始类型
  13.     // number 数值
  14.     var grade = 88;
  15.     // string 字符串
  16.     var username = "peter";
  17.     // bool: 布尔
  18.     var flag = false;
  19.     // 类型检查 typeof
  20.     //   console.log(typeof grade, typeof username, typeof flag);
  22.     // 2. 特殊类型
  23.     // null 空对象
  24.     var title = null;
  25.     //   console.log(typeof title);
  26.     // undefined 未定义
  27.     var role = undefined;
  28.     //   console.log(typeof role);
  29.     //   console.log(null === undefined);
  30.     //   值相等,但类型不同,所以 === 返回false
  31.     //   console.log(null == undefined);
  32.     //   console.log(null === "null");
  33.     //   console.log(null === 0);
  34.     //   console.log(null + 100);
  35.     //   NaN: Not a Number,非数值
  36.     //   console.log(undefined + 100);
  37.     //   console.log(undefined === NaN);
  38.     //   console.log(isNaN(undefined));
  39.     //   console.log(isNaN(100));
  40.     //   console.log(NaN === NaN);
  42.     // 3. 对象: object, array, function
  43.     // 数组
  44.     var fruits = ["watermelon", "apple", "orange", "peach", "pear"];
  45.     //   console.log(fruits);
  46.     //   console.log(fruits[1]);
  47.     //   console.log(fruits.length);
  48.     //   typeof只能判断数组是不是对象类型,并不能确定它是一个数组
  49.     //   console.log(typeof fruits);
  50.     //   判断数组的正确方式
  51.     //   console.log(Array.isArray(fruits));
  52.     //   遍历数组
  53.     //   for (var i = 0; i < fruits.length; i++) {
  54.     //     console.log(fruits[i]);
  55.     //   }
  56.     // forEach(function(item [, key, array]){...})
  57.     //   fruits.forEach(function (item, key) {
  58.     //     console.log("i: ", key, "item: ", item);
  59.     //   });
  60.     //   fruits.forEach((item, key) => console.log("i: ", key, "item: ", item));
  61.     // 获取数组部分元素
  62.     //   console.log(fruits.slice(0, 3));
  63.     //   console.log(fruits.slice(0));
  65.     //   splice(): 实现对数组元素的新增,删除,替换
  66.     // 从第2个索引开始删除2个元素,并返回它们
  67.     //   console.log(fruits.splice(1, 2));
  69.     // 新增数组元素
  70.     //   console.log(fruits.splice(1, 0, "果汁", "黄瓜"));
  72.     // 更新操作
  73.     //   console.log(fruits.splice(1, 2, "果汁", "黄瓜"));
  75.     //   console.log(fruits);
  77.     // 对象: object
  78.     // js中的数组  ===> 类似 php 索引数组
  79.     // js中的对象 ===> 类似 php 关联数组
  80.     // 对象字面量
  81.     var student = {
  82.       id: 1,
  83.       name: "admin",
  84.       email: "admin@php.cn",
  85.       course: [34, 88, 93],
  86.       "my scroe": {
  87.         php: 90,
  88.         js: 60,
  89.         css: 70,
  90.       },
  91.     };
  92.     //   console.log(student);
  93.     //   console.table(student);
  94.     //   对象成员 的访问,使用点语法
  95.     //   console.log(student.email);
  96.     //   console.log(student.course[1]);
  97.     //   console.log(student.course["2"]);
  98.     //   console.log(student["my scroe"]);
  99.     //   遍历对象
  100.     // for ... in
  101.     //   for (key in student) {
  102.     //     console.log(student[key]);
  103.     //   }
  105.     // Array.from(obj):将对象转为真正的数组
  106.     //   console.log(Array.isArray(Array.from(student))); - 这块好像没有成功
  108.     //   获取对象所有属性组成的数组
  109.     // Object.keys(obj)返回对象所有属性组成的数组
  110.     var keys = Object.keys(student);
  111.     //   console.log(keys);
  112.     // 根据键名遍历, item是键名/属性名
  113.     //   keys.forEach(function (item) {
  114.     //     console.log(this[item]);
  115.     //   }, student);
  117.     // 命名函数
  118.     function f1(a, b) {
  119.       console.log(a + b);
  120.     }
  121.     f1(1, 2);
  123.     // 匿名函数
  124.     var f2 = function (a, b) {
  125.       console.log(a + b);
  126.     };
  127.     f2(100, 20);
  129.     // IIFE:立即调用函数
  130.     //   将函数的声明与调用合并
  131.     (function (a, b) {
  132.       console.log(a + b);
  133.     })(150, 40);
  135.     // (function (a, b) {
  136.     //   console.log(a + b);
  137.     // }(158, 40));
  139.     // +function (a, b) {
  140.     //   console.log(a + b);
  141.     // }(345, 60);
  144.     // !function (a, b) {
  145.     //   console.log(a + b);
  146.     // }(345, 60);
  148.     // ~function (a, b) {
  149.     //   console.log(a + b);
  150.     // }(345, 60);
  152.     // (function () {
  153.     //   if (true) {
  154.     //     var a = 10;
  155.     //   }
  156.     // })();
  158.     console.log(a);
  160.   </script>
  161. </body>
  163. </html>

2. 流程控制：基本的if、switch、for、while

  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>
  20.     <script>
  21.       // 1. 分支
  22.       // 单分支
  23.       var age = 59;
  24.       age = 49;
  25.       //   如果代码块中只有一条语句,可以省略"{...}"
  26.       if (age >= 50) {
  27.         console.log("不想奋斗了，累了");
  28.       }
  29.       //   双分支
  30.       if (age >= 50) {
  31.         console.log("不想奋斗了，累了");
  32.       } else {
  33.         console.log("再努力一把");
  34.       }
  35.       // 多分支
  36.       age = 36;
  37.       if (age > 18 && age < 30) {
  38.         console.log("哥没车没房, 约不约?");
  39.       } else if (age >= 30 && age < 50) {
  40.         console.log("哥想有个家");
  41.       } else if (age >= 50) {
  42.         console.log("这是真爱");
  43.       }
  44.       // 默认分支 else
  45.       else {
  46.         console.log("姐才", age, ", 认你当二叔吧");
  47.       }
  48.       // switch，因为下面每个case是一个范围，因此switch中是true，
  49.       // 但如果是一个具体值的话，switch中可以写age
  50.       switch (true) {
  51.         case age > 18 && age < 30:
  52.           console.log("不想奋斗了，累了");
  53.           break;
  55.         case age >= 30 && age < 50:
  56.           console.log("哥想有个家");
  57.           break;
  59.         case age >= 50:
  60.           console.log("这是真爱");
  61.           break;
  63.         default:
  64.           console.log("姐才", age, ", 认你当二叔吧");
  65.       }
  67.       // 循环
  68.       var lis = document.querySelectorAll("ul:first-of-type li");
  69.       // for
  70.       for (var i = 0; i < lis.length; i++) {
  71.         lis[i].style.backgroundColor = "lightgreen";
  72.       }
  74.       // while
  75.       var lis = document.querySelectorAll("ul:last-of-type li");
  77.       var i = 0;
  78.       while (i < lis.length) {
  79.         lis[i].style.backgroundColor = "yellow";
  80.         i++;
  81.       }
  82.     </script>
  83.   </body>
  84. </html>

3. js对象的序列化json格式的字符串

3-1. JSON 是什么

  • JSON: JavaScript Object Notation(JS 对象表示法)
  • JSON: 2006 年成为国际标准,并成为表示结构化数据的通用的格式
  • JSON 借用了JS 对象字面量的语法规则,但并非 JS 对象,也并非只是 JS 才用 JSON
  • JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  • 尽管 JSON 与 JS 并无直接关系,但 JSON 在 JS 代码中应用最广泛

3-2. JSON 语法

JOSN 支持三种数据类型: 简单值, 对象, 数组

3-2.1 简单值
  • 数值: 150, 3.24
  • 字符串: "Hello World!",必须使用双引号做为定界符
  • 布尔值: true, false
  • 空值: null

    注意: 不支持undefined

  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>js对象的序列化json格式的字符串</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       var person = {
  11.         name: "Peter Zhu",
  12.         age: 29,
  13.         isMarried: true,
  14.         course: {
  15.           name: "JavaScript",
  16.           grade: 99,
  17.         },
  18.         getName: function () {
  19.           return this.name;
  20.         },
  21.         hobby: undefined,
  22.         toString: function () {
  23.           return "继承属性";
  24.         },
  25.       };
  27.       // 将js对象转为json格式的字符串
  28.       var jsonStr = JSON.stringify(person);
  29.       // 传入第二参数数组，对输出的结果进行限制
  30.       jsonStr = JSON.stringify(person, ["name", "age"]);
  31.       // 如果第二个参数是一个回调，可以进行动态过滤
  32.       jsonStr = JSON.stringify(person, function (key, value) {
  33.         switch (key) {
  34.           case "age":
  35.             return "年龄不能随便问的";
  37.           case "isMarried":
  38.             return undefined;
  40.           // 必须要有default, 才可以输出其它未处理的属性
  41.           default:
  42.             return value;
  43.         }
  44.       });
  45.       // json中没有方法, undefined也没有
  46.       console.log(jsonStr);
  47.     </script>
  48.   </body>
  49. </html>

4. 作业与实战（全部操作了一遍，多数跟php差不多，但细节差异要注意，多练！）

0811-作业
将课堂上演示的常用类型,流程控制 ,json等知识全部上机操作一遍。
预习ajax, 事件, 等知识 , 明天会用到php, pdo,等知识 , 要预习的

上一条：PHP大牛成长之路：原生javascript实现轮播图下一条：front 16 JS初接触（0810mon）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多