[JavaScript知识库]变量+数据类型

数据类型及转换

、javaScript简介

、网页三部分组成

• html：超文本标记语言，专门编写网页内容的语言。（结构）
• css：层叠样式表（装修、样式）
• javaScript：网页交互的解释性脚本语言，专门编写客户端交互行为。（交互）

什么是javaScript

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。

• 开发公司：Netscape（网景）
• 作者：布兰登·艾奇 (Brendan Eich)
• 时间：1995
• 作用：实现网页交互、网页特效、前后端数据交互

扩展阅读：--------------------------------------------------------------

Javascript诞生记

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

JavaScript 特点

1、解释性：计算机可以直接识别语言，读取一行，执行一行。

2、基于对象：内部提供了一些对象（工具），这些对象的方法或者属性可以实现 js 的基本功能。

3、事件驱动：JavaScript 可以直接对用户或者客户交互做出响应，无须经过 web 服务器，它对用户的响应，以事件驱动的方式进行。

4、安全性：JavaScript 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。

5、跨平台：JavaScript 依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持 JavaScript 的浏览器就可正常执行。

ECMAScript 和 JavaScript的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。（记住）

javaScript的组成

（记住）

1、ECMAScript：该语言的核心、基本语法、语句、变量、关键字等等

2、DOM：document object model (文档对象模型)

3、BOM：browser object model (浏览器对象模型)

javaScript初体验

引入javascript

行内

<!-- 1、行内，不建议使用 -->
<!-- οnclick=""             点击，引号中写要做的事 -->
<!-- alert('弹出的内容')     弹出 -->
<div onclick="alert('姐妹，点我了')"></div>

内嵌

<!-- 2、内嵌，项目中不用，练习中用 -->
<script>
    alert('哥们，我是js，执行到这里了');
</script>

外链

<!-- 3、外链，项目中用 -->
<script src="./js/a.js"></script>

注意问题：

1、js 从上向下一行一行执行

2、alert 具有阻塞代码的作用

3、alert(’’) 只有数字和变量不加引号，其它的都加

4、js可以放在页面的任何地方，我们建议放在head中或者的前面

5、一个script标签，用了外链，就不要再用做内嵌

6、建议每行js完成，加分号

7、js区分大小写

8、建议：js用单引号，html用双引号

注释

// 单行注释 ctrl+/

/* 多行注释 */ ctrl+shift+/ 多行注释不能嵌套

变量

变量是存储数据的容器，我们通过变量名获取数据，修改数据。

var sex = '男'; // 存
sex = '女'; // 修改
alert(sex); // 读取数据

命名规则：

• 1、只能使用英文字母、数字、下划线、$组成
• 2、不能以数字开头
• 3、不能使用关键字、保留字
  • 关键字：js这门语言正在用着的字
  • 保留字：js这门语言将来要用的字

建议：

• 1、见名知意: sex age len size
• 2、建议小驼峰命名: fontSize firstName

关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUjYNBtf-1632923082683)(C:\Users\Administrator\Desktop\课堂笔记\第二阶段\笔记\image\关键字.png)]

保留字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p3k5Etpo-1632923082686)(C:\Users\Administrator\Desktop\课堂笔记\第二阶段\笔记\image\保留字.png)]

变量声明

1、声明并赋值（最多）

// 1、声明并赋值
var age = 3;
alert(age); // 弹出
console.log(age); // 控制台输出  建议使用
document.write(age); // 页面写入

2、先声明，再赋值

// 2、先声明，再赋值
var a; // 声明
a = 10; // 赋值

3、一次声明多个

// 3、一次声明多个(熟练以后用)
var name = 'zs',
    age = 3,
    job = '前端开发';

字符串拼接

注意：完整的输出先写出来，需要替换的地方，用xx占位

1、删除要替换的

2、写两引号，外面是什么引号，就写什么引号

3、在引号之间，写两加号

4、在加号之间，写你的变量

js调试

输出调试

alert('页面弹框');
console.log('控制台输出'); // 推荐
document.write('页面输出');

断点调试

