8.13 JS数据类型

什么是变量？

解释：可以变化的量

变量是用于存储信息的容器【内存空间】 变量是一段命名的存储空间 变量是在程序运行过程中值允许改变变量的值 变量是由变量名，变量值，和变量类型组成，运算符

变量命名规则

第一个字符必须为字母，_或$，其后的字符还可以是数字 严格区分大小写，要有一定的含义 建议使用小驼峰规则来命名变量。redApple 不能使用关键词，保留字作为变量名

变量的命名和赋值

var 变量名
变量名=值

var 变量名=值

变量名=值

var 变量1=值1，变量2=值2，变量3=值3
注意：

• 变量名是浏览器关闭后才释放在，在没关闭之前随时使用
• 重新声明的变量，不会丢失原始值，除非重新赋值
• 换行是语句的结束，最好结束时都加上 ；
• 变量名是区分大小写的

JavaScript的数据类型

分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；
js常用的基本数据类型包括
undefined – – (未定义)、null- – (空的)、number – – (数字)、boolean- – (布尔值)、string- – (字符串)
js的引用数据类型也就是

对象类型Object- – (对象)，比如：array – – （数组）、function – – （函数）、data – – （时间）等；

JS为弱类型语言，不必声明数据类型，而是在使用或赋值的时候确定其类型 基本数据类型存放在栈中 引用数据类型存放在堆中【讲完类型后面详细说堆和栈】

强类型语言/弱类型语言

强类型语言【java】：

• 要求变量的使用要严格符合定义，所有变量都必须先定义后使用。
• 一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了
  弱类型语言【js/python/php】：
• 它与强类型定义语言相反, 一个变量可以赋不同数据类型的值

对象类型

• 本地对象：string，Array，Date，Math，Golbal，独立于宿主环境的ECMAScript实现提供的对象
• 宿主对象：DOM，BOM。ECMAScript中的‘宿主’就是我们网页的运行环境，即‘操作系统’和‘浏览器’

判断数据类型

可以通过typeof运算符来判断数据类型

String类型【重要】

js中用来表述文本的数据类型

\\n换行（在alert中生效）

8进制表示法【进行两次转换，这里面的数字是ASCII中表示的八进制数字】

16进制表示法

16进制unicode表示法

console.log('\\062') //八进制50 对应的值：2

Number

按照进制划分：二进制、八进制、十进制、十六进制
按照其他划分：整形、浮点型、NaN（not a number）
js中所有的数字是以IEEE-75标准格式表示的，浮点数的精确问题不是js特有的；
因为有点小树以二进制表示位数是无穷的
整形： 0，6，-100，0xff00（十六进制），0377/0o77（八进制），0b1010（二进制），不管输入的是几进制，最终显示时都会转为10进制

浮点型： 1.2，0.123，3.14e11=>3,14*10^11 科学计数法

0.375+0.248.toFixed(2)=>保留两位小数（四舍五入）
console.log(1.0-0.9==0.1)//false
console.log(1.0+0.9==1.9)//true

NaN（not a number）： NaN是一个特殊的number值，not a number表示非数字，当程序由于某种原因计算错误时，将产生一个无意义的数字NaN NaN与任何值都不想等，包括NaN本身 任何涉及NaN的操作，结果都为NaN

var a='hello';
b=10;
alert(a-b) // NaN

Boolean

值只有true和false。分别代表逻辑真与假
布尔值通常用来表示比较所得的结果
true和false是严格区分大小写的

var n=10;
if(n>8){
alert('我是true');
}else{
alert('我是false');
}

undefined【了解】

定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量
使用了一个不存在的对象的属性时

null【了解】

• null表示一个空值
• null不等于空字符串""、''或0
• null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值

console.log(null == null) // true
console.log(NaN == NaN); // false
console.log(undefined == undefined); // true

Array(数组)【重要】

数组中存储的数据，都有自己的编号，编号从0开始，依次递增1（下标/索引/编号）
将来可以利用有序的索引获取数据
创建数组
方法一：

var 数组名=new Array();

方法二：

var cars=new Array("Audi","BMW","BYD");

方法三：

var cars=["Audi","BMW","BYD"];

获取数组中的值

var arr = ['少林寺','龙门石窟','二七塔','华谊电影小镇'];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

循环遍历输出所有的数据

var cars=new Array("Audi","BMW","BYD");
for(i=0;i<cars.length;i++){
document.write(cars[i]+"<br/>")
}

多维数组

var arr = [
['北京','上海','深圳'],
['合肥','石家庄','昆明'],
['','','']
];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

里面可以存储多个值：数组，json对象
        一切皆对象：数字，string，boolean，array
        1. 创建数组

var arr = new Array(); // 创建出来的是空数组
            var arr = new Array(“张三”,‘李四’,‘王五’); // 创建出来的是带有内容的数据
            var arr = [];

