数据类型及转换

数据类型

数据可以有多种类型，比如可以是数字（100，234…），也可以是一个文本（‘棠哥’ 、‘棠哥真帅！’，‘小姐姐真漂亮’）、等等…

我们需要学习数据类型，之后可以轻松的通过js操作不同的数据。

再JavaScript中数据类型分为简单数据类型和复杂数据类型。

**简单数据类型：**数字（number）、字符串（string）、布尔（boolean）、undefined（声明未赋值）、null（空类型）

**复杂数据类型：**数组（array）、函数（function）、对象（object）

---------------------------

数字类型（number）

就是数字

整数（进制：了解）

在javascript中表示一个数字，除了有我们常用的十进制11， 22，33等，还可以使用八进制、十六进制表示等。

• 十进制 （0~9 逢十进一）

//我们最常用的进制，逢10进1
var num = 10;
var num = 200;

• 八进制（0~7 逢八进一）

// 0开头的数字（0只是一个标识），逢8进1
var num1 = 07;
var num2 = 012;

// 八进制 0-7  逢八进一 ， 10
var ba = 0321; 
// 07 = 7
// 012 = 8*1 + 2 = 10
// 022 = 2*8 + 2 = 18
console.log(ba);

• 十六进制（0~9，a,b,c,d,e,f 逢十六进一）

// 0x开头的数字，逢16进1，  数字范围1-9A-F
var num = 0xA;// 10
var num = 0x12;//1*16 + 2 = 18

tips ： 计算机只认识二进制，所有的代码最终都会转换成二进制数据

浮点数（小数）

浮点数就是小数

浮点数形式

var num = 0.1;

科学计数法（了解）

//e 10的多少次方  前面得有数字
//e+4 10^4
//e-4 10^-4
//当一次数字很大的时候，可以用科学计数法来表示
var num = 1e+4;  //1乘以10的4次方
var num = 1e-4;//1乘以10的-4次方

浮点数精度丢失问题（了解）

尽量不要使用小数进行比较

计算机在计算小数时，有时计算会不准确。

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;// 特殊情况
//尽量少用浮点数进行运算，不要让浮点数进行比较。

字符串类型（string）

使用双引号 " 或者 ' 包裹起来的字符

字符串的格式

//双引号和单引号必须成对出现  以单引号开始到单引号结束都为字符串/以双引号开始到双引号结束都为字符串
var str = 'hello world';
var str = "hello world";

字符串长度

每一个字符串都有一个length属性，表示字符串长度（字符的个数）

var str = "akdjflksjdflk";
console.log(str.length);

转义字符

1、如果要打印：好看的’外表’千篇一律

2、如果要打印：有趣的"灵魂"万里挑一

3、如果要打印：好看的’外表’千篇一律，有趣的"灵魂"万里挑一

怎么打印呢？？

// 单引号和双引号可以互相嵌套，但是不能嵌套自己
// 如果需要打印单引号和双引号，可以使用转义符
// ' => \'
// " => \"
console.log('你是喜欢\'好看\'的人，还是\"有趣\"的人');

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\&	和号
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

字符串拼接（拼串）

字符串类型可以通过 + 进行拼接

比如：

var str = 'hello' + 'world';
console.log(str);// helloworld

+号的规则：

• 如果两边只要有一个是字符串类型，就是拼接的功能
• 如果两边都是数字类型，此时就是加法运算

---

数字 + 数字 => 加法运算

// 第一种情况 ： 数值 + 数值
var a = 100;
var b = 100;
console.log(a + b);// 200 加法

字符串 + 字符串 => 拼接

// 第二种情况 ： 字符串 + 字符串
var a = "hello";
var b = "itcast";
console.log(a + b);// helloitcast 字符串拼接功能

数字 + 字符串 => 拼接

// 第三种情况 ： 字符串 + 数值
var a = 100;
var b = 'abc';
console.log(a + b);// 100abc 字符串拼接功能

总结：

• +号能将两个字符串拼接成一个字符串。
• +号能将两个数字进行相加
• 如果+号两边有一个是字符串，就是拼串的功能。

ヾ(๑╹◡╹)ﾉ"小练习

// 下列哪一个选项可以打印出：我是棠哥
var name = '棠哥';
// A、console.log ( '我是' + 'name' );
// B、console.log ( '我是name' );
// C、console.log ( '我是' + name );

布尔类型（boolean）

布尔类型表示真或者假，只有两个值！！

真、正、成立：true

假、反、不成立：false

一般用于比较！！！

console.log( 3 > 2 );// true => 表示真/成立
console.log( 3 < 2 );// false => 表示假/不成立

注意点：

• 写法上区分大小写：不要写成True或者是False
• ‘true’ 和 true是两个东西，带引号的是字符串！！

undefined（声明未赋值）

是一个非正常值的类型（声明未赋值时会出现，出现表示不符合规范！）

var num;
console.log( num );// undefined 表示变量声明当未赋值

null

是一个非正常值的类型（一般出现于获取页面元素未获取到的情况、web API阶段会遇到）

// 在web api 阶段才会遇到这种情况！先有印象
var div = document.getElementById('id');
console.log( div );

如何查看数据的类型（了解）

可以通过typeof来查看数据的类型

var num = 20 ;// number
var str = 'abc';// string
var bool = true;// boolean
var un = undefined;// undefined
var nu = null;// object

// 可以通过typeof来查看数据的类型
console.log( typeof num );// number
console.log( typeof str );// string
console.log( typeof bool );// boolean
console.log( typeof un );// undefined
console.log( typeof nu );// object (特殊情况，记忆即可)

控制台中打印的数据颜色的不同，可以简单的看出数据的类型

• Number类型的数据偏向蓝色
• String类型的数据是黑色
• Boolean类型的数据偏向紫红色
• Undefined的数据颜色是灰色
• Null的数据颜色是灰色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R2bGCpgk-1571628869811)(mdImg/数据类型颜色.png)]

---------------------------

字面量赋值与变量赋值（了解）

• 字面量（直接量）： 值是固定不变的，浏览器可以直接识别的量

  简单数据类型比较简单，浏览器可以直接认识，都属于字面量（直接量）

  // 不需要打印直接一眼就能看出来是什么类型的数据，就是字面量
  console.log(123);
  console.log("字符串");
  console.log(true);
  console.log(undefined);
  console.log(null);
  

• 字面量赋值与变量赋值

  // 字面量赋值（直接量赋值）
  var num = 123；// 直接把具体的值赋值给num变量
  // 变量赋值 
  var age = num； // 通过num这个变量，把num变量的值给age变量
  

注意点：

打印字符串务必注意字符串是用引号包裹起来的，没有用引号包裹起来的文本会被当做变量！！！

一下结果会怎样？？

// 刚刚开始很容易犯错的点：想打印一个字符串，但是忘记写分号，最后打印成一个变量了。
console.log("abc");
console.log(abc);