javascript——变量、数据类型
文章目录
-
- 输入输出语句
- 变量
-
- 概念
- 变量的使用
-
- 案例1
- 案例2
- 变量的语法扩展
-
- 1.更新变量
- 2.同时声明多个变量
- 3.声明变量的特殊情况
- 变量的命名规范
-
- 案例3：交换两个变量的值
- 数据类型
-
- 简介
-
- 为什么需要数据类型
- 变量的数据类型
- 数据类型的分类
-
- 简单数据类型(基本数据类型)
- 数字型进制
- 数字型范围
- 三个特殊值
- isNaN()
- 字符串类型String
- 布尔型Boolean
- undefined和null
- typeof检测变量数据类型
- 数据类型转换
输入输出语句
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台控制打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可输入 | 浏览器 |
测试代码
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>Documenttitle>
<script>
// 这是一个输入框
prompt("请输入你的年龄");
//alert弹出警示框
alert("你的年龄是：");
//console 控制台输出，给程序员测试用的
console.log("hello feliks");
script>
head>
<body>
body>
html>
变量
概念
变量就是一个装东西的盒子
变量是用于存放数据的容器，我们通过变量名获取数据，也可修改；
本质：变量是程序在内存中申请的一块用来存放数据的空间
类比 酒店房间，一个房间可以看作一个变量
变量的使用
- 声明变量
var age;//声明一个名为age的变量
- var 是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
- age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
- 赋值
age = 20;//给age 这个变量赋值为20
变量值是程序员保存到变量空间里的值
- 变量的初始化
var age = 20;//声明变量同时赋值为20
声明一个变量并赋值，称之为变量的初始化
案例1
有个叫卡卡西的人在旅店登记的时候前台让他填一张表，这张表里的内容要存到电脑上，表中的内容有;姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下:
我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是[email protected]，我的工资2000
var myName = "旗木卡卡西";
var address = "木叶";
var age = 30;
var email = "[email protected]";
var salary = 2000;//工资
alert("我叫"+myName+",我住在"+address+",wo"+age+"岁勒,"+"我每日工资"+salary);
案例2
-
弹出对话框，提示用户输入姓名
-
弹出对话框，输出用户刚才输入的姓名
// 1.用户输入 存储到一个myName变量中
var myName = prompt("请输入姓名");
alert(myName);
变量的语法扩展
1.更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
2.同时声明多个变量
同时上面多个变量时，只需要写一个var，多个变量名之间用英文逗号隔开
3.声明变量的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age;console,log(age); | 只声明 不赋值 | undefined |
| console.log(age); | 不声明 不赋值 直接用 | 报错 |
| age = 10;console.log(age); | 不声明 只赋值 | 10 |
测试代码
//1.更新变量
var myName = 'feliks';
alert(myName);
myName = 'slugger';
alert(myName);
//2.声明多个变量
var age = 20,
address = '上海',
salary = 2000;
//3.声明变量的特殊情况
//3.1只声明 不赋值
var sex;
console.log(sex);//undefined
//3.2不声明 不赋值 直接用
// console.log(tel);
//3.3不声明 只赋值
num = 21;
console.log(num);
变量的命名规范
- 由字母(A-Za-z)、数字(O-9)、下划线()、美元符号($ )组成，如: usrAge, num01，_name
- 严格区分大小写。var app;和var App;是两个变量
- 不能以数字开头。18age是错误的
- 不能是关键字、保留字。例如: var、for、while
- 变量名必须有意义。MMD BBD nl→age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
案例3：交换两个变量的值
var apple1 = '青苹果';
var apple2 = '红苹果';
var temp;//中间变量
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log('apple1'+apple1);
console.log('apple2'+apple2);
数据类型
简介
为什么需要数据类型
- 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
- 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。
变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
var num = 10;//num属于数字型
var str = 'feliks';//字符
在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型∶
var x = 6; //x为数字
var x = 'feliks' //x为字符串
数据类型的分类
- 简单数据类型( Number , string,Boolean,Undefined,Null )
- 复杂数据类型(object)
简单数据类型(基本数据类型)
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含 整型和浮点型 | 0 |
| Boolean | 布尔值类型，true,false,等价于0，1 | false |
| String | 字符串，如“张三” | “” |
| Undefined | var a;声明了变量没给值，a=undefined | undefined |
| Null | var a = null;声明了变量a 为空值 | null |
数字型进制
var num = 10;//num 数字型
var PI = 3.14;//PI 数字型
//1.八进制 0~7 数字前面加0，表示八进制
var num1 = 010;
console.log(num1); //8
//2.十六进制 0~9 a~f 数字的前面加 0x 表示十六进制
var num2 = 0xf;
console.log(num2);
数字型范围
最大值和最小值
alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324
三个特殊值
console.log(Number.MAX_VALUE); //Infinity 无穷大
console.log(-Number.MAX_VALUE);//-Infinity 无穷小
console.log('feliks'-100); //非数值 NaN
isNaN()
// isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是 true
console.log(isNaN(12));//false
console.log(isNaN('felks'));//true
console.log(isNaN('feliks'-100));//true
字符串类型String
推荐使用单引号’’
嵌套(外双内单/外单内双)
var str = "I'm 'feliks'!";
字符串转义符
转义字符都是 \ 开头
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符 ，n->newline |
| \\ | 斜杠 \ |
| \’ | ‘ 单引号 |
| \“ | “ 双引号 |
| \t | tab 缩进 |
| \b | 空格，b->blank |
var str = "I'm 'feliks'!\n thank you.";
字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
//1.检测获取字符串的长度 length
var str = 'my name is feliks';
console.log(str.length);//17
字符串拼接
-
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串
-
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
//2.字符串的拼接 +
console.log('feliks'+'chen');//felikschen
console.log('feliks'+20);//feliks20
console.log('feliks'+true);//felikstrue
console.log(12+12);//24
console.log('12'+12);//1212
数值相加，字符相连
布尔型Boolean
布尔类型有两个值：true和false,其中true表示真，false假
var flag = true;
var flag1 = false;
console.log(flag+1);//2 true参与加法运算当1来看
console.log(flag1+1);//1 false参与加法运算当0来看
undefined和null
//如果一个变量声明未赋值，就是undefined 未定义数据类型
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable+'feliks');//undefinedfeliks
console.log(variable+1);//NaN undefined和数字相加 最后结果是 NaN
//NULL 空值
var space = null;
console.log(space + 'feliks');//nullfeliks
console.log(space + 1);//1
typeof检测变量数据类型
var num = 10;
console.log(typeof(num));//number
var str = 'feliks';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var variable = undefined;
console.log(typeof variable);//undefined
var time = null;
console.log(typeof time);//object
//prompt 取过来的值是字符型的
var age = prompt('输入年龄：');
console.log(typeof age);//string
数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
常用三种转换：
- 转换为字符串类型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成字符串 | var num=1;alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num=1;alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1;aler(num+‘feliks’); |
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。
//转为字符串
//toString()
var num = 10;
var str = num.toString();
console.log(str);
//String()
console.log(String(num));
//+
console.log(num+'');
- 转换为数字型
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string)函数 | 将string类型转成整数数值型 | parseInt(‘12’) |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘12.33’) |
| Number()强制转换函数 | 将string类型转成数值型 | Number(‘12’) |
| js隐式转换(- * /) | 利用算数运算隐式转换为数值型 | ‘12’-0; ‘12’/1 |
//转为字符串
//toString()
var num = 10;
var str = num.toString();
console.log(str);
//String()
console.log(String(num));
//+
console.log(num+'');
//转为整数类型
var age = prompt('输入年龄');
console.log(parseInt(age));
console.log(parseInt('3.14'));//3
console.log(parseInt('3.94'));//3 取整
console.log(parseInt('120px')); //120
console.log(parseInt('rem120px'));//NaN
//转换为浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px')); //120
//利用Number()
var str = '123';
console.log(Number(str));//123
console.log(Number('12'));//12
//利用算术运算 - * /
console.log('12'- 0);//12
console.log('12'-'11');//1
案例：输入出生年份，输出年龄
var year = prompt('请输入出生年份');
var age = 2022-year;
alert('你的年龄是：'+age);
案例：加法器
var num1 = prompt('请输入第一个数字');
var num2 = prompt('请输入第二个数字');
var sum = parseFloat(num1)+parseFloat(num2);
alert(num1+'+'+num2+'='+sum);
- 转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转换成布尔值 | Boolean(‘true’) |
- 代表空、否定的值会被转换为false ，如"、0、NaN、null、undefined
- 其余值都会被转换为true
<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('hello'));
script>