JavaScript：数据类型

最新推荐文章于 2024-04-29 17:54:33 发布
最新推荐文章于 2024-04-29 17:54:33 发布
阅读量48 收藏
点赞数
文章标签： javascript ViewUI

JavaScript中数据类型分为两种：

1、基本数据类型

string number boolean null undefined

2、引用类型

数组、Object、function

一、基本数据类型

二、引用类型

1、Array

Array类型有两种定义方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组</title>
    <script>
       window.onload=function(){
           //Array类型
           //第一种使用Array构造函数
           var arr=new Array();
           arr[0]="1";// 数组默认索引从0开始
           arr[1]="2";
           //
           var arr1=new Array("a","b","c");
           // 使用字面量的表示法
           var arr2=[1,2,3,4,5];
           // 数组里面可以包含各种数据类型
           var arr3=[1,"2",true,[1,2],{id:1}];
           // 访问数组元素
           console.log(arr3[4].id);
       };
    </script>
</head>
<body>
    
</body>
</html>

 把代码复制到浏览器里面运行结果：

2、object类型

2.1 使用构造函数的方式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象</title>
    <script>
       window.onload=function(){
           // object类型
           // 第一种object构造函数
           var obj=new Object();
           // 属性
           obj.name="tom";
           obj.age=24;
           // 方法
           obj.action=function(){
                console.log("我的名字是:"+this.name+",年龄是:"+this.age);
           };
           // 输出name属性的值
           console.log("姓名:"+obj.name);
           // 执行方法
           obj.action();
       };
    </script>
</head>
<body>
    
</body>
</html>

执行结果：

2.2  使用字面量的方式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象</title>
    <script>
       window.onload=function(){
           // object类型
           // 第一种object构造函数
      /*      var obj=new Object();
           // 属性
           obj.name="tom";
           obj.age=24;
           // 方法
           obj.action=function(){
                console.log("我的名字是:"+this.name+",年龄是:"+this.age);
           };
           // 输出name属性的值
           console.log("姓名:"+obj.name);
           // 执行方法
           obj.action(); */

           // 第二种字面量
           // 1、简单字面量
           var obj1={};
           obj1.name="tom";
           obj1.age=24;
           obj1.action=function(){
               console.log("我是简单字面量")
           };
           // 属性
           console.log(obj1.name);
           // 方法
           obj1.action();
           // 2、嵌套字面量
           var obj2={
               name:"jack",
               age:25,
               action:function(){
                   console.log("我是嵌套字面量");
               }
           };
           // 属性
           console.log(obj2.age);
           // 方法
           obj2.action(); 
       };
    </script>
</head>
<body>
    
</body>
</html>

 

运行结果：

2.3 使用工厂方式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象</title>
    <script>
       window.onload=function(){
           // object类型
           // 第一种object构造函数
      /*      var obj=new Object();
           // 属性
           obj.name="tom";
           obj.age=24;
           // 方法
           obj.action=function(){
                console.log("我的名字是:"+this.name+",年龄是:"+this.age);
           };
           // 输出name属性的值
           console.log("姓名:"+obj.name);
           // 执行方法
           obj.action(); */

           // 第二种字面量
           /* // 1、简单字面量
           var obj1={};
           obj1.name="tom";
           obj1.age=24;
           obj1.action=function(){
               console.log("我是简单字面量")
           };
           // 属性
           console.log(obj1.name);
           // 方法
           obj1.action();
           // 2、嵌套字面量
           var obj2={
               name:"jack",
               age:25,
               action:function(){
                   console.log("我是嵌套字面量");
               }
           };
           // 属性
           console.log(obj2.age);
           // 方法
           obj2.action();  */

              // 第三种工厂方式
              function createObj(){
                var obj3=new Object();
                obj3.name="kevin";
                obj3.action=function(){
                     console.log("我是通过工厂方式创建的对象");
                };
                // 返回创建的对象
                return obj3;
           };
           // 引用
           var obj4=createObj();
           // 输出属性
           console.log(obj4.name);
           // 调用方法
           obj4.action();
           // 工厂方式也可以使用传递参数的方式
           function createObjWithPara(name,age){
               var obj5={
                   name:name,
                   age:age,
                   action:function(){
                       console.log("我是调用参数的工厂方式创建的对象");
                   }
               };
               //
               return obj5;
           };

           var obj6=createObjWithPara("jon",30);
           // 输出属性
           console.log("姓名："+obj6.name+",年龄："+obj6.age);
           // 调用方法
           obj6.action();
       };
    </script>
