JavaScript 的数据类型

于 2023-01-27 00:04:35 发布
阅读量516 收藏
点赞数
分类专栏： 前端JavaScript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/128768569
版权

JavaScript 的数据类型

  • 基本数据类型（值类型）

    • Number（包含小数、整数、负数、科学计数法）

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // Number
    var a = 10;
    var b = 77.8;
    var c = 123e5; // 科学计数法
    console.log(a, b, c);
    // 检测数据类型 typeof
    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
  </script>
</html>

      在这里插入图片描述

    • String（字符串，特点必须被引号包含）

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // String
    var e = "hello world";
    console.log(e);
    // 判断类型
    console.log(typeof e);
  </script>
</html>

      在这里插入图片描述

    • Boolean（布尔类型。true、false）

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // Boolean
    // true 表示真
    // false 表示假
    var a = false;
    var b = true;
    console.log(a, b);
    // 判断类型
    console.log(typeof a);
    console.log(typeof b);
  </script>
</html>

      在这里插入图片描述

    • Null（空）

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // Null
    var a = null;
    console.log(a);
    // 判断类型
    console.log(typeof a);
  </script>
</html>

      在这里插入图片描述

    • Undefined（未定义的）

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // Undefined
    var a = undefined;
    console.log(a);
    // 判断类型
    console.log(typeof a);
  </script>
</html>

      在这里插入图片描述

    • Symbol（s6新增的）

  • 引用数据类型

    • Object（对象）
    • Array（数组）
    • Function（函数）

JavaScript 数据类型的特点

  • JS 拥有动态类型。这意味着相同的变量可用做不同的类型

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var a = 10;
    a = true;
    console.log(a);
    console.log(typeof a);
  </script>
</html>

    在这里插入图片描述

对象

  • 对象是包含属性和方法的集合

  • 创建对象的第一种方式：字面量（直接赋值）

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 对象 Object
    // 创建对象的第一种方式 字面量
    var person = {
      name: "John",
      age: 36,
      height: 180,
      weight: 65,
      six: "男",
      // 方法
      drink: function () {
        console.log("喝水");
      },
    };
    console.log(person);

    // 使用对象中的方法：通过 对象.方法
    // 使用对象中的属性：通过 对象.属性
    // 使用属性
    console.log(person.name, person.age, person.height);
    // 使用方法
    person.drink();

    person.name = "李四";
    console.log(person );
  </script>
</html>

    在这里插入图片描述

  • 对象的创建方式二：通过关键字 new.Object()创建，创建完成之后在进行赋值

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 创建对象的第二种方式：new.Object()

    // 创建对象
    var student = new Object();
    student.name = "李四";
    student.age = 25;
    student.weight = 65;
    student.sex = "男";
    student.drink = function () {
      console.log("看书");
    };
    console.log(student);

    // 使用
    console.log(student.name);

    student.name = "王五";
    console.log(student.name);

    student.drink();
  </script>
</html>

    在这里插入图片描述

函数 Function

  • 创建方式一:字面量

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 函数的创建方式一：字面量
    // 将匿名函数赋值给变量
    var foo = function () {
      console.log("这是一个函数");
    };
    foo();
  </script>
</html>

    在这里插入图片描述

  • 创建方式二：new Function()

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 函数的创建方式二：Function name (){}
    function foo() {
      // 具体代码
      console.log("foo");
    }
    foo();
  </script>
</html>

    在这里插入图片描述

函数的参数

  • 如何传参

  • 形参：在定义函数时，用来接收参数的变量

  • 实参：在调用函数时，传入的具体数据

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 定义方法，接收参数的叫做形参
    function sum(a, b) {
      console.log(a + b);
    }
    // 方法的调用,传入的方式叫做实参
    sum(10, 20);
    sum(20, 40);
  </script>
</html>

    在这里插入图片描述

函数的返回值

  • 通过return关键字，将结果进行返回，返回的结果可以进行保存，也可以直接打印

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function sum(a, b) {
      // 计算 a+b 将 a+b 的结果复制给 total
      var total = a + b;
      return total;
    }
    // console.log(sum(10, 20));
    var n = sum(10, 20);
    console.log(n);
  </script>
</html>

    在这里插入图片描述

函数的作用域

  • 在函数内部定义的变量叫做局部变量

  • 在函数外部定义的变量叫做全局变量

  • 在函数内部定义的变量在函数外是无法访问到的

    • 会产生错误（a is not defined，a 没有被定义）

  • 在函数外部定义的变量，在函数内部是可以访问到的

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    /* 
    在函数内部定义的变量叫做局部变量
    在函数外部定义的变量叫做全局变量
    在函数内部定义的变量在函数外是无法访问到的
    在函数外部定义的变量，在函数内部是可以访问到的
    */

    function foo() {
      // 函数体（方法体）写具体操作的
      var a = 10;
    }
    // console.log(a); // a 没有被定义
    
    var b = 20;
    function bar() {
      console.log(b);
    }
    bar();
  </script>
</html>

    在这里插入图片描述

