search

博客列表 >JS - 数据类型/流程控制及JSON基础

JS - 数据类型/流程控制及JSON基础

晴天
晴天原创
2020年05月21日 19:20:42776浏览

JS 中 数据类型,流程控制与 json

1.数据类型

1.1 原始类型

类型名 描述
number 数值
string 字符串
boolean 布尔型 
  1. var age = 25;
  2. var username = "admin";
  3. var ismarry = false;
  5. // 检测变量类型使用关键字 typeof
  7. console.log(typeof age, typeof username, typeof ismarry);
  9. //输出 number string boolean

1.2 特殊类型

类型名 描述
undefined 专用于表示非对象类型变量的空/无
null 表示空对象

undefined 与 null 都有空/无的意义

  1. // 比较
  2. console.log(undefined == null); //输出 true
  3. // 但是 检查类型会不一样
  4. console.log(typeof undefined); //输出 undefined
  5. console.log(typeof null); // 输出 object
  7. //   测试与数值相加
  8. console.log(undefined + 100); //输出 NaN(Not a Number) 不是一个数值
  9. console.log(null + 100); // 输出 100

1.3 对象类型

类型 描述
array 数组
object 对象
function 函数

1.3.1 数组

  • js 数组与 php 索引数组类似
  1. // 声明一个数组
  2. var arr = ["apple", "orange", "banana", "peach", "pear"];
  3. //   获取数组属性个数
  4. console.log(arr.length); //输出 5
  5. //   获取数组中的第一个值
  6. console.log(arr[0]); // 输出 apple
  7. //   查看数组是不是array
  8. console.log(typeof arr); //输出 object
  9. //   错!  正确方式 判断是不是的数组
  10. console.log(Array.isArray(arr)); //输出 true
  12. //   遍历这个数组 for循环
  13. for (var i = 0; i < arr.length; i++) {
  14.   console.log(arr[i]);
  15. }
  16. //输出   apple
  17. // orange
  18. // banana
  19. // peach
  20. // pear
  22. //   使用 foreach 遍历 js中foreach是数组对象上的方法
  23. arr.forEach(function (item) {
  24.   console.log(item);
  25. });
  26. //输出   apple
  27. // orange
  28. // banana
  29. // peach
  30. // pear
  31. console.log("---------------");
  33. //   获取数组中的部分元素
  34. // .slice(起始位置, 结束位置)
  35. console.log(arr.slice(3, 5));
  36. //   输出 0: "peach"
  37. //        1: "pear"
  39. // 插入 替换与删除  .splice(插入位置 , 删除个数 , 将要要替换的元素)
  41. //   实现插入
  42. arr.splice(3, 0, "桃子", "梨子");
  43. console.log(arr);
  44. //   输出  ["apple", "orange", "banana", "桃子", "梨子", "peach", "pear"]
  46. //   实现删除 有返回值返回被删除的元素
  47. var sarr = arr.splice(3, 2);
  48. console.log(sarr); //输出 ["桃子", "梨子"]
  49. console.log(arr); //输出   ["apple", "orange", "banana", "peach", "pear"]
  51. // 实现替换
  52. arr.splice(3, 2, "桃子", "梨子");
  53. console.log(arr);
  54. //输出 ["apple", "orange", "banana", "桃子", "梨子"]

1.3.2 对象

  • js 对象类似于 php 的关联数组
  1. // 声明一个对象
  2. var obj = {
  3.   id: 1,
  4.   name: "peter",
  5.   email: "123@php.cn",
  6.   "test scroe": {
  7.     php: 80,
  8.     js: 65,
  9.     css: 70,
  10.   },
  11. };
  12. //   输出
  13. console.log(obj);
  14. // 以表格形式输出
  15. console.table(obj);

  1. //   访问对象成员使用 '.' 操作符  php使用 '->'
  2. console.log(obj.email); //输出123@php.cn
  3. //   当然也可以,以数组形式访问
  4. console.log(obj["email"]); //输出  123@php.cn
  5. console.log("-------------");
  6. //   循环输出 for(对象键名 in 对象){ 对象[键名]}
  7. for (key in obj) {
  8.   console.log(obj[key]);
  9. }

  1. //   借助foreach进行遍历
  2. // 获取键名数组
  3. var keys = Object.keys(obj);
  4. console.log(keys); //输出 ["id", "name", "email", "test scroe"]
  6. //   遍历
  7. keys.forEach(function (item) {
  8.   console.log(this[item]);
  9. }, obj);

