技术文章 | jishuwenzhang

北京html5培训之JavaScript学习笔记(D5)


 
第5天北京html5培训课堂笔记
(本课程共8天)
 

一、北京html5培训之函数

1.1 函数的作用域

函数的作用域和变量很相似,函数只能在声明的内部使用,任何其他地方都不能调用。
1 function outer(){
2 function inner(){
3 var a = 1 ;
4 console.log(a);
5 }
6 inner();
7 }

9 outer();
10 inner();//inner函数在outer内部定义的,只能在内部调用
 

1.2 闭包

1 function outer(){
2 var a = 1;
3 function inner(){
4 console.log(a);
5 }
6 return inner;//inner后面书写小阔号表示执行,不写小括号表示函数定义
7 }
8 // console.log(outer());
9 // 等价写法i = inner;
10 var i = outer();//i = function inner(){console.log(a)}
11 i();
 
 
inner函数把它自己内部的语句,和自己声明时所处的作用域一起封装成了一个密闭环境,我们称为“闭包”。
函数本身就是一个闭包。函数定义的时候,就能记住它的外部环境和内部语句,每次执行都会参考定义时的密闭环境。
 
闭包天生存在,并不需要什么特殊的结构才存在,只不过我们必须要刻意地把函数放到其他的作用域中调用,才能明显的观察到闭包性质。
1 function fun1(m,n){
2                       //fun2外部环境是 n ;
3 function fun2(m){
4 console.log(m + n);//内部语句m + n;
5 }
6 return fun2;
7 }
8 var f = fun1(3,5);
9 // f = fun1(3,5) =fun2(m){console.log(m + 5);}
10 f(6)   //f(6) = fun2(6){console.log(6 + 5)}
11 f(10)
 
 
1 function outer(){
2 var a = 1;
3 function inner(){
4 a ++;
5 console.log(a);
6 }
7 return inner;
8 }

10 var i = outer();
11 // i = outer() = function inner(){}
12 i();
13 i();
14 i();
     
函数的闭包,记住了定义时所在的作用域,这个作用域中的变量不是一成不变的。
 
 

2 function outer(){
3 var a = 1;
4 function inner(){
5 a = a + 1;
6 console.log(a);
7 }
8 return inner;
9 }
10 
11 var inn1 = outer();
12 var inn2 = outer();
13 
14 inn1();
15 inn1();
16 inn1();
17 inn2();
 
我们可以认为,每次调用一个函数,都会产生新的闭包。新的闭包是指,语句全新,所处环境也是全新的。

二、北京html5培训之数组

2.1 概述

数组array:一组有序的集合。
创建:数组字面量
语法:[]创建,数组每一项用逗号隔开,最后一项不用书写逗号。
1 var arr = [1,2,3,4,5];
 
读取:我们可以通过数组的索引值(index)索引值从0开始,或者数组下标得到数组中每一项。arr[index]
1 var arr = [1,2,3,4,5];
2 console.log(arr[0]);
3 console.log(arr[1]);
4 console.log(arr[4]);
 
设置:也是通过索引值或者下标得到。arr[index] = n;
1 arr[4] = 10;
2 console.log(arr[4]);
 
1 // 可以通过索引值将数组拉长,中间没有赋值输出undefined
2 arr[10] = 20;
3 console.log(arr[10]);
4 console.log(arr[5]);
 

2.2 length

数组的数据类型:引用数据类型。
1 var arr = [1,2,3,4,5];
2 console.log(typeof arr);
 
 
引用数据都设置自己的属性和方法;
属性:一个事物具有的特征或者特点。比如人的身高,体重
方法:事物具有的某种行为。比如人的吃饭,睡觉,走路。
 
一般引用数据类型都具有length属性。在数组中表示数组的长度,就是数组的元素的个数。
对象打点调用属性(点语法)arr.length。
1 console.log(arr.length);
 
数组的有效索引值0 - length-1。数组最后一项arr[arr.length -1]
1 // 可以通过length将数组拉长
2 arr.length = 10;
3 console.log(arr.length);
4 console.log(arr[6]);
5 console.log(arr[8] = 8);
 
