简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >js基础知识学习

js基础知识学习

JKY辉哥
JKY辉哥原创
2020年08月18日 15:33:15593浏览

js 数据类型的访问方式、流程控制、js 对象序列化 json 字符串

1.js 数据类型的访问方式

案例实践代码整理：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>数据类型与访问方式</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       // 1. 原始类型
  10.       // number 数值
  11.       var grade = 88;
  12.       // console.log(grade);
  14.       // string 字符串
  15.       var username = "peter";
  16.       // console.log(username);
  18.       // bool: 布尔
  19.       var flag = false;
  20.       // console.log(flag);
  22.       // 类型检查 typeof
  23.       // console.log(typeof grade, typeof username, typeof flag);
  25.       //2.特殊类型
  27.       //null空对象
  28.       var title = null;
  29.       // console.log(typeof title);
  31.       // undefined 未定义
  32.       // var role = undefined;
  33.       // console.log(typeof role);
  35.       // console.log(null === undefined);
  36.       //   值相等,但类型不同,所以 === 返回false
  37.       // console.log(null == undefined);
  38.       // console.log(null == "null");
  39.       // console.log(null === 0);
  40.       // console.log(null + 100);
  41.       // NaN: Not a Number,非数值
  42.       // console.log(undefined + 100);
  43.       // console.log(undefined === NaN);
  44.       // console.log(isNaN(undefined));
  45.       // console.log(isNaN(100));
  46.       // console.log(NaN === NaN);
  48.       // 3.对象：object,array,function
  50.       //1.数组
  52.       var fruits = ["watermelon", "apple", "orange", "peach", "pear"];
  54.       // console.log(fruits);
  55.       // console.log(fruits[0]);
  56.       // console.log(fruits.length);
  58.       //typeof只能判断数组是不是对象类型,并不能确定它是一个数组
  59.       // console.log(typeof fruits);
  61.       //判断数组的正确方式
  62.       // console.log(Array.isArray(fruits));
  64.       //遍历数组方式1
  65.       // console.log("for遍历数组：");
  66.       // for(var i = 0;i < fruits.length;i++)
  67.       // {
  68.       //   console.log(fruits[i]);
  69.       // }
  71.       //遍历数组方式2
  72.       // forEach(function(item [, key, array]){...})
  73.       // console.log("forEach遍历数组：");
  75.       // 遍历值
  76.       // console.log("forEach遍历值：");
  77.       // fruits.forEach(function(item){
  78.       //     console.log(item);
  79.       // });
  81.       // 遍历键和值
  82.       // console.log("forEach键和值：");
  83.       // fruits.forEach(function(item,key){
  84.       //     console.log("i:",key,"item:",item);
  85.       // });
  87.       // 遍历键/值/数组
  88.       // console.log("forEach遍历键/值/数组：");
  89.       // fruits.forEach(function(item,key,array){
  90.       //     console.log("i:",key,"item:",item,"array:",array);
  91.       // });
  93.       //ES6更加简化遍历方式3
  94.       // fruits.forEach((item,key) => console.log("i:", key, "item:",  item));
  96.       // 获取数组部分元素
  97.       // console.log(fruits.slice(0,3));
  98.       // console.log(fruits.slice(0));
  100.       //splice(): 实现对数组元素的新增,删除,替换
  102.       // 从第2个索引开始删除2个元素,并返回它们
  103.       // console.log(fruits.splice(1,2));
  105.       // 显示删除后剩余元素
  106.       // console.log(fruits);
  108.       // 新增数组元素
  109.       // console.log(fruits.splice(1, 0, "果汁", "黄瓜"));
  110.       // console.log(fruits);
  112.       // 更新操作
  113.       // console.log(fruits.splice(1, 2, "苹果", "橘子"));
  114.       // console.log(fruits);
  116.       // 2.对象: object
  117.       // js中的数组  ===> 类似 php 索引数组
  118.       // js中的对象 ===> 类似 php 关联数组
  119.       // 对象字面量
  121.       var student = {
  122.         id: 1,
  123.         name: "admin",
  124.         email: "admin@php.cn",
  125.         course: [34, 88, 93],
  126.         "my scroe": {
  127.           php: 90,
  128.           js: 60,
  129.           css: 70,
  130.         },
  131.       };
  133.       //   console.log(student);
  134.       //   console.table(student);
  136.       //   对象成员 的访问,使用点语法
  137.       //   console.log(student.email);
  138.       //   console.log(student.course[1]);
  139.       //   console.log(student.course["2"]);
  140.       //   console.log(student["my scroe"]);
  142.       //   遍历对象
  143.       //   for ... in
  144.       //   for (key in student) {
  145.       //     console.log(student[key]);
  146.       //   }
  148.       // Array.from(obj):将对象转为真正的数组
  149.       //   console.log(Array.isArray(Array.from(student)));
  151.       //   获取对象所有属性组成的数组
  152.       // Object.keys(obj)返回对象所有属性组成的数组
  153.       var keys = Object.keys(student);
  154.       //   console.log(keys);
  156.       // 根据键名遍历, item是键名/属性名
  157.       //   keys.forEach(function (item) {
  158.       //     console.log(this[item]);
  159.       //   }, student);
  161.       //3.函数
  162.       //   3.1命名函数
  163.       function f1(a, b) {
  164.         console.log(a + b);
  165.       }
  166.       f1(2, 3);
  168.       //   3.2匿名函数
  169.       var f2 = function (a, b) {
  170.         console.log(a + b);
  171.       };
  172.       f2(100, 200);
  174.       //3.3 IIFE:立即调用函数
  175.       //   将函数的声明与调用合并
  176.       //方式1：
  177.       //   (function (a, b) {
  178.       //     console.log(a + b);
  179.       //   })(150, 40);
  181.       //方式2：
  182.       //   (function (a, b) {
  183.       //     console.log(a + b);
  184.       //   })(152, 30);
  186.       //方式3：
  187.       //   +(function (a, b) {
  188.       //     console.log(a + b);
  189.       //   })(112, 38);
  191.       //方式4：
  192.       //   !(function (a, b) {
  193.       //     console.log(a + b);
  194.       //   })(1, 38);
  195.       //方式5：
  196.       //   ~(function (a, b) {
  197.       //     console.log(a + b);
  198.       //   })(1, 32);
  200.       //   (function () {
  201.       //     if (true) {
  202.       //       var a = 10;
  203.       //     }
  204.       //   })();
  205.       //   console.log(a);
  206.     </script>
  207.   </body>
  208. </html>

