JavaScript基礎語法

JavaScript

簡介

JavaScript 是一種具有面向?qū)ο竽芰Φ?、解釋型的程序設計語言。更具體一點,它是基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。它的主要目的是,驗證發(fā)往服務器端的數(shù)據(jù)、增加 Web 互動、加強用戶體驗度等。

JavaScript 的組成

ECMAScript定義的只是這門語言的基礎,與Web瀏覽器沒有依賴關系,而在基礎語法上可以構(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定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。DOM對象,是我們用傳統(tǒng)的方法(javascript)獲得的對象。DOM屬于瀏覽器,而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容。

前面的DOM是為了操作瀏覽器中的文檔,而為了控制瀏覽器的行為和操作,瀏覽器還提供了BOM(瀏覽器對象模型)。

ECMAScript(基礎語法)

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 : 寫在標簽內(nèi)部的js代碼

內(nèi)部JS : 定義在script標簽內(nèi)部的js代碼

外部JS : 單獨的js文件,在HTML中通過script標簽引入

我們可以將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基礎語法

語句和注釋

JavaScript程序的執(zhí)行單位為行(line),也就是一行一行地執(zhí)行。一般情況下,每一行就是一個語句。

語句(statement)是為了完成某種任務而進行的操作,語句以分號結(jié)尾,一個分號即表示一個語句結(jié)束。多個語句可以寫在一行內(nèi)(不建議這么寫代碼),但是一行寫多條語句時,語句必須以分號結(jié)尾。

表達式不需要分號結(jié)尾。一旦在表達式后面添加分號,則JavaScript引擎就將表達式視為語句,這樣會產(chǎn)生一些沒有任何意義的語句。

單行注釋:用//起頭;

多行注釋:放在/* 和 */之間。

兼容html注釋方式:<!-- -->

標識符和關鍵字

標識符就是一個名字,用來給變量和函數(shù)進行命名,有特定規(guī)則和規(guī)范

規(guī)則:

由Unicode字母、_、$、數(shù)字組成、中文組成

(1)不能以數(shù)字開頭

(2)不能是關鍵字和保留字

(3)嚴格區(qū)分大小寫

規(guī)范:

(1)見名知意

(2)駝峰命名或下劃線規(guī)則

關鍵字也稱保留字,是被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";

?

// 變量提升,相當于下面的代碼

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ù)類型:UndefinedNull、布爾、數(shù)值字符串。一種復雜數(shù)據(jù)類型Object。

數(shù)? 值(Number): 整數(shù)和小數(shù)(比如 1 和 3.14)

字符串(String): 字符組成的文本(比如"Hello World")

布爾值(Boolean):true(真)和 false(假)兩個特定值

Undefined: ? ? ? 表示“未定義”或不存在,即此處目前沒有任何值

Null: ? ? ? ? ?? 表示空缺,即此處應該有一個值,但目前為空

對象(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)當聲明了一個變量而沒有初始化時,這個變量的值就是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ù)沒有返回值時,默認返回 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ù)和功能的集合。

說明:

{}:表示使用對象字面量方式定義的對象。空的大括號表示定義包含默認屬性和方法的對象。

類型轉(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

++自增(前導加、后導加)x=++yx=6

--自減(前導減、后導減)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í)行某些代碼,或者重復地執(zhí)行某些代碼,這就需要使用到流程控制語句。

流程控制語句一共有三種:

1. 流程執(zhí)行:從上到下,從左到右

2. 選擇執(zhí)行:分支選擇

3. 循環(huán)執(zhí)行:重復執(zhí)行

選擇

單選擇

if(條件){

語句體;

}

首先執(zhí)行條件

如果結(jié)果為true,則執(zhí)行語句體;

如果結(jié)果為false,則結(jié)束if語句。

注意:若語句體只有一條語句,可以省略大括號,但不建議省略

雙選擇

if(條件){

語句體1;

}else{

語句體2;

}

首先執(zhí)行條件

如果結(jié)果為true,則執(zhí)行語句體1;

如果結(jié)果為false,則執(zhí)行語句體2。

多選擇

if(比較表達式1) {

? ? 語句體1;

}elseif(比較表達式2){

? ? 語句體2;

}elseif(比較表達式3){

? ? 語句體3;

}

? ? ...

[else{

? ? 語句體n+1;

}]

switch結(jié)構(gòu)