我们可以通过设置length的长度强制将数组拉长,由于我们拉长的部分没有进行赋值,将会输出undefined。
 
1 // 可以通过length将数组拉长
2 arr.length = 10;
3 console.log(arr.length);
4 console.log(arr[6]);
5 console.log(arr[8] = 8);

2.3 数组遍历

通过某种方法得到数组中每一项。
1 var arr = [1,3,5,6,7,8,9];
2 for(var i = 0 ; i <= arr.length - 1 ; i ++){
3 console.log(arr[i]);
4 }
 
1 // 求每一项阶乘的和
2 var sum = 0;
3 for(var i = 0 ; i <= arr.length - 1 ; i ++){
4 sum += jiecheng(arr[i]);
5 }
6 console.log(sum);

8 // 阶乘函数
9 function jiecheng(a){
10 var cheng = 1;
11 for(var i = 1 ; i <= a ; i ++){
12 cheng *= i;
13 }
14 return cheng;
15 }

三、北京html5培训之数组的方法

3.1 首尾操作的方法

pop():删除数组的最后一项,返回最后一项的值。
push();在数组的末尾添加,参数是要添加的数据,返回值数组的长度。
shift():删除数组第一项,返回第一项的值。
unshift():在数组的开头添加,参数是要添加的数据,返回值是数组的长度。
 
 
1 var arr = ["春","夏","秋","冬"];
2 // pop()删除最后一项
3 console.log(arr.pop());
4 console.log(arr);
 
1 arr.push("季节");
2 console.log(arr);
 
如果添加多项,用逗号隔开。
1 console.log(arr.push("梅","兰"));
 
1 // shift()删除第一项
2 console.log(arr.shift());
3 console.log(arr);
 
1 // unshift()在开头添加
2 arr.unshift(arr.pop());
3 console.log(arr);
 
将数组的第一项添加到末尾。
1 arr.push(arr.shift());
2 console.log(arr);

3.2 数组合并和拆分的方法

l 数组合并方法:concat()。将两个或者多个数组合并成一个数组。
参数:可以是数组,还可以是一些散的值,或者数字字面量都可以,非常灵活。
返回值:合并后的数组。原数组不会改变。
1 // 参数可以是数组变量。
2 console.log(arr1.concat(arr2));
3 console.log(arr1);


6 // 数组字面量,或者是一些散的值
7 console.log(arr1.concat([33,56,7]));
8 console.log(arr1.concat("春","xia",["1","你好"]));
 
l 数组拆分的方法:表示截取数组中某一段数据。slice(start,end)。返回截取的这一段数组,原数组不会发生变化。
表示从start索引值开始截取,到end结束,包括start,但是不包含end。
 
1 console.log(arr1.slice(2,5));
2 console.log(arr1);
 
 
start,end还可以用负数表示,最后一项是的索引值是-1。
1 // slice()可以使用负数
2 var arr1 = [1,2,3,4,5,6];
3 console.log(arr1.slice(-3,-1));
 
slice()可以省略不写end,表示截取到数组最后一项。
1 // slice()还可以省略不写end
2 console.log(arr1.slice(1));
 

3.3 数组的删除,插入或者替换的方法

splice(index,howmany,element1,element2……)
红色的参数表示必须书写的参数,黑色参数表示可以书写的参数。
index:表示数组删除第一项的索引值。
howmany:表示要删除元素的个数。howmany可以是0.表示不删除元素,如果后面还有参数,表示要插入的元素。如果howmany不是0。表示要删除的个数。后面如果还有参数表示要替换的元素。
element:表示要插入或者是替换的元素。
原数组发生改变。
 
返回值是删除的元素组成的数组。当howmany是0时,返回一个空数组。
 
