JavaScript笔记01_基本操作

1. JS代码编写的位置
2. 为什么JavaScript中代码要以分号结束
3. 字面量和变量
4. 数据类型
5. 类型装换
6. ++a和a++
7. 逻辑运算符
8. 相等运算符
9. 特殊值undefined、null和NaN的比较和判断
10. 对象
11. 基本数据类型和引用数据类型
12. 对象的字面量

1. JS代码编写的位置

标签的onclick属性中
超链接的href属性中
script标签中
JS外部文件中

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>JS代码编写的位置</title>

		<script type="text/javascript">

			<!-- 3. 可以将JS代码写在script标签中 , 加载页面立即执行-->

			alert('我是script标签中的代码！！！');

		</script>

		<!-- 4. 可以将JS代码写在JS外部文件中，需要使用script标签的src属性引用

			注意：script标签一旦用于引入外部文件了，就不能在编写代码了。即使编写了浏览器也会忽略

			如果需要则可以在创建一个新的script标签用于编写内部代码

		-->

		<script type="text/javascript" src="js/scipt.js" ></script>

	</head>

	<body>

		<!-- 1. 可以将JS代码编写到标签的onclick属性中， 点击按钮执行代码 -->

		<button onclick="alert('弹窗');"></button>

		<!-- 2. 可以将JS代码写在超链接的href属性中， 点击超链接时执行代码 -->

		<a href="javascript:alert('弹窗2');">这是一个超链接</a>

		<!-- 下面的代码常用来控制一个链接点击之后没有反应的情况-->

		<a href="javascript:;">这是一个超链接</a>

		<!-- 虽然可以卸载标签的属性中， 但是他们属于结构和行为耦合， 不方便维护， 不推荐使用  -->

	</body>

</html>

scipt.js

alert("我是JS外部文件中的代码！！！");

2. 为什么JavaScript中代码要以分号结束

如果不加分号，浏览器会自动添加，但是会消耗一些系统资源，有的时候，浏览器会加错分号，导致运行出错。

3. 字面量和变量

字面量：都是一些不可以改变的值，如1， 2， 4， 5；字面量可以直接使用，但是我们一般不会直接使用字面量。

变量：变量是用来保存字面量的，而且变量的值是可以任意改变的。变量更加方便我们使用，所以开发中都是通过变量去保存一个字面量，而很少直接使用字面量。

4. 数据类型

基本数据类型：String、 Number、 Boolean、 Null、Undefined
引用数据类型：Object
使用typeof 变量可以检验一个变量的类型
NaN是一个特殊的数字，表示Not A Number ，使用typeof检验一个NaN也会返回number
如果使用JavaScript进行浮点数运算，可能得到一个不精确的结果。
Null类型的值只有一个，就是null， null这个值专门用来表示一个为空的对象，使用typeof检查null值时，返回Object。
Undefined类型的值只有一个，就是undefined，当声明一个变量，但是并不给变量赋值时，他的值就是undefined，使用typeof检查一个undefined时会返回undefined。

5. 类型装换

其他类型转为String类型
- 方式一：调用被转换数据类型的toString()方法。该方法不会影响到原变量，null和undefined没有该方法。
- 方式二：使用String()函数，并将被转换的数据作为参数传递给函数。
其他类型转换位Number类型
- 方式一：使用Number()函数
  
  如果是纯数字的字符串吗，则直接转换位数字；如果字符串中有非数字的内容，则转换位NaN;如果字符串是一个空串或者是一个全是空格的字符串，则转换为0；true转为1，false转为0；null转为0；undefined转为数字NaN;
- 方式二：parseInt()和parseFloat()函数，专门用来转换字符串的，如果是非String类型的变量会先转换为String再操作；

6. ++a和a++

a++的值等于原变量的值（自增前的值）

++a的值等于原变量的新值（自增后的值）

var d = 20;

// 20 + 22 + 22

var result = d++ + ++d + d;

console.log("result = " + result);

var e = 20

e = e++;

console.log("e = " + e);//20

a--的值等于原变量的值（自减前的值）

--a的值等于原变量的新值（自减后的值）

var n1 = 10, n2 = 20;

var n = n1++;			//n1 = 11  n1++ = 10

console.log('n=' + n);	//10

console.log('n1=' + n1);//11

n = ++n1;				//n1 = 12;  ++n1 = 12

console.log('n=' + n);	//12

console.log('n1=' + n1);	//12

n = n2--;					//n2 = 19  n2-- = 20

console.log('n=' + n);		//20

console.log('n1=' + n2);	//19

n = --n2;				//n2 = 18 --n2 = 18

console.log('n=' + n);		//18

console.log('n2=' + n2);	//18

7. 逻辑运算符

JS中为我们提供了三种逻辑运算符

! 非

!可以用来对一个值进行非运算。所谓非运算就是值对一个布尔值进行取反操作，true变false，false变true。如果对一个值进行两次取反，它不会变化。如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反。所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值。可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样。
&& 与

&&可以对符号两侧的值进行与运算并返回结果，运算规则：

两个值中只要有一个值为false就返回false，只有两个值都为true时，才会返回true。JS中的“与”属于短路的与，如果第一个值为false，则不会看第二个值。
|| 或

||可以对符号两侧的值进行或运算并返回结果，运算规则：