多個 if ...else 且值為定值時(即=== 在比較運行結(jié)果時,采用的是嚴格相等運算符(===),而不是相等運算符(==),這意味著比較時不會發(fā)生類型轉(zhuǎn)換。) ,可以使用 switch 替換:

switch(表達式) {

? ? 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)用于重復執(zhí)行某個操作 簡單理解就是重復執(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)

條件永遠成立,永遠為 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ù)組名[下標]

數(shù)組名[下標]=新值

數(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下標(名稱任意)in數(shù)組名){

? ? 數(shù)組名[下標]是獲取元素

}// 下標(名稱任意)

如:

for(varidxinarr){

console.log(arr[idx]);

}

forEach

數(shù)組名.forEach(function(element,index){

// element(名稱任意):元素,index(名稱任意):下標

}) ? ?

如:

arr.forEach(function(elem,idx){

console.log(idx+"-->"+elem);

});

了解

數(shù)組在使用的時候建議大家規(guī)矩來用。在存放數(shù)據(jù)時,從下標0開始順序的存放數(shù)組元素。

如果下標:

? ? 1.為非負整數(shù)(包括整數(shù)字符串):自動從0開始,不存在添加 undefined

? ? 2.為負數(shù)、小數(shù)、非數(shù)字符串:這些內(nèi)容不計算在長度內(nèi),當成"屬性"處理,相當于自定義屬性。

?

數(shù)組非常靈活,使用數(shù)組元素

? ? 1.下標: 非負整數(shù)(包括整數(shù)字符串):

? ? ? ? 數(shù)組.下標

? ? ? ? 數(shù)組[下標]

? ? 2.下標:負數(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ù),即方法。就是一段預先設置的功能代碼塊,可以反復調(diào)用,根據(jù)輸入?yún)?shù)的不同,返回不同的值。函數(shù)也是對象。

函數(shù)的定義

有三種函數(shù)定義的方式:函數(shù)聲明語句、函數(shù)定義表達式、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ù)定義表達式

以表達式方式定義的函數(shù),函數(shù)的名稱是可以不需要的

var變量名=function([參數(shù)列表]) {


}

變量名();

例如:

varfun=function(){

console.log("Hello");

}

fun();

這種寫法將一個匿名函數(shù)賦值給變量。這時,這個匿名函數(shù)又稱函數(shù)表達式,因為賦值語句的等號右側(cè)只能放表達式。

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ù)稱為實參

實參可以省略,那么對應形參為undefined

若函數(shù)形參同名(一般不會這么干):在使用時以最后一個值為準。

可以給參數(shù)默認值:當參數(shù)為特殊值時,可以賦予默認值。

參數(shù)為值傳遞,傳遞副本? ;引用傳遞時傳遞地址,操作的是同一個對象。

// 調(diào)用函數(shù)時,實參可以省略,則對應形參為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ù)形參同名(一般不會這么干):在使用時以最后一個值為準

functionadd2(a,a) {

? ? console.log(a);

}

add2(1,2);

?

// 給參數(shù)默認值

functiondefaultValue(a){

? ? a=a||"a";

? ? returna;

}

console.log(defaultValue());

functionf(a){

? ? //若參數(shù)a不為undefined或null,則取本身的值,否則給一個默認值

? ? (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沒有關系,這里的box為傳遞的參數(shù),相當于新聲明的局部變量

? ? varb=2;// 局部變量

? ? console.log("box-->"+box);

}

display();

// b 不能訪問

console.log("b-->"+b);

2. 在函數(shù)中定義變量時,若沒有加var關鍵字,使用之后自動變?yōu)槿肿兞?/b>

functionfun(){

? ? a=100;

}

fun();

alert(a);

內(nèi)置對象

Arguments只在函數(shù)內(nèi)部定義,保存了函數(shù)的實參

Array數(shù)組對象

Date日期對象,用來創(chuàng)建和獲取日期

Math數(shù)學對象

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()? 秒

// 設置日期

?setYear()

?setMonth()

?setDate()

?setHours()

?setMinutes()

?setSeconds()

?toLoacaleString() 轉(zhuǎn)換成本地時間字符串

說明:

getMonth():得到的值:0~11(1月~12月)

setMonth():設置值時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:"小藍",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語言的一個關鍵字。

它代表函數(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);// 相當于定義在全局對象上的屬性

?

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,代表當前的上級對象。

varobj={

? ? name:'張三',

? ? age:20,

? ? sayHello:function() {

? ? ? ? console.log(this.name)

? ? ? ? console.log(this)

? ? }

}

obj.sayHello();

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容