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 ...
随机推荐
- Docker 建立镜像流程
1.docker build from dockerfile http://www.runoob.com/docker/docker-build-command.html $ docker build ...
- java实现windows下amr转换为mp3（可实现微信语音和qq语音转换）
最近做一个项目需要将微信的语音文件放在页面进行播放,查了好多资料发现,web页面直接播放并没有一个好的解决方案,于是就想到了先将amr文件转换成易于在页面播放的mp3文件,然后在进行播放,现在将amr ...
- 关于easyui combobox下拉框实现多选框的实现
好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...
- php分享二十六：读写日志
一:读写日志注意事项: 1:fgets取出日志行后,注意用trim过滤下 2:explode(“\t", $line) 拆分后,注意判断下个数是否正确,如果不正确,怎么处理? 如果某一列 ...
- Android基础知识之屏幕兼容模式
原文:http://android.eoe.cn/topic/android_sdk 注意:如果你在低于安卓3.0的版本上进行应用开发,但其在更大屏幕的设备(比如平板电脑)上显示正常时,你就需要禁用屏 ...
- Java compiler level does not match the version of the installed Java project 问题解决
右键项目“Properties”,在弹出的“Properties”窗口左侧,单击“Project Facets”,打开“Project Facets”页面. 在页面中的“Java”下拉列表中,选择相应 ...
- FTP整站上传的批处理脚本
一个FTP整站上传的批处理代码.例子: @echo off rem 设置FTP服务器地址 set ftpIP=192.168.0.2 rem 设置FTP用户名 set ftpUser=MyUser r ...
- Atitit 跨平台的系统截图解决方案
Atitit 跨平台的系统截图解决方案 1.1. Nodes js 方案desktop-screenshot进行系统截图1 1.2. Win 方案,autoit dsl,可能不跨台1 1.3. Jav ...
- github pull request
https://stackoverflow.com/questions/14680711/how-to-do-a-github-pull-request https://help.github.com ...
- 15个Spring的核心注释示例
众所周知,Spring DI和Spring IOC是Spring Framework的核心概念.让我们从org.springframework.beans.factory.annotation和org ...