第六次前端培训

1 JS运算符

JavaScript 运算符用于赋值，比较值，执行算术运算等。

1.1 算术运算符

运算符	描述	例子	y 值	x 值
+	加法	x = y + 2	y = 5	x = 7
-	减法	x = y - 2	y = 5	x = 3
*	乘法	x = y * 2	y = 5	x = 10
/	除法	x = y / 2	y = 5	x = 2.5
%	余数	x = y % 2	y = 5	x = 1
++	自增	x = ++y	y = 6	x = 6
		x = y++	y = 6	x = 5
--	自减	x = --y	y = 4	x = 4
		x = y--	y = 4	x = 5

1.2 JavaScript 赋值运算符

运算符	例子	实例	x 值
=	x = y	x = y	x = 5
+=	x += y	x = x + y	x = 15
-=	x -= y	x = x - y	x = 5
*=	x *= y	x = x * y	x = 50
/=	x /= y	x = x / y	x = 2
%=	x %= y	x = x % y	x = 0

1.3 JavaScript 字符串运算符 

运算符	例子	text1	text2	text3
+	text3 = text1 + text2	"Good "	"Morning"	"Good Morning"
+=	text1 += text2	"Good Morning"	"Morning"	""

1.4 比较运算符

运算符	描述	比较	结果
==	等于	x == 8	false
		x == 5	true
===	值及类型均相等（恒等于）	x === "5"	false
		x === 5	true
!=	不等于	x != 8	true
!==	值与类型均不等（不恒等于）	x !== "5"	true
		x !== 5	false
>	大于	x > 8	false
<	小于	x < 8	true
>=	大于或等于	x >= 8	false
<=	小于或等于	x <= 8	true

1.5 条件运算符

语法	例子
变量 = (条件) ? 值1:值2	voteable = (age < 18) ? "太年轻而不能":"年龄够";

1.6 逻辑运算符 

运算符	描述	例子
&&	和	(x < 10 && y > 1) 为 true
||	或	(x == 5 || y == 5) 为 false
!	非	!(x == y) 为 true

1.7 JavaScript 位运算符

运算符	描述	例子	类似于	结果	十进制
&	AND	x = 5 & 1	0101 & 0001	0001	1
|	OR	x = 5 | 1	0101 | 0001	0101	5
~	取反	x = ~ 5	~0101	1010	-6
^	异或	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移	x = 5 << 1	0101 << 1	1010	10
>>	右移	x = 5 >> 1	0101 >> 1	0010	2

2 控制语句

JS的这些控制语句与Java基本相同。

2.1 条件语句

在 JavaScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

2.2 不同类型的循环

JavaScript 支持不同类型的循环：

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块 

3  JS数组

JS中数组为Array对象。

数组对象的作用是：使用单独的变量名来存储一系列的值。

数组的下标从0开始，不会出现下标越界。

3.1 数组定义

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

3.2 数组的基本操作

数组的长度可以通过length属性来获取，并可以任意更改。

数组名.length

数组名.length = 新长度

数组中每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界。

通常会用undifend填充或代替。

数组名[下标]

数组名[下标] = 新值

3.3 数组遍历 

3.3.1 for循环遍历

不会拿到属性值。

for (var i = 0; i < a.length; i ++) {  //遍历数组
    console.log(a[i]);
}

3.3.2 for...in

不会拿到undifend，会拿到属性。

for(var 变量名 in数组变量名){
    数组变量名[变量名]
}

for(var index  in arr){
    console.log(arr[index]);
}

3.3.3 forEach

只会拿到正常的值，不会拿到undifend和属性。

someArray.forEach(function(elem, index) {
    console.log(elem, index);
});

3.4 数组提供的操作方法

常用的方法：

push：添加元素到最后

join：数组转成字符串

indexOf：数组元素索引

补充：split：属于字符串的方法，将字符串转换为数组

其他：

unshift

pop

shift

reverse

slice

splice

concat

4 函数

函数，即方法。就是一段预先设置的功能代码块，可以反复调用，根据输入参数的不同，返回不同的值。函数也是对象。

4.1 函数的定义

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

4.1.1 函数声明

function myFunction(a, b) {
    return a * b;
}

函数声明后不会立即执行，会在我们需要的时候调用到。

4.1.2 函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};

在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

4.1.3 Function() 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

4.2 函数的参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。

函数的参数分为形参和实参。

• 实参可以省略，那么对于形参为undifend。
• 若函数形参同名，在使用时以最后一个值为准。
• 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
• 参数为值传递，传递副本；引用传递时传递地址存在，操作的是同一个对象。

• 函数定义时形式参数没有指定数据类型。
• 函数对实际参数没有进行类型检测。
• 函数对实际参数的个数没有进行检测。

4.3 函数的调用 

1.常用调用模式

        函数名([参数列表]);

2.函数调用模式（函数有返回值）

        var 变量名 = 函数名([参数列表]);

3.方法调用模式

        对象.函数名([参数列表]);

4.4 return 

作用：

1.在没有返回值的方法中，用来结束方法。（如果方法没有返回值，返回的是undifend）

2.在有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。

4.5 函数的作用域

函数中的变量只有在它被调用时才会被定义。

函数中没有使用“var”声明的是全局变量，使用“var”声明的是局部变量。

• 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
• 每调用一次，函数就会创建一个新的函数作用域，它们之间是互相独立的
• 在函数作用域中，可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量