0
点赞
收藏
分享

微信扫一扫

javascript(02-数据类型)

云岭逸人 2022-03-18 阅读 183
javascript笔记前端经验经验分享

文章目录

一 数据类型简介

1.1 为什么需要数据类型

  • 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
  • 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

1.2 变量的数据类型

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

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

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

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

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

1.3 数据类型的分类

JS 把数据类型分为两类：

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）
  • 复杂数据类型 （object)
<!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>Document</title>
    <script>
        // int num = 10;  java 
        // var num; // 这里的num 我们是不确定属于哪种数据类型的
        var num = 10; // num 属于数字型 
        // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink'; // str 字符串型
        // js是动态语言 变量的数据类型是可以变化的
        var x = 10; // x 是数字型 
        x = 'pink'; // x 字符串型
    </script>
</head>
<body>
</body>
</html>

二 简单数据类型

2.1 javasript简单数据类型及说明如下：

简单数据类型说明默认值
Number数字型，包含整型值和浮点型值，如21、0.210
Boolean布尔值类型,如true、false，等价于1和0false
String字符串类型，如“张三“注意咱们is里面，字符串都带引号" "
UndefinedVar a声明了变量a但是没有给值，此时a=undefinedundefined
Nullvara=null:声明了变量a为空值null
<!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>Document</title>
    <script>
        var num = 10; // num 数字型 
        var PI = 3.14 // PI 数字型
            // 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1); //  010  八进制 转换为 10进制 就是  8 
        var num2 = 012;
        console.log(num2);
        // 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
        // 7. 非数字
        console.log('pink老师' - 100); // NaN
    </script>
</head>
<body>
</body>
</html>

2.2 数字型Number

数字类型=整数+浮点型（小数）

进制：

  // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;

范围：

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

三个特殊值：

alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN
  • Infinity ，代表无穷大，大于任何数值
  • -Infinity ，代表无穷小，小于任何数值

  • isNaN()

在这里插入图片描述

        console.log(isNaN(21));//false
        var str="ssss";
        console.log(isNaN(str));//true
        console.log(isNaN(' '));//false

2.3字符串型String

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

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

字符串引号嵌套

js可以单引号嵌套双引号，或双引号嵌套单引号【外单内双/外双内单】

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串转义符

在这里插入图片描述

字符串长度

  • 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

字符串拼接

  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112 

console.log('pink老师' + 18);           // 只要有字符就会相连 
var age = 18;
// console.log('pink老师age岁啦');       // 这样不行哦
console.log('pink老师' + age);          // pink老师18
console.log('pink老师' + age + '岁啦');  // pink老师18岁啦
  • 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
  • 变量是不能添加引号的，因为加引号的变量会变成字符串
  • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

<!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>Document</title>
    <script>
        // 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
        // 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理）
        // 使用alert语句弹出警示框（输出结果）
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>
</head>
<body>
</body>
</html>

2.4布尔值Boolean

  • 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
  • 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
<!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>Document</title>
    <script>
        var flag = true; // flag 布尔型 
        var flag1 = false; // flag1 布尔型
        console.log(flag + 1); // true 参与加法运算当1来看
        console.log(flag1 + 1); // false 参与加法运算当 0来看
        // 如果一个变量声明未赋值 就是 undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); // undefinedpink
        console.log(variable + 1); // NaN  undefined 和数字相加 最后的结果是 NaN
        // null 空值
        var space = null;
        console.log(space + 'pink'); // nullpink
        console.log(space + 1); // 1
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

undefined+null

  • 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN
  • 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

三 获取变量的数据类型

typeof 可用来获取检测变量的数据类型
在这里插入图片描述
在这里插入图片描述

<!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>Document</title>
    <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
        // prompt 取过来的值是 字符型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>
</head>
<body>
</body>
</html>

四 数据类型的转换

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

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

* 转化为字符串

在这里插入图片描述

  • toString() 和 String() 使用方式不一样。
  • 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。
<!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>Document</title>
    <script>
        // 1. 把数字型转换为字符串型 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        // 2. 我们利用 String(变量)   
        console.log(String(num));
        // 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
        console.log(num + '');
    </script>
