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 ...
随机推荐
- python selenium 报错unknown error: cannot focus element 解决办法
登录框由于js限制,定位到元素后无法sendkey ,sendky报错如下: selenium.common.exceptions.WebDriverException: Message: unkno ...
- 谈谈MySQL的黑暗语法
[MySQL在SQL标准下实现了自己的一套SQL语句] 每种数据库都会在继承标准SQL的基础上有所发展,比如SQL-SERVER在这个基础之上发展出来的SQL“方言”就叫“T-SQL”,MySQL 发 ...
- Windows8.1远程桌面时提示凭据不工作的解决方案
本人两台电脑都是win8.1.首先确认以下三点: 1.密码没有错 2.用户连接没有达到上线(只有我一个人尝试连) 3.该用户已开启远程连接 此时还说凭据不工作的原因是域的问题,因为mstsc默认使用M ...
- Android 4.1的新特性介绍
原文:http://android.eoe.cn/topic/summary 果冻豆 - Android 4.1 通知系统 - Notifications 在Android 4.1系统上通知的功能大大 ...
- 如何改变git的默认路径
1.win10下git默认启动路径是用户的根目录,东西太多太乱了. 2.修改很容易,右键单击桌面的快捷方式,选择“属性”. 3.删除“目录”中的 --cd-to-home 选项,再将“起始位置&quo ...
- Eclipse Axis2 插件将代码生成WSDL指南
Eclipse Axis2 插件将代码生成WSDL指南 快速学习手册 开发工具:https://spring.io/tools 插件地址:http://axis.apache.org/axis2/ja ...
- Atitit gui控件定位解决方案
Atitit gui控件定位解决方案 1.1. 但是AUTOIT没有找图功能..可以请大侠们写一份这个UDF出来吗?1 1.2. ahk1 1.3. Java +opencv 模板匹配2 1.1. 但 ...
- 菜鸟学SSH（十六）——Struts2内部是如何工作的
前面说完了Spring.Hibernate,很自然今天轮到struts了.struts的核心原理就是通过拦截器来处理客户端的请求,经过拦截器一系列的处理后,再交给Action.下面先看看struts官 ...
- java: 保留两位小数4种方法
import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; public c ...
- 源码分析HotSpot GC过程(三)：TenuredGeneration的GC过程
老年代TenuredGeneration所使用的垃圾回收算法是标记-压缩-清理算法.在回收阶段,将标记对象越过堆的空闲区移动到堆的另一端,所有被移动的对象的引用也会被更新指向新的位置.看起来像是把杂陈 ...