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 ...
随机推荐
-
iOS-网络处理
1.iOS-网络基础 2.iOS-网络处理框架AFN 3.iOS-网络爬虫
-
trade 1.0 开源工具
dapper.net T4PocoGenerator/ Dapper.ColumnMapper 参考链接: http://blog.csdn.net/ymnets/article/details/85 ...
-
.net导出不规则Excel
using Hamp.App.BLL; using Hamp.App.Model; using Hamp.App.Model.QualityManagement; using System; usin ...
-
C# 反射相关的东西
public class PlugingManager { //插件装载器 public ArrayList Plugins = new ArrayList(); ...
-
css盒子
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
-
Java的selenium代码随笔(5)
//以下七种方法主要用于生成年.月.日.小时.分钟和秒的信息,用于生成保存截图的文件目录名和文件名/** 格式化输出日期* * @return 返回字符型日期*/public static Strin ...
-
在Amazon FreeRTOS V10中使用运行时统计信息
在MCU on Eclipse网站上看到Erich Styger在8月2日发的博文,一篇关于在Amazon FreeRTOS V10中使用运行时统计信息的文章,本人觉得很有启发,特将其翻译过来以备参考 ...
-
spring面试大全
一.spring如何实现资源管理? 使用 applicationContext.getResource(“classpath:文件名”):在src根目录下,在类路径下 applicationConte ...
-
asp.net core如何修改程序监听的端口
asp.net core 默认监听的5000和5001端口,要修改为其他端口有几种方法. 1.硬编码.优点是直观,缺点是每次修改端口都得重新编译程序. public class Program { p ...
-
Build 2016: 发布明天的云创新来服务今天的开发者
每个企业和行业都在被云潜移默化地改变着.随着云计算的速度.规模和灵活性的不断增加,云服务带来的可能性也在不断被拓展.想象一下,通过监测传感器,一位奶农能够将他的奶牛牛奶产量提高:或是一家医院能够自动监 ...