var a = 3;
var b = 5;
var c = a + b;
console.log(c);

数据类型

基本数据类型(简单数据类型)：Number(数字) String(字符串) Boolean(布尔值) Null(空) Undefined(未定义)

引用数据类型(复杂数据类型)：Object(对象)

**引用数据类型(复杂数据类型) **具体：Arrary,Function,Objcet 包括基础数据类型这些都为构造函数。但都是对象。

区别为：基本数据类型在栈中开辟内存储存数据，而引用数据类型则在栈中开辟内存储存引用地址，在堆中开辟内存储存数据。引用地址会指向堆中内存的数据。

数据类型的判断

• 格式：typeof(参数) 或者 typeof 参数
• 作用：返回六个字符串，表示参数的数据类型

number

// 整数、小数、负数都是数字
var age = 10;
var pi = 3.1415926;
var a = -1;
console.log(age, typeof age); // 10 "number"
console.log(pi, typeof pi);
console.log(a, typeof a);

// 八进制基数范围 0~7，以 0 开头并且没有超过 8 的值，则为八进制
// 十六进制基数范围 0-9，A~F，0x 开头，则为十六进制
var b = 070; // 8进制
var c = 0x10; // 16进制
console.log(b, typeof b); // 56 "number"
console.log(c, typeof c); // 16 "number"

// 特殊数值
var d = 1 / 0;
console.log(d, typeof d); // Infinity(无穷大) "number"

// 小数的舍入误差
var e = 0.1 + 0.2;
console.log(e, typeof e); // 0.30000000000000004 'number'

// NaN
var f = '小王' - 5; // 减法本意想得到一个数字，但是这里却得不到，只能给你一个NaN
console.log(f, typeof f); // NaN "number"
console.log(f == f); // false

// NaN: not a number  (不是一个数字)
// 特点
// 1、凡是有NaN参与的运算，结果都是NaN
// 2、它不是一个数字，但是数字类型
// 3、NaN和谁都不相等，包括它自己

string

// 单双引号引着的零个或多个字符就是字符串

var str1 = "welcome";
var str2 = '平头哥';
var str3 = '你好，"小王"';
var str4 = '';
var str5 = '   ';
console.log(str1, typeof str1); // welcome string

// -------------------------------
// 长度：从1开始数
// 字符串.length
console.log(str1.length); // 7
console.log(str2.length); // 3
console.log(str4.length); // 0
console.log(str5.length); // 3

// -----------------------------
// 下标: 从0开始数
// 通过下标获取某一个字符 : 字符串[下标]     字符串.charAt(下标)
console.log(str1[4]);
console.log(str1.charAt(4));

boolean

true 真 / false 假

// Boolean: 真假　就两个值
// true真 / false假

var b1 = true;
console.log(b1, typeof b1); // true "boolean"

var b2 = false;
console.log(b2, typeof b2); // false "boolean"

// ---------------------------------
// if (小括号中最终是一个真假) {
//     真就做这里
// } else {
//     假就做这里
// }

null和undefined

// Null: 表示值为空
// Undefined: 变量没有初始化，值的空缺(未定义)

var n = null;
console.log(n, typeof n); // null "object"

var u; // 声明一个变量，没有赋值（没有初始化）
console.log(u, typeof u); // undefined "undefined"

null和undefined的区别？

• undefined：未初始化，访问一个空变量返回的值，声明变量但是未赋值

• null：空，访问一个空对象返回的值，声明变量赋值但是值为空

数据类型的强制转换及各数据返回值

转换为number类型

Number(参数)

作用：将任何类型转换为数字，不影响原参数

转换规则：

1、如果字符串全是数字，则正常转成数字，如果有一个不是数字，则转不成功，不成功则是NaN，空字符或空格转为0

2、数字就是简单返回

3、true转为1，false转为0

4、null转为0

5、undefined转为NaN

console.log(Number('12px')); // NaN
console.log(Number('12')); // 12
console.log(Number('12.34')); // 12.34
console.log(Number('   ')); // 0
console.log(Number('')); // 0

console.log(Number(12)); // 12

