JavaScript
簡介
JavaScript 是一種具有面向?qū)ο竽芰Φ摹⒔忉屝偷某绦蛟O(shè)計語言险污。更具體一點蒸痹,它是基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言岩齿。它的主要目的是头遭,驗證發(fā)往服務(wù)器端的數(shù)據(jù)寓免、增加 Web 互動、加強用戶體驗度等计维。
JavaScript 的組成
ECMAScript定義的只是這門語言的基礎(chǔ)袜香,與Web瀏覽器沒有依賴關(guān)系,而在基礎(chǔ)語法上可以構(gòu)建更完善的腳本語言享潜。JavaScript的運行需要一定的環(huán)境,脫離了環(huán)境JavaScript代碼是不能運行的嗅蔬,JavaScript只能夠寄生在某個具體的環(huán)境中才能夠工作剑按。JavaScript運行環(huán)境一般都由宿主環(huán)境和執(zhí)行期環(huán)境共同構(gòu)成疾就,其中宿主環(huán)境是由外殼程序生成的,如Web瀏覽器就是一個外殼程序艺蝴,它提供了 一個可控制瀏覽器窗口的宿主環(huán)境猬腰。執(zhí)行期環(huán)境則由嵌入到外殼程序中的JavaScript引擎(或稱為JavaScript解釋器)生成,在這個環(huán)境中 JavaScript能夠生成內(nèi)置靜態(tài)對象猜敢,初始化執(zhí)行環(huán)境等姑荷。
Web瀏覽器自定義的DOM組件,以面向?qū)ο蠓绞矫枋龅奈臋n模型缩擂。DOM定義了表示和修改文檔所需的對象鼠冕、這些對象的行為和屬性以及這些對象之間的關(guān)系。DOM對象胯盯,是我們用傳統(tǒng)的方法(javascript)獲得的對象懈费。DOM屬于瀏覽器,而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容博脑。
前面的DOM是為了操作瀏覽器中的文檔憎乙,而為了控制瀏覽器的行為和操作,瀏覽器還提供了BOM(瀏覽器對象模型)叉趣。
ECMAScript(基礎(chǔ)語法)
JavaScript的核心語法ECMAScript描述了該語言的語法和基本對象
DOM(文檔對象模型)
文檔對象模型(DOM)—— 描述了處理網(wǎng)頁內(nèi)容的方法和接口
BOM(瀏覽器對象模型)
瀏覽器對象模型(BOM)—— 描述了與瀏覽器進行交互的方法和接口
開發(fā)工具
瀏覽器:Chrome
開發(fā)工具:Hbuilder X
進入瀏覽器控制臺 Console:F12
控制臺的作用:
console對象代表瀏覽器的JavaScript控制臺泞边,用來運行JavaScript命令,常常用來顯示網(wǎng)頁運行時候的錯誤信息疗杉。Elements用來調(diào)試網(wǎng)頁的html和css代碼阵谚。
基本用法
JS需要和HTML一起使用才有效果,我們可以通過直接或間接的方式將JS代碼嵌入在HTML頁面中乡数。
行內(nèi)JS : 寫在標(biāo)簽內(nèi)部的js代碼
內(nèi)部JS : 定義在script標(biāo)簽內(nèi)部的js代碼
外部JS : 單獨的js文件椭蹄,在HTML中通過script標(biāo)簽引入
我們可以將JavaScript代碼放在html文件中任何位置,但是我們一般放在網(wǎng)頁的head或者body部分净赴。由于頁面的加載方式是從上往下依次加載的绳矩,而這個對我們放置的js代碼運行是有影響的。
放在<head>部分玖翅,最常用的方式是在頁面中head部分放置<script>元素翼馆,瀏覽器解析head部分就會執(zhí)行這個代碼,然后才解析頁面的其余部分金度。
放在<body>部分应媚,JavaScript代碼在網(wǎng)頁讀取到該語句的時候就會執(zhí)行。
行內(nèi) JS:
<buttononclick="alert('you clicked hered!!!')">click here</button>
內(nèi)部 JS:
<scripttype="text/javascript"charset="utf-8">
? ? alert('this is inner js code')
</script>
外部 JS 文件:
hello.js
alert('this is a outter js document');
hello.html
<!-- 在需要使用js的html頁面中引入 -->
<scriptsrc="js/hello.js"type="text/javascript"charset="utf-8"></script>
JavaScript基礎(chǔ)語法
語句和注釋
JavaScript程序的執(zhí)行單位為行(line)猜极,也就是一行一行地執(zhí)行中姜。一般情況下,每一行就是一個語句。
語句(statement)是為了完成某種任務(wù)而進行的操作丢胚,語句以分號結(jié)尾翩瓜,一個分號即表示一個語句結(jié)束。多個語句可以寫在一行內(nèi)(不建議這么寫代碼)携龟,但是一行寫多條語句時兔跌,語句必須以分號結(jié)尾。
表達(dá)式不需要分號結(jié)尾峡蟋。一旦在表達(dá)式后面添加分號坟桅,則JavaScript引擎就將表達(dá)式視為語句,這樣會產(chǎn)生一些沒有任何意義的語句蕊蝗。
單行注釋:用//起頭仅乓;
多行注釋:放在/* 和 */之間。
兼容html注釋方式:<!-- -->
標(biāo)識符和關(guān)鍵字
標(biāo)識符就是一個名字匿又,用來給變量和函數(shù)進行命名方灾,有特定規(guī)則和規(guī)范
規(guī)則:
由Unicode字母、_碌更、$裕偿、數(shù)字組成、中文組成
(1)不能以數(shù)字開頭
(2)不能是關(guān)鍵字和保留字
(3)嚴(yán)格區(qū)分大小寫
規(guī)范:
(1)見名知意
(2)駝峰命名或下劃線規(guī)則
關(guān)鍵字也稱保留字痛单,是被JavaScript征用來有特殊含義的單詞
arguments嘿棘、break、case旭绒、catch鸟妙、class、const挥吵、continue重父、debugger、default忽匈、delete房午、do、else丹允、enum郭厌、eval、export雕蔽、extends折柠、false、finally批狐、for扇售、function、if、implements承冰、import嘱根、in、instanceof巷懈、interface、let慌洪、new顶燕、null、package冈爹、private涌攻、protected、public频伤、return恳谎、static、super憋肖、switch因痛、this、throw岸更、true鸵膏、try、typeof怎炊、var谭企、void、while评肆、with债查、yield、Infinity瓜挽、NaN盹廷、undefined
變量
變量即一個帶名字的用來存儲數(shù)據(jù)的內(nèi)存空間,數(shù)據(jù)可以存儲到變量中秸抚,也可以從變量中取出數(shù)據(jù)速和。
變量的聲明
JavaScript是一種弱類型語言,在聲明變量時不需要指明數(shù)據(jù)類型剥汤,直接用var修飾符進行聲明颠放。
變量聲明和賦值:
// 先聲明再賦值
vara;
a=10;
// 聲明同時賦值
varb=20;
變量的注意點
(1)若只聲明而沒有賦值,則該變量的值為undefined吭敢。
varbox;
console.log(box);
(2)變量要有定義才能使用碰凶,若變量未聲明就使用,JavaScript會報錯,告訴你變量未定義欲低。
console.log(box2);
(3)可以在同一條var命令中聲明多個變量辕宏。
vara,b,c=10;
console.log(a,b,c);
(4)若使用var重新聲明一個已經(jīng)存在的變量,是無效的砾莱。
varbox=10
varbox;
(5)若使用var重新聲明一個已經(jīng)存在的變量且賦值瑞筐,則會覆蓋掉前面的值
varbox=10;
varbox=25;
(6)JavaScript是一種動態(tài)類型、弱類型語言腊瑟,也就是說聚假,變量的類型沒有限制,可以賦予各種類型的值闰非。
varbox='hello world';
box=10;
變量提升
JavaScript 引擎的工作方式是膘格,先解析代碼,獲取所有被聲明的變量财松,然后再一行一行地運行瘪贱。這造成的結(jié)果,就是所有的變量的聲明語句辆毡,都會被提升到代碼的頭部菜秦,這就叫做變量提升。
console.log(msg);
varmsg="so easy";
?
// 變量提升舶掖,相當(dāng)于下面的代碼
varmsg;
console.log(msg);
msg="so easy";
?
// 說明: 最后的結(jié)果是顯示undefined喷户,表示變量msg已聲明,但還未賦值访锻。
注意:變量提升只對 var 命令聲明的變量有效褪尝,如果變量不是用 var 命令聲明的,就不會發(fā)生變量提升期犬。
console.log(msg);
msg="error";
數(shù)據(jù)類型
雖說JS是弱類型語言河哑,變量沒有類型,但數(shù)據(jù)本身是有類型的龟虎。針對不同的類型璃谨,我們可以進行不同的操作。
JavaScript 中有6 種數(shù)據(jù)類型鲤妥,其中有五種簡單的數(shù)據(jù)類型:Undefined佳吞、Null、布爾棉安、數(shù)值和字符串底扳。一種復(fù)雜數(shù)據(jù)類型Object。
數(shù)? 值(Number): 整數(shù)和小數(shù)(比如 1 和 3.14)
字符串(String): 字符組成的文本(比如"Hello World")
布爾值(Boolean):true(真)和 false(假)兩個特定值
Undefined: ? ? ? 表示“未定義”或不存在贡耽,即此處目前沒有任何值
Null: ? ? ? ? ?? 表示空缺衷模,即此處應(yīng)該有一個值鹊汛,但目前為空
對象(object)(引用) : 各種值組成的集合
?? 1)、對象(object){name:”zhangsan”,age:”18”}
?? 2)阱冶、數(shù)組(array)[1,2,3]
?? 3)刁憋、函數(shù)(function)function test() {}
undefined
undefined類型的值是undefined。
undefined 是一個表示"無"的原始值木蹬,表示值不存在至耻。
出現(xiàn)undefined的常見情況:
(1)當(dāng)聲明了一個變量而沒有初始化時,這個變量的值就是undefined
varbox;
console.log(box);//undefined
(2)調(diào)用函數(shù)時镊叁,該函數(shù)有形參有梆,但未提供實參,則該參數(shù)為undefined意系。
functionnoData(str) {// js函數(shù)形參只需要變量名即可
? ? console.log(str);// undefined
}
noData();// 調(diào)用方法時,未傳遞參數(shù)
(3)函數(shù)沒有返回值時饺汹,默認(rèn)返回 undefined蛔添。
// 方法沒有返回值
functionnoData() {
? ? console.log("Hello");
}
varre=noData();// 定義變量接收無返回值的方法
console.log(re);
null
null類型是只有一個值的數(shù)據(jù)類型,即特殊的值null兜辞。它表示空值迎瞧,即該處的值現(xiàn)在為空,它表示一個空對象引用逸吵。
使用Null類型值時注意以下幾點:
1)使用typeof操作符測試null返回object字符串凶硅。
2)undefined派生自null,所以等值比較返回值是true扫皱。未初始化的變量和賦值為null的變量相等足绅。
console.log(undefined==null);
varbox=null;// 賦值為null的變量
vara;// 未初始化的變量
console.log(a==box);? // 兩個的值相等?
布爾類型
布爾類型有兩個值:true、false韩脑。常用來做判斷和循環(huán)的條件
數(shù)值型
數(shù)值型包含兩種數(shù)值:整型和浮點型氢妈。
1)所有數(shù)字(整型和浮點型)都是以 64 位浮點數(shù)形式儲存。所以段多,JS中1 與 1.0 相等首量,而且 1 加上 1.0 得到的還是一個整數(shù)。浮點數(shù)最高精度是17位小數(shù)进苍,由于浮點數(shù)運算時可能不精確加缘,盡量不要使用浮點數(shù)做判斷。
2)在存儲數(shù)值型數(shù)據(jù)時自動將可以轉(zhuǎn)換為整型的浮點數(shù)值轉(zhuǎn)為整型觉啊。
console.log(1==1.0);// true
console.log(1+1.0);// 2
varnum=8.0;// 自動將可以轉(zhuǎn)換為整型的浮點數(shù)轉(zhuǎn)為整型
console.log(num);// 8
字符串
使用 ' ' 或 " "引起來拣宏,如:'hello',"good"杠人。
使用加號 '+' 進行字符串的拼接蚀浆,如:console.log('hello' + ' everybody');
對象
對象是一組數(shù)據(jù)和功能的集合缀程。
說明:
{}:表示使用對象字面量方式定義的對象∈锌。空的大括號表示定義包含默認(rèn)屬性和方法的對象杨凑。
類型轉(zhuǎn)換
自動類型轉(zhuǎn)換
函數(shù)轉(zhuǎn)換(String to Number)
JS 提供了 parseInt()和 parseFloat()兩個全局轉(zhuǎn)換函數(shù)。前者把值轉(zhuǎn)換成整數(shù)摆昧,后者把值轉(zhuǎn)換成浮點數(shù)撩满。只有對 String 類型調(diào)用這些方法,這兩個函數(shù)才能正確運行绅你;對其他類型返回的都是 NaN(Not a Number)伺帘。
parseInt()
在轉(zhuǎn)換之前,首先會分析該字符串忌锯,判斷位置為0處的字符伪嫁,判斷它是否是個有效數(shù)字,如果不是偶垮,則直接返回NaN张咳,不再繼續(xù),如果是則繼續(xù)似舵,直到找到非字符
parseInt("1234blue");// returns 1234
parseInt("22.5");// returns 22
parseInt("blue");// returns NaN
parseFloat()
該方法與 parseInt() 方法的處理方式相似脚猾,從位置 0 開始查看每個字符,直到找到第一個非有效的字符為止砚哗,然后把該字 符之前的字符串轉(zhuǎn)換成數(shù)字龙助。不過,對于這個方法來說蛛芥,第一個出現(xiàn)的小數(shù)點是有效字符提鸟。如果有兩個小數(shù)點,第二個小數(shù)點將被看作無效的仅淑,parseFloat()方法會把這個小數(shù)點之前的字符串轉(zhuǎn)換成數(shù)字沽一。
parseFloat("1234blue");// returns 1234.0
parseFloat("22.5");// returns 22.5
parseFloat("22.34.5");// returns 22.34
parseFloat("blue");//returns NaN
顯示轉(zhuǎn)換
幾乎每個數(shù)對象都提供了toString()函數(shù)將內(nèi)容轉(zhuǎn)換為字符串形式,其中Number提供的toString()函數(shù)可以將數(shù)字轉(zhuǎn)換為字符串漓糙。
Number還提供了toFixed()函數(shù)將根據(jù)小數(shù)點后指定位數(shù)將數(shù)字轉(zhuǎn)為字符串铣缠,四舍五入
// 將內(nèi)容轉(zhuǎn)換為字符串形式
vardata=10
console.log(data.toString())
?
// 根據(jù)小數(shù)點后指定位數(shù)將數(shù)字轉(zhuǎn)為字符串,四舍五入
data=1.4;
console.log(data.toFixed(0));
data=1.49;
console.log(data.toFixed(1));
?
// 不能對null和undefined使用
data=null
console.log(data.toString())
data=undefined
console.log(data.toString())
JS 為 Number昆禽、Boolean蝗蛙、String 對象提供了構(gòu)造方法,用于強制轉(zhuǎn)換其他類型的數(shù)據(jù)醉鳖。此時操作的是整個數(shù)據(jù)捡硅,而不是部分。
Number(false)? 0
Number(true)? 1
Number(undefined)? ? NaN
Number(null)? 0
Number("5.5 ")? ? 5.5
Number("56 ")? ? 56
Number("5.6.7 ")? ? NaN
Number(newObject())? ? NaN
Number(100)? ? 100
?
Boolean("");? ? ? ? ? // false – empty string
Boolean("hi");? ? ? ? // true – non-empty string
Boolean(100);? ? ? ? ? // true – non-zero number
Boolean(null);? ? ? ? // false - null
Boolean(0);? ? ? ? ? ? // false - zero
Boolean(newObject()); // true – object
?
最后一種強制類型轉(zhuǎn)換方法 String() 是最簡單的盗棵,因為它可把任何值轉(zhuǎn)換成字符串壮韭。要執(zhí)行這種強制類型轉(zhuǎn)換北发,只需要調(diào)用作為參數(shù)傳遞進來的值的 toString() 方法,即把 1 轉(zhuǎn)換成"1 "喷屋,把 true轉(zhuǎn)換成 "true "琳拨,把 false 轉(zhuǎn)換成 "false ",依此類推屯曹。強制轉(zhuǎn)換成字符串和調(diào)用 toString() 方法的唯一不同之處在于狱庇,對 null 或 undefined 值強制類型轉(zhuǎn)換可以生成字符串而不引發(fā)錯誤:
vars1=String(null);// "null"
varoNull=null;
vars2=oNull.toString();// won’t work, causes anerror
最為簡單的一種轉(zhuǎn)換為字符串的方式,直接在任意數(shù)據(jù)后面 + "" 即可恶耽。
運算符
運算符用于執(zhí)行程序代碼運算密任,會針對一個及其以上操作數(shù)來進行運算。
算數(shù)運算符
運算符描述例子結(jié)果
+加x=y+2x=7
-減x=y-2x=3
*乘x=y*2x=10
/除x=y/2x=2.5
%求余數(shù)x=y%2x=1
++自增(前導(dǎo)加偷俭、后導(dǎo)加)x=++yx=6
--自減(前導(dǎo)減浪讳、后導(dǎo)減)x=--yx=4
賦值和擴展運算符
運算符例子等價于結(jié)果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0
比較運算符
運算符描述例子
==等于x==8 為 false
===全等(值和類型)x===5 為 true;x==="5" 為 false
!=不等于x!=8 為 true
>大于x>8 為 false
<小于x<8 為 true
>=大于或等于x>=8 為 false
<=小于或等于x<=8 為 true
邏輯運算符
運算符描述例子
&&and(x < 10 && y > 1) 為 true
||or(x==5 || y==5) 為 false
!not!(x==y) 為 true
三目運算符
運算符描述例子
?:如果…否則…3>5?3:5
控制語句
我們寫的 JavaScript 代碼都是按照從上到下依次執(zhí)行涌萤,很多時候我們希望代碼按照我們的意愿去執(zhí)行淹遵,比如有選擇性地執(zhí)行某些代碼,或者重復(fù)地執(zhí)行某些代碼形葬,這就需要使用到流程控制語句。
流程控制語句一共有三種:
1. 流程執(zhí)行:從上到下暮的,從左到右
2. 選擇執(zhí)行:分支選擇
3. 循環(huán)執(zhí)行:重復(fù)執(zhí)行
選擇
單選擇
if(條件){
語句體;
}
首先執(zhí)行條件
如果結(jié)果為true笙以,則執(zhí)行語句體;
如果結(jié)果為false冻辩,則結(jié)束if語句猖腕。
注意:若語句體只有一條語句,可以省略大括號恨闪,但不建議省略
雙選擇
if(條件){
語句體1;
}else{
語句體2;
}
首先執(zhí)行條件
如果結(jié)果為true倘感,則執(zhí)行語句體1;
如果結(jié)果為false咙咽,則執(zhí)行語句體2老玛。
多選擇
if(比較表達(dá)式1) {
? ? 語句體1;
}elseif(比較表達(dá)式2){
? ? 語句體2;
}elseif(比較表達(dá)式3){
? ? 語句體3;
}
? ? ...
[else{
? ? 語句體n+1;
}]
switch結(jié)構(gòu)
多個 if ...else 且值為定值時(即=== 在比較運行結(jié)果時钧敞,采用的是嚴(yán)格相等運算符(===)蜡豹,而不是相等運算符(==),這意味著比較時不會發(fā)生類型轉(zhuǎn)換溉苛。) 镜廉,可以使用 switch 替換:
switch(表達(dá)式) {
? ? case值1:
? ? ? ? 語句體1;
? ? ? ? break;
? ? case值2:
? ? ? ? 語句體2;
? ? ? ? break;
? ? ...
? ? default:
? ? ? ? 語句體n+1;
? ? ? ? [break;]
}
break 防止穿透,如果沒有 break,則繼續(xù)執(zhí)行后面的代碼愚战,直到遇到 break 或全部執(zhí)行完畢娇唯,但是有些時候會利用穿透齐遵。
循環(huán)
循環(huán)結(jié)構(gòu)用于重復(fù)執(zhí)行某個操作 簡單理解就是重復(fù)執(zhí)行同類型的代碼,它有多種形式塔插。
while
先判斷后執(zhí)行
基本格式
? ? while(判斷條件語句) {
? ? ? ? 循環(huán)體語句;
? ? }
擴展格式:
? ? 初始化語句;
? ? while(判斷條件語句){
? ? ? ? 循環(huán)體語句;
? ? ? ? 控制條件語句; // ? 少了它很容易形成死循環(huán)
?? }
do...while
先執(zhí)行后判斷梗摇,至少執(zhí)行一次
基本格式
? ? do{
? ? ? ? 循環(huán)體語句;
? ? }while(判斷條件語句);
擴展格式:
? ? 初始化語句;
? ? do{
? ? ? ? 循環(huán)體語句;
? ? ? ? 控制條件語句;
? ? }while(判斷條件語句);
for
for(初始化語句;判斷條件語句;控制條件語句){
? ? 循環(huán)體語句;
}
死循環(huán)
條件永遠(yuǎn)成立,永遠(yuǎn)為 true,則會產(chǎn)生死循環(huán)佑淀,下面是最簡單的死循環(huán)
while(true){}
for(;;){}
break 與 continue
break: 停止本層循環(huán)
continue:暫停本次循環(huán)留美,繼續(xù)下一次
數(shù)組
數(shù)組是按次序排列的一組數(shù)據(jù),每個值的位置都有編號(從0開始)伸刃,整個數(shù)組用方括號表示谎砾。
數(shù)組定義
JS 中定義數(shù)組的三種方式如下(也可先聲明再賦值):
vararr=[值1,值2,值3];// 隱式創(chuàng)建
?
vararr=newArray(值1,值2,值3);// 直接實例化
?
vararr=newArray(size);// 創(chuàng)建數(shù)組并指定長度
基本操作
數(shù)組的長度可以通過length屬性來獲取,并可以任意更改
數(shù)組名.length
數(shù)組名.length=新長度
數(shù)組中的每一個元素都可以被訪問和修改捧颅,甚至是不存在的元素景图,無所謂越界
數(shù)組名[下標(biāo)]
數(shù)組名[下標(biāo)]=新值
數(shù)組遍歷
數(shù)組的遍歷即依次訪問數(shù)組的每一個元素 ,JS提供三種遍歷數(shù)組的方式:
普通的for循環(huán)遍歷
for(vari=0;i<=數(shù)組.length-1;i++){
}
如:
for(varidx=0;idx<arr.length;idx++){
console.log(arr[idx]);
}
for ... in
for(var下標(biāo)(名稱任意)in數(shù)組名){
? ? 數(shù)組名[下標(biāo)]是獲取元素
}// 下標(biāo)(名稱任意)
如:
for(varidxinarr){
console.log(arr[idx]);
}
forEach
數(shù)組名.forEach(function(element,index){
// element(名稱任意):元素碉哑,index(名稱任意):下標(biāo)
}) ? ?
如:
arr.forEach(function(elem,idx){
console.log(idx+"-->"+elem);
});
了解
數(shù)組在使用的時候建議大家規(guī)矩來用挚币。在存放數(shù)據(jù)時,從下標(biāo)0開始順序的存放數(shù)組元素扣典。
如果下標(biāo):
? ? 1.為非負(fù)整數(shù)(包括整數(shù)字符串):自動從0開始,不存在添加 undefined
? ? 2.為負(fù)數(shù)妆毕、小數(shù)、非數(shù)字符串:這些內(nèi)容不計算在長度內(nèi)贮尖,當(dāng)成"屬性"處理笛粘,相當(dāng)于自定義屬性。
?
數(shù)組非常靈活湿硝,使用數(shù)組元素
? ? 1.下標(biāo): 非負(fù)整數(shù)(包括整數(shù)字符串):
? ? ? ? 數(shù)組.下標(biāo)
? ? ? ? 數(shù)組[下標(biāo)]
? ? 2.下標(biāo):負(fù)數(shù)薪前、小數(shù)、非數(shù)字字符串:
? ? 數(shù)組[屬性]
?
* for --> 不遍歷屬性
* foreach -->不遍歷屬性和索引中的undefined
* for in -->不遍歷索引中的undefined
數(shù)組提供的操作方法
Array對象為我們提供了一些方法关斜,可以很方便地操作數(shù)組
push添加元素到最后
unshift添加元素到最前
pop刪除最后一項
shift刪除第一項
reverse數(shù)組翻轉(zhuǎn)
join數(shù)組轉(zhuǎn)成字符串
indexOf數(shù)組元素索引
slice截仁纠ā(切片)數(shù)組,原數(shù)組不發(fā)生變化
splice剪接數(shù)組,原數(shù)組變化,可以實現(xiàn)前后刪除效果
concat數(shù)組合并
vararr=['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('\''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'一','二');
console.log(arr);
vararr1=[0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));
函數(shù)
函數(shù)赘艳,即方法。就是一段預(yù)先設(shè)置的功能代碼塊繁涂,可以反復(fù)調(diào)用,根據(jù)輸入?yún)?shù)的不同二驰,返回不同的值扔罪。函數(shù)也是對象。
函數(shù)的定義
有三種函數(shù)定義的方式:函數(shù)聲明語句桶雀、函數(shù)定義表達(dá)式矿酵、Function構(gòu)造函數(shù)
函數(shù)聲明語句
function函數(shù)名([參數(shù)列表]){
}
例如:
functionfoo(){
console.log(1);
}
foo();
該種方式定義的函數(shù)具有聲明提升的效果
foo();
functionfoo(){
console.log(1);
}
// 變量聲明提升
console.log(a);
vara=2;
函數(shù)定義表達(dá)式
以表達(dá)式方式定義的函數(shù)唬复,函數(shù)的名稱是可以不需要的
var變量名=function([參數(shù)列表]) {
}
變量名();
例如:
varfun=function(){
console.log("Hello");
}
fun();
這種寫法將一個匿名函數(shù)賦值給變量。這時全肮,這個匿名函數(shù)又稱函數(shù)表達(dá)式敞咧,因為賦值語句的等號右側(cè)只能放表達(dá)式。
Function構(gòu)造函數(shù)
Function構(gòu)造函數(shù)接收任意數(shù)量的參數(shù)辜腺,但最后一個參數(shù)始終都被看成是函數(shù)體休建,而前面的參數(shù)則列舉出了新函數(shù)的參數(shù)。
varadd=newFunction('x','y','return (x + y)');
// 等同于
functionadd(x,y) {
return(x+y);
}
add();
注意:
js中的函數(shù)沒有重載评疗,同名的函數(shù)测砂,會被后面的函數(shù)覆蓋。
js中允許有不定數(shù)目的參數(shù)百匆,后面介紹arguments對象
函數(shù)的參數(shù)砌些、調(diào)用和return語句
參數(shù)
函數(shù)運行的時候,有時需要提供外部數(shù)據(jù)加匈,不同的外部數(shù)據(jù)會得到不同的結(jié)果存璃,這種外部數(shù)據(jù)就叫參數(shù),定義時的參數(shù)稱為形參雕拼,調(diào)用時的參數(shù)稱為實參
實參可以省略纵东,那么對應(yīng)形參為undefined
若函數(shù)形參同名(一般不會這么干):在使用時以最后一個值為準(zhǔn)。
可以給參數(shù)默認(rèn)值:當(dāng)參數(shù)為特殊值時啥寇,可以賦予默認(rèn)值偎球。
參數(shù)為值傳遞,傳遞副本? 示姿;引用傳遞時傳遞地址甜橱,操作的是同一個對象逊笆。
// 調(diào)用函數(shù)時栈戳,實參可以省略,則對應(yīng)形參為undefined
functionadd(a,b) {
? ? console.log(a+"+"+b+"="+(a+b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN
?
// 若函數(shù)形參同名(一般不會這么干):在使用時以最后一個值為準(zhǔn)
functionadd2(a,a) {
? ? console.log(a);
}
add2(1,2);
?
// 給參數(shù)默認(rèn)值
functiondefaultValue(a){
? ? a=a||"a";
? ? returna;
}
console.log(defaultValue());
functionf(a){
? ? //若參數(shù)a不為undefined或null难裆,則取本身的值子檀,否則給一個默認(rèn)值
? ? (a!==undefined&&a!==null)?a=a:a=1;
? returna;
}
console.log(f());
?
// 值傳遞
varnum=12;
functionchange(n) {
? ? n=30;
}
change(num);
console.log(num);
// 引用傳遞
varobj={name:"tom"};
functionparamter(o) {
? ? o.name=2;
}
paramter(obj);
console.log(obj.name);
// 給形參o賦予了新的數(shù)組
varobj2=[1,2,3];
functionparamter2(o){
? ? o=[2,3,4];
? ? o[1]=3;
}
paramter2(obj2);
console.log(obj2)
函數(shù)的調(diào)用
1. 常用調(diào)用方式
函數(shù)名([實參]);
存在返回值可以變量接收,若接收無返回值函數(shù)則為undefined乃戈。
2. 函數(shù)調(diào)用模式
functionadd(a,b){
returna+b;
}
varsum=add(1,2)
console.log(sum);
3. 方法調(diào)用模式
varo={
m:function(){
console.log(1);
?? }
};
o.m();
return
函數(shù)的執(zhí)行可能會有返回值褂痰,需要使用return語句將結(jié)果返回。return 語句不是必需的症虑,如果沒有的話缩歪,該函數(shù)就不返回任何值,或者說返回 undefined谍憔。
作用:
1. 在沒有返回值的方法中匪蝙,用來結(jié)束方法主籍。
2. 有返回值的方法中,一個是用來結(jié)束方法逛球,一個是將值帶給調(diào)用者千元。
函數(shù)的作用域
函數(shù)作用域:全局 (global variable) 和 局部 (local variable)
1.? 全局變量與局部變量同名問題
varbox=1;// 全局變量
functiondisplay(box){
? ? varbox=3;// 此處box與全局變量box沒有關(guān)系,這里的box為傳遞的參數(shù)颤绕,相當(dāng)于新聲明的局部變量
? ? varb=2;// 局部變量
? ? console.log("box-->"+box);
}
display();
// b 不能訪問
console.log("b-->"+b);
2. 在函數(shù)中定義變量時幸海,若沒有加var關(guān)鍵字,使用之后自動變?yōu)槿肿兞?/b>
functionfun(){
? ? a=100;
}
fun();
alert(a);
內(nèi)置對象
Arguments只在函數(shù)內(nèi)部定義奥务,保存了函數(shù)的實參
Array數(shù)組對象
Date日期對象物独,用來創(chuàng)建和獲取日期
Math數(shù)學(xué)對象
String字符串對象,提供對字符串的一系列操作
String
?charAt(idx)? 返回指定位置處的字符
?indexOf(Chr)? 返回指定子字符串的位置汗洒,從左到右议纯。找不到返回-1
?substr(m,n)? 返回給定字符串中從m位置開始,取n個字符溢谤,如果參數(shù)n省略瞻凤,則意味著取到字符串末尾。
?substring(m,n)返回給定字符串中從m位置開始世杀,到n位置結(jié)束阀参,如果參數(shù)n省略,則意味著取到字符串末尾瞻坝。
?toLowerCase() 將字符串中的字符全部轉(zhuǎn)化成小寫蛛壳。
?toUpperCase() 將字符串中的字符全部轉(zhuǎn)化成大寫。
?length? ? ? 屬性所刀,不是方法衙荐,返回字符串的長度。
Math
?Math.random() 隨機數(shù)
?Math.ceil()? 向上取整浮创,大于最大整數(shù)
?Math.floor() 向小取整忧吟,小于最小整數(shù)String
Date
// 獲取日期
?getFullYear() 年
?getMonth()? ? 月
?getDate()? ? 日
?getHours()? ? 時
?getMinutes()? 分
?getSeconds()? 秒
// 設(shè)置日期
?setYear()
?setMonth()
?setDate()
?setHours()
?setMinutes()
?setSeconds()
?toLoacaleString() 轉(zhuǎn)換成本地時間字符串
說明:
getMonth():得到的值:0~11(1月~12月)
setMonth():設(shè)置值時0~11
toLocaleString():可根據(jù)本地時間把 Date 對象轉(zhuǎn)換為字符串,并返回結(jié)果斩披。
對象
對象(object)是 JavaScript 的核心概念溜族,也是最重要的數(shù)據(jù)類型。JavaScript 的所有數(shù)據(jù)都可以被視為對象垦沉。JavaScript 提供多個內(nèi)建對象煌抒,比如 String、Date厕倍、Array 等等寡壮。對象是帶有屬性和方法的特殊數(shù)據(jù)類型。
簡單說,所謂對象况既,就是一種無序的數(shù)據(jù)集合屋群,由若干個“鍵值對”(key-value)構(gòu)成。通過JavaScript我們可以創(chuàng)建自己的對象坏挠。 JavaScript對象滿足的這種”鍵值對”的格式我們稱為JSON格式芍躏,以后會見得非常多,即偉大的JSON對象降狠。
{鍵:值, 鍵2:值2,...}
對象的創(chuàng)建
JS 創(chuàng)建自定義對象对竣,主要通過三種方式:字面量形式創(chuàng)建對象、通過new Object對象創(chuàng)建 榜配、通過Object對象的create方法創(chuàng)建對象否纬。
字面量形式創(chuàng)建
var對象名={};//創(chuàng)建一個空的對象
var對象名={鍵:值,鍵2:值2,...}
?
varobj={
'name':'hello',
age:12,
sayHello:function() {
? ? console.log("我是對象中的方法");
? ? ? ? ? },
? ? courses: {
? ? javase:4,
javascript:3
? ? },
isLike:true,
members: [
{name:"小紅",age:20},
{name:"小綠",age:22},
{name:"小藍(lán)",age:27},
{name:"小黃"}
? ? ? ? ? ]
};
通過new Object創(chuàng)建
var對象名=newObject();// 創(chuàng)建一個空的對象
?
varobj=newObject();
obj.name='zs';
obj.age=18;
console.log(obj);
通過Object對象的create方法創(chuàng)建
var對象名=Object.create(null);
varobj=Object.create(null);
obj.name='ls';
obj.gender=true
console.log(obj);
varobjn=Object.create(obj);
objn.age=18;
console.log(objn);
console.log(objn.gender)
對象的序列化和反序列化
序列化即將JS對象序列化為字符串,反序列化即將字符串反序列化為JS對象蛋褥。JS中通過調(diào)用JSON方法临燃,可以將對象序列化成字符串,也可以將字符串反序列化成對象 烙心。
// 序列化對象,將對象轉(zhuǎn)為字符串
JSON.stringify(object);
// 反序列化淫茵,將一個Json字符串轉(zhuǎn)換為對象。
JSON.parse(jsonStr);
this
this是JavaScript語言的一個關(guān)鍵字匙瘪。
它代表函數(shù)運行時,自動生成的一個內(nèi)部對象薄货,只能在函數(shù)內(nèi)部使用。
隨著函數(shù)使用場合的不同谅猾,this的值會發(fā)生變化骑冗。但是有一個總的原則先煎,那就是this指的是,調(diào)用函數(shù)的那個對象薯蝎。
在函數(shù)中使用this
在函數(shù)中使用this屬于全局性調(diào)用,代表全局對象,通過window對象來訪問袒哥。
functiontest() {
? ? this.x=1;
? ? console.log(this.x);
}
test();
console.log(x);// 相當(dāng)于定義在全局對象上的屬性
?
varx=10;
console.log(x)// 10
functiontest(){
console.log(this.x)// 10
this.x=1;
console.log(this.x)// 1
console.log(this)
}
?
test();
console.log(x);// 1
console.log(this);
在對象中使用this
在對象中的函數(shù)使用this缩筛,代表當(dāng)前的上級對象。
varobj={
? ? name:'張三',
? ? age:20,
? ? sayHello:function() {
? ? ? ? console.log(this.name)
? ? ? ? console.log(this)
? ? }
}
obj.sayHello();