原生js值之数据类型详解

js的数据类型

  • 数据类型分类
    • 基本数据类型
    • boolean:布尔类
    • undefined:未定义的值
    • null类型
      • 数值转换
    • Number
        • parseInt 转换整数
      • parseFloat转换浮点数
    • String类型
      • 特点
      • 如何转换成字符串
      • 模板字面量
      • 字符串插值
      • 模板字面量标签函数
    • symbol类型
      • 特性
      • 使用
    • BigInt类型
    • 复杂数据类型
      • Object类
        • 属性与方法

数据类型分类

基本数据类型

boolean:布尔类

主要值为true、false,但是两个属性值不等于标识符True,False。同时如果想把一个别的类型变量转换为boolean可以通过Boolean(变量值)。转换后的值就会变成true或false.

undefined:未定义的值

举例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let a;let b=undefinedconsole.log(a,b,a==b,a===b)</script></body>
</html>

在这里插入图片描述
当我们定义了一个变量但没有给它赋初始值,没初始值也就不知道它的数据类型是什么,那它的数据类型就是undefinted,那么它被打印出来也是undefined,同时我们也可以定义一个变量的值为undefined,那么它的数据类型也是undefined。

null类型

空指针类型,因为undefined类型是由null类型衍生出来的,所以当一个null==undefined时候返回的是true。

number类型:数字类型,整数或者浮点数,同时也可以转换为八进制/十六进制
ob11=十进制3,0o70=十进制56,如果0o后面跟着的是小于8的数字,则按照8进制来进行计算,否则按照十进制进行计算。0xA=十六进制10。 同时也可以计算值的范围,如Number.MIN_VALUE,Number.MAX_VALUE,如果计算值超过最大最小值,则会返回Infinity(无穷值),有正负无穷之分。如果想判断一个值是不是优先大,超没超过出最大值或最小值,可用isFinite函数来实现,返回一个true或false,true则它再最大值和最小值里面。
NaN是number中特殊的值,意为不是数值,用于表示本来要返回数值的操作失败了,如0/0,-0/0等等,如果分子是非0值分母是0,则返回+Infinity或-Infinity,同时NaN也有自己的方法isNaN(),主要用来判断这个值是不是数字或能转换成数字,如true、false可以转换成1、0,字符串“10”可以转换成number10,字符串“blue”则不能转换返回true。

数值转换

parseInt、parseFloat、Number三个方法都可以实现数值转换。

Number

let num1=Number("Hello World!") //NaN
let num2=Number("") //0
let num3=Number("00010");//10
let num3=Number("0xA");//10
let num4=Number(true);//1
let num5=Number('1234blue');//NaN
parseInt 转换整数
let num1=parseInt('1234blue');//1234
let num2=parseInt(22.5);//22
let num3=parseInt("0xf");//15,解释为16进制整数

如果想设置十六进制进行转换,也可以设置parseInt的第二个参数,设置之后就不用再头部加0x了,如:parseInt(‘F’,16),可以转换成2,8,10,16进制。

parseFloat转换浮点数

parseFloat会忽略掉最开始是0的数值中的0,所以它只能转换十进制数字,如果这个数字没有小数点,它会解析成整数。有小数点,它会解析成浮点数。当它遇到十六进制的数字时,会转换成0。

String类型

String字符串类型可以用双引号、引号或反引号来定义,

特点

ES中的字符串是不可变的,一旦创建,如果要它们修改原始值,它们会先销毁原始值,然后将包含新值的另一个字符串保存到该变量。
例:

let lang="script"
lang="Java"+lang

在上述代码中,lang(简称l)初始值为script,那么当它在被赋新值的时候,首先会分配一个足够容纳10个字符的空间,把Java和Script两个字符填充上,最后销毁原始的字符串“Java”和“script”,因为这两个字符串已经没用了,这也导致浏览器早期时拼接字符串非常慢,在现代浏览器已经解决了这个问题。

如何转换成字符串

两种方法:toString、String。
toString方法可见于数值、布尔、对象和字符串,但是null和undefined值没有这个方法。
语法格式:变量名.toString(进制转换(可选))
toString有个参数,可以选择,比如我们有个十进制数字10,把10赋给变量a,我们想把a转换成2进制后再转换成字符串,那么可以通过a.toString(2)实现,同理也可以转换成2,8,16等进制。输入数字就可以。
当我们无法确定一个值是不是null或者undefined时可以通过String来判断,
语法格式:String(变量名)
举例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let value1=nulllet value2=undefinedlet value3=NaNconsole.log(String(null),String(undefined),String(NaN));</script></body>
</html>

