[JavaScript知识库]JavaScript学习笔记1

JavaScript基础部分

1. JavaScript的第一个程序：Hello World！

目的：控制浏览器实现Hello World!文本显示：
三种方法：
控制浏览器弹出一个警告框：

<script>
	alert("Hello World!");
</script>

让计算机在页面中输出一个Hello World!

<script>
	document.write("Hello World!");
</script>

向控制台输出一个Hello World!

<script>
	console.log("Hello World!");
</script>

这三种方式都可以在网页显示Hello World!，只是显示的位置不同而已。第一个是以网页弹窗的形式进行显示的，第二个是在网页中直接显示的，第三个是在网页的控制台显示的页面不显示。值得注意的是，JavaScript的代码必须写在script 标签里，或者写在一个js文件里，然后在网页中引入该文件，引入方式为在script标签里，加上src属性引入文件地址。

1. 编写位置

可以编写到标签的指定属性中，
例如：这个按钮当你点击的时候就会显示Hello World!

<button onclick="alert('Hello World!');">button</button>

将js代码编写到script标签

//这里的type属性也可以不写
<script type="text/javascript">	
	alert("我是script标签中的代码！！");		
</script>

js代码编写到外部js文件中，然后通过script标签引入

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

注释规则
单行注释用 //
多行注释用 /* */
其中js中代码规则：
JS严格区分大小写
JS中每条语句以分号 ; 结尾

变量
JavaScript中的变量是使用var关键字来声明一个变量
例如： var a;
这就声明了一个变量。在为变量赋值
例如：a = 123;
这两项也可以同时进行，例如：var a = 123;

变量的名字叫做标志符，命名一个标识符时需要遵守如下的规则：
1.标识符中可以含有字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法首字母小写，每个单词的开头字母大写，其余字母小写

数据类型
在JavaScript中一种有六种数据类型：

String 字符串数据类型

String字符串需要使用引号，单引号、双引号都行但是不能混着用，不能嵌套。

Number 数值数据类型

JavaScript中所有数值都是Number类型，包括整数和浮点数
在JavaScript中可表示的数字最大值是1.7976931348623157e+308 也可以用Number.MAX_VALUE表示
最小数值是 5e-324 也可以使用 Number.MIN_VALUE
当数值超过了这个值，则会返回一个
Infinity 表示正无穷
-Infinity 表示负无穷

Boolean 布尔值

布尔值只有两个，主要用来做逻辑判断
true
表示真
false
表示假

Null 空值

Null（空值）类型的值只有一个，就是null
null这个值专门用来表示一个为空的对象

Undefined 未定义的

Undefined（未定义）类型的值只有一个，就undefind
当声明一个变量，但是并不给变量赋值时，它的值就是undefined

Object 对象

其中String Number Boolean Null Undefined属于基本数据类型，而Object是引用数据类型。

typeof运算符检查
typeof可以检查当前变量属于什么类型的变量。
检查一个Number类型的数据时，会返回"number"
（包括NaN 和 Infinity）
检查一个String类型的数据时，会返回"String"
检查一个Boolean类型的数据时，会返回"boolean"
检查一个Null类型的数据时，会返回"object"
检查一个Undefined类型的数据时，会返回"undefined"

强制类型转换
强制类型转换是把一个数据类型转换成其他数据类型

将数据转换成String
调用被转换数据类型的toString()方法。
调用String()函数，并将被转换的数据作为参数传递给函数。

将数据转换为Number
使用Number()函数，并将被转换的数据作为参数传递给函数。
parseInt() 把一个字符串转换为一个整数。
parseFloat() 把一个字符串转换为一个浮点数。
如果字符串中有非数字的内容，则转换为NaN；如果字符串是一个空串或者是一个全是空格的字符串，则转换为0；true 转成 1；false 转成 0；null转成0；undefined转成NaN。

将数据转换成Boolean
使用Boolean()函数
数字装成布尔值除了0和NaN其余都是true；字符串除了空串，其余的都是true；null和undefined都会转换为false。

运算符

一元运算符

自增自减

符号在前面先自增自减,在赋值；符号在后面先赋值，在自增自减。

逻辑运算符

! 非：可以用来对一个值进行非运算，对一个布尔值进行取反操作。
&& 与：可以对符号两侧的值进行与运算并返回结果，两个值中只要有一个值为false就返回false，只有两个值都为true时，才会返回true。
& ： 短路的与，如果第一个值为false，则不会看第二个值。
|| ：可以对符号两侧的值进行或运算并返回结果 。
| ： 属于短路的或，如果第一个值为true，则不会检查第二个值。

赋值运算符

关系运算符

符合条件结果返回一个布尔值。

三元运算符
语法：条件表达式?语句1:语句2;
执行的流程：
条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1，并返回执行结果；如果该值为false，则执行语句2，并返回执行结果。

流程控制语句
通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行。
语句的分类：
1.条件判断语句
if语句：
语法一：

if(条件表达式){
	语句...
}

语法二：

