JS基础（3）
一、函数
1、函数就是一段待执行的代码段
2、函数可以实现功能的封装，可以实现代码的复用
3、函数使用
1、函数的声明
2、函数的调用
注意 ：函数先声明后调用（JS中非强制）
4、语法 ：
1、函数声明
1、使用function关键字进行函数的声明
et：
function 函数名 (参数列表) {
函数体;
return;
}
2、函数名自定义， 普通函数的函数名尽量使用小写或小驼峰
1. JS中函数声明使用function关键字
2. 遵照变量命名规范，见名知意
3、参数列表，参数表示函数体执行所需要的数据（可以为空，为空时()不能省略；多个参数之间使用,隔开）
et:
function sum (a,b){
return a + b;
}
4、函数体就是待执行的代码段
5、return 表示返回值，将函数体内部执行的结果传递给外界，只能返回一个值（返回值不需要的话，可以省略return）
et :
function showFn(){
console.log("hello");
}
注意：return一定要写在函数体的末尾，return关键字后面的代码都不执行
2、函数调用
语法：函数名(参数列表);
注意：如果函数存在返回值，需要定义变量接收
var res = 函数名();
3、使用：
1、函数先声明，后调用（非强制）
2、参数传递：
函数声明时定义的参数列表，称为形参，只声明变量，不考虑赋值
et:
function sum (a,b){
var c = a + b;
}
函数调用时给出的参数，是实际参数。调用的过程中，将实际参数赋值给形参，参与函数体中代码的执行。
et:
sum(10,20); //a = 10;b = 20;
3、函数可以声明多个参数，使用,隔开
4、函数声明和调用时的参数个数可以不匹配
et:
sum(10);
sum(10,20,30);
4、匿名函数
省略函数名的函数
语法：
1、var fn = function(){}
将匿名函数保存给一个变量，使用变量名()的方式调用
et： var fn = function (){
函数体;
};
fn();
2、匿名函数自执行
(function(a,b){
console.log("自执行");
})(10,20);
第一个()中表示匿名函数，正常书写
第二个()中表示函数调用，正常传参
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. 无参数，无返回值的函数 function f1 (){ console.log("f1"); } f1(); //函数调用 //2. 有参数，无返回值 function f2(a){ console.log(a); } f2("f2"); //3. 有参数，有返回值 function sum(a,b){ /* var c = a + b; return c; */ console.log(a,b); return a + b; } var res = sum(10,20); console.log(res); //var input = prompt(); var r1 = sum(10); console.log(r1); var r2 = sum(10,20,30); console.log(r2); //4. 匿名函数 var f4 = function (){ console.log("f4"); }; f4(); console.log(f4); (function (a,b){ console.log("自执行",a,b); })(10,20); </script> </head> <body> </body> </html>
练习：
改版日期计算器：
1. 在页面中添加按钮，点击时执行程序
<button onclick="alert();"></button>
2. 将闰年判断的代码封装成函数
3. 整体计算过程封装成函数，按钮点击调用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. 闰年判断 function isRun (year){ return year % 400 == 0 || (year % 100 != 0 && year % 4 == 0); } function calculateDate(){ //日期计算 //1.接收用户输入，转换数据类型 var year = Number(prompt("请输入年份")); var month = Number(prompt("请输入月份")); var day = Number(prompt("请输入日期")); //总天数 var dayNum = 0; //2. 相隔的年份对应天数相加 for(var i = 1990; i < year; i ++){ dayNum += 365; //闰年判断 if(isRun(i)) dayNum ++; } //3. 当前年中经过的天数 for(var j = 1; j < month; j ++){ switch(j){ case 1 : case 3 : case 5 : case 7 : case 8 : case 10 : dayNum += 31; break; case 4 : case 6 : case 9 : case 11 : dayNum += 30; break; case 2 : dayNum += 28; if(isRun(year)) dayNum ++; } } dayNum += day; //余数范围 0 - 6 周日 - 周六 var weekDay = dayNum % 7; var show = ""; switch(weekDay){ case 0 : show = "日"; break; case 1 : show = "一"; break; case 2 : show = "二"; break; case 3 : show = "三"; break; case 4 : show = "四"; break; case 5 : show = "五"; break; case 6 : show = "六"; break; } alert(year+"年"+month+"月"+day+"日"+"是星期"+show); } </script> </head> <body> <input type="button" value="日期计算" onclick="calculateDate();"> </body> </html>
二、变量作用域
1、变量起作用的范围
2、分类 ：
1、全局作用域
处在全局作用域中的变量就是全局变量，在整个程序的任何地方都可以访问和使用。
使用：
1. 所有在函数外部通过var声明创建的变量，都是全局变量（在任何地方都可以访问）
2. 声明变量时，省略var关键字创建的变量，都是全局变量（推荐使用var关键字，不要省略）
2、局部作用域 （JS中局部作用域指的是函数作用域）
在函数体内部起作用的变量，称为局部变量
函数体的{}就是局部作用域
使用：
1、在函数内部使用var关键字定义的变量都是局部变量，只在当前函数作用域（函数体）中可以访问，外界无法访问
2、局部变量出了函数就不能访问了
注意 ：
在函数中访问变量，
1. 如果当前函数中没有该变量，就访问全局作用域中的变量
2. 如果当前函数中定义了该变量，全局中也有相同的变量名，函数就近访问变量
3、作用域查找：
如果函数内部与外部定义了同名的变量，函数体中访问，采用就近原则。
先查找当前局部作用域，找不到再到上一级作用域中查找
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var a = 100; b = 200; function fn(){ var c = 300; //所有省略var关键字定义的变量，都是全局变量 d = 400; var a = 1000; console.log("fn-"+a); } fn(); console.log("外部-"+a); function f1(){ function f2 (){ console.log(a); } f2(); } f1(); </script> </head> <body> </body> </html>
三、数组Array
1、有序的元素序列，用来存放一些数据
（数组中的元素会自动分配下标，从0开始，方便读写）
2、创建数组
1、创建空数组
var 数组名 = [];
et：var arr1 = []; //创建空数组
2、创建空数组
var 数组名 = new Array();
et：var arr2 = new Array(); //创建空数组
3、初始化元素
1、创建数组的同时初始化元素
var 数组名 = [元素1,元素2,...];
et：var arr3 = [10,20,30];
2、根据下标初始化元素 ：
数组会为元素自动分配下标，从0开始
var arr4 = [];
arr4[0] = 100;
...
arr4[3] = 200;
3、使用new关键字初始化
var 数组名 = new Array(元素1,元素2,...);
et：var arr5 = new Array(10,20,30);
4、初始化数组长度
var 数组名 = new Array(Num);
只包含一个数值参数时，表示初始化数组长度
et：var arr6 = new Array(5);//创建长度为5的数组
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1.创建空数组 var arr1 = []; var arr2 = new Array(); console.log(arr1,arr2); //2. 初始化数据 //2.1 根据下标初始化元素 arr1[0] = 10; arr1[1] = 20; console.log(arr1); var arr3 = ["中午","吃什么"]; var arr4 = new Array(100,200); console.log(arr3,arr4); //3. 初始化数组长度 var arr5 = new Array(10); console.log(arr5.length); //清空数组 var arr6 = [1,2,3,4,5]; console.log(arr6); arr6.length = 0; console.log(arr6,arr6.length); </script> </head> <body> </body> </html>
3、使用：
1、使用"数组名[index]"的方式操作数组元素
语法：数组名[下标];
说明：数组中每一个元素都有对应的下标，元素的下标范围 0 -> length-1
根据下标访问元素 ：arr[8]
根据下标修改元素 ：var a = arr[8];
2、数组是对象类型
对象是由属性和方法组成的
通过点语法访问对象的属性和方法
属性：
1、length：获取数组长度
使用：数组名.length;
et：arr.length;
2、清空数组中元素：
arr.length = 0;
3、遍历数组
循环输出数组元素
et:
//正序
for(var i = 0; i <= arr.length - 1; i ++){
console.log(arr[i]);
}
//倒序
for(var i = arr.length -1; i >= 0 ; i --){
console.log(arr[i]);
}
练习 1：
1. 循环接收用户输入的数据
2. 将用户输入的数据存在数组中
3. 当用户输入exit时，停止输入
4. 存储结束之后，输出数组元素
练习 2：
创建包含若干元素的数组（number），
遍历数组，输出最大值
练习 3：
创建包含若干数字的数组，接收用户输入，
判断数组中是否存在用户输入的数字，存在
则返回对应的下标，不存在提示用户数据不存在
练习 4：
创建数组，保存三个数据（number），比较数据大小，
并进行排序，最终按照从小到大的顺序输出
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. 接收用户输入并存储 function saveData(){ var arr = []; do{ var input = prompt("请输入数据"); //arr.length可以作为数组中下一个元素的下标 if(input != "exit") arr[arr.length] = input; }while(input != "exit"); console.log(arr); } //2. 遍历数组找最大值 function findMax(){ var arr = [12,45,65,24,78,966,33,-1,-987,5]; //定义变量保存最大值，初始值必须是数组中存在的数据 var maxNum = arr[0]; for(var i = 1; i < arr.length; i++){ //取数组中元素与maxNum进行比较 if(arr[i] > maxNum){ maxNum = arr[i]; } } console.log(maxNum); } function findIndex(){ //3. 查找下标 var arr = [12,45,65,24,78,966,33,-1,-987,5]; var input = prompt("请输入数字"); var index = ""; //index用来保存数组下标 for(var i = 0; i < arr.length; i ++){ //在组中查找到数据，将下标赋值给index if(arr[i] == input) index = i; } if(index == ""){ console.log("查询失败",arr); }else{ console.log(input+"对应的下标为"+index,arr); } } //4. 数组排序 var arr = [64,128,37]; if(arr[0] > arr[1]){ //互换两个下标位置的值 arr[0] = arr[0] ^ arr[1]; arr[1] = arr[0] ^ arr[1]; arr[0] = arr[0] ^ arr[1]; } if(arr[1] > arr[2]){ arr[1] = arr[1] ^ arr[2]; arr[2] = arr[1] ^ arr[2]; arr[1] = arr[1] ^ arr[2]; } if(arr[0] > arr[1]){ //互换两个下标位置的值 arr[0] = arr[0] ^ arr[1]; arr[1] = arr[0] ^ arr[1]; arr[0] = arr[0] ^ arr[1]; /* //借助中间变量 var a = 3, b = 5; var c = arr[0]; arr[0] = arr[1]; arr[1] = c; */ } console.log(arr); </script> </head> <body> </body> </html>
4、常用方法：
常用API
1、toString()
将数组内容转换为字符串，并返回。
2、join()
将数组中元素拼接成一个字符串，并返回
参数 ：可以指定数组元素之间的连接符,省略的话，默认以逗号连接。
et：
var arr = [1,2,3];
arr.join(); //返回字符串 "1,2,3"
arr.join('-'); //返回字符串 "1-2-3"
3、reverse()
反转数组元素，倒序重排元素
返回反转后的数组
注意：
reverse()是对当前数组结构的调整，不会生成新的数组，
直接反转原始数组，可以不接收返回值。
4、sort()
1、将数组内容进行排序，返回排序后的数组
2、默认按照Unicode编码升序排列
注意：
sort()方法也是对数组结构的调整，直接对原数组的元素进行排序，会改变原始数组
3、参数可以为自定义的排序函数
et：
function sortAsc(a,b){
return b - a; // b-a两两比较，倒序排列
}
arr.sort(sortAsc);
console.log(arr);
5、push(data)
表示在数组的末尾追加元素
参数 ：可以是一个，也可以是多个，多参数之间使用逗号隔开。
返回值 ：返回新数组的长度
6、pop()
表示删除数组最后一个元素
返回值 ：返回被删除的元素
数组的存储结构 ：
数组在内存中使用栈结构存储，先进后出
7、unshift(data)
向数组的头部添加元素
参数 ：可以是一个元素，也可以是多个元素
返回值 ： 返回添加元素之后的数组长度
8、shift()
删除数组的头部元素
返回值 ：返回被删除的元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //1. toString() var arr = [1,2,3]; var res = arr.toString(); console.log(arr,res); //2. join() var r1 = arr.join(); console.log(r1); var r2 = arr.join("-"); console.log(r2); //3. reverse() var r3 = arr.reverse(); console.log(r3,arr); //[3,2,1] console.log(arr.reverse()); //4. sort() var arr2 = [200,10,300,54,5]; var r4 = arr2.sort(); console.log(r4,arr2); //自定义排序函数 function sortAsc(a,b){ //b - a 两两比较，倒序排列 return b - a; } arr2.sort(sortAsc); console.log(arr2); //5. push() var arr3 = ["hello"]; var res1 = arr3.push("小明"); console.log(res1,arr3); var res2 = arr3.push(1,2,3); console.log(res2,arr3); //6. pop() var res3 = arr3.pop(); console.log(res3,arr3); //7. unshift() var res4 = arr3.unshift("first","second","third"); console.log(res4,arr3); //8.shift() var res5 = arr3.shift(); console.log(res5,arr3); </script> </head> <body> </body> </html>
5、二维数组
数组中的每一个元素的是一个小数组
er：
var arr = [["唐僧","悟空"],["宝玉","宝钗"],["伏地魔"]];
访问元素：
arr[0]; //["唐僧","悟空"]
arr[0][0]; //"唐僧"
练习：
1、接收用户输入的数字
2、转换为二进制并输出
var n = 10;
10 / 2 = 5 ------ 0
5 / 2 = 2 ---------1
2 / 2 = 1 ---------0
1 / 2 = 0 ---------1
10的二进制 1010
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var input = Number(prompt("请输入数字")); var arr = []; while(input > 0){ //转换二进制 arr[arr.length] = input % 2; //结果是小数,取整数商参与下一次除2 input = parseInt(input / 2); } arr.reverse(); //反转数组 var r = arr.join(''); //拼接字符串 console.log(r); </script> </head> <body> </body> </html>
posted on 2018-10-20 15:21 破天荒的谎言、谈敷衍 阅读(192) 评论(0) 收藏 举报
浙公网安备 33010602011771号