js第二次培训

1.运算符与控制语句

（1）Js的运算符
算数运算符
使用方法和java一致

+  -   ++  --  /  *

逻辑运算符

与&  或|  非!  并且&&   或者||   亦或^  小于<   大于>
小于等于<=   大于等于>=  不等于!=

连接符

+  //在string类型参与运算的时候, +会变成连接符
1

特殊预算符
== 等值符

先比较类型, 如果类型一致, 则比较内容. 如果类型不一致, 会将比较的内容进行强制类型转换, 统一转换成number. 然后进行比较.

=== 等同符

类型不一致直接false. 类型一致比较内容.

（2）Js中的控制语句

和java中使用情况一致

条件语句

if(){} {}
if(){} else {}
if(){} else if() {}...else{}

分支语句(选择语句)

switch() {
       case value: break;
       case value2: break;
       default: break;
       }

循环语句
 

while(){}

do while(){}
         
for(var i = 0; i < 10; i ++){}

2.数组 

1.（1）什么是数组
数组是存储一个或多个数据的容器，它是一组内存空间，通常用来批量处理数据，这组内存空间名字叫做数组。
（2）数组的特点
数组是个不挑食的家伙，对齐自身储存的数据并没有什么要求，无论是数量还是类型，通过数组下标从来管理数组元素。
（3）.length
数组名.length表示数组的长度，也是数组当前存储元素的个数，因为下标从0开始，所以数组长度-1表示数组最后一个元素的下标。
创建一个数组：
var arr = new Array();
字面量写法(语法糖)：
var arr = [4,5,9,“haha”]
访问数组单个元素 arr[0];
访问数组全部元素需要和for循环结合使用；

2. 数组的遍历

（1）for
    最简单的一种循环遍历方法，也是使用频率最高的一种，可优化
    循环过程中支持修改索引（修改 i）

var arr = [1, 2, 3, 4, 5, 6]
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

// 1 2 3 4 5 6

    优化：使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显

var arr = [1, 2, 3, 4, 5, 6]
var len = arr.length
for(var i = 0; i < len; i++) {
    console.log(arr[i])
}

// 1 2 3 4 5 6

(2）for…in…
    这个循环用的人也很多，但是效率最低（输出的 key 是数组索引），如果遍历的是对象，输出的则是对象的属性名

var arr = ['我', '是', '谁', '我', '在', '哪']
for(let key in arr) {
    console.log(key)
}

// 0 1 2 3 4 5

let obj = {
        a: 11,
        b: 22,
        c: 33
}
for(let key in obj) {
    console.log(key)
}
// a b c 

（3） forEach（也叫作增强for循环）

    1. 数组里的元素个数有几个，该方法里的回调就会执行几次
    2. 第一个参数是数组里的元素，第二个参数为数组里元素的索引，第三个参数则是它自己（利用第三个参数可以进行数组去重）
    3. 数组自带的遍历方法，foreach在循环次数未知或者计算起来较复杂的情况下效率比for循环高
    4. 循环的数组元素是基本数据类型，不会改变原数据的数据，循环的数组元素为对象，会改变原数组的对象属性的值
    5. 循环过程中不支持修改索引，回调中使用return不会报错，但是无效
    注意：不能使用break和continue跳出整个循环或当前循环的，会报错，但是结合try...catch可

var arr = [1, 2, 3, 4, 5, 6]
arr.forEach((item, idnex, array) => {
    console.log(item)     // 1 2 3 4 5 6
    console.log(array)    // [1, 2, 3, 4, 5, 6]
})

// 循环的数组元素是基本数据类型，不会改变原数据的数据
var arr1 = [1, 2, 3, 4, 5, 6]
arr1.forEach((item) => {
    item = 10
})
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// 循环的数组元素为对象，会改变原数组的对象属性的值
var arr2 = [
    { a:1, b:2 },
    { a:11, b:12 }
]
arr2.forEach((item) => {
    item.a = 10
})
console.log(arr2) //  [{a: 10, b: 2}, {a: 10, b: 2}]

// 使用try...catch...可以跳出循环
try {
   let arr = [1, 2, 3, 4];
   arr.forEach((item) => {
       // 跳出条件
       if (item === 3) {
           throw new Error("LoopTerminates");
       }
       console.log(item);
   });
} catch (e) {
    if (e.message !== "LoopTerminates") throw e;
};
// 1 2

3.函数 

1.函数的概念：
JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。
2.函数的声明：
(1).函数表达式：
A.概念：函数只能在声明之后调用。因为这种方式声明的函数，是在函数运行的阶段才赋值给变量 f 的；
B.函数代码：

 

赋值式函数声明可以没有函数名。
函数定义和调用规范:先声明再调用。
(2).声明式：
A.函数声明的关键字 : function；
B.function 关键字 和 var 关键字的行为几乎一致，都会在内存上开辟一块空间，用来存储变量之中的数据;
核心代码：

function 函数名( 条件 ){
//代码
}

注：函数的命名规则和变量命名规则完全一致;
函数推荐驼峰命名; 变量推荐_命名;
函数代码：

 

函数定义了，会把代码默默的放在那里，不会去执行代码;只要在程序主动调用的时候，代码才会执行;
注：值得注意的是，当同时使用这两种方式声明同一个函数名，最终执行的是函数表达式声明的函数。
承接上图—函数代码：

 

最终输出结果：

 

(3).通过构造函数方法：
构造方法：var 变量名 = new Function(‘形参1’,‘形参2’…,‘函数体’);
函数代码：

效果图： 

 

3.函数的调用：
函数调用的两种形式;
(1).在代码之中调用;
函数名+(); 调用运算符; 函数可以多次调用;

 

(2)浏览器在特定时机帮你调用函数----------事件;
html标签进行触发 => 浏览器接受 => 浏览器调用函数;
在事件中调用，直接写函数名，不使用括号
代码如下：

console.log(btn);
在点击的时候会让浏览器调用对应的函数;
btn 就是元素的id;
onclick 是事件行为;
btn.odblnclick = foo;
效果图：