l 删除:index,和howmay必须不为0,同时element不能书写。
1 // 删除splice(index,howmany)
2 console.log(arr.splice(2,3));
3 console.log(arr);
 
 
l 插入,index(要插入元素的索引值),howmany是0,同时element需要书写,如果插入多项,用逗号隔开。
1 // 插入splice(index,0,element)
2 console.log(arr.splice(2,0,33,45,67));
3 console.log(arr);
 
 
l 替换  index(要删除元素的索引值),howmany不是0,同时element需要书写,如果要替换的元素,用逗号隔开。注意:删除的个数和要替换的个数可以不相同。
1 // 替换
2 // console.log(arr.splice(3,3,"4","5","6"));
3 console.log(arr.splice(3,3,"4","5"));
4 console.log(arr.splice(3,3,"4","5","6","7"));
5 console.log(arr);
 

3.4 数组排序的方法

数组的倒序:reverse()。数组的倒序只是将数据的顺序进行颠倒。也就将第一项变成最后一项,最后一项变成第一项。
参数:不需要书写参数
返回值:是一个新数组。原数组发生改变。
 
1 var arr = [1,"哈哈","hello","34","12",6];
2 console.log(arr.reverse());
3 console.log(arr);
 
排序:sort();
参数:小阔号中不传参数,只是单纯将数据进行排序。
排序原理:先将数组中每一项转换为字符串,然后根据字符编码进行排序。顺序:数字,大写字母,小写字母。
 
1 console.log(arr.sort());
 
 
 
sort()可以书写参数。sort方法有一个参数叫做比较函数。如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。
定义排序顺序:自定义升序排序。
我们将要比较的两个参数记为a,b。
 
如果a < b,数组排序后的顺序a应该在b前面。返回值是负数。
如果a == b,数组排序后的顺序a,b不区分先后。返回值是0.
如果a > b ,数组排序后的顺序a应该在b后面。返回值是正数。
 
1 arr.sort(function (a,b){
2 if(a < b){
3 return -3;
4 }else if(a == b){
5 return 0;
6 }else if(a > b){
7 return 1;
8 }
9 });
 

3.5 join()

join()是将数组转换为字符串。
可以书写参数,表示数组中每一项以参数连接转换为字符串。
1 var arr = ["你","我","ta","加","合并"];
2 // console.log(arr.join("+"));
3 var str = arr.join("*_*");
4 console.log(typeof str);
 
还可以不写参数,是以逗号连接。
 
1 console.log(arr.join());
 

四、北京html5培训字符串

4.1 length

length属性返回字符串中全部字符的数量。
字符:字母,数字,标点,特殊符号,空格,汉字等
1 var str = "今天天气有点阴天, 注意保暖!";
2 // console.log(typeof str);
3 console.log(str.length);

4.2 方法

4.2.1charAt()

返回指定位置的值。指定位置:表示字符在字符串中的索引值。
 
1 console.log(str.charAt(0));
2 console.log(str.charAt(6));
 
1 // 遍历字符串
2 for(var i = 0 ; i < str.length ; i ++){
3 console.log(str.charAt(i));
4 }
 
 

4.2.2 indexOf()

返回指定字符在字符串中首次出现的位置。如果该字符不存在,返回-1。
1 console.log(str.indexOf("天"));
2 console.log(str.indexOf("好"));
 

4.2.3 concat()

用于多个字符串的拼接。参数可以书写一个或者多个字符串,用逗号隔开。返回拼接后的新字符串。原字符串不改变。
1 console.log(str.concat("我是后加的","又加了点"));
 

4.2.4 slice()

slice(start,end)用于字符串的截取,从start开始截取,截取到end。包括start,不包括end。返回截取的字符串。原字符串不受影响。


 爱创课堂是一家专门做前端培训的机构,由百度高级工程师,<javascript设计模式>作者张容铭老师亲自授课,全程20个项目实战。我们前端课程的五大优势:
1. 名师亲自授课,课程无缝隙对接企业
2. 免费学习一周
3. 签订就业协议,目前学员平均就业薪资12K
4. 采取小班教学模式(一个班20—30人)
5. :与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
 
扫描下方二维码或搜索微信公众号:icketang  
关注并回复:js  领取 js基础全套视频教程+课堂笔记+案例
更多前端学习资料,请添加微信:haomei0452

 
访问:http://www.icketang.com/?zh获取更多信息。