一、函数
1） 作用
封装一段待执行的代码
2）语法
//函数声明
function 函数名(参数列表){
函数体
return 返回值;
}
//函数调用
函数名(参数列表);
3）使用
函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)
4）匿名函数
匿名函数：省略函数名的函数。
- 匿名函数自执行
(function (形参){
})(实参);
(function () {
var a = 110
// 构建局部作用域
console.log("匿名函数自执行", a)
})()
---------------------------
结果:匿名函数自执行 110
- 定义变量接收匿名函数
var fn = function (){};
fn(); //函数调用
例如:
var fn = function (){
console.log("fn被调用")
}
fn()
console.log(fn)
// 函数作为参数
function show (f){
console.log("show:",f)
f()
}
show(fn)
show(function (){
console.log("直接传递匿名函数");
})//f = function(){}
-------------------------------
结果:
fn被调用
ƒ (){
console.log("fn被调用")
}
show: ƒ (){
console.log("fn被调用")
}
fn被调用
show: ƒ (){
console.log("直接传递匿名函数");
}
直接传递匿名函数
5）作用域
JS中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据
- 全局变量和全局函数
- 只要在函数外部使用var关键字定义的变量,或函数都是全局变量和全局函数,在任何地方都可以访问
- 所有省略var关键字定义的变量,一律是全局变量
- 局部变量/局部函数
- 在函数内部使用var关键字定义的变量为局部变量,函数内部定义的函数也为局部函数,只能在当前作用域中使用,外界无法访问
- 作用域链
局部作用域中访问变量或函数,首先从当前作用域中查找,当前作用域中没有的话,向上级作用域中查找,直至全局作用域
二、 内置对象
1） 对象
对象是由属性和方法组成的,使用点语法访问
2） Array 数组
1. 创建
// 1.数组的创建
var arr1 = ["东哥哥", 30, true]
console.log(arr1);
//使用new 关键字创建
var arr2 = new Array("小泽", 31, false)
console.log(arr2)
//特殊
var arr3 = [5];
//使用new关键字传递一个整数参数创建数组,代表初始化数组长度
var arr4 = new Array(5)
console.log(arr3, arr4)
//2.操作数组元素(根据元素索引)
console.log(arr3[0]);
arr4[0] = "老琦";
arr4[2] = "大徐";
arr4[8] = "漂亮";
console.log(arr4);
2. 特点
- 数组用于存储若干数据,自动为每位数据分配下标,从0开始
- 数组中的元素不限数据类型,长度可以动态调整
- 动态操作数组元素 ：根据元素下标读取或修改数组元素，arr[index]
3. 属性和方法
- 属性 : length 表示数组长度,可读可写
//3.数组对象的属性:length
console.log(arr4.length);//
//4.遍历数组元素
for (var val of arr4) {
console.log(val + "\n")
}
//顺序遍历
var arr5 = [1, 2, 3, 4, 5]
for (var i = 0; i < arr5.length; i++) {
console.log(arr5[i])
}
//倒序遍历
for (var i = arr5.length - 1; i >= 0; i--) {
console.log(arr5[i])
}
//------------------------------
//for-in循环
for(var i in arr5){
console.log(i,arr5[i]);//i 取到的是下标
}
//数组对象提供的遍历方法,forEach(function(){})
//回调函数
arr5.forEach(function(elem,index){
console.log('-----',elem,index)
})
----------------------------------------
//作业1:控制台输出输入内容
var arr01 = []
function fn() {
while (item != "exit") {
var item = prompt("请输入:")
arr01[arr01.length]=item
//或者:arr01.push(item)
}
}
fn()
arr01.forEach(function (elem, index) {
console.log(elem, index)
})
--------------------------------------------
//作业2:遍历数组取最大值:
function showMax(arr) {
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if(arr[i]>max){
max=arr[i]
}
}
console.log(max)
}
var arr02 = [12, 5, 11, 88, 53, 2, 0, 95];
showMax(arr02);
-------------------------------------------
//作业3:定义数组,接收用户输入的内容,查询数组中是否存在相应的元素,如果存在,返回相应元素的下表,不存在返回-1
//查找元素第一次出现的下标
function query(arr) {
var elem = prompt("请输入您想查询的元素:")
var index = -1
for (var i = 0; i < arr.length; i++) {
if (arr[i] == elem) {
index = i;
break;
}
}
console.log(index);
}
var arr03 = [12, 5, 11, 88, 53, 2, 0, 95, -2];
query(arr03)
---------------------------------------
//查找元素最后一次出现的下标
function query(arr) {
var elem = prompt("请输入您想查询的元素:")
var index = -1
for (var i = arr.length-1;i>-0; i--) {
if (arr[i] == elem) {
index = i;
break;
}
}
console.log(index);
}
var arr03 = [12, 5, 11, 88, 53, 2, 0, 95, -2];
query(arr03)
- 方法 :
push(data)
在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
返回添加之后的数组长度pop()
移除末尾元素
返回被移除的元素unshift(data)
在数组的头部添加一个或多个元素
返回添加之后的数组长度shift()
移除数组的第一个元素
返回被移除的元素
1.操作数组的头尾元素 var arr = ["hello", "world", "I"]; var r1 = arr.push("love", "you", 1, 2); console.log(r1, arr);//7 ["hello", "world", "I", "love", "you", 1, 2] var r2 = arr.pop(); console.log(r2, arr);//2 ["hello", "world", "I", "love", "you", 1] var r3 = arr.unshift(10); r3 = arr.unshift(20, 30) console.log(r3, arr); //9 [20, 30, 10, "hello", "world", "I", "love", "you", 1] var r4 = arr.shift(); console.log(r4, arr)//20 [30, 10, "hello", "world", "I", "love", "you", 1]
toString()
将数组转换成字符串类型
返回字符串结果-
join(param)
将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
返回字符串//2.转换字符串 var r5 = arr.toString(); var r6 = arr.join("-") console.log(r5)//30,10,hello,world,I,love,you,1 console.log(r6)//30-10-hello-world-I-love-you-1 console.log(arr)//[30, 10, "hello", "world", "I", "love", "you", 1] -
reverse()
反转数组,倒序重排
返回重排的数组,注意该方法直接修改原数组的结构//3.数组反转(倒序重排) arr.reverse();//调整原有数组的结构 console.log(arr); //[1, "you", "love", "I", "world", "hello", 10, 30] -
sort()
对数组中元素排序,默认按照Unicode编码升序排列
返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法//4.数组排序 arr.sort(); console.log(arr) //[1, 10, 30, "I", "hello", "love", "world", "you"] //默认按照Unicode编码升序排列 ------------------------------------- arr.sort(function (a, b) { //a,b代表数组相邻的两个元素,如果a-b>0,则交换元素的位置 //自定义升序 return a - b; }) console.log(arr) //[1, 10, 30, "I", "hello", "love", "world", "you"] function sortDESC(a,b) { //自定义降序 return b - a; } arr.sort(sortDESC) console.log(arr) //[30, 10, 1, "I", "hello", "love", "world", "you"] ------------------------------------------- /*复杂数组*/ var obj={ uid:001,uname:"大哥",play:function(){ console.log("play") } } console.log(obj.uid); // 1 obj.play(); // play ------------------------------------------- var array = [ { uname: "大徐", age: 35 }, { uname: "小徐", age: 33 }, { uname: "小则", age: 32 } ]; console.log(array[0].age) //35 //将数组元素按照年龄升序排列 array.sort(function (e1, e2) { return e1.age - e2.age; }) console.log(array) ------------------------------------------- //实现十进制转二进制:不断除2取余,直至商为0,余数倒序排列 function fn(num) { var arr = [] while (num != 0) { i = num % 2 num = parseInt(num / 2) arr.unshift(i) } return arr } num = prompt("请输入需要转化的数字:") var r = fn(num).join("") console.log(r) //自定义升序 function sortASC(a,b){ return a-b; } ```
作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列
//自定义降序
function sortDESC(a,b){
return b-a;
}
//如果返回值>0,交换元素的值,b-a表示降序排列
- forEach(param)
遍历数组元素
参数为函数
例 :
arr.forEach(function (elem,index){
//forEach()方法会自动调用匿名函数,依次传入元素及下标
});
4. 二维数组
数组中的每个元素又是数组
var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
//简写
var num2 = arr2[1][0];
//二维数组的遍历
for (var i in arr){
for (var j in arr[i]){
console.log(arr[i][j])
}
}
3）String 对象
1. 创建
var str = "100";
var str2 = new String("hello");
-----------------------------
var s1 ="玛利亚";
var s2 = new String("小泽玛利亚");
console.log(s1,s2)
//玛利亚 String {"小泽玛利亚"}
2. 特点
字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始
3. 属性
length ：获取字符串长度
//2.字符串按照数组结构存储,可以使用数组方法操作字符
console.log(s2[3],s1[1]) // 利 利
//遍历字符串
for(var i =0;i4. 方法
-
转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串//转换大小写字母 var s3 = "Maria"; var r1 = s3.toUpperCase(); var r2 = s3.toLowerCase(); console.log(r1, r2, s3) // MARIA maria Maria -
获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0//获取指定下标对应的字符或字符编码 var r3 = s3.charAt(3) var r4 = s3.charCodeAt(1) console.log(r3, r4) //i 97 -
获取指定字符的下标
indexOf(str,fromIndex)
作用 : 获取指定字符的下标,从前向后查询,找到即返回
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回 :
返回指定字符的下标,查找失败返回-1lastIndexOf(str,fromIndex)
作用 : 获取指定字符最后一次出现的下标,从后向前查找,找到即返回
参数 :
str 必填,表示要查找的内容
fromIndex 选填,指定起始下标
var r5 = s3.indexOf("a"); var r6 = s3.lastIndexOf("a") console.log(r5,r6) //1 4 -
截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾var r7 = s3.substring(0,2) console.log(r7) //Ma -
分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组var r8 = s3.split("a"); console.log(r8);//["M", "ri", ""] var r9 = s3.split("/"); console.log(r9);//["Maria"]练习:1.接收用户输入的邮箱,提取用户名和服务商 "[email protected]" 2.从身份证中提取年月日信息 前6位代表省份地市区 +4位年+4为月,日 3."101_5&201_7&301_9" 商品id为101,数量为5 var email=prompt("输入邮箱:"); var us= email.split("@")[0]; var fw= email.split("@")[1]; console.log(us,fw); var ID=prompt("身份证号码:"); var year=ID.substring(6,10); var month=ID.substring(10,12); var day=ID.substring(12,14); console.log(year,month,day); var str = "101_5&201_7&301_9"; var arr = str.split('&'); for(var i=0;i 模式匹配
作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换
正则表达式 :
var reg1 = /字符模式/修饰符;
修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
字符串方法 :-
match(regExp/subStr)
作用 : 查找字符串中满足正则格式或满足指定字符串的内容
返回 : 数组,存放查找结果var str="上知乎,搜知乎,问知乎,答知乎"; var res1=str.match("知乎"); console.log(res1) //["知乎", index: 1, input: "上知乎,搜知乎,问知乎,答知乎", groups: undefined] var regexp =/\d{6,10}/ig; var reg2=/知乎/g; var res2=str.match(reg2); console.log(res2) ;//["知乎", "知乎", "知乎", "知乎"] -
replace(regExp/subStr,newStr)
作用 : 根据正则表达式或字符串查找相关内容并进行替换
返回 : 替换后的字符串,不影响原始字符串var res3 = str.replace(reg2,"新浪"); console.log(str,res3); //上知乎,搜知乎,问知乎,答知乎 上新浪,搜新浪,问新浪,答新浪 -
作业: 模拟验证码:
- 创建数据源(由大小写字母和数字组成)
- 随机取四位字符,拼成验证码
随机数:Math.random()返回[0,1]之间的随机小数
调整为随机下标 - 提示用户输入(不区分大小写)
- 比较用户输入的结果,给出验证结果