前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)

简介: 本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。

一、数据类型分类

1.1、数据类型分类

JavaScript的数据类型为弱类型,即最开始的时候并不知道变量是什么类型,必须通过后面的值才能知道。
JavaScript的数据类型分为简单数据类型(也称为基本数据类型)和复杂数据类型(也称为引用数据类型)。
基本数据类型有:Number、String、Boolean、Undefined、Null
复杂数据类型有:Object

基本数据类型

1.2、typeof 操作符

语法:typeof(变量) / typeof 变量。
例1:typeof的使用

var num1 = 10;
console.log(typeof(num1), typeof num1);//number number

可以查看这篇文章:
最简单的方式理解typeof、instanceof、hasOwnProperty

1.3、Number 类型
Number类型即数值类型,主要作用于存储数据,参与数学运算。
例1:Number 类型即数值、数字

// 1.1 普通整数和小数
var num1 = 10;
var num2 = 2.5;
console.log(typeof(num1), typeof num2);

// 1.2 负值
var num3 = -0.2;
console.log(num3, typeof num3);

// 1.3 八进制,以0开头并且没有超过8的值,则为8进制
var num4 = 070;
console.log(num4, typeof num4); // 56 number

// 1.4 十六进制,0x开头,则为16进制
var num5 = 0x10;
console.log(num5, typeof num5); //15 number

Number类型即数值类型,即数字,包括整数、小数、八进制、十六进制等,除这些简单的数字以外,在Number类型中还有几个比较特殊的情况。

例2:特殊的Number类型

//1.1 NaN  not a number  算术运算不能得到正常数字都会返回NaN
var num5 = 'a' - 5;
console.log(num5, typeof num5); // NaN number

// 1.2 无穷大
var num6 = 1 / 0;
console.log(num6, typeof num6); // Infinity number

// 1.3 小数相加 会有一点偏差  
console.log(0.1+0.2); // 0.30000000000000004

在上面特殊的Number类型中,需要特别注意的就是NaN,算术运算不能得到正常数字都会返回NaN,并且任意两个NaN都是不相等的。

1.4、String 类型
String类型即字符串类型,是用引号引起来的数据,单双引号都可以,“web” 或’w’。
例1:string 类型

var str1 = 'abc';
var str2 = "123";
console.log(typeof str1,typeof str2); //string string

需要注意的是,除了引号引起来的是字符串以外,所有我们从input表单中获取的用户输入的内容都是字符串,哪怕输入的是数字。
例2:

oBut.onclick = function () {
   
    var value = oIn.value;
    console.log(typeof value); // string
}

字符串是用来数据存储使用频率非常高的一个类型,其中最基本的操作有:

  • 字符串.length : 获取当前字符串的长度
  • 字符串.charAt(下标):在字符串中获取对应下标的字符,下标从0开始
  • 字符串[下标]:在字符串中获取对应下标的字符,ie7及以下获取到undefined

例3:

var str = "abc";
// 字符串.length属性  获取字符串的长度,从1开始数
console.log(str.length); //3

// 字符串.charAt(下标)  获取字符串中某一位字符  下标(位置):从0开始
console.log(str2.charAt(0)); //a
console.log(str2[0]); // IE7及以下返回undefined

1.5、Boolean 类型
例1:Boolean 类型只有真和假,即 true、false

var bool1 = true;
var bool2 = false;
console.log(typeof bool1);
console.log(10>20); //false
if(10>20){
    // if的小括号里面,会自动转换成boolean类型
alert(true)
};

除了通过比较能得到Boolean的值以外,还有一个口诀来判断条件是否为真:“非0为真,非空为真”即0为假,其他数字为真,空字符串为假,其他为真。

1.6、null 与 undefined
例1:null 表示值为空,undefined 表示变量没有初始化,值的空缺。

// null 表示值为空
var nu = null;
console.log(nu, typeof nu); // null 'object'

// undefined
var def; // 变量没有初始化,表示值的空缺
console.log(def, typeof def); // undefined 'undefined'

null: Null类型,代表“空值”,代表一个空对象指针,使用typeof运算得到 “object”,所以你可以认为它是一个特殊的对象值。
undefined:Undefined类型,当声明了一个变量未初始化时,得到的就是undefined。

区别:
null是JavaScript的关键字,它是一个空对象指针,和其它语言一样都是代表“空值”,不过 undefined 却是JavaScript才有的。undefined是在ECMAScript第三版引入的,为了区分空指针对象和未初始化的变量,它是一个预定义的全局变量。没有返回值的函数返回为undefined,没有实参的形参也是undefined。: Null类型,代表“空值”,代表一个空对象指针,使用typeof运算得到 “object”,所以你可以认为它是一个特殊的对象值。
undefined:Undefined类型,当声明了一个变量未初始化时,得到的就是undefined。
null是JavaScript的关键字,它是一个空对象指针,和其它语言一样都是代表“空值”,不过 undefined 却是JavaScript才有的。undefined是在ECMAScript第三版引入的,为了区分空指针对象和未初始化的变量,它是一个预定义的全局变量。没有返回值的函数返回为undefined,没有实参的形参也是undefined。

复杂数据类型

1.7、Object
对象类型object:具体的东西(事物)都可以看作对象,也就是说万物皆对象(从页面当中获取的所有元素(标签)都是对象类型)。
例1:

console.log(typeof document); // object
console.log(typeof window); // object

var obj = new Object();
console.log(typeof obj); // object

var obj1={
   
name:"LiuQing",
age:18,
city:"北京"
};
// 获取属性值
console.log(obj1.name); // LiuQing
console.log(obj1['age']); // 18
console.log(typeof obj1); // object

声明object对象类型有两种方式,一种通过关键字new实例化对象(var obj=new Object()),还有一种通过字面量的形式声明对象(var obj1={})。在object数据类型中,存储值时,通过键值对的形式存储(name:”LiuQing”)其中name叫做键名(属性名),”LiuQing”叫做键值(属性值)。

1.8、函数 function
函数主要用于存储代码块,在需要的时候调用,因此一个完整的函数过程有两步,存和用。
例2:

函数是用来存储代码块的,在需要的时候调用
// 声明函数:function 函数名(){ 代码块 }
function fun() {
   
console.log("函数");
}
console.log(typeof fun); // function
fun(); // 调用函数

1.9、数组 array
数组可以将多个数据存储在一起,js 里面的数组项没有类型限制,一个数组当中可以存放任意类型的数据。
例4:

// 数组 可以存储任意类型的数据,如下,数组中放了对象和数组
var arr = [1,'fd',{
   'name':'fd'},[23,4]];
console.log(arr, typeof arr);
console.log(arr.length); // 获取数组中元素的个数
console.log(arr[2]); // 通过下标获取数组某一项,下标从 0 开始

2.0、typeof 返回值

  • 所有的数据类型通过typeof得到的类型有:
  • 如果这个值未定义,返回----“undefined”
  • 如果这个值是布尔值,返回----“boolean”
  • 如果这个值是字符串,返回----“string”
  • 如果这个值是数值,返回----“number”
  • 如果这个值是对象或null,返回----“object”
  • 如果这个值是函数,返回----“function”
目录
相关文章
|
6天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
102 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的数据类型以及存储上的差别
通过本文的介绍,希望您能够深入理解JavaScript中的数据类型及其存储差别,并在实际编程中灵活运用这些知识,以提高代码的性能和稳定性。
67 3
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
146 1
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
102 5
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
56 1
|
4月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
87 4
|
4月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
316 2

热门文章

最新文章