1、函数
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);
第一个()中表示匿名函数,正常书写
第二个()中表示函数调用,正常传参
练习:
改版日期计算器:
1. 在页面中添加按钮,点击时执行程序
<button onclick="alert();"></button>
2. 将闰年判断的代码封装成函数
3. 整体计算过程封装成函数,按钮点击调用
2、变量作用域
1、变量起作用的范围
2、分类 :
1、全局作用域
处在全局作用域中的变量就是全局变量,在整个程序的任何地方都可以访问和使用。
使用:
1. 所有在函数外部通过var声明创建的变量,都是全局变量(在任何地方都可以访问)
2. 声明变量时,省略var关键字创建的变量,都是全局变量(推荐使用var关键字,不要省略)
2、局部作用域 (JS中局部作用域指的是函数作用域)
在函数体内部起作用的变量,称为局部变量
函数体的{}就是局部作用域
使用:
1、在函数内部使用var关键字定义的变量都是局部变量,只在当前函数作用域(函数体)中可以访问,外界无法访问
2、局部变量出了函数就不能访问了
注意 :
在函数中访问变量,
1. 如果当前函数中没有该变量,就访问全局作用域中的变量
2. 如果当前函数中定义了该变量,全局中也有相同的变量名,函数就近访问变量
3、作用域查找:
如果函数内部与外部定义了同名的变量,函数体中访问,采用就近原则。
先查找当前局部作用域,找不到再到上一级作用域中查找
3、数组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的数组
3、使用:
1、使用"数组名[index]"的方式操作数组元素
语法:数组名[下标];
说明:数组中每一个元素都有对应的下标,元素的下标范围 0 -> length-1
根据下标访问元素 :arr[8]
根据下标修改元素 :var a = arr[8];
2、数组是对象类型
对象是由属性和方法组成的
通过点语法访问对象的属性和方法
属性:
1、length:获取数组长度
使用:数组名.length;
et:arr.length;
3、清空数组中元素:
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),比较数据大小,
并进行排序,最终按照从小到大的顺序输出
4、常用方法:
1、常用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()
删除数组的头部元素
返回值 :返回被删除的元素
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
4、JS的内置对象
1、对象:
对象由属性和方法组合,可以使用点语法访问对象的属性和方法
et :
var arr = [1,2,3];
arr.length; //访问属性
arr.push(100); //访问方法
2、对象分类
1、内置对象:
由ECMAScript规定,例如数组,字符串,Math,Date...
2、BOM 对象:
浏览器对象模型,浏览器各大厂商制定,提供一系列与浏览器操作相关的对象
3、DOM 对象:
文档对象模型,提供一系列规范的操作文档的对象
4、自定义对象
3、内置对象分类:
1、String 对象
1、创建:
var str1 = "hello";
var str2 = new String("world");
2、属性和方法
1、属性:
length:获取字符串长度
var s = "hello";
var s2 = "h e l l o";
s.length; //5
s2.length; //9
2、方法:
1、英文字符串的大小写转换
1、toUpperCase() 转换为全大写字母
2、toLowerCase() 转换为全小写字母
注意:该方法会返回新的字符串,不影响原始字符串
练习:
1、创建数组,保存数组和字母
2、生成随即6位的验证码
从数组中随机抽取6位元素,组成验证码
随机数:Math.random();
生成[0,1)之间的随机数
3、生成的验证码提示给用户输入
4、验证用户输入的是否正确
在不区分大小写的情况下,只要输入正确都提示"输入正确"
2、获取字符或字符编码
1、获取指定位置的字符
charAt(index);
2、获取指定位置的字符对应的编码
charCodeAt(index);
3、检索字符串
1、indexOf(value[,fronIndex])
作用:获取指定字符的下标
参数:
1、value: 必填,设置查找字符集
2、fromIndex:可选参数,设置从哪个下标