js基础：数据类型，流程控制，json序列化 - js

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > js基础：数据类型，流程控制，json序列化

博主信息

博文 28

粉丝 0

访问量 29542

专题推荐

更多>

数据类型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 数据类型
      //   原始类型：number，string，boolean
      // typeof:查看数据类型
      var id = 12;
      var name = "dbname";
      var flag = false;
      console.log(typeof id, typeof name, typeof flag);
      //   特殊类型：null  undefined
      //   null 表示空对象
      //   undefined 专用于表非对象类型变量的空/无
      var bag;
      var hei = undefined;
      console.log(bag);
      //   null和undefined进行数据类型转换的不同之处
      //   console.log(NULL + 100); //100
      //   consloe.log(undefined + 100); //NAN:不是数值
      // 对象类型：array  object  function
      //array：关联数组
      var fruit = ["watermelon", "apple", "orange", "peach", "pear"];
      //   打印数组
      console.log(fruit);
      //   数组元素个数
      console.log(fruit.length);
      //   获取数组中的第几个元素
      console.log(fruit[1]);
      //      Array.isArray():判断是否为数组:返回布尔值
      console.log(Array.isArray(fruit));
      //   slice()获取部分数组元素：参数1：起始值。参数2：结束值。不包括结束值的参数
      console.log(fruit.slice(0, 3));
      // splice(), 可以实现数组的插入, 替换, 删除
      fruit.splice(1, 0, "mango");
      console.log(fruit);
      //   对象：js中的数组类似于php中的索引数组, js中的对象类似于php中的: 关联数组
      //  创建对象
      var study = {
        number: 1135,
        name: "小明",
        gradr: "一年级",
        "test scroe": {
          language: 86,
          mathematics: 95,
          English: 66,
        },
      };
      //   访问对象属性
      //   访问对象成员/属性,方法1 使用点操作符.,方法2 使用操作符[]
      console.log(study.number);
      console.log(study["test scroe"].English);
      //   使用表格的方式显示属性内容
      console.table(study);
      //   函数
      //   函数创建
      function db(a, b) {
        console.log(a + " + " + b + " = ", a + b);
      }
      // 函数访问
      db(5, 60);
      // 匿名函数
      var dm = function (a, b) {
        console.log(a + " * " + b + " = ", a * b);
      };
      dm(12, 35);
  </script>
  </body>
</html>

流程控制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   流程控制：和php一样
      // 分支：单分支
      var girAge = 50;
      if (girAge >= 50) {
        console.log("知名之年");
      }
      //   分支：双分支
      var girAge = 20;
      if (girAge >= 50) {
        console.log("知命之年");
      } else {
        console.log("我还没老");
      }
      //   分支：多分支
      if (girAge >= 50) {
        console.log("知命之年");
      } else if (girAge >= 40) {
        console.log("不惑之年");
      } else if (girAge >= 30) {
        console.log("而立之年");
      } else {
        console.log("我是年轻人");
      }
      //  switch
      switch (true) {
        case girAge > 50:
          console.log("知命之年");
          break;
        case girAge < 50 && girAge > 40:
          console.log("不惑之年");
          break;
        default:
          console.log("我还年轻");
          break;
      }
      fruit = ["watermelon", "apple", "orange", "peach", "pear"];
      //  for循环
      for (var i = 0; i < fruit.length; i++) {
        console.log(fruit[i]);
      }
      // while循环
      var i = 0;
      while (i < fruit.length) {
        console.log(fruit[i]);
        i++;
      }
      //  forEach是数组对象上的方法
      //   fruit:数组
      // item：元素
      // index：元素的索引
      // array：数组
      //   array.forEach(function (item, index, array) {});
      fruit.forEach(function (item) {
        console.log(item);
      });
        </script>
  </body>
</html>

josn序列化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
    //  forEach是数组对象上的方法
      //   fruit:数组
      // item：元素
      // index：元素的索引
      // array：数组
      //   array.forEach(function (item, index, array) {});
      fruit.forEach(function (item) {
        console.log(item);
      });
      //   JSON对象与它相比有二处不同
      // 1. 没有变量声明: JSON中没有变量概念
      // 2. 没有分号: 因为JSON不是JS语句
      // 3. 属性名: 任何时候都必须添加双引号, 且必须是双引号
      //   josn:数据交换的一种格式，也是一个字符串
      //   JOSN 支持三种数据类型: 简单值, 对象, 数组
      //   简单值
      //   数值: `150`, `3.24`
      //  字符串: `"Hello World!"`,必须使用**双引号**做为定界符
      // -布尔值: `true`, `false`
      //  空值: `null`
      //  注意: 不支持`undefined`
      var object = {
        name: "Peter Zhu",
        age: 29,
        isMarried: true,
        course: {
          name: "JavaScript",
          grade: 99,
        },
        getName: function () {
          return this.name;
        },
        hobby: undefined,
        toString: function () {
          return "继承属性";
        },
      };
      // 序列化对象
      var josnstr = JSON.stringify(object);
      console.log(josnstr);
      //   第二参数如果是数组,可以限制允许序列化的属性
      var josnstr = JSON.stringify(object, ["name", "age"]);
      console.log(josnstr);
      //第二参数不是数组,是函数,可以对对象的属性进行操作
      //   参数1:对象的键。参数2：对象的值
      var josnstr = JSON.stringify(object, function (key, value) {
        switch (key) {
          case "name":
            return "小明";
          // 必须要有default, 才可以输出其它未被处理的属性
          default:
            return value;
        }
      });
      console.log(josnstr);
      //   通过 JSON.parse() 解析数据，这些数据会成为 JavaScript 对象
      //    使用单引号
      var obj = JSON.parse(josnstr);
      console.log(obj);
     </script>
  </body>
</html>