ES5入门 — 引入、变量、数据类型

话不多说，让我们正式开启 JS 的学习之旅！

认识 JS

你可以简单理解成 JavaScript 是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与Web站点和Web应用程序之间的交互。

比如在静态页面上做出的绝大多数动画效果（轮播banner、跑马灯），交互行为（表单验证），都是由JavaScript编写而成的。
复制代码

除此以外，你还需要了解JavaScript是由ECMAScript、文档对象模型（Document Object Model： DOM）、浏览器对象模型（Browser Object Model：BOM）三部分构成。

ECMAScript：它描述了该语言的语法和基本对象；
DOM：描述了处理网页内容的方法和接口，通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性，可以对其中的内容进行修改和删除，同时也可以创建新的元素；
BOM：描述了与浏览器进行交互的方法和接口，BOM提供了独立于内容而与浏览器窗口进行交互的对象，例如可以移动，调整浏览器窗口大小的window对象，可以用于导航的location对象和history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等；
复制代码

JS 引入

外部引入:

<script src="引用的代码路径"></script>
复制代码

内嵌标签:

<script>相关代码</script>
复制代码

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!--写在html结构的 尾部--><script src="引用的代码路径"></script><script>// 相关代码</script>
</body>
</html>
复制代码

<script></script>可以有多个，按顺序执行。
通常采用外部引入的方式，确保 结构、样式、行为相分离。
复制代码

JS 变量

变量（variable）：程序可操作的内存空间，程序运行期间可以进行改变。

简单理解成：存储数据的容器。比如要在很多地方使用同一个字面量，不如事先定义一个变量，用来储存字面量。
复制代码

命名规则：

1.字母、数字、_、$ 组成
2.不能以数字开头
3.不能是js中的关键字和保留字
4.严格区分大小写
5.驼峰命名
6.见名知意
复制代码

声明（定义）变量

通过 var 关键字声明变量，所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
等号表示赋值，将等号右边的值，赋给左边的变量。
复制代码

// 声明单一变量
var a;// 声明变量并赋值(初始化)
// 推荐
var b = 20;// 声明多个变量
var c = 100,d = 200,str = 'hello thewall';// 变量要先声明 再使用 如果未声明就使用 控制台会报错
console.log(f);
复制代码

JS 数据类型

数据类型：基本数据类型（原始数据类型）和复杂数据类型（引用数据类型）

基本数据类型：存放在 栈内存（stack）中，可以直接访问。

String

字符串需要使用引号引起来，使用双引号或单引号都可以，但是不要混着用。
引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号。但是单引号里可以嵌套双引号。
复制代码

Number

整数和浮点数（小数）
由于内存限制，最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308，Number.MIN_VALUE，这个值为： 5e-324
无穷大（正无穷）：Infinity，无穷小（负无穷）：-Infinity
NaN：是一个特殊的数字，表示Not a Number，非数值。
isNaN() :任何不能被转换为数值的值，都会让这个函数返回 true。
复制代码

console.log("abc" / 18);  //结果是NaN
console.log("abc" * "abcd"); //按理说，字符串相乘是没有结果的，但如果你非要让JS去算，它就一定会给你一个结果。结果是NaNisNaN(NaN);// true
isNaN("blue"); // true
isNaN(123); // false
复制代码

Boolean

true 和 false。主要用来做逻辑判断
复制代码

Undefined

声明了一个变量，但是没有赋值，此时它的值就是undefined。
复制代码

Null

专门用来表示一个为空的对象
复制代码

Symbol

// String类型 字符串类型
var str = '不凡学院,分享知识和快乐';
var str = '' //空字符串// Number类型  数字类型
var age = 20;// Boolean类型 true 和 false 两个值
var sex = false;// Undefined 只声明,未赋值的变量
var a;  // a的数据类型为undefined// null 空
var b = null;
// Symbol ES6新增，按下不表
复制代码

引用数据类型：存放在 堆内存（heap）中，变量在栈内存中实际保存的是一个指针，这个指针指向堆内存当中对应的数据。

Object
Array
Function
这里边,内置对象function、Array、Date、RegExp、Error等都是属于Object类型
复制代码