</head>
<body>
    
</body>
</html>

 

执行结果：

2.4  使用构造函数的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象</title>
    <script>
       window.onload=function(){
           // object类型
           // 第一种object构造函数
      /*      var obj=new Object();
           // 属性
           obj.name="tom";
           obj.age=24;
           // 方法
           obj.action=function(){
                console.log("我的名字是:"+this.name+",年龄是:"+this.age);
           };
           // 输出name属性的值
           console.log("姓名:"+obj.name);
           // 执行方法
           obj.action(); */

           // 第二种字面量
           /* // 1、简单字面量
           var obj1={};
           obj1.name="tom";
           obj1.age=24;
           obj1.action=function(){
               console.log("我是简单字面量")
           };
           // 属性
           console.log(obj1.name);
           // 方法
           obj1.action();
           // 2、嵌套字面量
           var obj2={
               name:"jack",
               age:25,
               action:function(){
                   console.log("我是嵌套字面量");
               }
           };
           // 属性
           console.log(obj2.age);
           // 方法
           obj2.action();  */

      /*         // 第三种工厂方式
              function createObj(){
                var obj3=new Object();
                obj3.name="kevin";
                obj3.action=function(){
                     console.log("我是通过工厂方式创建的对象");
                };
                // 返回创建的对象
                return obj3;
           };
           // 引用
           var obj4=createObj();
           // 输出属性
           console.log(obj4.name);
           // 调用方法
           obj4.action();
           // 工厂方式也可以使用传递参数的方式
           function createObjWithPara(name,age){
               var obj5={
                   name:name,
                   age:age,
                   action:function(){
                       console.log("我是调用参数的工厂方式创建的对象");
                   }
               };
               //
               return obj5;
           };

           var obj6=createObjWithPara("jon",30);
           // 输出属性
           console.log("姓名："+obj6.name+",年龄："+obj6.age);
           // 调用方法
           obj6.action(); */

           // 第四种构造函数 首字母大写，使用驼峰命名方式 相当于一个公共的方法
           function CreateObj(){
                  this.name="tom";
                  this.action=function(){
                      console.log(this.name);
                  }
           };
           // 实例化
           var obj7=new CreateObj();
           // 输出属性
           console.log(obj7.name);
           // 调用方法
           obj7.action();

       };
    </script>
</head>
<body>
    
</body>
</html>

 运行结果：

注意：构造函数的方式也可以传递参数。

3、function

function创建函数有以下两种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>function类型</title>
    <script>
       window.onload=function(){
           // function 类型 创建函数
           // 函数声明
           function fun(name){
               return name;
           };
           // 函数表达式
           var fun2=function(name){
               return name;
           };
       };
    </script>
</head>
<body>
    
</body>
</html>

 

两种方式的区别：

两种创建函数的执行顺序不同，解析器会先读取函数声明，函数表达式必须要等待解析器执行到相应的代码才会执行。看下面的代码

1、函数声明的方式创建函数，创建的函数可以在函数声明前或者函数声明后调用：

函数声明前调用：

函数声明后调用：

2、函数表达式只能在其之后调用

如果在前面调用会直接报错：

 

 

