search

博客列表 >JS的数据类型和常用方法（0811）

JS的数据类型和常用方法（0811）

丶久而旧之丶
丶久而旧之丶原创
2020年09月16日 00:37:26613浏览

JS的数据类型和常用方法

数据类型

  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>Document</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 数据类型
  13.         // 1.原始类型
  14.         // 数值类型（number）
  15.         var age = 18;
  16.         // 字符串类型（string）
  17.         var name = 'admin';
  18.         // 布尔类型（bool）
  19.         var flag = true;
  20.         // 类型查看（typeof）
  21.         console.log(typeof age, typeof name, typeof flag);
  24.         // 2.特殊类型
  25.         // 空对象（null）
  26.         var title = null;
  27.         // 未定义（undefined）
  28.         var role = undefined;
  29.         // null和undefined值相等但类型不同
  30.         console.log(typeof title, typeof role);
  33.         // 3.对象（object array function）
  34.         // 数组
  35.         var fruits = ['西瓜', '苹果', '梨', '樱桃', '水蜜桃'];
  36.         // 查看是否是数组
  37.         console.log(Array.isArray(fruits))
  38.         // 遍历数组
  39.         for (i = 0; i < fruits.length; i++) {
  40.             console.log(fruits[i]);
  41.         }
  42.         fruits.forEach(function (value, key) {
  43.             console.log('key:' + key + ',' + 'value:' + value);
  44.         })
  45.         // 获取数组部分元素
  46.         console.log(fruits.slice(0, 2));
  47.         // 删除，插入，新增元素
  48.         console.log(fruits.splice(3, 2));//返回删除的元素
  49.         // 新增
  50.         console.log(fruits.splice(2, 0, '芒果', '哈密瓜'))
  51.         console.log(fruits);
  52.         // 替换
  53.         console.log(fruits.splice(0, 2, '杨桃', '火龙果'));
  54.         console.log(fruits);
  57.         // 对象
  58.         // 对象字面量
  59.         var obj = {
  60.             id: 1,
  61.             name: 'admin',
  62.             arr: [10, 20, 30],
  63.             "my obj": {
  64.                 html: 70,
  65.                 css: 80,
  66.                 php: 90,
  67.             },
  68.         };
  69.         console.log(obj);
  70.         // 访问对象成员
  71.         console.log(obj.name);
  72.         console.log(obj.arr[1]);
  73.         console.log(obj["my obj"].php);
  74.         // 遍历对象
  75.         for (key in obj) {
  76.             console.log(obj[key]);
  77.         }
  78.         // 也可以获取键值数组用forEach遍历对象
  79.         var arr = Object.keys(obj);
  80.         arr.forEach(function (item) {
  81.             console.log(this[item]);
  82.         }, obj);
  84.         // 函数
  85.         // 1.命名函数
  86.         function f1(a, b) {
  87.             console.log(a + b);
  88.         }
  89.         f1(10, 20);
  90.         // 2.匿名函数
  91.         var f2 = function (a, b) {
  92.             console.log(a + b);
  93.         }
  94.         f2(30, 40);
  95.         // 3.立即执行函数(可以避免污染全局)
  96.         (function (a, b) {
  97.             console.log(a + b);
  98.         })(50, 60);
  99.     </script>
  100. </body>
  102. </html>

流程控制

  1. // 流程控制
  2. // 单分支
  3. var age = 18;
  4. if (age <= 22) {
  5.    console.log('人生才刚刚开始呢');
  6.  }
  7. // 双分支
  8. age = 30;
  9. if (age <= 22) {
  10.    console.log('人生才刚刚开始');
  11. } else {
  12.     console.log('好好感受人生的精彩吧');
  13. }
  14. // 多分支
  15.  age = 60;
  16. if (age <= 22) {
  17.   console.log('人生才刚刚开始');
  18. } else if (age > 22 && age <= 50) {
  19.    console.log('好好感受人生的精彩吧');
  20. } else {
  21.    console.log(age + '岁了人生也就这样了');
  22. }
  23. age = 800;
  24.  // switch流程控制(如果case的条件是范围的话，那么switch的条件最好是true，保证进入流程控制中)
  25. switch (true) {
  26.    case (age <= 20):
  27.        console.log('人生才刚刚开始');
  28.     break;
  29.     case (age > 22 && age <= 50):
  30.        console.log('好好感受人生的精彩吧');
  31.     break;
  32.     case (age > 50 && age <= 70):
  33.        console.log('儿孙满堂的幸福啊');
  34.      break;
  35.      default:
  36.        console.log(age + '岁了有此一生我也满足了');
  37. }

循环

  1. // 循环
  2. // 获取li
  3.  var lis = document.querySelectorAll('ul:first-of-type>li');
  4. // for循环
  5.  for (var i = 0; i < lis.length; i++) {
  6.        lis[i].style.backgroundColor = 'lightgreen';
  7. }
  8.         // while循环
  9. var lis1 = document.querySelectorAll('ul:last-of-type>li');
  10. var i = 0;
  11. while (i < lis1.length) {
  12.     lis1[i].style.backgroundColor = 'lightblue';
  13.     i++;
  14. }

JSON

  1. // JSON
  2. // JSON中只有三种类型（简单值，对象，数组）
  3. // 简单值类型（数值，字符串，布尔值，空值，----注意不支持undefined）
  4. var obj = {
  5.     name: "admin",
  6.     age: 20,
  7.     marriage: false,
  8.     course: {
  9.         name: "php",
  10.         grade: 90,
  11.     },
  12.     getName: function () {
  13.         return this.name;
  14.     },
  15.     hobby: undefined,
  16.     toString: function () {
  17.          return "继承属性";
  18.      },
  19. };
  20. // 将js对象转为JSON格式字符串
  21. var jsonStr = JSON.stringify(obj);
  22. console.log(jsonStr);
  23. // 也可传入第二个参数对结果进行静态过滤
  24. var jsonStr1 = JSON.stringify(obj, ["name", "age", "marriage"]);
  25. console.log(jsonStr1);
  26. // 也可以通过回调进行动态过滤
  27. var jsonStr2 = JSON.stringify(obj, function (k, v) {
  28.      switch (k) {
  29.         case 'age':
  30.           return '年龄保密';
  31.         // 可通过返回undefined进行过滤相关成员
  32.         case 'marriage':
  33.           return undefined;
  34.          default:
  35.           return v;
  36.        }
  37. });
  38. console.log(jsonStr2);

总结

1.了解了js的数据类型，循环和流程控制
2.对json字符串有了初步的了解

上一条：Laravel的循环遍历方式以及常用CURD操作下一条：PHP大牛成长之路：laravel原生数据库增/删/改/查
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多