BloggerM
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数据类型
huishi__的博客
03-13 2942
开发工具与关键技术：Visual Studio Code 作者：郑忠良 撰写时间：2022/3/13 1.在JavaScript数据类型中一共有7种 avaScript数据类型 数据类型就是字面量的类型 在JS中一共有7中数据类型//ES5+ES6 String 字符串 Number 数值 Boolean 布尔值 true/false ...
JavaScript数据类型有哪些
qq_26167153的博客
09-12 1259
三种引用数据类型：对象 Object，数组 Array，函数 Function 这三种都是对象类型。ES6新增值类型：Symbol值类型， 它是一种类似于字符串的数据类型，可以创建永不相等的变量值。三种基本数据类型：数字 Number，字符串 String，布尔值 Boolean。Symbol()函数的参数只是表示对当前 Symbol 值的描述。两种特殊数据类型：undefined，null。
JavaScript数据类型转换
橘猫吃不胖的博客
11-16 1973
JavaScript数据类型转换：1、转换为字符串型；2、转换为数字型；3、转换为布尔型
JavaScript数据类型有哪些？
u011200562的博客
07-01 6029
JS数据类型有哪些
JavaScript数据类型 - Object类型
lixiaosenlin的专栏
09-01 6302
ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和方法，就可以创建自定义对象，如下所示： var o = new Object(); 这个语法与Java中创建对象的语法相似，但在JavaScript中，如果不给构造函数传递参数，则可以省略后面的那一对圆括号。也就是说在像前面这个示例一样不传递参数的情况下，完全可以省略那对圆括号（但并不推荐这种做法） var o = new Objec
JavaScript数据类型-基本数据类型
qq_41421033的博客
03-15 2666
数据类型 计算机世界中的万事万物都是数据。 计算机程序可以处理大量的数据，为什么要给数据分类？ 1.更加充分和高效的利用内存 2.也更加方便程序员的使用数据 JS 数据类型整体分为两大类： 基本数据类型 number 数字型 string 字符串型 boolean 布尔型 undefined 未定义型 null 空类型 引用数据类型 object 对象 function 函数 array 数组 一. 数字类型 JavaScript 中的正数、负数、小数等 统一称为 数字类型 注: JS
JavaScript 数据类型——八种数据类型总结
黄凯达的博客
10-16 7627
JavaScript 有几种数据类型？ JavaScript 目前包含八种数据类型，其中可以分成两大类。 基本数据类型（原始值）： Number（数值，包含NaN） String（字符串） Boolean（布尔值） Undefined（未定义/未初始化） Null（空对象） Symbol（独一无二的值，ES6引入的新类型） 复杂数据类型（引用值）： Object（对象。Array/数组 和 function/函数 也属于对象的一种）
javascript中的数据类型
热门推荐
阿牛的博客
01-29 1万+
今天总结一下javascript中的数据类型，希望大家能有所收获。
JavaScript数据类型与注释
流楚丶格念的博客
07-19 4359
文章目录数据类型简单数据类型Number类型String类型Boolean类型Undefined和Null复杂数据类型获取变量的类型字面量注释单行注释多行注释 数据类型 简单数据类型 Number、String、Boolean、Undefined、Null Number类型 数值字面量：数值的固定值的表示法 110 1024 60.5 进制 十进制 var num = 9; 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。 十六进制 var num = 0xA;
「经典题」JavaScript数据类型有哪些？
王春燕的博客
05-11 3103
一、JS数据类型有哪些: JS数据中一共有8种ES5中有6种：Number、String、Boolean、Undefined、Null、ObjectES6新增了Symbol：这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记 谷歌6版本bigInt：是指安全存储、操作大整数 二、JS中基本数据类型和引用数据类型有哪些？ 基本数据类型（值类型）：Number、String、Boolean、Undefined、Null 引用数据类型：Object。里面包含functio
javascript数据类型
最新发布
03-28
JavaScript 数据类型详解 JavaScript 中的数据类型是一种基本概念，它们决定了变量能够存储的数据类型和操作方式。本文将详细介绍 JavaScript 中的基本数据类型和复杂数据类型，并对每种数据类型进行深入解释。 ...
javascript数据类型详解
10-20
本文介绍了对javascript数据类型；隐式转换 （+ 和 -，== 和 ===）；包装对象等相关知识进行详细介绍，具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript数据类型详解
10-24
在JavaScript中，数据类型分为两大类：基本数据类型（简单数据类型）和复杂数据类型。基本数据类型包括Undefined、Null、Boolean、Number和String，而复杂数据类型主要是Object。 1. **Undefined类型**： - 当一个...
JavaScript 基本认识
HTML_Z的博客
01-26 3725
JavaScript 的基本认识：什么是 JavaScript、JavaScript 的注释以及基本语法结构
JavaScript 高级
HTML_Z的博客
04-16 3110
JavaScript 高级：原型、继承、函数。
web 数据类型
HTML_Z的博客
03-10 1217
数据类型简介、简单数据类型、获取变量数据类型、数据类型的转换
学习函数进阶
HTML_Z的博客
03-31 1013
函数的定义和调用、this的指向、严格模式、高阶函数、闭包、递归
变量 var
HTML_Z的博客
01-26 1004
JavaScript 中变量 var 的认识
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值