</head>
<body>
</body>
</html>

* 转化为数字型【重点】

在这里插入图片描述

  • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
  • 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型
<!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>Document</title>
    <script>
        // var age = prompt('请输入您的年龄');
        // 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
        // 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
        // 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
        console.log(parseFloat('3.14')); // 3.14
        console.log(parseFloat('120px')); // 120 会去掉这个px单位
        console.log(parseFloat('rem120px')); // NaN
        // 3. 利用 Number(变量) 
        var str = '123';
        console.log(Number(str));
        console.log(Number('12'));
        // 4. 利用了算数运算 -  *  /  隐式转换
        console.log('12' - 0); // 12
        console.log('123' - '120');
        console.log('123' * 1);
    </script>
</head>

<body>

</body>

</html>

案例一：计算年龄

在这里插入图片描述

// 1. 弹出输入框，输入出生年份，并存储在变量中  
var year = prompt('请输入您的出生年份：');  // 用户输入
//2. 用今年减去刚才输入的年份   
var result = 2019 - year;               // 程序内部处理
//3. 弹出提示框  
alert('您的年龄是:' + result + '岁');     // 输出结果

案例二：加和器

在这里插入图片描述

<!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>Document</title>
    <script>
        // 先弹出第一个输入框，提示用户输入第一个值  保存起来
        // 再弹出第二个框，提示用户输入第二个值  保存起来
        // 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）  
        // 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
        var num1 = prompt('请您输入第一个值：');
        var num2 = prompt('请您输入第二个值：');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('您的结果是:' + result);
    </script>
</head>

<body>

</body>

</html>

转换为布尔值

在这里插入图片描述

<!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>Document</title>
    <script>
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log('------------------------------');
        console.log(Boolean('123'));
        console.log(Boolean('你好吗'));
        console.log(Boolean('我很好'));
    </script>
</head>

<body>

</body>

</html>

五 拓展

1. 解释型语言和编译型语言

  • 计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
    在这里插入图片描述

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同

  • 编译器是在代码执行之前进行编译，生成中间代码文件

  • 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

2. 执行过程

在这里插入图片描述
通俗讲法：
类似于请客吃饭：

  • 编译语言：首先把所有菜做好，才能上桌吃饭
  • 解释语言：好比吃火锅，边吃边涮，同时进行

3. 标识符、关键字、保留字

  • 标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
    标识符不能是关键字或保留字
  • 关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。
  • 保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

六 课后作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1=prompt('请输入第一个数：');
        var num2=prompt('请输入第二个数：');
        var temp=parseInt(num1);
            num1=parseInt(num2);
            num2=temp;
        alert(num1+'  '+num2);
           </script>
	</head>
	<body>
	</body>
	</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1=prompt('请输入第一个数：');
        var num2=prompt('请输入第二个数：');
        var temp=parseInt(num1);
            num1=parseInt(num2);
            num2=temp;
        alert(num1+'  '+num2);
        var str=prompt('您的姓名：');
        var age=prompt('您的年龄：');
        var sex=prompt('您的性别：');
        alert('您的姓名'+str+'\n'+ '您的年龄：'+age +'\n'+'您的性别：'+sex);
    </script>
	</head>
	<body>
	</body>
	</html>
举报

相关推荐

ts学习02-数据类型

spark大数据分布式

python基础02-数据类型&类型转换

python

02-前端-javaScript

javascript前端javahtml类型转换Python后端开发

02-进制转换、基本数据类型和运算符

进制补码反码编程语言

JavaScript数据类型

javascript

JavaScript 数据类型

动态类型字符串javascriptLinux系统/运维

JavaScript【数据类型】

javascript开发语言ecmascript

JavaScript（数据类型）

字符串数据类型字面量JavaScript前端开发

【JavaScript】数据类型

javascript字符串数据类型JavaScript前端开发

细说JavaScript的数据类型（JavaScript的数据类型详解）

字符串浮点数类型转换JavaScript前端开发
0 条评论