零基础无痛 JS 学习---数据类型篇

甜味弥漫
45 阅读7分钟
学习目标
  • 能够说出5 种简单数据类型
  • 能够使用 typeof 获取变量的类型
  • 能够说出1~2种转换类型为数值型的方法
  • 能够说出1~2种转换为字符型的方法
  • 能够说出什么是隐式转换

1.数据类型简介

1.1为什么需要数据类型？

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

1.2变量的数据类型

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

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

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

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

var x = 18;       //x 是数字型
var x = '甜味弥漫'//x 是字符串型

1.3数据类型的分类

JS 把数据类型分为两类：

  • 简单数据类型（Number,String,Boolean,Undefined,Null,Bigint,Symbol）
  • 复杂数据类型（Objecte）

2.简单数据类型

简单数据类型(基本数据类型)

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

3e07301ef283edf3e987fef4817ccd4d.jpg

2.1 数字型 Number

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

var age = 18;      //整数
var Age = 18.123; //小数

1. 数字型进制 最常见的进制有二进制，八进制，十进制，十六进制。

// 1.八进制  0~7  我们程序里面数字前面加0o 表示八进制
var num1 = 0o10;
console.log(num1); // 010 八进制 转换10进制 就是 8
var num2 = 012;
console.log(num2); // 10
// 2.十六进制   0 ~ 9   a ~ f    数字的前面加 0x 表示十六进制
 var num3 = 0xf5;  
console.log(num3);  // 245

2. 数字型范围 JS 中数值的最大值和最小值

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

3. 数字型三个特殊值

  • Infinity,代表无穷大，大于任何数值

  • -Infinity,代表无穷小，小于任何数值

  • NaN,Not a number,代表一个非数值

4. isNaN()

这个方法用来判断非数字，并且返回一个值，如果是数字返回的是 false 反之则是 true

console.log(isNaN(12));    //false
console.log(isNaN('蜗牛')) // true

2.2 字符串 String

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

093d7a86a919a4a28a2b98d298da25df.png

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

1. 字符串嵌套 JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

var strMsg = '蜗牛是真“牛”'； // 可以用‘’包含“”
var strMsg2 = "蜗牛是真‘牛’"  // 也可以用“”包含‘’
//常见错误
var badQuotes = 'what on earth?" //报错，不能单双引号搭配

2. 字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符如下：

1ae96b0f868dfa0ac4411724d1226cd3.jpg

3. 字符串长度

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

var str = 'my name is snail';
console.log(str.length);             //  显示 16

4. 字符串的拼接

  • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

  • 拼接前会把字符串相加的任何类型转成字符串，再拼接成一个新的字符串

console.log('甜味' + '弥漫')； // 甜味弥漫
console.log('蜗牛'+ 18)；     //  蜗牛18 
console.log('蜗牛'+ true)；  //  蜗牛true
console.log('12' + 12)；    //  1212

2.3 布尔类型

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

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

var flag = true;  // flag 布尔型
var flag1 = false;// flag1 布尔型

console.log(flag + 1)  // 2   true 参与加法运算当 1 看
console.log(flag1 + 1)  // 1   tfalse 参与加法运算当 2 看

2.4 undefined 和 null

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

var variable = undefined;
console.log(variable + 'snail');  // undefinedsnail
console.log(variable + 1);        // NaN

一个声明变量给null 值，里面存的值为空（学习对象时，我们继续研究null）

var empty = null;
console.log(empty +'snail' )； // nullsnail
console.log（empty + 1）；     // 1

2.5 symbol(ES6新增)

表示唯一的，不可变的值，常用于对象的唯一属性名。

var s1 = Symbol('foo');
var s2 = Symbol('foo');
console.log(s1 === s2); // false，每个Symbol都是唯一的
console.log(typeof s1); // "symbol"

2.6 bigint(ES2020新增)

const bigNum = 9007199254740991n; // 在数字后面加 'n' 
console.log(typeof bigNum); // "bigint"

3. 获取变量数据类型

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

var num = 10;
console.log(typeof num);  // number
var str = 'snail'
console.log(typeof str);  // string
var flag = true
console.log(typeof flag);  // boolean
var vari = undefined;
console.log(typeof vari);  // undefined
var empty = null;
console.log(typeof empty);  // object

null 是个例外，讲到object 的时候会详细讲

字面量

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

  • 数字字面量：8，9，10

  • 字符串字面量：'甜味弥漫'，'大蜗牛'

  • 布尔字面量：true,false

数据类型转换

什么是数据类型转换

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

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

  • 转换为字符串类型

  • 转换为数字型

  • 转换为布尔型

4.1 转换为字符串

e87b1bd2c4a648afe419b85525552b0e.jpg

// 1. toString()
var num = 10;
var str = num.toString();
console.log(typeof str);   //string

// 2.String()
console.log(String(num));
console.log(typeof String(num));  //string

// 3. + 拼接字符串的方法实现转换效果
var num = 1;
str = num + '我是字符串'
console.log(typeof str);  // string

  • toString()和String()使用方式不一样

  • 三种转换方式，我们更喜欢第三种加号拼接字符串转换方式，这一种方式也称为隐式转换。

4.2 转换为数字型（重点）

b11c1c6810c52242b6959291a76b7d6f.jpg

  • 注意 parrseInt和 parseFloat 单词的大小写，这两个是重点

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

实战1：计算年龄

该项目要求在页面中弹出一个输入框，我们输入出生年份之后，能计算我们的年龄。

答案见评论区！

实战2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

答案见评论区！

4.4 转换为布尔型

c5909655ddd44dd4ad07cd99261093d5.jpg

  • 代表空，否定的值会被转换成false，如“，0，NaN,null,undefined

  • 其余值都会被转换为true

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(Boolean('蜗牛'));   //true
console.log(Boolean(12));   //true

See u next blog!

avatar
文章
阅读
粉丝