JavaScript基础语法——数据类型

一条咸鱼o*v*o

已于 2022-04-15 17:57:13 修改

阅读量779

点赞数

文章标签： javascript

于 2022-04-09 13:14:04 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/124044173

版权

1、数据类型简介

1.1 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分析成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型就是数据的类别符号，比如姓名”张三“，年龄18，这些数据的类型是不一样的。

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定

var num=10; //num属于数字型
//js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

在代码运行时，变量的数据类型是由JS引擎根据等号右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:

var x=6;      //x为数字
x="Bill"; //x为字符串

1.3 数据类型的分类

JS把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined ,Null）
复杂数据类型（Object）

2、简单数据类型（基本数据类型）

JavaScript中简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值，如21、0.21	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如”张三“ 注意JS里面，字符串都带引号	""
Undefined	var a;声明了变量a但是没有给值，此时a=undefined	undefined
Null	var a=null; 声明了变量a为空值	null

2.2 数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）

var age =21;   //整数
var Age=21.3747; //小数

1.数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

var num1=010; //八进制0~7 转换成十进制就是8
var num2=0xa; //十六进制0~9以及A~F 转换成十进制就是10

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加0x

2.数字型范围

JavaScript中数值的最大和最小值

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

3.数字型三个特殊值

alert(Infinity); //Infinity
alert(-Infinity); //-Infinity
alert(NaN);       //NaN

Infinity，代表无穷大，大于任何数值
-Infinity，代表无穷小，小于任何数值
NaN，Not a number，代表一个非数值

console.log(Number.MAX_VALUE * 2);  //结果是Infinity 无穷大
console.log(-Number.MAX_VALUE * 2);  //结果是-Infinity 无穷小
console.log('郭老师' - 100);  //结果是NaN 非数值

4.isNaN()

用来判断一个变量是否为非数字的类型，返回true或者false

var userAge = 21 ;
var isok = isNaN(userAge);
console.log(isNum);      //false ,21不是一个非数字
var userName = "andy";
console.log(isNaN(userName)); //true ,"andy"是一个非数字

console.log(isNaN(12)); //结果是False
console.log(isNaN('tom')); //结果是true

2.3 字符串型 string

字符串可以是引号中的任意文本，其语法为双引号 ""和单引号''

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号

1.字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

2、字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符，但是这些转义字符写到引号里面

转义符都是\开头的，常用的转义符及其说明入下：

转义符	解释说明
\n	换行符，n是newline的意思
\\	斜杠\
\'	'单引号
\"	"双引号
\t	tab缩进
\b	空格，b是blank的意思

var str = "我是一个\n高富帅";
console.log(str);

案例：弹出网页警示框

<script>
        alert('我没事就吃溜溜梅你别管我了\n我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了我没事就吃溜溜梅你别管我了');
    </script>

3.字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度

<script>
        var str = '我是你爸爸 yesok';
        console.log(str.length);    //结果是11
    </script>

4.字符串拼接

多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任意类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

+号总结口诀：数值相加，字符相连

console.log('沙漠' + '骆驼');  //'沙漠骆驼'
console.log('我今年' + 18);   //'我今年18'
console.log('我是' + true);   //'我是true'
console.log(12 + 12);         //24
console.log('12' + 12);       //'1212'

5.字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀 ”引引加加“，删掉数字，变量写加中间

案例：显示年龄

这是利用JS编写的一个非常简单的交互效果程序

<script>
        var age = prompt('请输入你的年龄');
        alert('你今年' + age + '岁了');
    </script>

2.5 布尔型 Boolean

布尔类型有两个值：true和false，其中true表示真（对），而false表示假（false）

布尔型和数字相加的时候，true的值为1，false的值为0

console.log(true + 1); //2
console.log(false + 1); //1

2.6 Undefined 和Null

一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或相加时，注意结果）

var str;  //如果一个变量声明未赋值，就是undefined未定义数据类型
console.log(str);  //结果是undefined