运行效果图：

2.js 流程控制

实践案例代码：

  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.       <li>item4</li>
  14.     </ul>
  15.     <ul>
  16.       <li>item1</li>
  17.       <li>item2</li>
  18.       <li>item3</li>
  19.       <li>item4</li>
  20.     </ul>
  21.     <script>
  22.       // 1.分支
  24.       //单分支
  25.       var age = 59;
  27.       age = 50;
  28.       //   如果代码块中只有一条语句,可以省略"{...}"
  29.       if (age >= 50) {
  30.         console.log("不想奋斗，累了");
  31.       }
  33.       // 双分支
  34.       age = 49;
  35.       if (age >= 50) {
  36.         console.log("不想奋斗，累了");
  37.       } else {
  38.         console.log("再努力一把");
  39.       }
  41.       //多分支
  42.       age = 36;
  43.       if (age > 18 && age < 30) {
  44.         console.log("哥没车没房，约不约？");
  45.       } else if (age >= 30 && age < 50) {
  46.         console.log("哥想有个家");
  47.       } else if (age >= 50) {
  48.         console.log("这是真爱");
  49.       }
  50.       //   默认分支
  51.       else {
  52.         console.log("姐才", age, ",认你当二叔吧");
  53.       }
  55.       // switch
  56.       age = 16;
  57.       switch (
  58.         true //age
  59.       ) {
  60.         case age > 18 && age < 30:
  61.           console.log("不想奋斗，累了");
  62.           break;
  63.         case age > 30 && age < 50:
  64.           console.log("哥想有个家");
  65.           break;
  67.         case age >= 50:
  68.           console.log("这是真爱");
  69.           break;
  71.         default:
  72.           console.log("姐才", age, ",认你当二叔吧");
  73.       }
  75.       //循环
  77.       var lis = document.querySelectorAll("ul:first-of-type li");
  78.       // for
  79.       for (var i = 0; i < lis.length; i++) {
  80.         lis[i].style.color = "red";
  81.         lis[i].style.backgroundColor = "lightgreen";
  82.       }
  84.       //   while 循环
  85.       var lis = document.querySelectorAll("ul:last-of-type li");
  86.       var i = 0;
  87.       while (i < lis.length) {
  88.         lis[i].style.backgroundColor = "yellow";
  89.         i++;
  90.       }
  91.     </script>
  92.   </body>
  93. </html>

