1.数据类型简介
1.1.为什么需要数据类型
1.2.变量的数据类型
- JavaScript 是一种弱类型或者称动态语言。
- 变量的数据类型是由JS引擎,根据 = 右边变量值的数据类型来判断,运行完毕之后, 变量就确定了数据类型。
- JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型。
1.3.数据类型的分类
JS把数据类型分为两类:
- 简单数据类型
- 复杂数据类型
2.简单数据类型
2.1.简单数据类型有五类
- Number 数字型
- Boolean 布尔值类型
- String 字符串类型
- Undefined 未定义
- Null 空值
2.2.数字型 Number
可以用来保存整数、小数(浮点数)。
2.2.1.数字型进制
在JS中八进制前面加0,十六进制前面加 0x。
// 八进制在前面加0
var num1 = 012; //对应十进制的10
console.log(num1);
// 十六进制在前面加0x
var num2 = 0xa;
console.log(num2);
2.2.2.数字型范围
JS中数值的最大值和最小值。
// 数值的最大值和最小值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
2.2.3.数字型三个特殊值
- 无穷大
- 无穷小
- 非数字
// 数值的无穷大,无穷小,非数字
console.log(Number.MAX_VALUE * 255); // Infinity
console.log(-Number.MAX_VALUE * 255); // -Infinity
console.log('我是巴拉拉' - 255); // NaN
2.2.4.isNaN()
用来判断变量是否为数字,是数字返回false,不是数字返回true。
2.3.字符串 String
2.3.1.字符串引号嵌套
- 一定要有引号,JS里推荐用单引号 ’ ’ 。
- 内单外双 or 内双外单。
2.3.2.字符串转义符
转义符得包含在引号里面。
2.3.3.字符串长度(重要)
// 检测字符串的长度
var str = '好困啊啊!'
alert(str.length); // 页面弹出 5
2.3.4.字符串拼接
字符串 + 任何类型 = 拼接后的任何新字符串
// 字符串拼接
console.log('我是' + 'SB'); //字符串 我是SB
console.log('永远' + 255); // 字符串 永远255
console.log(12 + 34); // 数字型 46
console.log('12' + 34); // 字符串 1234
2.3.5.字符串拼接加强(重要)
口诀:引引加加
// 字符串拼接加强
var str = 6;
console.log('今天吃了' + str + '顿饭')
2.4.布尔型 Boolean
// 布尔型
var flag = true; // flag 布尔型
var flag1 = false; // flag 布尔型
console.log(flag + 1); // true参与加法运算当1来看
console.log(flag1 + 1); // false参与加法运算当0来看
2.5.Undefined 和 Null
// 如果一个变量声明未赋值,就是undefined未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable);
console.log(variable + '快乐老家'); // undefined快乐老家
console.log(variable + 1); // NaN undefined和数字相加结果是NaN
//null空值
var space = null;
console.log(space + '快乐老家'); // null快乐老家
console.log(space + 1); // 1
3.获取变量数据类型
3.1.获取检测变量的数据类型
- 方法1——typeof 可用来获取检测变量的数据类型
// 获取检测变量的数据类型 typeof 的用法
var num = 18;
console.log(typeof num) // 结果 number
一些发现
// prompt取过来的值是string型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
- 方法2——在chrome浏览器的后台看字体的颜色
3.2.字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8, 9, 10
- 字符串字面量:‘黑马程序员’, “大前端”
- 布尔字面量:true,false
4.数据类型转换
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
4.1.转换为字符串
- 最常用第3种隐式转换
// 转换为字符串
// 1. toString()
var num = 10000;
var str = num.toString();
console.log(str);
// 2. String(变量)
console.log(String(num));
// 3.利用 + 拼接字符串的方法实现转换效果,也称为隐式转换
console.log(num + '');
4.2.转换为数字型(重点)
- 重点掌握第1、2种
// 转换为数字型
// 1. parseInt(变量) 可以把字符型转换为数字型,得到的是整数。
// var age = prompt('请输入您的年龄');
// console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('12px')); // 12 会去掉px这个单位
console.log(parseInt('rem12px')); // NaN
// 2.parseFloat(变量) 可以把字符型转换为数字型,得到的是小数 浮点数。
console.log(parseFloat('3.94')); // 3.94
console.log(parseFloat('12px')); // 12 会去掉px这个单位
console.log(parseFloat('rem12px')); // NaN
// 3.利用Number(变量)
console.log(Number('123')); // 123 数字型
// 4.利用算数运算 - * / 隐式转换
console.log('12' - 0); // 12 数字型
console.log('123' - '120'); // 3 数字型
console.log('123' * 1); // 123 数字型
- 案例练习见【day10-简单加法器案例.html】
/*① 先弹出第一个输入框,提示用户输入第一个值 保存起来
② 再弹出第二个框,提示用户输入第二个值 保存起来
③ 把这两个值相加,并将结果赋给新的变量(注意数据类型转换) ④ 弹出警示框(alert) , 把计算的结果输出 (输出结果) */
var str1 = prompt('请输入第一个值');
var str2 = prompt('请输入第二个值');
var result = parseFloat(str1) + parseFloat(str2);
alert('总和是' + result);
- 案例练习见【day10-计算年龄案例.html】
/* ① 弹出一个输入框(prompt),让用户输入出生年份 (用户输入)
② 把用户输入的值用变量保存起来,然后用今年的年份减去变量值,结果就是现在的年龄 (程序内部处理)
③ 弹出警示框(alert) , 把计算的结果输出 (输出结果 */
var year = prompt('请问您的出生年份是多少')
var age = 2022 - year; // year 取过来是字符串,但这里是减法,有隐式转换。
alert('您今年已经' + age + '岁了');
4.3.转换为布尔型
- 代表空、否定的值会被转换为false,如’'、0、NaN、null、undefined
- 其余都被转换为true