console.log(Number(true)); // 1
console.log(Number(false)); // 0

console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

number转换

parseInt()和parseFloat()

• parseInt(参数)：将参数转换为整数
• parseFloat(参数)：将参数转换为小数

转换规则：

• 从左向右看，一位一位的看，如果是数字，则提出来，如果不是数字，则到此为止

区别：

• parseFloat认识一个小数点，而parseInt不认识小数点
• parseInt有第二个参数，即以多少进制转换，而parseFloat它没有第二个参数

// parseInt(参数, 进制)  转整数，有第二个参数为进制
console.log(parseInt('12.34px')); // 12
console.log(parseInt('12px34')); // 12
console.log(parseInt('ab12')); // NaN

// 在IE8及以下，认为是56，如果让所有浏览器统一，加上第二个参数进制
console.log(parseInt('070')); // 70    在IE8及以下，返回56
//第二个参数为进制
console.log(parseInt('070', 10)); // 70


// parseFloat(参数)    转小数
console.log(parseFloat('12.34px')); // 12.34
console.log(parseFloat('12.3.4px')); // 12.3

转换为字符串类型

• String(参数); 可以将任何数据类型转换为字符串
• 参数.toString(); 同String，但是不能转换null和undefined

console.log(String(NaN)); // 'NaN'
console.log(String(1 / 0)); // 'Infinity'

console.log(String(true)); // 'true'
console.log(String(false)); // 'false'

console.log(String(null)); // 'undefined'
console.log(String(undefined)); // 'undefined'


// -----------------------------------------
console.log((10).toString()); // '10'
console.log(true.toString()); // 'true'
console.log(false.toString()); // 'false'

// console.log(null.toString()); // 报错
// console.log(undefined.toString()); // 报错

转换为布尔类型

Boolean(参数);

• 作用：可以将任何数据类型转换成布尔值

规则：

• 1、数字里面的0和NaN转换成布尔为false，其它转换为布尔为true
• 2、字符串里，空字符串为假，其它均为真
• 3、布尔值简单的返回
• 4、null和undefined均转换为false

console.log(Boolean('ab')); // true
console.log(Boolean('    ')); // true
console.log(Boolean('')); // false

console.log(Boolean(12)); // true
console.log(Boolean(-12)); // true
console.log(Boolean(1 / 0)); // true
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false

console.log(Boolean(true)); // true
console.log(Boolean(false)); // false

console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

js世界的假值：共6个

• 假：0 NaN 空字符串 false null undefined
• 真：其它的值都为真，包括一切对象

toFixed

数字.toFixed(保留小数的位数)

作用：将数字转换成字符串，并保留几位小数(四舍五入)

var pi = 3.1415926;

console.log(pi.toFixed(2)); // '3.14'
console.log(pi.toFixed(3)); // '3.142'

// 作用：
console.log(0.07 * 10); // 0.7000000000000001
console.log((0.07 * 10).toFixed(2)); // '0.70'

isNaN

• isNaN(参数); 是不是不是一个数字？

• 不是数字返回true，是数字返回false

• isNaN自己不判断，找它的好朋友Number()，如果Number()能正确返回数字，则返回false，如果Number()转不成功，则返回true

console.log(isNaN(10)); // false
console.log(isNaN('10')); // false
console.log(isNaN(true)); // false

console.log(isNaN(NaN)); // true
console.log(isNaN('12px')); // true
console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true

// ‘3.14’
console.log(pi.toFixed(3)); // ‘3.142’

// 作用：
console.log(0.07 * 10); // 0.7000000000000001
console.log((0.07 * 10).toFixed(2)); // ‘0.70’

### isNaN

- isNaN(参数);  是不是不是一个数字？

- 不是数字返回true，是数字返回false

- isNaN自己不判断，找它的好朋友Number()，如果Number()能正确返回数字，则返回false，如果Number()转不成功，则返回true

```js
console.log(isNaN(10)); // false
console.log(isNaN('10')); // false
console.log(isNaN(true)); // false

console.log(isNaN(NaN)); // true
console.log(isNaN('12px')); // true
console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true