JavaScript 基础一 var 变量;简单数据类型--数字型、字符串型、布尔型等,以及他们的转换。parseInt、Float、变量.toString()等
1. 变量概述
通俗:变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改
1.2 变量在内存中的存储
本质:变量是程序在内存中申请的一块用来存放数据的空间。
1.3 变量的使用
变量在使用时分为两步:
- 声明变量
var age; // 声明一个 名称为age 的变量
var 是一个 JS关键字,用来声明变量( variable 变量的意思 )。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
- 赋值
age = 10; // 给 age 这个变量赋值为 10
= 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
变量值是程序员保存到变量空间里的值
1.4 变量的初始化
var age = 18; // 声明变量同时赋值为 18
声明一个变量并赋值, 我们称之为变量的初始化
1.5 变量的语法扩展(三个特殊情况)
// 1.更新变量
var age = '18';
console.log(age);
age = '81'
console.log(age);
// 2.同时声明多个变量
var age = '18',
name = 'wangsihua',
address = 'yangluo',
gz = '10000';
// 3.声明变量的特殊情况
// 1.只声明不赋值 结果是? undefined 未定义的
var sex;
console.log(sex);
// 2.不声明 不赋值 直接使用某个变量会报错 (这个报错了,下面的代码全部无法使用)
// console.log(tel);
// 3.不声明直接赋值使用
age = '10';
console.log(age);
1.6 小结
为什么需要变量?
因为我们一些数据需要保存,所以需要变量
变量是什么?
变量就是一个容器,用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?
变量是内存里的一块空间,用来存储数据。
声明变量的本质是什么?
声明变量本质是去内存申请空间。
变量怎么使用的?
我们使用变量的时候,一定要声明变量,然后赋值
什么是变量的初始化?
声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些?
变量名尽量要规范,见名知意——驼峰命名法
交换2个变量值的思路?
创建一个值为空的临时变量 temp,互相赋值。
2.0 数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
2.1 变量的数据类型
在代码运行时,变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的,运行完毕之后, 变量就确定了数据类型
JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
2.2 数据类型的分类
JS 把数据类型分为两类:
- 简单数据类型 (Number,String,Boolean,Undefined,Null)
- 复杂数据类型 (object)
3.0 简单数据类型(基本数据类型)
3.1 数字型(Number)
JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
// 1.有两种数字型
var num1 = 18; //这是一种
console.log(num1);
var num2 = 3.14; // 带小数的
console.log(num2);
// 2.八进制 0-7 我们程序里面数字前面加 0 表示八进制
var num3 = 010; // '010'八进制转换为10进制就是 8
console.log(num3);
var num4 = 012; // 为 8+2=10
console.log(num4);
// 3.十六进制 0-9 a-f 数字前面加 0x 表示十六进制
var num5 = 0x9; // 值为9
console.log(num5);
var num6 = 0xa; // 值为10
console.log(num6);
// 4.数字型最大值
console.log(Number.MAX_VALUE);
// 5.数字型最小值
console.log(Number.MIN_VALUE);
// 6.数字型的三个特殊值
// 1. 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
// 2. 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 负的无穷大
// 3. 非数字 (Not a number)
console.log('pink老师' - 100); // NaN
// 7.isNaN() 这个方法用来判断非数字
// 并且返回一个值 如果是数字返回的是 false 如果不是返回的是 true
console.log(isNaN(12)); // false
console.log(isNaN('pink')); // true
3.2 字符串型 String
// 'pink' 'pink老师' '12' 'true' 都是字符串型
1. js 可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,内双外单)
var str = '我\\是\'一\"个\t"高富帅"\b的\n程序员'
console.log(str);
2. 字符串转义符
/* 类似html里面的特殊字符。 转义符都是\开头的
\n 换行符, n 是 newline 的意思
\\ 斜杠\
\'' 单引号
\" 双引号
\t tab 缩进
\b 空格, b是 blank 的意思 */
3. 检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.length); //15
4.字符串的拼接
alert('hello' + ' ' + 'world') // hello world
alert('100' + 100) //100100
alert(100 + 100) //200
5. 拼接加强
var age = 18;
console.log('pink老师' + age + '岁啦');
</script>
3.3 布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0
console.log(true + 1); // 2
console.log(false + 1); // 1
3.4 Undefined 和 Null
// 如果一个变量声明未赋值,就是 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'); // spacepink
console.log(space + 1); //1
console.log(space + true); //1
4.0 获取检测变量的数据类型—typeof
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);
4.1 字面量
字面量是在源代码中的一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8,9,10
字符串字面量:'黑马程序员'''大前端'
布尔字面量:true,false */
5.0 数据类型转换
使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换:
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
5.1 转换为字符串
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 + '');
console.log(typeof num);
toString() 和 String() 使用方式不一样。
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
5.2 转换为数字型(重点)
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.94')); // 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'); // 3
console.log('123' * 1); // 123
</script>
注意 parseInt 和 parseFloat 单词的大小写,这2个是重点
隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
5.3 转换为布尔型
代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true
方式:
Boolean(0/Nan/null) 这些都是错的