欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-27 08:27:08
...

一、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.stringify() 的用法
JS数组与对象的常用方法 & JSON.stringify() 的用法

二、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数组与对象的常用方法 & JSON.stringify() 的用法

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