2. 获取数据
            1）获取所有数据
                console.log(arr);
            2）获取其中某个数据
                下标：number，整形，0-正无穷
                console.log(数组的名称[下标]);
                console.log(arr[1]);
                console.log(arr[8]);

数组的嵌套
            数组中嵌套另外一个数组
            // 多维数组，二维数组

var stu = [
['鸿蒙1','鸿蒙2','鸿蒙3'],
['ui1','ui2','ui3'],
['db1','db2','db3']
];
console.log(stu[0]);
console.log(stu[2]);
console.log(stu[1][1]);

数组就是用【】包裹起来的内容
数组中可以存放任意的数据类型

Object 对象【重要】

作用：用于描述一个物体的特征和行为
对象：是一个可以存储多个数据的容器。

面向过程：按照时间的发生顺序，从上往下依次执行
对象对象：指挥对象做某件事情

对象:
属性：本身所拥有的特性
方式：能做的事情
对象：
{ },使用{ }包括起来的都是对象
[ ],使用[ ]包括起来的都是数组

创建对象：
方法一：var 对象名称 = new Object();
方法二：var 对象名称 = {‘键’：‘值’，‘键’：‘值，‘键’：‘值，‘键’：‘值}；

创建对象

// 车
var car = new Object();
// 属性
car.color = 'red';
car.brand = 'BMW';
car.price = 28.5;
// 方法
car.run = function(){
console.log('我能跑');
}
car.stop = function(){
console.log('我能停止');
}
car.setSpeed = function(){
console.log('我能定速巡航');
}

获取对象中的属性和方法

// 调用整个对象
console.log(car);
// 类似数组的方式调用
console.log(car['color']);
console.log(car['price']);
// 使用对象的方式调用
console.log(car.color)
console.log(car.price);
// 调用对象里面的方法
car.run();

使用第二种方式：创建人的对象

var obj2 = {
// 定义属性
'name':'jack',
'sex':'男',
'age': 18,
// 创建方法
'eat':function(){
console.log('我能吃');
},
'sleep':function(){
console.log('我能睡觉');
}
};
// 获取对象中的数据：对象名.属性名
console.log(obj2);
// 调用属性
console.log(obj2.name);
// 调用方法
obj2.eat();

JS的严格模式【了解】

在js中存在一个严格模式，使用 use strict来定义；这个是ES5中新增加的；

"use strict";
x = 3.14;
console.log(x);

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。

数据类型的检测

![[d3c7e3c7-df2a-499b-91e6-2d28513ae6d4 (1).png]]

数据类型转换

自动转换：js会通过关系运算符，逻辑运算符，算数运算符，if语句等实现隐式转换
根据需要自动进行类型转换，但是转换时会遵循一定的规则

强行转换->通过内置对象的方法强制转换，比如：parseInt(),parseFloat(),Number(),String(),Boolean(),toString（）

转为字符串【掌握】

自动转换

强制转换： String（），object.toString()
练习：

0o123=?
0+'123'=?
123+'100'=?
1+'2abc'=?
null+'12abc'=?
console.log(Number([])); // 0
String(undefined)=?
date=new Date()
date.toString()=?

转为数字类型【掌握】

自动转换

注意：数学运算（特殊情况：+再出现字符串的情况下不是数学运算，而是字符串的拼接）

强制转换 Number()
按照自动转换规则转换 parseInt(string) 、parseFloat(string)
isNaN() 函数用于检查其参数是否是非数字值
注意：parseInt还可以接受第二个参数（2到36之间），表示呗解析的值的进制，返回该值对应的10进制数。parseInt的第二个参数为10，即默认是十进制转十进制

parseInt('1000'); // 1000
// 等同于
parseInt('1000',10); // 1000
parseInt('1000'，2); // 8
parseInt('1000'，6); // 216
parseInt('1000'，8); // 512

练习：

console.log(0x2f);
console.log(061);
console.log(Number(null));
console.log(Number(undefined));
console.log(Number('123.12'));
console.log(true+123);
console.log(Number('123abc'));
console.log(parseInt('012.6a23b'));
console.log(parseFloat('a12.6a23b'));
console.log(parseInt(true));

转为布尔类型【掌握】

自动转换

强制转换 Boolean(), !!
练习：

if(0 || "" || '' || NaN || undefined || null){
alert('true')
}else{
alert('false')
}
!!123.11 // true
Boolean('abc') // true
console.log(Boolean([])); // true

特殊案例

console.log(Boolean([])); // true
console.log([] == false); // true; ==两边的数据类型不一致，需要转为数字进行比较；[]=>字符串''=>数字0
console.log(![] == false); // true ==的优先级比较低，肯定是先算左边 ![] 然后与后面进行比较，[]转为布尔值为true 取反 false false==false
console.log('0' == false); // true