1.3.3 函数

  • 与 php 相同 使用 function
  1. // 声明一个函数
  2. function f1(a, b) {
  3.   console.log(a + "+" + b + "=" + (a + b));
  4. }
  5. // 调用
  6. f1(19, 46); //输出  19+46=65
  8. //   匿名函数 函数表达式
  9. var f2 = function (a, b) {
  10.   console.log(a + "+" + b + "=" + (a + b));
  11. };
  12. //   调用
  13. f2(10, 56); //输出 10+56=66
  15. //   立即调用函数
  17. (function (a, b) {
  18.   console.log(a + "+" + b + "=" + (a + b));
  19. })(15, 23); // 输出  15+23=38

2. 流程控制

2.1 if 语句

  1. // 声明一个变量
  2. var girlAge = 30;
  4. //   单分支
  5. if (girlAge > 20 && girlAge <= 30) {
  6.   console.log("咱们结婚吧");
  7. }
  8. //   输出 咱们结婚吧
  10. //   双分支
  11. if (girlAge < 20) {
  12.   console.log("你还小");
  13. } else {
  14.   console.log("我可以追你吗");
  15. }
  16. //   输出  我可以追你吗
  18. //   多分支
  19. if (girlAge < 18) {
  20.   console.log("做我干女儿吧");
  21. } else if (girlAge < 25) {
  22.   console.log("我可以追你吗");
  23. } else {
  24.   console.log("我还小 ");
  25. }
  26. //   输出  我还小

2.2 swich 语句

  1. // 声明一个变量
  2. var girlAge = 30;
  4. switch (true) {
  5.   case girlAge > 18 && girlAge < 30:
  6.     console.log("哥没车没房,愿意不?");
  7.     break;
  9.   case girlAge >= 30 && girlAge < 50:
  10.     console.log("我想有个家");
  11.     break;
  13.   default:
  14.     console.log("姐才" + girlAge + "岁, 认你当干爹吧");
  15.     break;
  16. }
  17. //输出 我想有个家

2.3 for 循环 与 while 循环

  1. <ul>
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5. </ul>
  6. <ul>
  7.   <li>1</li>
  8.   <li>2</li>
  9.   <li>3</li>
  10. </ul>
  11. <script>
  12.   // for 循环
  13.   var items = document.querySelectorAll("ul:first-of-type");
  14.   for (var i = 0; i < items.length; i++) {
  15.     items[i].style.color = "red";
  16.   }
  18.   //   while
  19.   var items = document.querySelectorAll("ul:last-of-type");
  20.   var i = 0;
  21.   while (i < items.length) {
  22.     items[i].style.color = "blue";
  23.     i++;
  24.   }
  25. </script>

3. 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 语法

JSON 支持三种数据类型：简单值，对象，数组

3.2.1 简单值

  • 数字 100,3.14
  • 字符串： "hello word" , 必须使用双引号作为定界符
  • 布尔值：true , false
  • 空值 ： null

注意 不支持 undefined