if(条件表达式){
	语句...
}else{
	语句...
}

语法三：

if(条件表达式){
	语句...
}else if(条件表达式){
	语句...
}else{
	语句...
}

2.条件分支语句
语法：

switch (条件表达式) {
        case 表达式:
            语句...
            break;
        case 表达式:
            语句...
            break;
        default:
            语句...
            break;
    }

3.循环语句
while循环
语法：

while (条件表达式) {
    语句...
}  

do…while循环
语法：

do {
    语句...
} while (条件表达式);  

while 和 do…while的区别就是：while先进行判断，然后执行语句；do…while是先执行语句后判断。

for循环
语法：

for(①初始化表达式;②条件表达式;④更新表达式){
    ③语句...
}

for循环的执行流程：
①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
②执行条件表达式，判断是否执行循环。如果为true，则执行循环③；如果为false，终止循环
④执行更新表达式，更新表达式执行完毕继续重复②

break跟continue
break - 退出循环；
continue - 跳过当前次循环。

JavaScript中的对象

对象（object）是JavaScript中的应用数据类型，对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性。使用typeof检查一个对象时，会返回object。
创建对象的方式：
方式一：

var obj = new Object();

方式二：

var obj = {
	属性名:属性值,
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
};

向对象中添加属性：
语法：

对象.属性名 = 属性值;
对象["属性名"] = 属性值;

读取对象中的属性
语法：

对象.属性名
对象["属性名"]

假如读取一个对象中没有的属性，它不会报错，而是返回一个undefined。

删除对象中的属性
语法：

delete 对象.属性名;
delete 对象["属性名"];

使用in检查对象中是否含有指定属性
语法:

"属性名" in 对象

如果在对象中含有该属性，则返回true；如果没有则返回false。

基本数据类型和引用数据类型
基本数据类型的数据，变量是直接保存的它的值。变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
引用数据类型的数据，变量是保存的对象的引用（内存地址）。如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。比较两个变量时，对于基本数据类型，比较的就是值，对于引用数据类型比较的是地址，地址相同才相同。

函数

函数也是一个对象，也具有普通对象的功能； 函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码；使用typeof检查一个函数时会返回function。

创建函数
函数声明：

function 函数名([形参1,形参2...形参N]){
	语句...
}

函数表达式：

var 函数名 = function([形参1,形参2...形参N]){
	语句...
};

调用函数
语法：

函数对象([实参1,实参2...实参N]);

形参和实参
形参：形式参数
定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开。定义形参就相当于在函数内声明了对应的变量但是并不赋值，形参会在调用时才赋值。

实参：实际参数
调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参。

返回值
所谓返回值 就是函数执行的结果。使用return来进行设置函数的返回值。

语法：

return 值;

这个值就会成为函数的返回值，可以通过一个变量来进行接收返回值。

注意：
返回值后面的代码都不会执行。函数一单执行到return语句时，函数会退出。
return后面可以跟任何类型的值
如果return后面没有值，就会默认返回Undefined

作用域

作用域就是某个变量的作用范围

全局作用域：
在script标签中编写的代码都是在全局作用域中；
全局作用域有一个全局对象window，window对象有浏览器提供；
全局作用域可以在页面的任意位置进行访问。

函数作用域：
函数作用域是在函数执行时创建的作用域；
函数作用域在函数执行时创建，在函数执行完毕后销毁；
在函数作用域中创建的变量，不能在全局中访问。

在函数作用域中使用一个变量时，会先在自身的作用域中寻找，如果没有，则会在上一级寻找，没有的话会继续向上一级寻找。

声明提前
在全局作用域中，使用var关键字声明的变量会在所有代码执行之前被声明，但是不会赋值。
在函数作用域中，也具有该特性，使用var关键字声明的变量会在函数所有的代码执行前被声明。
所以我们可以在函数声明前来调用函数；
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用 。

this

this是指它所属的对象。
this拥有不同的值，取决于它的位置：
以函数的形式调用时，this永远都是window；
以方法的形式调用时，this就是调用方法的那个对象
例子：
这里创建了一个函数 ，一个对象

//fun函数可以显示this的name属性
function fun() {
    alert(this.name);
}
// 名为obj的变量，有属性name,有方法hello，方法hello的值是fun函数
var obj = {
    name:"小明",
    hello:fun
}
// 通过对象方法调用fun函数
obj.hello();
// 通过函数的形式直接调用fun函数
fun();

第一次弹窗显示小明

第二次弹窗显示空

当我们直接打印this则会发现

//fun函数可以显示this的name属性
function fun() {
    alert(this);
}
// 名为obj的变量，有属性name,有方法hello，方法hello的值是fun函数
var obj = {
    name:"小明",
    hello:fun
}
// 通过对象方法调用fun函数
obj.hello();
// 通过函数的形式直接调用fun函数
fun();

第一个弹窗显示 object类型的对象，以方法的形式调用，this是调用方法的对象。

第二个弹窗显示window的对象，以函数形式调用，this是window。