var variable= undefined;
console.log(variable + 'pink');  //undefinedpink
console.log(variable + 1);  //NaN  undefined 和数字相加，结果是NaN

var space = null;
console.log(space + 'pink');  //nullpink
console.log(space + 1);  //1

3.获取变量数据类型

3.1 获取检测变量的数据类型

typeof 可以用来获取检测变量的数据类型

 <script>
        var num = 10;
        console.log(typeof num); //结果是number
        var str = 'pink';
        console.log(typeof str);  //结果是string
        var flag = true;
        console.log(typeof flag);  //结果是boolean
        var vari = undefined;
        console.log(typeof vari);  //结果是undefined
        var timer = null;
        console.log(typeof timer); //结果是object  
    </script>

注意：prompt 取过来的值是字符型的


        var age = prompt("请输入你的年龄");
        console.log(age);
        console.log(typeof age);

不同的数据类型在控制台显示的颜色不一样，数字型是蓝色，字符型是黑色。。。

 <script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>

3.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

数字字面量：8，9，10
字符串字面量：'黑马程序员'，"大前端"
布尔字面量：true， false

4.数据类型转换

4.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型，通俗来说，就是把一种数据类型的变量转换成另外一种数据类型

我们通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

4.2 转换为字符串

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num+ '我是字符串');

<script>
        var num = 10;
        console.log(num.toString());
        console.log(String(num));
        console.log(num + '');
    </script>

toString()和String() 使用方式不一样
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换

4.3 转换为数字型（重点）

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型得到的是整数	parseInt('78')
parseFloat(string)函数	将string类型转成浮点数数值型得到的是小数浮点数	parseFloat('78.21')
Number()强制转换函数	将string类型转换为数值型	Number('12')
js 隐式转换(- * /)	利用算术运算隐式转换为数值型	'12' - 0

隐式转换是我们在进行算术运算的时候，JS自动转换了数据类型

<script>
        // var age = prompt('请输入你的年龄');
        // console.log(parseInt(age));
        console.log(parseInt('3.14'));  //3
        console.log(parseInt('3.94'));  //3 不会进位
        console.log(parseInt('120px'));  //120 会去掉px单位
        console.log(parseInt('rem120px'));  //NaN

        console.log(parseFloat('3.14'));  //3.14
        console.log(parseFloat('120px'));  //120 会去掉px单位
        console.log(parseFloat('rem120px'));  //NaN
        console.log(parseFloat('2'));  //2
    </script>


        var str = '123'
        console.log(Number(str)); //123
        console.log(Number('100')); //100

        console.log('123' - 1); //122
        console.log('123' * '2');  //246

案例1：计算年龄

<script>
        var year = prompt("请输入出生年份");
        var age = 2022 - year; //year取过来是字符串，-隐式转换
        alert('你今年' + age + '岁了');
    </script>

案例2：简单加法器

<script>
        var num1 = prompt('请输入第一个数字');
        var num2 = prompt('请输入第二个数字');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('你的结果是：' + result);
    </script>

4.4 转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean('true')

代表空、否定的值会被转换为false，如''、0、NaN、null、undefined
其余值都会被转换为true

<script>
        console.log(Boolean(''));  //false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(NaN));//false
        console.log('-----------------------');
        console.log(Boolean(12));  //true
        console.log(Boolean(true));//true
        console.log(Boolean('pink'));//true

    </script>

拓展知识

<script>
        var myname = prompt('请输入你的名字');
        var age = prompt('请输入你的年龄');
        var sex = prompt('请输入你的性别');
        alert('你的姓名是：' + myname + '\n你的年龄是：' + age + '\n你的性别是' + sex);
    </script>

一条咸鱼o*v*o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础语法——数据类型

1、数据类型简介1.1 为什么需要数据类型在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分析成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别符号，比如姓名”张三“，年龄18，这些数据的类型是不一样的。1.2 变量的数据类型变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运
复制链接

扫一扫