PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JS数组与对象的常用方法 & JSON.stringify() 的用法

JS数组与对象的常用方法 & JSON.stringify() 的用法

赵大叔
赵大叔 原创
2020年05月21日 18:04:30 1490浏览

一、js的数据类型

  • 1、原始类型: number, string, boolean

    typeof: 查看js数据类型

  • 2、特殊类型: null, undefined

    null 表示空对象; undefined 专用于表示非对象类型变量的空/无
    转化为布尔值:nullundefined===>false
    转化为数值:null===0, undefined===>NaN

  • 3、js的数组: 与PHP索引数组类似

    Array.isArray('数组'):判断js数组类型
    for、forEach:遍历数组
    slice(): 获取数组部分元素
    splice(): 可以实现数组的插入, 替换, 删除

  • 4、js对象: 与PHP关联数组类似

    .:点操作符,访问对象成员/属性
    for (key in '对象'):遍历对象
    forEach():遍历对象

  • 5、js函数: 函数、函数表达式、立即调用函数、回调函数

演示代码

  1. <script>
  2. // 1、原始类型: number, string, boolean
  3. var salary = 8900000;
  4. var name = "nguyen van dong";
  5. var marry = false;
  6. console.log(typeof salary, typeof name, typeof marry);
  7. // 2、特殊类型: null, undefined
  8. // js 变量要先声明才调用
  9. // 声明
  10. var phan;
  11. // 声明+初始化
  12. // var phan; 等价于 var phan = undefined;
  13. var phan = undefined;
  14. console.log(phan);
  15. var xuong = null;
  16. console.log(xuong);
  17. // null, undefined 都有空/无的意义
  18. // null 表示空对象;undefined 专用于表非对象类型变量的空/无
  19. // typeof null 等于 undefined
  20. console.log(null == undefined);
  21. // null 和 undefined 转为布尔值:false
  22. if (!null) console.log(null + "是无");
  23. if (!undefined) console.log(undefined + "是无");
  24. // null 和 undefined 转为数值:null ===> 0; undefined ===> NaN
  25. console.log(null + 100);
  26. console.log(undefined + 100);
  27. // 3、js的数组: 与PHP索引数组类似
  28. // 声明js数组
  29. var staffs = ["dung", "van", "tien", "bich", "dien", "vay"];
  30. // 访问数组成员
  31. console.log(staffs.length);
  32. console.log(staffs[1]);
  33. // 正确判断数组类型:Array.isArray()
  34. console.log(typeof staffs);
  35. console.log(Array.isArray(staffs));
  36. // 遍历js数组
  37. // for
  38. for (var i = 0; i < staffs.length; i++) {
  39. console.log(staffs[i]);
  40. }
  41. console.log("---------forEach()遍历-----------");
  42. // forEach
  43. // forEach是数组对象上的方法
  44. staffs.forEach(function (item, index, array) {
  45. console.log(item);
  46. });
  47. // slice()获取数组部分元素
  48. // slice('开始索引', '结束索引'):不包含结束索引
  49. console.log(staffs.slice(1, 3));
  50. // 获取全部
  51. console.log(staffs.slice(0));
  52. // splice()实现数组的插入, 替换, 删除
  53. staffs.splice(1, 0, "thuy", "quynh");
  54. console.log(staffs);
  55. staffs.splice(1, 2, "bao", "minh");
  56. console.log(staffs);
  57. // 删除,返回被删除的元素
  58. var res = staffs.splice(1, 2);
  59. console.log(res);
  60. console.log(staffs);
  61. console.log("---------------js对象----------------");
  62. // 4、js对象: 与PHP关联数组类似
  63. var congnhan = {
  64. id: 1,
  65. name: "hieu",
  66. email: "hieu@texhong.com",
  67. "cac salary": {
  68. coban: 5100000,
  69. hieuqua: 4000000,
  70. chucv: 2000000,
  71. chuyencan: 300000,
  72. },
  73. };
  74. console.log(congnhan);
  75. console.table(congnhan);
  76. // 访问对象成员/属性, 使用点操作符'.'
  77. console.log(congnhan["email"]);
  78. console.table(congnhan["cac salary"]["coban"]);
  79. console.log("-----------for in 遍历对象--------------");
  80. // for (对象的键名 in 对象) {
  81. // 对象[键名]
  82. // }
  83. for (key in congnhan) {
  84. console.log(congnhan[key]);
  85. }
  86. console.log("-----------借助数组的forEach()进行遍历对象--------------");
  87. // 第一步获取键名数组
  88. var keys = Object.keys(congnhan);
  89. console.log(keys);
  90. keys.forEach(function (item, index, arr) {
  91. console.log(this[item]);
  92. }, congnhan);
  93. // 5、js函数: 函数、函数表达式、立即调用函数、回调函数
  94. // 函数
  95. function sum(x, y) {
  96. console.log(x + " + " + y + " = ", x + y);
  97. }
  98. sum(80, 80);
  99. // 匿名函数, 函数表达式
  100. var sum1 = function (x, y) {
  101. console.log(x + " + " + y + " = ", x + y);
  102. }
  103. sum1(90, 90);
  104. // 立即调用函数
  105. (function sum2(x, y) {
  106. console.log(x + " + " + y + " = ", x + y);
  107. })(80, 80);
  108. (function sum2(x, y) {
  109. console.log(x + " + " + y + " = ", x + y);
  110. }(80, 80));
  111. </script>