运行效果图：

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

实践案例代码：

  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.       // ## 1. JSON 是什么
  12.       // - JSON: JavaScript Object Notation(JS 对象表示法)
  13.       // - JSON: 2006 年成为国际标准,并成为表示结构化数据的通用的格式
  14.       // - JSON 借用了**JS 对象字面量**的语法规则,但并非 JS 对象,也并非只是 JS 才用 JSON
  15.       // - JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  16.       // - 尽管 JSON 与 JS 并无直接关系,但 JSON 在 JS 代码中应用最广泛
  17.       // ## 2. JSON 语法
  18.       // JOSN 支持三种数据类型: 简单值, 对象, 数组
  19.       // ### 2.1 简单值
  20.       // - 数值: `150`, `3.24`
  21.       // - 字符串: `"Hello World!"`,必须使用**双引号**做为定界符
  22.       // - 布尔值: `true`, `false`
  23.       // - 空值: `null`
  24.       // > 注意: 不支持`undefined`
  26.       var person = {
  27.         name: "Peter Zhu",
  28.         age: 30,
  29.         isMarried: true,
  30.         course: {
  31.           name: "JavaScript",
  32.           grade: 99,
  33.         },
  34.         getName: function () {
  35.           return this.name;
  36.         },
  37.         hobby: undefined,
  38.         toString: function () {
  39.           return "继承属性";
  40.         },
  41.       };
  43.       // 将js对象转为json格式的字符串
  44.       var jsonStr = JSON.stringify(person);
  45.       console.log(jsonStr);
  47.       // 传入第二参数数组，对输出的结果进行限制
  48.       jsonStr = JSON.stringify(person, ["name", "age"]);
  50.       // 如果第二个参数是一个回调，可以进行动态过滤
  51.       jsonStr = JSON.stringify(person, function (key, value) {
  52.         switch (key) {
  53.           case "age":
  54.             return "年龄不能随便问的";
  56.           case "isMarried":
  57.             return undefined;
  58.           // 必须要有default, 才可以输出其它未处理的属性
  60.           default:
  61.             return value;
  62.         }
  63.       });
  64.       // json中没有方法, undefined也没有
  65.       console.log(jsonStr);
  66.     </script>
  67.   </body>
  68. </html>

运行效果图：

4.总结

  1. 1.数据类型
  3. //(1). 原始类型: number 数值、bool: 布尔、类型检查 typeof
  4. //(2).特殊类型:null 空对象、undefined 未定义、
  5. //(3). 对象：object,array,function
  7. 2.流程控制
  9.  (1) 分支:单分支（if）、双分支(if else)、多分支(if else if...else if...else)
  10. （2）多分支：switch  case  default
  11.  (3) 循环:for循环/while 循环
  13. 3.json格式的字符串
  15.   (1)字符串: `"Hello World!"`,必须使用**双引号**做为定界符
  16.   (2)JOSN 支持三种数据类型: 简单值, 对象, 数组
  17.   (3)注意: 不支持`undefined`
上一条：Google SEO排名下滑，如何维护网站排名的稳定下一条：html布局与实例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
JKY辉哥2020-08-18 15:47:261楼
好的，朱老师

相关文章

查看更多