js数据类型

麻辣虾头

已于 2022-07-11 17:36:49 修改

阅读量175

点赞数 1

分类专栏： js上文章标签： javascript 前端开发语言

于 2022-07-09 11:10:24 首次发布

本文链接：https://blog.csdn.net/weixin_52346897/article/details/125689195

版权

js上专栏收录该内容

14 篇文章 0 订阅

订阅专栏

为什么要学习数据类型？

数据各式各样，要先根据数据的需求（即类型）为它申请一块合适的空间，而内存就像一个宾馆。
例：
1.看需要什么价位？
2.您需要单人间还是双人间？

为什么要对数据进行分类？

数据类型化是内存管理的一部分 JavaScript 是弱类型语言，且寄生于浏览器，不直接管理内存。是不是就不需要类型了呢？

不同的房间提供的服务是不同的，JavaScript中不同的数据类型给我们提供了对应的丰富的api

例如：
3.1415.toFixed(2); //保留两位小数
数据不一样这意味着相同的变量可用作不同的类型。
var x ； // x为undefined
var x = 6; // x为数字
var x = 'Bill'; // x为字符串

在js中，到底有哪些数据类型？

在js中我们把数据类型分成了两大类：
1.基本数据类型：
1.1：数值（数字）：number
1.2：字符串：string
1.3:命名未赋值：undefined
1.4：布尔类型：Boolean
1.5:空类型：null
—————————————————————————————————————————
2.复杂数据类型（引用数据类型）:
1:复杂数据类型：object

typeof 操作符

作用:检测当前变量的数据类型；语法:typeof(需要检测的信息); //typeof(变量值/值) ｜typeof 变量名/值
————————————————————————————————————
由于js中的’变量’是’松散类型’的，所以它提供了一种检测当前变量的数据类型的方法，是’typeof’关键字

注意：
‘typeof(typeof(true))不管后面是什么数据类型，结果都是string类型’

基本数据类型

1.Number类型

//作用：用来表示数字的，任何数字都可以使用数值类型。比如商品价格、年份、年龄等。
商品价格：9.9元 ’
年份：1952年
'年龄：99岁

第一部分：
Number类型包含整数和浮点数（浮点数,数值必须包含一个小数点，且小数点后面至少有一位数字,需要大于0）两种值。

整数：var a = 10;
浮点数:var b = 13.14;

第二部分：
number还有一种特殊的样式：‘特殊的NaN’
NaN:非数字类型
特点：
① 涉及到的任何关于NaN的操作，都会返回NaN
② NaN不等于自身。
NaN: not a Number，不是一个数值，但他是number类型；

说明：
var n = NaN;
var n1 = NaN;
var a = 1;
var b = 2;
1）NaN表示一个本来要返回数字，但是由于某种原因，没有返回成功，就用NaN表示。
console.log(typeof(n));//NaN
2）NaN与任何值都不等，包括其本身;
console.log(n == n1)//NaN
3）NaN与其他任意值进行运算，都为NaN；
console.log(n+a);//NaN

2.String字符串类型

组成：'由一系列的字符构成的字符序列。
作用:'描述某个名称的，用户名、密码、籍贯等。
————————————————————
'注意：在使用字符串类型数据的使用，需要使用引号：双引号：“”和单引号：‘’,不可以一单一双，如果不加引号会报错。
————————————————————
字符串有length属性：‘他是有长度的’。

有时候，需要输出特定的一些符号，js为我们提供了转义字符的用法。
————————————————————
如下：
注意：在页面输出的时候是不起作用的，在弹出框输出和控制台输出的时候才起作用。

代码	输出
’	单引号
\“	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符

3.Boolean类型

该类型只有两个值，true和false.
——————————————————————————
注意：一般会在判断（条件、循环）等语句中来使用。
——————————————————————————
基本使用如下：我们有可以使用typeof
运算符来获取布尔值的类型。

var a = true;
console.log(a);
// 检测类型
console.log(typeof(a));//boolean

var b = false;
console.log(b);
console.log(typeof(b));//boolean

在这里插入图片描述
4.Undefined类型

undefined：un前缀+ defined，未定义的。