在==比较的过程中，数据转换的规则 类型一样的几个特殊点：

{} == {} false,对象对比的是堆内存的地址
[] == [] false
NaN == NaN false
类型不一样的转换规则：

null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等

字符串 == 对象，要把对象转为字符串

剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较
如果类型都是字符串，就会按照ASCII编码的进行对比

运算符

表达式

常量 1.2 'str' false
变量 x y
复合 x+1

操作符：表达式 x+1中的x，1为操作符 运算符：表达式x+1的，+为运算符

算术运算符（+，-， *，/，%【重要】，++【重要】，–）

“+”算数加和字符串想接 i++ 先赋值，再加1；++i 先加1，再赋值

// 实现各行换色效果
for(var i=1;i<=10;i++){
if(i%2==0){
document.write("<font color='red'>"+i+"</font>");
}else{
document.write("<font color='green'>"+i+"</font>");
}
}

注意：正号有隐式类型转换功能

alert(typeof(+'5')) // number

思考题：

7%4=?
i=5
j=i++
j=?
k=++i
k=?
m=i–
m=?
n=–i
n=?

比较运算符（>,<,>=,<=,==,!=不等于,!==不全等于）【了解】

专门用作判断，返回值结果为boolean

console.log(1.2+1.1==2.3) //true
console.log(1.2-1.1==0.1) //false

总结：比较运算符的结果是boolean类型

赋值运算符（=【掌握】，+=【掌握】，-=， *=，/=，%=）

= 赋值运算符

var a = 10;
var arr = ['张三','李四','王武','孙刘','马奇']

表示给num+1，再把相加之后的结果赋给num这个变量

var i=10;
i+=1 // i=i+1 效果一样 i++

使用场合：累加求和，字符串拼接

逻辑运算符（！，&&，||）【两边均为表达式】【重要】

逻辑运算符用于测定变量或值之间的逻辑

|| 存在断点问题，第一个式子成立，不在执行第二个式子；如果第一个式子不成立，执行第二个登式(真假为真，假假为假，真真为真)

&& 存在断点问题，如果&&前面的值为false,后面的不再运行

&&式子两边同时成立，执行的是if（true），只要有一个不成立。或两个都不成立执行false

||运算方法真前假后：

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

&&运算方法：

只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

案例：

if(0 && 5){
console.log('真');
}else{
console.log('假');
}
console.log(10&&5);
console.log(0&&5);
var a=1;
console.log(a>5 && a++);
console.log(a<5 && a++);
console.log(a<5 && –a);
var a=10;
if(a<20||a++){
console.log('真',a);
}else{
console.log('假',a);
}

使用技巧：|| 或 运算符使用技巧

// 如果你必须给一个变量赋默认值，可以简单的这样写
var a;
console.log(a) // undefined
a = a||'default value';
console.log(a) // default value
a = a||'new value';
console.log(a) // new value
// 在函数中传參使用，如果传參就使用传递过来的参数，没有传參就使用默认值
function show(10){
var shownum = num || 20;
console.log(shownum);
}
show(10);

思考:

console.log( 0 || 1 ); // 1
console.log( 1 || 2 ); // 1
console.log( 0 && 1 ); // 0
console.log( 1 && 2 ); // 2

条件运算符【三元运算符/三目运算符】【重要】

条件表达式?结果1:结果2 如果条件表达式结果为true则返回结果1 如果条件表达式结果为false则返回结果2

var m=100>99?66:33
alert(m)

案例：判断某个年份是否为闰年

运算符的优先级

下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。
![[7d49403e-a913-4c59-a407-67bee15978be.png]]
小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符

思考

var a=5;b=3;
var c;
c=a+b>3 && a<a-b*2;
//思考1
var i = 4=='4' ? 'A' : 'B';
alert(i);
//思考2
var m = 3+4>7 || 4*0.25>0.09;
alert(m);
//思考3
var n = 1;
var s = 0;
if(p=–n||++s){
n++;
s++;
}
alert(n);
alert(s)
//思考4
var a=0;
var b=4;
if(c=a&&b<6){
c=a+b;
}else{
c=a-b;
}
alert(c);

JSON数据类型

JSON：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式 主要作用： JSON 是用于存储和传输数据的格式。 JSON 通常用于服务端向网页传递数据 。 特性： json的键不能重复，如果键是一个完整的单词，可以直接写，如果键里面包含了空格，要用引号引起来 格式：

{key: value, key: value}

数据为 键/值 对。
多个数据由逗号分隔
value可以为任意类型

定义复杂的json格式

var address = {
"city":"成都",
"province":'四川',
"aaa":{
"name":'Test',
"value":{
"value":"123"
}
},
"bbb":[{
"name":"lisi"
},{
"name":"zhangsan"
},{
"name":"wangwu"
}]
};