演示效果:


二、Js 对象与 JSON

1、JSON类型

1.1 简单值

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

注意: 不支持undefined

1.2 JSON对象

    1. 没有变量声明: JSON中没有变量概念
    1. 没有分号: 因为JSON不是JS语句
    1. 属性名: 任何时候都必须添加双引号, 且必须是双引号
    1. JSON属性值也支持复杂类型,如对象
  1. {
  2. "name": "dashu",
  3. "age": 29,
  4. "course": {
  5. "name": "JavaScript",
  6. "grade": 99
  7. }
  8. }

1.3 JSON数组

无变量和分号

  1. [101, "电脑", 9800][
  2. // 最常见场景是将数组与对象组合表示更加复杂的数据类型
  3. ({
  4. id: 101,
  5. name: "电脑",
  6. price: 9800,
  7. },
  8. {
  9. id: 102,
  10. name: "手机",
  11. price: 4500,
  12. },
  13. {
  14. id: 103,
  15. name: "相机",
  16. price: 16800,
  17. })
  18. ];

2、JSON.stringify()用法

  • JSON.stringify(): 将原生 JS 对象,序列化为 JSON 字符串,用于存储与传输
  1. <script>
  2. // 1, 方法, 2,值为undefined的成员, 3, 原型对象成员不会被序列化
  3. var congnhan = {
  4. name: "ho nhat tien",
  5. age: 29,
  6. isMarried: false,
  7. "cac salary": {
  8. coban: 5100000,
  9. hieuqua: 4000000,
  10. chucv: 2000000,
  11. chuyencan: 300000,
  12. },
  13. getName: function () {
  14. return this.name;
  15. },
  16. hobby: undefined,
  17. toString: function () {
  18. return "继承属性";
  19. },
  20. };
  21. // 将js对象序列化为json字符串
  22. var jsonStr = JSON.stringify(congnhan);
  23. console.log(jsonStr);
  24. // 第二参数如果是数组,可以限制允许序列化的属性
  25. var jsonStr = JSON.stringify(congnhan, ["name", "age"]);
  26. console.log(jsonStr);
  27. // 第二参数是函数,支持第三参数:"----"
  28. var jsonStr = JSON.stringify(congnhan, function (key, value) {
  29. switch (key) {
  30. case "age":
  31. return "年龄保密";
  32. case "isMarried":
  33. return undefined;
  34. // 必须要有default, 才可以输出其它未被处理的属性
  35. default:
  36. return value;
  37. }
  38. }, "----");
  39. console.log(jsonStr);
  40. </script>

演示效果:

本节课堂小结:js数据类型与PHP大同小异,主要是对象和数组的方法有些多;js流程控制与php一样;JSON.stringify()方法参数用法。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议