>1、如果一个变量，通过var声明了，但是没有赋值，则会出现如下提示：
>//undefined:是未定义类型；
>//表示一个变量在声明的时候没有初始值，那么它的值就是undefined。
>var name;
>console.log(name);//输出name的值； undefined 。
>
>2.检测没有赋值的变量的类型
//2.undefined 的数据类型是 ‘undefined’；
console.log(typeof name);

3、如果一个变量，没有通过var声明，直接就访问，会出现如下错误：

在这里插入图片描述

4、检测没有声明变量的类型；
//4.检测没有声明变量的类型
console.log(typeof a);//undefined

在这里插入图片描述

总结：
'1.说明变量，只要声明，就是存在的。'
var a = '张三'; //字符串：string
var b = 123;  //数值 number
var c = true; // 布尔 boolean
var d ;   //undefined

'2.就看是否赋值了，如果没有赋值，那么它的值是undefined，并且它的数据类型也是undefined。'

'3.换句话说，undefined是js中的一种数据类型，它只有一个值，就是undefined。'

5.Null类型

null值表示一个空对象，所以使用 typeof 操作符检测 null 值时会返回"object"
————————————————————————————————————————
作用：
‘当将来需要存储一个对象的时候，可以给其初始值赋为null;’

Undefined和null的区别

1.undefined:声明了，但是没有使用。
2.null：他声明的是一个空类型。
————————————————————————————————————————
官方解释：
1.undefined 表示变量未初始化，null表示变量值为空值
2.undefined 不需要显式的设置，null需要显式设置

6.Object类型

js中对象是一组属性与方法的集合。引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

var a = {
			name:'张三',
			age:18,
			sex:'男'，
}


复杂数据类型（引用数据类型）：object;

 1.基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。
 
 2.object:对象，指是带有属性和方法的特殊数据类型，对象有花括号分隔，
 在括号内部，对象的属性以名称和键值对的形式 (name : value) 来定义。
 
3.属性由逗号分隔创建对象：
1）对象字面量方式定义：
var a = {name:"南星", age:18, sex:'男'}
console.log(a);
console.log(a.age);
console.log(a.name);
console.log(typeof(a.name));//string
console.log(a.sex);
// 检测数据类型
console.log(typeof(a));
2）构造函数的方式定义：
var b = new Object();
b.name = '兔子';
b.m = '吃草';
b.age = 14;
console.log(b);//{name:"兔子",m:"吃草",age:14}
console.log(b.name)//兔子
// 检测类型
console.log(typeof(b));
   
 对象属性的两种寻址方式：
          var b = aa.sex;
          var c = aa["age"];  //中括号方式访问的必须是字符串

获取DOM元素

什么是Dom操作？

1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构"，以及"样式"的平台和语言中立的接口.
2.在HTML和JavaScript的学习中，DOM操作可谓时重中之重.

Dom树

1.什么是DOM树？

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。
——————————————————————————
文档：DOM中的"D"
如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。
——————————————————————————
对象：DOM中的"O"
对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性和方法。
——————————————————————————
模型：DOM中的"M"
DOM中的“M”代表着“Model”（模型），它的含义是某种事物的表现形式，DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的模型，而我们可以通过JavaScript去读取这张地图。

HTML DOM树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

1.文档节点(document对象)：代表整个文档
2.元素节点(element 对象)：代表一个元素（标签）
3.文本节点(text对象)：代表元素（标签）中的文本
4.属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
5.注释是注释节点(comment对象)

查找dom节点:

1.根据id获取

语法：document.getElementById('id名');
案例：
<div id="box"></div>
<script>
    let box = document.getElementById("box");
</script>
注意：getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

在这里插入图片描述
2.根据标签名获取

语法：document.getElementsByTagName('标签名');
案例：
<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
</div>
<script>
    var titl = document.getElementsByTagName("p");
</script>
注意: 该方法返回的是一个集合。

在这里插入图片描述
3.根据css选择器获取

语法：document.querySelector('css选择器');
案例：
<div id="box"></div>
<script>
    let box= document.querySelector("css选择器");
</script>
注意：querySelector()方法括号中的值是元素的选择器，如果是选择的是id写‘#’，如果是选择的是class写'.'，此方法直接返回DOM对象本身。

在这里插入图片描述
4.根据css选择器获取元素集合

语法：document.querySelectorAll('css选择器');
案例：
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
    var box = document.querySelectorAll(".box");
		console.log(box);
</script>