// Array 数组
var arr = [1,2,'hello',undefined,true,{age:30},[3,4]];// Function 函数
function wheel () {}// Object 对象
var person = {name:'张三',age:30,like:['篮球','足球','看书']
}
复制代码

栈内存和堆内存的区别

var a = 10;
var b = a; // 相当于 在栈内存中 开辟了内存空间 b 存值 为 10,和 a 没有关系了
a = 20 // 当修改 a 的值时,b 并不会受到影响.
console.log(b);  // 10var obj1 = {name:'张三'
}
// 在栈内存中开辟了内存空间 obj1 ,存放了指向堆内存中 对象{name:'张三'} 的指针(地址)
var obj2 = obj1;  // 相当于在栈内存中开辟了内存空间obj2 ,存放了指向堆内存中对象{name:'张三'} 的指针// 修改一
obj1.age = 30;
// 相当于修改了 堆内存中保存的数据,obj2的指针 也指向这个对象
console.log(obj2); // {name:'张三',age:30}// 修改二
obj1 = {name:'李四'
}
// 相当于 将堆内存存放的{name:'李四'}的引用地址,赋值给了变量obj1 ,并不影响obj2的指针指向的对象
console.log(obj2); // {name:'张三'}
复制代码

数据类型判断

typeof 变量名(表达式)
isNaN(变量名)
复制代码

数据类型的转换

------>String类型

var a = 123;
// 1.通过 变量+''
console.log(a +''); // 转换成String类型// 2.toString()
// 该方法不会影响到原变量，它会将转换的结果返回。当然我们还可以直接写成a = a.toString()，这样的话，就是直接修改原变量。
// 需要注意的是 null 和 undefined 没有toString()方法,所以不能使用
console.log(a.toString()// 3.String()
console.log(String(null) // 'null'
console.log(String(undefined) // 'undefined'
复制代码

------>Number类型

Number()

字符串--->数字

1.字符串若是纯数字,转换为数字
2.字符串中有非数字内容,转换为NaN
3.空字符串或者全是空格的字符串,转换为0
复制代码

布尔值--->数字

true 为 1
false 为 0
复制代码

其他情况

null 为 0
undefined 为 NaN
复制代码

parseInt()

parseInt()的作用是将字符串中的有效的整数内容转为数字。
复制代码

// 1.只保留字符串最开头的数字，后面的中文自动消失。例如：console.log(parseInt("2019准备写6篇文章"));  //打印结果：2019console.log(parseInt("2019.04在掘金上写了6篇文章"));  //打印结果仍是：2019  （说明只会取整数）console.log(parseInt("aaa2019.04在公众号上写了6篇文章"));  //打印结果：NaN// 2.自动带有截断小数的功能：取整，不四舍五入。var a = parseInt(5.8) + parseInt(4.7);
console.log(a); // 9var a = parseInt(5.8 + 4.7);
console.log(a);  //10// 3.如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后再操作。var a = true;
console.log(parseInt(a));  //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作）var b = null;
console.log(parseInt(b));  //打印结果：NaN  （因为是先将b转为字符串"null"，然后然后再操作）var c = undefined;
console.log(parseInt(c));  //打印结果：NaN  （因为是先将b转为字符串"undefined"，然后然后再操作）var d = 168.23;
console.log(parseInt(d));  //打印结果：168  （因为是先将c转为字符串"168.23"，然后然后再操作）// 4.带两个参数时，表示进制转换。
复制代码

parseFloat()

parseFloat()的作用是：将字符串转换为浮点数。
复制代码

// parseFloat()可以获得有效的小数部分。
var a = '123.456.789px';
console.log(parseFloat(a)); // 打印结果：123.456
复制代码

------>Boolean类型

Boolean()

数字 --> 布尔。除了0和NaN，其余的都是true。
字符串 ---> 布尔。除了空串，其余的都是true。
null和undefined都会转换为false。
情况四：对象也会转换为true。
复制代码

到这里，就已经简单介绍了JS最基本的变量和数据类型，但这并不是全部，和其相关的知识点还有很多，暂且按下不表（毕竟只是带你入门），之后的事？当然要靠自己去不断探索学习了！

转载于:https://juejin.im/post/5cbd96446fb9a0321c45d800