一惦费、函數(shù)
1） 作用
封裝一段待執(zhí)行的代碼
2）語(yǔ)法
//函數(shù)聲明
function 函數(shù)名(參數(shù)列表){
函數(shù)體
return 返回值;
}
//函數(shù)調(diào)用
函數(shù)名(參數(shù)列表);
3）使用
函數(shù)名自定義兵迅，見名知意，命名規(guī)范參照變量的命名規(guī)范薪贫。普通函數(shù)以小寫字母開頭恍箭，用于區(qū)分構(gòu)造函數(shù)(構(gòu)造函數(shù)使用大寫字母開頭，定義類)
4）匿名函數(shù)
匿名函數(shù)：省略函數(shù)名的函數(shù)瞧省。
- 匿名函數(shù)自執(zhí)行
(function (形參){
})(實(shí)參);
(function () {
var a = 110
// 構(gòu)建局部作用域
console.log("匿名函數(shù)自執(zhí)行", a)
})()
---------------------------
結(jié)果:匿名函數(shù)自執(zhí)行 110
- 定義變量接收匿名函數(shù)
var fn = function (){};
fn(); //函數(shù)調(diào)用
例如:
var fn = function (){
console.log("fn被調(diào)用")
}
fn()
console.log(fn)
// 函數(shù)作為參數(shù)
function show (f){
console.log("show:",f)
f()
}
show(fn)
show(function (){
console.log("直接傳遞匿名函數(shù)");
})//f = function(){}
-------------------------------
結(jié)果:
fn被調(diào)用
? (){
console.log("fn被調(diào)用")
}
show: ? (){
console.log("fn被調(diào)用")
}
fn被調(diào)用
show: ? (){
console.log("直接傳遞匿名函數(shù)");
}
直接傳遞匿名函數(shù)
5）作用域
JS中作用域分為全局作用域和函數(shù)作用域扯夭，以函數(shù)的{ }作為劃分作用域的依據(jù)
- 全局變量和全局函數(shù)
- 只要在函數(shù)外部使用var關(guān)鍵字定義的變量,或函數(shù)都是全局變量和全局函數(shù),在任何地方都可以訪問
- 所有省略var關(guān)鍵字定義的變量,一律是全局變量
- 局部變量/局部函數(shù)
- 在函數(shù)內(nèi)部使用var關(guān)鍵字定義的變量為局部變量,函數(shù)內(nèi)部定義的函數(shù)也為局部函數(shù),只能在當(dāng)前作用域中使用,外界無(wú)法訪問
- 作用域鏈
局部作用域中訪問變量或函數(shù),首先從當(dāng)前作用域中查找,當(dāng)前作用域中沒有的話,向上級(jí)作用域中查找,直至全局作用域
二、 內(nèi)置對(duì)象
1） 對(duì)象
對(duì)象是由屬性和方法組成的,使用點(diǎn)語(yǔ)法訪問
2） Array 數(shù)組
1. 創(chuàng)建
// 1.數(shù)組的創(chuàng)建
var arr1 = ["東哥哥", 30, true]
console.log(arr1);
//使用new 關(guān)鍵字創(chuàng)建
var arr2 = new Array("小澤", 31, false)
console.log(arr2)
//特殊
var arr3 = [5];
//使用new關(guān)鍵字傳遞一個(gè)整數(shù)參數(shù)創(chuàng)建數(shù)組,代表初始化數(shù)組長(zhǎng)度
var arr4 = new Array(5)
console.log(arr3, arr4)
//2.操作數(shù)組元素(根據(jù)元素索引)
console.log(arr3[0]);
arr4[0] = "老琦";
arr4[2] = "大徐";
arr4[8] = "漂亮";
console.log(arr4);
2. 特點(diǎn)
- 數(shù)組用于存儲(chǔ)若干數(shù)據(jù),自動(dòng)為每位數(shù)據(jù)分配下標(biāo),從0開始
- 數(shù)組中的元素不限數(shù)據(jù)類型,長(zhǎng)度可以動(dòng)態(tài)調(diào)整
- 動(dòng)態(tài)操作數(shù)組元素 ：根據(jù)元素下標(biāo)讀取或修改數(shù)組元素鞍匾，arr[index]
3. 屬性和方法
- 屬性 : length 表示數(shù)組長(zhǎng)度,可讀可寫
//3.數(shù)組對(duì)象的屬性:length
console.log(arr4.length);//
//4.遍歷數(shù)組元素
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循環(huán)
for(var i in arr5){
console.log(i,arr5[i]);//i 取到的是下標(biāo)
}
//數(shù)組對(duì)象提供的遍歷方法,forEach(function(){})
//回調(diào)函數(shù)
arr5.forEach(function(elem,index){
console.log('-----',elem,index)
})
----------------------------------------
//作業(yè)1:控制臺(tái)輸出輸入內(nèi)容
var arr01 = []
function fn() {
while (item != "exit") {
var item = prompt("請(qǐng)輸入:")
arr01[arr01.length]=item
//或者:arr01.push(item)
}
}
fn()
arr01.forEach(function (elem, index) {
console.log(elem, index)
})
--------------------------------------------
//作業(yè)2:遍歷數(shù)組取最大值:
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);
-------------------------------------------
//作業(yè)3:定義數(shù)組,接收用戶輸入的內(nèi)容,查詢數(shù)組中是否存在相應(yīng)的元素,如果存在,返回相應(yīng)元素的下表,不存在返回-1
//查找元素第一次出現(xiàn)的下標(biāo)
function query(arr) {
var elem = prompt("請(qǐng)輸入您想查詢的元素:")
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)
---------------------------------------
//查找元素最后一次出現(xiàn)的下標(biāo)
function query(arr) {
var elem = prompt("請(qǐng)輸入您想查詢的元素:")
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)
在數(shù)組的末尾添加一個(gè)或多個(gè)元素,多個(gè)元素之間使用逗號(hào)隔開
返回添加之后的數(shù)組長(zhǎng)度pop()
移除末尾元素
返回被移除的元素unshift(data)
在數(shù)組的頭部添加一個(gè)或多個(gè)元素
返回添加之后的數(shù)組長(zhǎng)度shift()
移除數(shù)組的第一個(gè)元素
返回被移除的元素
1.操作數(shù)組的頭尾元素 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()
將數(shù)組轉(zhuǎn)換成字符串類型
返回字符串結(jié)果-
join(param)
將數(shù)組轉(zhuǎn)換成字符串,可以指定元素之間的連接符,如果參數(shù)省略,默認(rèn)按照逗號(hào)連接
返回字符串//2.轉(zhuǎn)換字符串 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()
反轉(zhuǎn)數(shù)組,倒序重排
返回重排的數(shù)組,注意該方法直接修改原數(shù)組的結(jié)構(gòu)//3.數(shù)組反轉(zhuǎn)(倒序重排) arr.reverse();//調(diào)整原有數(shù)組的結(jié)構(gòu) console.log(arr); //[1, "you", "love", "I", "world", "hello", 10, 30] -
sort()
對(duì)數(shù)組中元素排序,默認(rèn)按照Unicode編碼升序排列
返回重排后的數(shù)組,直接修改原有數(shù)組
參數(shù) : 可選,自定義排序算法//4.數(shù)組排序 arr.sort(); console.log(arr) //[1, 10, 30, "I", "hello", "love", "world", "you"] //默認(rèn)按照Unicode編碼升序排列 ------------------------------------- arr.sort(function (a, b) { //a,b代表數(shù)組相鄰的兩個(gè)元素,如果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"] ------------------------------------------- /*復(fù)雜數(shù)組*/ 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 //將數(shù)組元素按照年齡升序排列 array.sort(function (e1, e2) { return e1.age - e2.age; }) console.log(array) ------------------------------------------- //實(shí)現(xiàn)十進(jìn)制轉(zhuǎn)二進(jìn)制:不斷除2取余,直至商為0,余數(shù)倒序排列 function fn(num) { var arr = [] while (num != 0) { i = num % 2 num = parseInt(num / 2) arr.unshift(i) } return arr } num = prompt("請(qǐng)輸入需要轉(zhuǎn)化的數(shù)字:") var r = fn(num).join("") console.log(r) //自定義升序 function sortASC(a,b){ return a-b; } ```
作用：作為參數(shù)傳遞到sort()中,會(huì)自動(dòng)傳入兩個(gè)元素進(jìn)行比較,如果a-b>0,交換元素的值,自定義升序排列
//自定義降序
function sortDESC(a,b){
return b-a;
}
//如果返回值>0,交換元素的值,b-a表示降序排列
- forEach(param)
遍歷數(shù)組元素
參數(shù)為函數(shù)
例 :
arr.forEach(function (elem,index){
//forEach()方法會(huì)自動(dòng)調(diào)用匿名函數(shù),依次傳入元素及下標(biāo)
});
4. 二維數(shù)組
數(shù)組中的每個(gè)元素又是數(shù)組
var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作數(shù)組元素
var r1 = arr2[0] //內(nèi)層數(shù)組
var num = r1[0]; //值 1
//簡(jiǎn)寫
var num2 = arr2[1][0];
//二維數(shù)組的遍歷
for (var i in arr){
for (var j in arr[i]){
console.log(arr[i][j])
}
}
3）String 對(duì)象
1. 創(chuàng)建
var str = "100";
var str2 = new String("hello");
-----------------------------
var s1 ="瑪利亞";
var s2 = new String("小澤瑪利亞");
console.log(s1,s2)
//瑪利亞 String {"小澤瑪利亞"}
2. 特點(diǎn)
字符串采用數(shù)組結(jié)構(gòu)存儲(chǔ)每位字符,自動(dòng)為字符分配下標(biāo),從0開始
3. 屬性
length ：獲取字符串長(zhǎng)度
//2.字符串按照數(shù)組結(jié)構(gòu)存儲(chǔ),可以使用數(shù)組方法操作字符
console.log(s2[3],s1[1]) // 利 利
//遍歷字符串
for(var i =0;i<s2.length;i++){
console.log(s2[i])
}// 小澤瑪利亞
4. 方法
-
轉(zhuǎn)換字母大小寫
toUpperCase() 轉(zhuǎn)大寫字母
toLowerCase() 轉(zhuǎn)小寫字母
返回轉(zhuǎn)換后的字符串,不影響原始字符串//轉(zhuǎn)換大小寫字母 var s3 = "Maria"; var r1 = s3.toUpperCase(); var r2 = s3.toLowerCase(); console.log(r1, r2, s3) // MARIA maria Maria -
獲取字符或字符編碼
charAt(index) 獲取指定下標(biāo)的字符
charCodeAt(index) 獲取指定下標(biāo)的字符編碼
參數(shù)為指定的下標(biāo),可以省略,默認(rèn)為0//獲取指定下標(biāo)對(duì)應(yīng)的字符或字符編碼 var r3 = s3.charAt(3) var r4 = s3.charCodeAt(1) console.log(r3, r4) //i 97 -
獲取指定字符的下標(biāo)
indexOf(str,fromIndex)
作用 : 獲取指定字符的下標(biāo),從前向后查詢,找到即返回
參數(shù) :
str 表示要查找的字符串,必填
fromIndex 表示起始下標(biāo),默認(rèn)為0
返回 :
返回指定字符的下標(biāo),查找失敗返回-1lastIndexOf(str,fromIndex)
作用 : 獲取指定字符最后一次出現(xiàn)的下標(biāo),從后向前查找,找到即返回
參數(shù) :
str 必填,表示要查找的內(nèi)容
fromIndex 選填,指定起始下標(biāo)
var r5 = s3.indexOf("a"); var r6 = s3.lastIndexOf("a") console.log(r5,r6) //1 4 -
截取字符串
substring(startIndex,endIndex)
作用 : 根據(jù)指定的下標(biāo)范圍截取字符串,startIndex ~ endIndex-1
參數(shù) :
startIndex 表示起始下標(biāo)
endIndex 表示結(jié)束下標(biāo),可以省略,省略表示截止末尾var r7 = s3.substring(0,2) console.log(r7) //Ma -
分割字符串
split(param)
作用 : 將字符串按照指定的字符進(jìn)行分割,以數(shù)組形式返回分割結(jié)果
參數(shù) : 指定分隔符,必須是字符串中存在的字符,如果字符串中不存在,分割失敗,仍然返回?cái)?shù)組var r8 = s3.split("a"); console.log(r8);//["M", "ri", ""] var r9 = s3.split("/"); console.log(r9);//["Maria"]練習(xí):1.接收用戶輸入的郵箱,提取用戶名和服務(wù)商 "zhangsan@163.com" 2.從身份證中提取年月日信息 前6位代表省份地市區(qū) +4位年+4為月,日 3."101_5&201_7&301_9" 商品id為101,數(shù)量為5 var email=prompt("輸入郵箱:"); var us= email.split("@")[0]; var fw= email.split("@")[1]; console.log(us,fw); var ID=prompt("身份證號(hào)碼:"); 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<arr.length;i++){ var arr2=arr[i].split('_'); console.log("商品id為:",arr2[0],"商品數(shù)量為",arr2[1]) } 模式匹配
作用 : 借助正則表達(dá)式實(shí)現(xiàn)字符串中固定格式內(nèi)容的查找和替換
正則表達(dá)式 :
var reg1 = /字符模式/修飾符;
修飾符 :
i : ignorecase 忽略大小寫
g : global 全局范圍
字符串方法 :-
match(regExp/subStr)
作用 : 查找字符串中滿足正則格式或滿足指定字符串的內(nèi)容
返回 : 數(shù)組,存放查找結(jié)果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)
作用 : 根據(jù)正則表達(dá)式或字符串查找相關(guān)內(nèi)容并進(jìn)行替換
返回 : 替換后的字符串,不影響原始字符串var res3 = str.replace(reg2,"新浪"); console.log(str,res3); //上知乎,搜知乎,問知乎,答知乎 上新浪,搜新浪,問新浪,答新浪 -
作業(yè): 模擬驗(yàn)證碼:
- 創(chuàng)建數(shù)據(jù)源(由大小寫字母和數(shù)字組成)
- 隨機(jī)取四位字符,拼成驗(yàn)證碼
隨機(jī)數(shù):Math.random()返回[0,1]之間的隨機(jī)小數(shù)
調(diào)整為隨機(jī)下標(biāo) - 提示用戶輸入(不區(qū)分大小寫)
- 比較用戶輸入的結(jié)果,給出驗(yàn)證結(jié)果