3.2.2 对象

  • 原生 JS 对象字面量
  1. // 原生JS对象字面量
  2. var username = {
  3.     name:'peter',
  4.     age:30
  5. };
  7. // 等价语法
  8. var username = {
  9.     "name":'peter',
  10.     "age":30
  11. };
  12. // JSON对象与他相比有二处不同
  13. // 1.没有变量声明：JSON 没有变量概念
  14. // 2.没有分号：JSON不是JS语句
  15. // 3.属性名：任何时候都必须添加双引号，且必须是双引号
  17. // 以上内容用JSON对象表示
  18. {
  19.     "name":'peter',
  20.     "age":30
  21. }
  23. // JSON属性值也支持复杂类型，如对象
  25. {
  26.     "name":"peter",
  27.     "age":29,
  28.     "course":{
  29.         "name":"michael"
  30.         "age":80
  31.     }
  32. }

3.2.3 数组

  • JSON 数组采用了原生 JS 中数组字面量语法
  1. // 原生JS数组
  2. var arr = [101, "电脑", 9800];
  4. // JSON 表示 无变量和分号
  5. [101, "电脑", 9800];
  7. // 常见场景时将数组与对象组合表示更加复杂的数据类型;
  8. [
  9.   ({
  10.     id: 101,
  11.     name: "电脑",
  12.     price: 9800,
  13.   },
  14.   {
  15.     id: 102,
  16.     name: "手机",
  17.     price: 4500,
  18.   },
  19.   {
  20.     id: 103,
  21.     name: "相机",
  22.     price: 16800,
  23.   }),
  24. ];
  26. // 许多软件的配置文件都是采用这种数据格式,如VSCODE

3.3 JSON 解析与序列化

3.3.1 JSON 对象

  • ES5 t 提供了内置全局对象JSON，对 JSON 数据提供了全面支持
  • JSON.stringify():将原生 JS 对象，序列化为 JSON 字符串，用于存储和传输
  • JSON.parse():将 JSON 字符串 解析为原生 JS 对象
3.3.1.1 对象序列化为 JSON
  • JSON.stringify(js对象,允许序列化的属性,缩进字符数量)
  1. // 创建一个准备JSON序列化的对象
  2. var person = {
  3.   name: "Peter Zhu",
  4.   age: 29,
  5.   isMarried: true,
  6.   course: {
  7.     name: "JavaScript",
  8.     grade: 99,
  9.   },
  10.   getName: function () {
  11.     return this.name;
  12.   },
  13.   hobby: undefined,
  14.   toString: function () {
  15.     return "继承属性";
  16.   },
  17. };
  18. //   进行JSON序列化并保存到一个变量中
  19. var jsonstr = JSON.stringify(person);
  20. console.log(jsonstr);
  21. //   输出{"name":"Peter Zhu","age":29,"isMarried":true,"course":{"name":"JavaScript","grade":99}}
  22. // undefined 的变量 和 函数 将不会被JSON 序列化
  24. // 第二参数 传值数组 将限制允许序列化的属性，也就是只会将数组中的值被JSON序列化
  25. var jsonstr = JSON.stringify(person, ["name", "age"]);
  26. console.log(jsonstr);
  27. //   输出  {"name":"Peter Zhu","age":29}
  29. // 第二参数 传值函数 可以改变原对象中的值再进行JSON序列化
  30. var jsonstr = JSON.stringify(person, function (key, value) {
  31.   //  条件执行判断
  32.   switch (key) {
  33.     case "age":
  34.       return "年龄是秘密";
  35.     case "grade":
  36.       return 85;
  37.     case "isMarried":
  38.       return undefined; // 也就是不输出
  39.     default:
  40.       return value;
  41.   }
  42. });
  44. console.log(jsonstr);
  45. //输出  {"name":"Peter Zhu","age":"年龄是秘密","course":{"name":"JavaScript","grade":85}}

4. 总结

PHP 中使用 json_encode() json_decode() 进行编码解码，JS 中使用JSON.stringify() JSON.parse() 进行编码解码， 有一处不完美 如果只想改变 person.name 的值 不改变 parson.course['name'] 值 该如何操作呢？

上一条：Javascript数据类型下一条：js数据类型，流程控制，JSON转换
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多