weixin_33806914
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript数据类型
huishi__的博客
03-13 2893
开发工具与关键技术：Visual Studio Code 作者：郑忠良 撰写时间：2022/3/13 1.在JavaScript数据类型中一共有7种 avaScript数据类型 数据类型就是字面量的类型 在JS中一共有7中数据类型//ES5+ES6 String 字符串 Number 数值 Boolean 布尔值 true/false ...
javaScript的数据类型
05-12
ECMAScript 中有 5 种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和 String。还有 1种复杂数据类型——Object，Object 本质上是由一组无序的名值对组成的。ECMAScript 不支持任何创建...
08 JavaScript学习：数据类型
sixpp的博客
04-20 1422
由于 JavaScript 是动态类型的语言，变量的数据类型可以随时改变，这使得 JavaScript 在某些情况下更加灵活，但也可能导致一些类型错误。动态类型的特性使得 JavaScript 在编写代码时更加灵活，但也需要开发人员注意变量的数据类型，以避免潜在的类型错误。JavaScript 中的对象是非常灵活和强大的数据结构，可以用来表示复杂的数据关系和结构。通过对象的属性和方法，可以实现丰富的功能和逻辑。在 JavaScript 中，变量的数据类型是在运行时确定的，而不是在编译时确定的。
javascript中的数据类型
热门推荐
阿牛的博客
01-29 1万+
今天总结一下javascript中的数据类型，希望大家能有所收获。
JavaScript零基础入门 2：JavaScript数据类型简介
学Java，找哪吒
11-05 1万+
一、JavaScript中的数据类型 数据类型指的就是字面量的类型，JavaScript一共有六种数据类型： String字符串 Number数值 Boolean布尔值 Null空值 Undefined未定义 Object对象 其中StringNumberBooleanNullUndefined属于基本数据类型，而Object属于引用数据类型。 1、String 在JS中字符串需要使用引号引起来 使用双引号或单引号都可以，但是不要混着用 引号不能嵌套，双引号不能放双...
JavaScript：五种基本数据类型
kilig
06-16 2644
JavaScript基本类型;五种 如果六种（symbol( )） 1. string : 数据外面有 ‘’ 或者 “” 把类型归类为字符串!; 可以表达任意数据，或者说任何类型数据都可以用字符串的形式表示; var a = "hello"; var b = 'hello'; console.log(a); console.log(b); 2. number : 数字 （没有整型和浮点型的区别：整数和小数都是number类型,） var a = 123;
javascript数据类型
11-21
javascript数据类型
javascript数据类型详解
10-20
本文介绍了对javascript数据类型；隐式转换 （+ 和 -，== 和 ===）；包装对象等相关知识进行详细介绍，具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript数据类型详解
10-24
主要介绍了JavaScript数据类型详解,本文详细讲解了JavaScript中有5种基本数据类型：Undefined、Null、Boolean、Number和String,需要的朋友可以参考下
javascript中的五种基本数据类型
10-23
在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。...
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 395
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1057
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 352
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 680
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
JavaScript函数的作用域
猿码互联
04-23 217
JavaScript函数的作用域指的是变量的可访问范围。在JavaScript中，函数作用域是基于词法作用域（也称为静态作用域）的，意味着函数的作用域在函数被创建时就确定了，而不是在函数被调用时。这样创建的匿名函数会立即执行，并且其中的变量只能在函数内部访问，外部无法访问。这种方式在旧版本的JavaScript中很常见，但在ES6之后，可以直接使用块级作用域来实现同样的效果。需要注意的是，在ES6之前，JavaScript中并没有块级作用域的概念，只有函数作用域和全局作用域。
TypeScript学习笔记7-枚举
STATICHIT静砸的博客
04-23 324
如果中断了，那么下面的就从中断的地方继续增长。如果是字符串，那么定义的时候就要全部写上。主要作用就是节省因为枚举带来的性能消耗。如果是纯数字，下面的会进行自动增长。
redux快速入门
最新发布
qq_73270720的博客
04-29 207
简单的加减案例,学会redux快速入门
js执行顺序
weixin_45392204的博客
04-29 220
同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕，才能执行下一个任务（按照顺序执行）异步任务：指的是不进入主线程上的任务，进入任务队列的任务，只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。异步任务又分宏任务跟微任务宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他微任务：Promise.then、.catch 和.finally，process.nextTick、其他。
springboot论文格式系统
java全栈编程程序媛，定制、远程、文档编写指导等，8年开发经验，擅长h5,小程序,uniapp，java,物联网等编程，参与过智慧社区，智慧养老，智慧U能源，企业erp等大型项目开发。
04-23 273
（1）系统具备用户管理功能，包括用户注册、登录、权限管理等功能。 （2）系统具备格式规范管理功能，包括格式规范创建、编辑、删除等操作，以及格式规范的基本信息管理。 （3）系统具备论文格式检查功能，能够根据用户选择的格式规范，检查论文是否符合该规范的要求，并提供修改建议。 （4）系统具备格式转换功能，能够根据用户的需求，将论文从一种格式转换为另一种格式。
javascript学习手册二：js数据类型
06-28
JavaScript数据类型包括基本数据类型和引用数据类型。基本数据类型有：字符串、数字、布尔值、null和undefined；引用数据类型有：对象、数组和函数。 字符串是由一系列字符组成的，可以使用单引号或双引号表示。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值