JavaScript：数据类型

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、函数表达式只能在其之后调用

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

JavaScript：数据类型的更多相关文章

Javascript：Javascript数据类型详解
要成为一个优秀的前端工程师,系统的学习Javascript,有夯实的Javascript基础,以及对语言本身的深刻的理解,是基本功.从Javascript数据类型开始,我将对Javascript知识体 ...
JavaScript数据类型 typeof, null, 和 undefined
JavaScript 数据类型在 JavaScript 中有 5 种不同的数据类型: string number boolean object function 3 种对象类型: Object Da ...
网页、JavaScript 数据类型
JavaScript 数据类型一.基本数据类型: 字符串.数字.布尔.日期和时间 JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 1 v ...
javascript数据类型、初始化
Javascript数据类型有6种: 数值型数据类型(Number): 字符串(String): 布尔型数据(Boolean): 对象数据(Object): 空(Null): 未定义(Undefine ...
第九十九节，JavaScript数据类型
JavaScript数据类型学习要点: 1.typeof操作符 2.Undefined类型 3.Null类型 4.Boolean类型 5.Number类型 6.String类型 7.Object类型 ...
Javascript数据类型共有六种
Javascript数据类型共有六种 /* var box; alert(typeof box); // box是Undefined类型,值是undefined,类型返回的字符串是undefined ...
JavaScript复习之--javascript数据类型隐式转换
JavaScript数据类型隐式转换.一,函数类 isNaN() 该函数会对参数进行隐式的Number()转换,如果转换不成功则返回true. alert() 输出的内容隐式的 ...
数据的分类-JavaScript数据类型
JavaScript数据类型 1.数据类型是什么? 我们接触的绝大多数程序语言来说,把数据都进行了分类,包括数字.字符.逻辑真假:int,long,string,boolean....等等:我们都知道 ...
js基础--javaScript数据类型你都弄明白了吗？绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
每天五分钟-javascript数据类型
javascript数据类型分为基本数据类型与复杂数据类型基本数据类型包括:string,number,boolean,null,undefined,symbol(es6) 复杂数据类型包括:obj ...

随机推荐

AR模型与数据平稳性之间的关系
作者:桂. 时间:2017-12-19 21:39:08 链接:http://www.cnblogs.com/xingshansi/p/8068021.html 前言前几天碰到一个序列分析的问题, ...
hudson用SVN插件下载代码，用ant插件打包，用SSH插件部署
hudson自动化部署步骤 1.SVN插件->下载代码 2.ant插件->war打包 (hudson服务器上可安装多个版本ant,每个项目可以选择一个ant版本.Build File ...
ios. GCD 倒计时时间
//倒计时时间 __block int timeout = 60; dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_ ...
给现有MVC项目增加Web API支持
在MVC4中自带了Web API不再需要从Nuget中下载. Step1:增加System.Web.Http,System.Web.Http.WebHost,System.Net.Http三个程序集的 ...
mui封装做好的手机版网站为apk
BOSS提到的一个功能,就是把已经做好的手机网站http://xxx.com/m/home/index ,想着看起来应该蛮简单,一个html页面里就一个iframe就好了,然后宽度和高度都设置为100 ...
关于iPhone音频的那些事
音频文件(Audio File) 1.有两个概念(1).文件格式(File Format or Audio Containers)——描述文件本身的格式,里面的音频数据可以用不同的编码格式.例如:ca ...
cannot send list of active checks to [ZabbixServerIp]: host [Zabbix server] not found
解决办法因为web端上被监控端的主机名和zabbix_agentd.conf中的Hostname名字不一样,改为一样的即可注意发现问题一定要看日志: tail -f /var/log/zabbix ...
RDD PAPER
https://cs.stanford.edu/~matei/ https://www2.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-12.pdf h ...
python-布尔值的加法运算
在python中,可以对布尔值进行加减法运算. True会被看做 1 , False会被看做 0 : a = True b = False
zsh与oh-my-zsh
在开始今天的 MacTalk 之前,先问两个问题吧: 1.相对于其他系统,Mac 的主要优势是什么?2.你们平时用哪种 Shell?…… 第一个童靴可以坐下了,Mac 的最大优势是 GUI 和命令行的 ...

JavaScript：数据类型

JavaScript：数据类型的更多相关文章

随机推荐

热门专题