在这里插入图片描述
String的语法格式是,当这个变量类型有toString变量那么返回这个变量名的String格式,如果变量类型和null或undefined,则返回null或undefined,因为它俩没有toString方法,所以只能返回它们的字面量文本。

模板字面量

``反引号(模板字面量)支持字符串之间的换行,而单引号和双引号不支持,如:

let a=`dddd
eeee`

在这里插入图片描述

字符串插值

模板字面量的主要场景是封装HTML模板,同时字符串插值也是模板字面量的一个重要属性之一。语法格式:${变量名}
它可以插入到js生成的HTML语句当中。同时在${}中也可以调用js方法。
例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="test"></div><script>let a='a'let b=document.getElementById('test').insertAdjacentHTML('afterbegin',`${a.toUpperCase()}`)</script></body>
</html>

在这里插入图片描述

模板字面量标签函数

通俗讲就是可以把${}中的变量,变成由几个变量和运算符组成的表达式,或者在一个自定义的函数当中输入想要的参数,把这个参数进行函数转换后生成,插入到HTML当中,比如

document.getElementById('test').insertAdjacentHTML('afterbegin',`${a.toUpperCase()+b}`)

在这里插入图片描述
标签函数格式
参数:第一个参数为传入的参数格式,如a+b,参数打印为:’’+’’.后续的参数则为模板字面量传入的值
语法格式
函数名``参数1,参数2`//第一个形参不需要传入,传入的第一个实参默认为第二个形参。

例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="test"></div><script>function insert(strings,sum1,sum2){let sum=sum1+','+sum2;console.log(strings)return sum}let a='a'let b='b'let Func=insert`${a.toUpperCase()}+${b}`document.getElementById('test').insertAdjacentHTML('afterbegin',Func)</script></body>
</html>

在这里插入图片描述
在上述代码中,我们定义了一个标签函数,作用就是拼接,在这个标签函数中,我们在两个参数中间放了一个,作为改变。并且在页面中看到已经改变成功了。

symbol类型

symbol类型是es6新增的数据类型,它是为了让对象属性名称多次被使用而设置的一种标识符。在设置后,其他人就无法使用这个属性名来作为对象的属性。

特性

唯一性:即使是用同一个变量生成的值也不相等。
隐藏性:用for in、Object.keys不能访问。只能通过Object.getOwnPropertySymbols方法访问对象中的symbol属性值。

使用

不能通过new Symbol方式进行创建使用,首先我们了解一点:基本数据类型用new创建可以得到包装对象,而非再是字面量,所以说不能new的原因可以是因为官方不想让Symbol变量成为一个包装对象.
可以用Symbol()的方式,如 let a=Symbol(‘id’),但这会出现一个问题,就是可以多次使用同一个Symbol值且开辟新空间,let b=Symbol(‘id’)
例:

	let a=Symbol('id')let b=Symbol('id')console.log(a===b)//falselet c=Symbol.for('user')let d=Symbol.for('user')console.log(c===d)//true

为了防止多次开辟新空间,导致symbol使用异常情况,官方出了一个创建的方法叫,symbol.for,这个方法主要是用于判断该Symbol名是否被创建,如果被创建则直接调用,没有创建则创建.
如何根据Symbol对象获取到这个Symbol的值,可以用Symbol.keyfor,

	console.log(Symbol.keyFor(c),Symbol.keyFor(d))//user user

BigInt类型

BigInt是JavaScript中的一种新的原始数据类型,可以用来表示更大的整数值,解决了使用双精度浮点数计算及显示的问题。后缀加n。

复杂数据类型

Object类

ES中的对象类型,本质是一组数据和方法的集合,对象通过new操作符创建.

let 对象名=new Object()

如果这个对象的构造函数中没有参数也可以删除()但不推荐.

属性与方法

constructor:用于创建当前对象函数,又称构造函数.
hasOwnProperty:用于判断当前对象实例上是否存在给定的属性
语法格式:

对象名.hasOwnProperty(属性名)

isPrototypeOf:用于判断当前对象是否为另一个对象的原型.
propertyIsEnumerable:用于判断给定的属性是否可以使用.
toLocaleString():返回对象的字符串表示.(日期对象转换成字符串)
toString:返回对象的字符串表示.
valueOf:返回对象对应的字符串、数值或布尔值表示。通常与toString的返回值相同。
对象中还包含一种特殊的function对象,这里就不赘述了。

最后有两道面试题,与君共勉。

parseInt('');//NaN
Number('');//0
isNaN('');//falseparseInt(null);//NaN
Number(null);//0
isNaN(null);//falseparseInt('1px');//1
Number('1px');//NaN
isNaN('1px');//trueparseInt('1.1px') + parseFloat('1.1px') + typeof parseInt(null); //2.1number
isNaN(Number(!!Number(parseInt('1.8'))));
typeof !parseInf(null) + !isNaN(null);1 + false + undefined + [] + 'Tencent' + null + true + {};//NaNTencentnulltrue{}
let arr = [1,2,3,4];
arr = arr.map(parseInt);
console.log(arr);//1 NaN NaN NaN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/139024.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[杂谈]-八进制数

八进制数 文章目录 八进制数1、概述2、八进制数的表示2.1 八进制数2.2 以八进制计数2.3 二进制数补零 3、八进制到十进制转换4、十进制到八进制转换5、二进制到八进制转换示例6、八进制到二进制和十进制转换示例7、总结 1、概述 八进制编号系统是另一种使用基数为8计数系统&am…

【Stm32】【Lin通信协议】Lin通信点亮灯实验

Lin通信点亮灯实验 通过STM32的串口发送数据&#xff0c;然后通过串口转换模块将数据转换成LIN&#xff08;Local Interconnect Network&#xff09;协议&#xff0c;最终控制点亮灯。需要工程和入门资料的可以私信我&#xff0c;看到了马上回。 入门书本推荐&#xff1a; 一…

【C++面向对象侯捷下】2.转换函数 | 3.non-explicit-one-argument ctor

文章目录 operator double() const {} 歧义了 标准库的转换函数

exe文件运行后无输出直接闪退如何找解决办法

一.搜索栏搜事件查看器 二.点开windows日志下的应用程序 三.找到错误处 四.搜索异常代码 点开有错误的详细信息&#xff0c;直接用搜索引擎搜索这个异常代码能大致判断是什么问题&#xff0c;给了一个解决思路&#xff0c;不至于不知道到底哪里出了问题

AUTOSAR词典:CAN驱动Mailbox配置技术要点全解析

AUTOSAR词典&#xff1a;CAN驱动Mailbox配置技术要点全解析 前言 首先&#xff0c;请问大家几个小小问题&#xff0c;你清楚&#xff1a; AUTOSAR框架下的CAN驱动关键词定义吗&#xff1f;是不是有些总是傻傻分不清楚呢&#xff1f;CAN驱动Mailbox配置过程中有哪些关键配置参…

Angular变更检测机制

前段时间遇到这样一个 bug&#xff0c;通过一个 click 事件跳转到一个新页面&#xff0c;新页面迟迟不加载&#xff1b; 经过多次测试发现&#xff0c;将鼠标移入某个 tab &#xff0c;页面就加载出来了。 举个例子&#xff0c;页面内容无法加载&#xff0c;但是将鼠标移入下图…

[面试] k8s面试题 2

文章目录 核心组件1.什么是 Kubernetes 中的控制器&#xff08;Controller&#xff09;&#xff1f;请提供一些常见的控制器类型。2.请解释一下 Kubernetes 中的 Ingress 是什么&#xff0c;以及它的作用。3.如何通过命令行在 Kubernetes 中创建一个 Pod&#xff1f;4.Stateful…

Pdf文件签名检查

如何检查pdf的签名 首先这里有一个已经签名的pdf文件&#xff0c;通过pdf软件可以看到文件的数字签名。 图1为签名后的文件&#xff0c;图2为签名后文件被篡改。 下面就是如何代码检查这里pdf文件的签名 1.引入依赖 <dependency><groupId>org.projectlombok<…

数据结构——单链表

目录 一.前言 二.链表表示和实现&#xff08;单链表&#xff09; 1.1 顺序表的优缺点 1.2 链表的概念及结构 1.3 打印函数 1.4 空间函数 1.5 尾插函数&#xff08;最最最麻烦的&#xff09; 1.5.1 尾插最关键部分&#xff01; 1.6 头插函数 1.7 尾删函数…

云流化:XR扩展现实应用发展的一个新方向!

扩展现实的发展已经改变了我们工作、生活和娱乐的方式&#xff0c;而且这才刚刚开始。扩展现实 (Extended reality, XR) 涵盖了沉浸式技术&#xff0c;包括虚拟现实、增强现实和混合现实。从游戏到虚拟制作再到产品设计&#xff0c;XR 使人们能够以前所未有的方式在计算机生成的…

#循循渐进学51单片机#指针基础与1602液晶的初步认识#not.11

1、把本节课的指针相关内容&#xff0c;反复学习3到5遍&#xff0c;彻底弄懂指针是怎么回事&#xff0c;即使是死记硬背也要记住&#xff0c;等到后边用的时候可以实现顿悟。学会指针&#xff0c;就是突破了C语言的一道壁垒。 2&#xff0c;1602所有的指令功能都应用一遍&#…

vue3——pixi初学,编写一个简单的小游戏,复制粘贴可用学习

pixi官网 小游戏效果 两个文件夹 一个index.html 一个data.js //data.js import { reactive } from "vue"; import { Sprite, utils, Rectangle, Application, Text, Graphics } from "pixi.js";//首先 先创建一个舞台 export const app new Applicat…

[Go疑难杂症]为什么nil不等于nil

现象 在日常开发中&#xff0c;可能一不小心就会掉进 Go 语言的某些陷阱里&#xff0c;而本文要介绍的 nil ≠ nil 问题&#xff0c;便是其中一个&#xff0c;初看起来会让人觉得很诡异&#xff0c;摸不着头脑。 先来看个例子&#xff1a; type CustomizedError struct {Err…

【面试必刷TOP101】 删除有序链表中重复的元素-I 删除有序链表中重复的元素-II

目录 题目&#xff1a;删除有序链表中重复的元素-I_牛客题霸_牛客网 (nowcoder.com) 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;删除有序链表中重复的元素-II_牛客题霸_牛客网 (nowcoder…

摩尔信使MThings实用功能盘点

“冗长的用户手册”与“精简的交互设计”之间势必产生一条信息鸿沟&#xff0c;现在就来盘点一下摩尔信使MThings有哪些隐蔽而实用的功能。 01 数据配置类 一键刷新 功能&#xff1a;快速读取所有位数据、寄存器数据的当前数值。 操作&#xff1a;双击“数值”列表头。 一键…

11:STM32---spl通信

目录 一:SPL通信 1:简历 2:硬件电路 3:移动数据图 4:SPI时序基本单元 A : 开/ 终条件 B:SPI时序基本单元 A:模式0 B:模式1 C:模式2 D:模式3 C:SPl时序 A:发送指令 B: 指定地址写 C:指定地址读 二: W25Q64 1:简历 2: 硬件电路 3:W25Q64框图 4: Flash操作注意…

MongoDB的搭建 和crud操作

MongoDB docker 下载 docker run --restartalways -d --name mongo -v /docker/mongodb/data:/data/db -p 27017:27017 mongo:4.0.6使用navcat工具使用MongoDB Crud操作 jar包 <dependency><groupId>org.projectlombok</groupId><artifactId>lom…

小小购物车案例(V3)

效果如下&#xff1a; 可以添加和减少商品个数&#xff08;最少个为1&#xff09;&#xff0c;在添加的时候总价格会随着改变&#xff0c;也可以点击按钮移除商品 代码分为三个模块&#xff08;html、js、css&#xff09; html部分&#xff1a; <!DOCTYPE html> <h…

计算机毕业设计 基于SSM+Vue的物资存储系统(以消防物资为例)的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

2023华为杯研究生数学建模竞赛选题统计+分析

2023年研赛的选题统计&#xff0c;我们主要基于根据两个平台投票统计。最终得出2023年研赛选题人数&#xff0c;这个结果仅供参考&#xff0c;但是应该具备一定的可信度。&#xff08;时间截止为22号中午1点&#xff09; 大家可以看到&#xff0c;AB题仅占10%&#xff0c;E题独…