两个值中只要有一个true，就返回true。如果两个值都为false，才返回false。JS中的“或”属于短路的或。如果第一个值为true，则不会检查第二个值。
&& || 非布尔值的情况

对于非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，并且返回原值

与运算：

如果第一个值为true，则必然返回第二个值

如果第一个值为false，则直接返回第一个值
或运算：

如果第一个值为true，则直接返回第一个值

如果第一个值为false，则返回第二个值

//与运算：如果两个值都为true，则返回后边的；如果两个值中有false，则返回靠前的false

var result = 5 && 6;

//如果第一个值为true，则直接返回第一个值

result = 2 || 1;

result = 2 || NaN;

result = 2 || 0;

//如果第一个值为false，则直接返回第二个值

result = NaN || 1;

result = NaN || 0;

8. 相等运算符

/*

* 相等运算符用来比较两个值是否相等，

* 	如果相等会返回true，否则返回false

*

* 使用 == 来做相等运算

* 	- 当使用==来比较两个值时，如果值的类型不同，

* 		则会自动进行类型转换，将其转换为相同的类型

* 		然后在比较

* 不相等

* 	 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false

* 	- 使用 != 来做不相等运算

* 	- 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

*

*

*  ===

* 		全等

* 		- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换

* 			如果两个值的类型不同，直接返回false

* 	!==

* 		不全等

* 		- 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换

* 			如果两个值的类型不同，直接返回true

9. 特殊值undefined、null和NaN的比较和判断

undefined衍生自null，所以两个值做相等判断时，会返回true；

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

NaN不和任何值相等，包括他本身。因此，判断一个值是否是NaN时候，需要借助函数isNaN()；

var a = NaN;

console.log(a == NaN);//false

console.log(isNaN(a));//true;

10. 对象

1. 基本概念：

JavaScript中的数据类型有String、Number、Boolean、Null、Undefined五种基本数据类型。只要不是上面的五种类型，都是Object对象类型。

基本数据类型都是单一值，值和值之间没有任何联系。对象属于一种复合的数据类型，在对象中可以保存多个不同类型的属性。

2.对象的分类：

①内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用；比如Math、String、Number、Boolean、Function、Object。

②宿主对象：由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象比如BOM、DOM。

③自定义对象：由开发人员自己创建的对象。

3. 对象的基本操作

使用new关键词调用的函数，是构造函数constructor。构造函数是专门用来创建对象的函数。使用typeof检查一个对象时，会返回object。

var obj = new Object();

/*

 * 在对象中保存的值称为属性

 * 向对象添加属性

 * 	语法：对象.属性名 = 属性值;

 */

//向obj中添加一个name属性

obj.name = "孙悟空";

//向obj中添加一个gender属性

obj.gender = "男";

//向obj中添加一个age属性

obj.age = 18;

/*

* 读取对象中的属性

* 	语法：对象.属性名

*

* 如果读取对象中没有的属性，不会报错而是会返回undefined

 */

console.log(obj.gender);

console.log(obj.hello);

/*

* 修改对象的属性值

* 	语法：对象.属性名 = 新值

*/

obj.name = "tom";

/*

 * 删除对象的属性

 * 	语法：delete 对象.属性名

*/

delete obj.name;

4. 属性名和属性值

向对象中添加属性时，对象的属性名不强制要求遵循标识符的规范，什么乱七八糟的名字都可以使用，但是我们还是尽量按照标识符的规范去做。

var obj = new Object();

obj.name = "孙悟空";

如果要使用特殊的属性名，不能采用.的方式操作，需要使用另一种方式：

语法：对象["属性名"] = 属性值

读取时也需要采用这种方式。使用[]这样的形式去操作属性，更加的灵活，在[]中可以之际金额传递一个变量，这样变量值是多少就会读取那个属性。

obj["123"] = 789;

obj["nihao"] = "你好";

var n = "nihao";

//console.log(obj["123"]);

JavaScript对象的属性值，可以是任何类型的数据类型，甚至也可以是一个对象。

obj.test = true;

obj.test = null;

obj.test = undefined;

//创建一个对象

var obj2 = new Object();

obj2.name = "猪八戒";

//将obj2设置为obj的属性

obj.test = obj2;

in运算符：通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true，没有则返回false。

语法："属性值" in 对象

//检查obj中是否含有test2属性

//console.log("test2" in obj);

//console.log("test" in obj);

console.log("name" in obj);

11. 基本数据类型和引用数据类型

基本数据类型：String、Number、Boolean、Null、Undefined

引用数据类型：Object

JavaScript中的变量都保存到栈内存中。基本数据类型的值直接在栈内存中存储，值和值之间是相互独立的，修改一个变量不会影响其他变量的值。

引用类型的对象是保存在堆内存中，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象的引用，当一个通过变量修改属性时，另一个也会受到影响。

当比价两个基本数据类型的值时，就是比较的值。而比较两个引用数据类型时，他比较的时内存地址，如果两个对象一模一样，但是地址不一样，使用==比较时也会返回false。

12. 对象的字面量

创建一个对象可以使用关键词new

var obj = new Object();

也可以使用对象字面量来创建一个对象

var obj = {}

使用对象字面量，可以在创建对象时，直接指定对象中的属性，语法：

{属性值:属性名, 属性名:属性值}

对象字面量的属性名可以加引号也可以不加，建议不加，如果要使用一些特殊的名字，则必须加引号。