前端學習 之 JavaScript基礎

一. JavaScript簡介

1. JavaScript的歷史背景介紹

1994年，網景公司（Netscape）發佈了Navigator瀏覽器0.9版。這是歷史上第一個比較成熟的網絡瀏覽器，轟動一時。可是，這個版本的瀏覽器只能用來瀏覽，不具有與訪問者互動的能力。好比，若是網頁上有一欄"用戶名"要求填寫，瀏覽器就沒法判斷訪問者是否真的填寫了，只有讓服務器端判斷。若是沒有填寫，服務器端就返回錯誤，要求用戶從新填寫，這太浪費時間和服務器資源了。

       所以，網景公司急需一種網頁腳本語言，使得瀏覽器能夠與網頁互動。工程師Brendan Eich負責開發這種新語言。他以爲，不必設計得很複雜，這種語言只要可以完成一些簡單操做就夠了，好比判斷用戶有沒有填寫表單。

       1994年正是面向對象編程（object-oriented programming）最興盛的時期，C++是當時最流行的語言，而Java語言的1.0版即將於第二年推出，Sun公司正在大肆造勢。

       Brendan Eich無疑受到了影響，Javascript裏面全部的數據類型都是對象（object），這一點與Java很是類似。可是，他隨即就遇到了一個難題，到底要不要設計"繼承"機制呢？

若是真的是一種簡易的腳本語言，其實不須要有"繼承"機制。可是，Javascript裏面都是對象，必須有一種機制，將全部對象聯繫起來。因此，Brendan Eich最後仍是設計了"繼承"。

可是，他不打算引入"類"（class）的概念，由於一旦有了"類"，Javascript就是一種完整的面向對象編程語言了，這好像有點太正式了，並且增長了初學者的入門難度。

2.ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願這門語言可以成爲國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，可是沒有稱其爲JavaScript，有兩個方面的緣由。一是商標，JavaScript自己已被Netscape註冊爲商標。二是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

所以ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

3.ECMAScript的歷史

（1）ECMAScript簡介

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）經過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用普遍，它每每被稱爲JavaScript或JScript，但實際上後二者是ECMA-262標準的實現和擴展。

（2）ECMAScript歷史發展

1998年6月，ECMAScript 2.0版發佈。

1999年12月，ECMAScript 3.0版發佈，成爲JavaScript的通行標準，獲得了普遍支持。

2007年10月，ECMAScript 4.0版草案發布，對3.0版作了大幅升級，預計次年8月發佈正式版本。草案發布後，因爲4.0版的目標過於激進，各方對因而否經過這個標準，發生了嚴重分歧。以Yahoo、Microsoft、Google爲首的大公司，反對JavaScript的大幅升級，主張小幅改動；以JavaScript創造者Brendan Eich爲首的Mozilla公司，則堅持當前的草案。

2008年7月，因爲對於下一個版本應該包括哪些功能，各方分歧太大，爭論過於激進，ECMA開會決定，停止ECMAScript 4.0的開發，將其中涉及現有功能改善的一小部分，發佈爲ECMAScript 3.1，而將其餘激進的設想擴大範圍，放入之後的版本，因爲會議的氣氛，該版本的項目代號起名爲Harmony（和諧）。會後不久，ECMAScript 3.1就更名爲ECMAScript 5。

2009年12月，ECMAScript 5.0版正式發佈。Harmony項目則一分爲二，一些較爲可行的設想定名爲JavaScript.next繼續開發，後來演變成ECMAScript 6；一些不是很成熟的設想，則被視爲JavaScript.next.next，在更遠的未來再考慮推出。

2011年6月，ECMAscript 5.1版發佈，而且成爲ISO國際標準（ISO/IEC 16262:2011）。

2013年3月，ECMAScript 6草案凍結，再也不添加新功能。新的功能設想將被放到ECMAScript 7。

2013年12月，ECMAScript 6草案發布。而後是12個月的討論期，聽取各方反饋。

2015年6月17日，ECMAScript 6發佈正式版本，即ECMAScript 2015。

ECMA的第39號技術專家委員會（Technical Committee 39，簡稱TC39）負責制訂ECMAScript標準，成員包括Microsoft、Mozilla、Google等大公司。TC39的整體考慮是，ES5與ES3基本保持兼容，較大的語法修正和新功能加入，將由JavaScript.next完成。

 

注：ES6就是指ECMAScript 6。

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：

核心（ECMAScript）

文檔對象模型（DOM） Document object model (整合js，css，html)

瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言自己的相關內容。

 

4.JavaScript特性與優勢

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

 

JavaScript 是可插入 HTML 頁面的編程代碼。

 

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。

 

JavaScript 很容易學習。

5. JavaScript的組成

JavaScript基礎分爲三個部分：

ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。

DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。

BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

二. 初識JavaScript代碼

1.JavaScript引入方式

(1)Script標籤內寫代碼

在head標籤裏面能夠寫，在body標籤裏面也能夠寫，到head標籤裏面和放到body標籤裏面是有區別的

<script>

  // 在這裏寫你的JS代碼

　//console.log('騎士計劃！') #f12建打開瀏覽器的調試窗口，而後在console這個調試臺就能看到這個內容了

</script>

(2)引入額外的JS文件

如下是將這一行放在html文件的head部分。對於下面的語句如今type="text/javascript"這個類型也能夠去除不寫。

<script type="text/javascript" src="myscript.js"></script>

2. JavaScript的語法規則

(1)語法規則

1.JavaScript的變量名可使用_，數字，字母，$組成，不能以數字開頭。

2.聲明變量使用 var 變量名; 的格式來進行聲明

全部的符號，都是英語的。好比括號、引號、分號。

 

(2)註釋（註釋是代碼之母）

// 這是單行註釋

 

/*

這是

多行註釋

*/

 

(3)結束符

JavaScript中的語句要以分號（;）爲結束符。也就是說和縮進不要緊了

3.JavaScript在網頁中輸出信息的寫法

(4)彈出警告框：alert語句

語法：alert("");

<script type="text/javascript">

    alert("這是一個警告彈出框")

</script>

運行結果：

 

(2)控制檯輸出：console.log("")

console.log("") 表示在控制檯中輸出。console表示「控制檯」，log表示「輸出」。

控制檯在Chrome瀏覽器的F12中。控制檯是工程師、程序員調試程序的地方。程序員常用這條語句輸出一些東西，來測試程序是否正確。

例：

<script>

     console.log("這個控制檯輸出");

</script>

 

運行結果爲：

 

 

在瀏覽器的Console裏面輸出代碼中輸出的語句內容。

4.用戶輸入語句

prompt() 就是專門用來彈出可以讓用戶輸入的對話框。

代碼以下：

<script type="text/javascript">

    var a = prompt("今日天氣如何？");

    console.log(a);

</script>

上方代碼中，用戶輸入的內容，將被傳遞到變量 a 裏面。

效果以下：

首先彈框讓其輸入內容：

 

而後再console中輸出相應的輸入內容：

 

 

 

prompt()語句中，用戶無論輸入什麼內容，都是字符串。

alert和prompt的區別：

alert("這個內容會彈框");                //直接使用，不須要變量

var a = prompt("請輸入內容");   // 必須用一個變量，來接收用戶輸入的值

5.直接量：數字和字符串

「直接量」即常量，也稱爲「字面量」。看見什麼，它就是什麼。

簡單的直接量有2種：數字、字符串。

（1）數值的直接量的表達很是簡單，寫上去就好了，不須要任何的符號。例如：

alert(886);  //886是數字，因此不須要加引號。

（2）字符串也很簡單，但必定要加上引號。能夠是單詞、句子等。例如：

alert("Hello");

alert("Hello world");

 

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。這個東西就是爲了定義一個固定的常量，供你們使用，這個常量不會改變。

const PI = 3.1415;

PI // 3.1415

 

PI = 3

// TypeError: "PI" is read-only，若是將其改變會出錯

6.變量的定義和賦值

定義變量：var就是一個關鍵字，用來定義變量。所謂關鍵字，就是有特殊功能的小詞語。關鍵字後面必定要有空格隔開。

變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。

變量名：咱們能夠給變量任意的取名字。

PS：在JavaScript中，永遠都是用var來定義變量，這和C、Java等語言不一樣

變量要先定義，才能使用。好比，咱們不設置變量，直接輸出：

<script type="text/javascript">

    console.log(a);

</script>

會報錯：

 

 

正確寫法：

var a;   // 定義

a = 100;  //賦值

console.log(a);  //輸出100

 

 

也能夠這樣寫：

var a = 100;    //定義，而且賦值100

console.log(a);  //輸出100

 

ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

如：

for (let i=0;i<arr.length;i++){...}

 

7. 變量的命名規範

 

變量名有命名規範：只能由英語字母、數字、下劃線、$（美圓符）構成，且不能以數字開頭，而且不能是JavaScript保留字。

下列的單詞，叫作保留字，就是說不容許當作變量名，相似於python中的關鍵字：

abstract

booleanbytechar

class

const

debuggerdouble

enum

export

extends

finalfloat

goto

implements

importint

interfacelong

native

package

private

protected

publicshort

static

super

synchronized

throws

transient

volatile

大寫字母是可使用的，而且大小寫敏感。也就是說A和a是兩個變量。

var A = 250;    //變量1

var a = 888;    //變量2

三．JavaScript數據類型

數據類型包括：基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。

當咱們把變量賦值給一個變量時，解析器首先要確認的就是這個值是基本類型值仍是引用類型值。

1.基本數據類型

在講數據類型以前，咱們要學習一個函數 typeof 表示「獲取變量的類型」，語法爲：

typeof 變量名稱

(1)number數值類型

例：

var a = 123;

//typeof 檢查當前變量是什麼數據類型

console.log(typeof a)

 

還有一種NaN，表示不是一個數字（Not a Number），也就是說是一個值，但不是數字。

在JavaScript中，只要是數，就是數值型(number)的。不管整浮、浮點數（即小數）、不管大小、不管正負，都是number類型的。

(2) string字符串類型

var a = "abcde";

var b = "路飛";

var c = "123123";

var d = "哈哈哈哈哈";

var e = "";     //空字符串

 

console.log("檢測是string類型")

console.log("a:"+typeof a);

console.log("b:"+typeof b);

console.log("c:"+typeof c);

console.log("d:"+typeof d);

console.log("e:"+typeof e);

(3) boolean布爾類型

console.log("檢測是bloolean類型：")

var b1 = false;

console.log("b1:"+typeof b1)

var b2= true;

console.log("b2:"+typeof b2)

 

在JavaScript中，false類型只有6種：

1.undefined

2.‘ ’ //空字符串

3.null

4.false

5.NaN //值NaN是一個數值，表示一個不能產生正常結果的運算結果，它不能等任何值，包括它本身

6.數字0 或0.0

(4) null空對象類型

console.log("檢測是null空對象類型")

var c1 = null;//空對象  object

console.log("c1:"+c1)

(5)undefined未定義類型

console.log("檢測是undefined未定義類型")

var d1;

//表示變量未定義

console.log("d1:"+typeof d1)

 

2. 引用數據類型

Function

Object

Array

String

Date

後面文檔將詳細介紹。

四．運算符

1. 賦值運算符

以var x = 12,y=5爲例：

運算符	例子	等同於	結果
=	x=y		5
+=	x+=y	x=x+y	x=17
-=	x-=y	x=x-y	x=7
*=	x*=y	x=x*y	x=60
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=2

 

最後兩個是一個是除等於，一個是取餘（模）等於的意思。

2.算術運算符

以var a = 5,b=2爲例：

運算符	描述	例子	運算結果
=	加法	var c=a+b	c=7
-	減法	var c=a-b	c=3
*	乘法	var c=a*b	c=10
/	除法	var c=a/b	c=2.5
%	取餘	x=x%y	c=1
++	自增	var x=a++	x=5,a=6
		var x=++a	x=6,a=6
--	自減法	var x=a--	x=5,a=4
		var x=--a	x=4,a=4

注意：

當運算符++在後面時,先賦值,後自增。

當運算符++在前面時,先自增,後賦值。

3.比較運算符

以var x = 5爲例：

運算符	描述	例子	運算結果
==	等於	x==8,x==5	false,true
===	等同於（值和類型均相等）	x===5,x===‘5’	true,false
!=	不等於	x!=8	true
!==	不等同與(值和類型有一個不一樣於就false)	x!==5,x!==‘5’	false,true
>	大於	x>8	false
<	小於	x<8	true
>=	大於等於	x>=8	false
<=	小於等於	x<=8	true

 

4.特殊的字符串拼接和加減

(1)字符串拼接

例1：

var firstName = '小';

var lastName = '姐姐';

var name = '伊拉克';

var am = '美軍';

// 字符串拼接

var tempStr = "2003年3月20日," + name + "戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，" + am + "又一次取得的大規模壓倒性軍事勝利。"

console.log(tempStr);

 

var fullName = firstName + " " + lastName;

console.log(fullName);

 

運行結果爲：

 

 

例2：

// 不能對字符串進行+運算 只能拼接

var a1 = '1';

var a2 = '2';

console.log(a1+a2) //輸出字符串相加的內容

console.log(typeof(a1+a2))  //輸出字符串相加的類型

運行結果爲：

 

(2)字符串加Number

例1：

var a1 = 1;

var a2 = '2';

console.log(a1+a2) //輸出字符串相加的內容

console.log(typeof(a1+a2))  //輸出字符串相加的類型

 

(3)字符串相乘除

var b1 = 'one';

var b2  = 'two';

 

// NaN ==== not a number 是number類型

console.log(b1*b2)  // NaN

console.log(b1/b2)  // NaN

console.log(typeof(b1*b2))  // number

console.log(typeof(b1/b2))  // number

運行結果：

 

 

注意：雖然兩個字符串相加減獲得的結果是NaN，可是也是屬於Number類型的數據。

五.數據類型的強制轉換

1. 將數值類型轉換爲字符串類型

number -----> string

(1)隱式轉換

例1：

var n1 = 123;

var n2 = '456';

var n3 = n1+n2;

// 隱式轉換爲字符串

console.log(typeof n3);

(2)強制類型轉換

例2：

var n1 = 123;

// 強制類型轉換String(),toString()

var str1 = String(n1);

console.log(typeof str1);

 

var num = 234;

console.log(num.toString())

2.將字符串類型轉換成數值類型

string -----> number

例3：

var strNum = "123.45dfsdfsd";

var num = Number(strNum);

console.log(num);  // NaN

console.log(typeof num);  // number

 

// parseInt()能夠解析一個字符串 而且返回一個整數

console.log(parseInt(strNum);  // 123

console.log(typeof(parseInt(strNum)));  // number

 

// parseFloat()能夠解析一個字符串 而且返回一個浮點數

console.log(parseFloat(strNum);  // 123.45

console.log(typeof(parseFloat(strNum)));  // number

3.任何數據類型均可以轉爲布爾類型

* -----> boolean

例4：

var num1 = 123;

var num2 = 0;

var num3 = -123;

 

var a1 = NaN;

var a2;

var a3 = null;

 

// 數字非零即爲真。

console.log(Boolean(num1);  // true

console.log(Boolean(num2);  // false

console.log(Boolean(num3);  //true

 

console.log(Boolean(a1);  // false

console.log(Boolean(a2);  // false

console.log(Boolean(a3);  // false

六.流程控制

1.if控制語句

if語句表示，若是括號裏面的條件成立那麼運行緊接着的後面的大括號{}裏面的代碼,

出現的if多分支語句，知足哪一個分支條件就運行哪一個分支後{}的代碼，多分支語句之間的條件不能衝突，即條件只能知足其中一個。

(1)if(判斷條件){代碼1,2...}

例1：

var age = 18;

if (age >= 18){

    console.log("恭喜你，能夠去網吧玩遊戲了！");

}

(2)if(判斷條件){代碼1,2...}else{代碼1,2...}

例2:

var age = 17;

 

if (age >= 18){

    console.log("恭喜你，能夠網吧玩遊戲了！");

}else{

    console.log("好好上學吧！");

}

(3)if(條件1){代碼1,2...}else if(條件1,2){代碼1,2...}else(條件3){代碼1,2...}

例3:

var age = 5;

if (age >= 18){

    console.log("恭喜你，能夠去網吧玩遊戲了！");  

}else if(age<6){

    console.log("好好玩耍吧！");

}else{

    console.log("好好上學吧！");

}

 

if (true) {

   //知足條件執行

}else if(true){

    //知足條件執行            

}else if(true){

   //知足條件執行        

}else{

  //知足條件執行

}

else if的分支能夠爲不少個。

2.邏輯運算符（與或非）

與：&&

或：||

非：!

例：

var sex = "女";

var age = 22;

var hobby = "吹管樂";

var flag = false; // 是否有男友

 

if (age >= 18 && sex == "女") {

    console.log("妙齡少女");

}

if (age >= 18 || hobby == "吹管樂") {

    console.log("湊合吧");

}

if (!flag){

    console.log("這是機會。");

}

 

3.switch語句

例：

var age = 25;

switch (age) {

//case表示一個條件 知足這個條件就會走進來 遇到break跳出。若是某個條件中不寫 break，那麼直到該程序遇到下一個break中止

    case 18:

        console.log("已經成年了,須要獨立了。");

        break;

    case 60:

        console.log("須要回家養老了！");

        break;

    case 25:

        console.log("奮鬥的年齡！");

        break;

    default:

        console.log("這個很差說");

        break;

}

4. while循環

循環三步走：

1.初始化循環變量

2.判斷循環條件

3.更新循環變量

while(條件){

//運行相關代碼

//改變循環原來的量，若是不改變會死循環

//

}

例1：

var i = 1; //初始化循環變量

 

while(i<=9){ //判斷循環條件

    console.log(i);

    i++; //更新循環條件   等同於i=i+1

}

 

例2：(死循環例子)

var i = 1; //初始化循環變量

 

while(i != 0){ //判斷循環條件

    console.log(i);

    i++; //更新循環條件   等同於i=i+1

}

 

例2出現死循環，短期會出現內存佔用100%現象。

 

5.do{...}while(條件)

例：

//無論有沒有知足while中的條件do裏面的代碼都會走一次

var i = 3;//初始化循環變量

do{

 

    console.log(i)

    i++;//更新循環條件

 

}while (i<10) //判斷循環條件

 

6.for循環

(1)單個for循環

例1：打印1到10

for(var i = 1;i<=10;i++){

 console.log(i)

}

 

例2：打印1--100的偶數。

// 打印1--100的偶數。

for(var i = 1;i<=100;i++){

    if(i%2==0){

        //是偶數

        console.log(i)

    }

}

(2)雙層for循環

例：

for (var i = 1; i <= 5; i++) { // 行數

        for (var j = 0; j < 6; j++) {// 每行的列數

            document.write('*')

        }

        document.write('<br>')

    }

 

運行效果：

 

 

七.經常使用內置對象

JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。

JavaScript 提供多個內置對象，好比 Number、String、Date、Array 等等，經過new實例化的對象都是object類型(var s = new String('hello')，var n = new Number(12)等)，數組不須要new生命，類型就是object類型。

對象只是帶有屬性和方法的特殊數據類型。

1. 數組Array

數組對象的做用是：使用單獨的變量名來存儲一系列的值。相似於Python中的列表。

(1)數組的建立方式

a.字面量方式建立（推薦你們使用這種方式，簡單粗暴）

var arr = ["alex", "egon", "yuan"];

b.使用new關鍵詞

使用構造函數(須要本身瞭解)的方式建立 使用new關鍵詞對構造函數進行建立對象

var arr = new Array();

(2)數組的賦值

經過下標進行一一賦值

例：

var arr = [];

//經過下標進行一一賦值

arr[0] = 123;

arr[1] = '哈哈哈';

arr[2] = '嘿嘿嘿'

(3)數組的經常使用方法

 

a.數組的合併 concat()

例：

var north = ['北京','山東','天津'];

var south = ['東莞','深圳','上海'];

 

var newCity = north.concat(south);

console.log(newCity)  //輸出結果： ["北京", "山東", "天津", "東莞", "深圳", "上海"]

 

b. join()

將數組中的元素使用指定的字符串鏈接起來，它會造成一個新的字符串

例：

var score = [98,78,76,100,0];

var str = score.join('|');

console.log(str);// 輸出結果：98|78|76|100|0

c.將數組轉換成字符串 toString()

例：

var score = [98,78,76,100,0];

//toString() 直接轉換爲字符串  每一個元素之間使用逗號隔開

           

var str = score.toString();

console.log(str);//98,78,76,100,0

d.slice切割

slice(start,end); 返回數組的一段，左閉右開

例：

var arr = ['張三','李四','王五','趙六'];

var newArr  = arr.slice(1,3);

console.log(newArr);//結果爲：["李四", "王五"]

e. pop 元素

pop數組的最後一個元素並返回刪除的元素

例：

var arr = ['張三', '李四', '王五', '趙六'];

var item = arr.pop();

console.log(arr);//["張三", "李四"，"王五"]

console.log(item);//趙六

f.push添加元素

 push() 向數組末尾添加一個元素或多個元素，並返回新的長度

例1：添加一個元素

var arr = ['張三', '李四', '王五', '趙六'];

var newLength = arr.push('鐵蛋');//能夠添加多個，以逗號隔開

console.log(newLength);//5

console.log(arr);  //結果爲：["張三", "李四", "王五", "趙六", "鐵蛋"]

 

例2:添加兩個元素

var arr = ['張三', '李四', '王五', '趙六'];

var newLength = arr.push('鐵蛋','鐵錘');//能夠添加多個，以逗號隔開

console.log(newLength);//6

console.log(arr);  //結果爲：["張三", "李四", "王五", "趙六", "鐵蛋", "鐵錘"]

g.reverse() 翻轉數組

reverse() 使得數組的元素順序倒過來排序。

例：

var arr = ['張三', '李四', '王五', '趙六'];

//反轉數組

arr.reverse();

console.log(arr); //結果爲： ["趙六", "王五", "李四", "張三"]

h.sort對數組排序

sort對數組中的元素進行排序，排序的規則是首字符按照ASSCII碼來排序優先，若是第一個字符相同將比較第二個字符，依次類推。

例：

var names = ["one", "two", "three", "five"];

names.sort();

console.log(names);  //結果爲：["five", "one", "three", "two"]

i.判斷是否爲數組isArray()

布爾類型值 = Array.isArray(被檢測的值);

j.shift()

shift()刪除數組第一個元素並返回該元素

例：

var names = ["zero", "one", "two", "three"];

var a = names.shift();

console.log(a);  // zero

console.log(names);  // 數組剩餘： ["one", "two", "three"]

k.unshift()

unshift() 向數組的開頭添加一個或更多元素，並返回新的長度

例：

var names = ["zero", "one", "two", "three"];

var newLength = names.unshift('four');//能夠添加多個，以逗號隔開

console.log(newLength);//5

console.log(names); // ["four", "zero", "one", "two", "three"]

2.字段串String

字符串方法有： 

 

(1)chartAt() 返回指定索引的位置的字符

例：

var str = 'zero';

var charset = str.charAt(2); //索引的位置是從0開始  

console.log(charset);//輸出結果爲：r

(2)concat 返回字符串值，表示兩個或多個字符串的拼接

例:

var str1 = 'ze';

var str2  = 'ro';

console.log(str1.concat(str2));//輸出結果爲：zero

st1的值和str2的值進行拼接

(3)replace(a,b) 

將字符串a替換成字符串b

例：

var a = '1234567755';

var newStr = a.replace("23456","****");

console.log(newStr);//1****7755

例題將23456的值替換成****，也能夠替換成其餘的字符串

(4)indexof()

indexof()查找字符的下標，若是找到返回字符串的下標，找不到則返回-1 。跟seach()方法用法同樣。

例：

var str = 'zero';

console.log(str.indexOf('e'));// 找到了e返回：1

console.log(str.indexOf('p'));//沒有找到p返回：-1

(5)slice(start，end)

slice(start，end) 提取一個字符串的一部分，並返回一新的字符串。左閉右開 分割字符串

例：

var str = 'study javascript';

console.log(str.slice(3,10)); //結果輸出： dy java

(6)split()

split('a',1)以字符串a分割字符串，並返回新的數組。若是第二個參數沒寫，表示返回整個數組，若是定義了個數，返回新數組（數組裏的元素個數就是定義的個數）。

例：

var  str =  '今天適合學習JavaScript';

console.log(str.split('a'));  // ["今天適合學習J", "v", "Script"]

console.log(str.split('a', 1));  // ["今天適合學習J"]

(7)substr(start,length)

substr(start,length) 返回一個字符串中從指定位置開始到指定字符數的字符。

例：

var  str =  '今天適合學習JavaScript';

console.log(str.substr(0,4));// 結果爲：今天適合

(8) toLowerCase()轉小寫

例：

var str = 'JavaScript';

console.log(str.toLowerCase()); //輸出結果：javascript

(9)toUpperCase()轉大寫

例：

var str = 'JavaScript';

console.log(str.toUpperCase());  //輸出結果爲：JAVASCRIPT

(10)trim() 去除字符串兩邊的空白

例：

var str = '    JavaScript    ';

console.log(str);  //去除以前打印

console.log(str.trim()); //去除以後打印

運行的的結果如圖：

 

 

特別：

// 四捨五入

var num = 132.62522;

var newNum1 = num.toFixed();

console.log(newNum1); //133

var newNum2 = num.toFixed(2);

console.log(newNum2); //132.63

 

3.Date日期對象

建立日期對象只有構造函數一種方式,使用new關鍵字

//建立了一個date對象

var myDate = new Date();

關於時間對象的語法請見下圖：

 

//建立日期對象

var myDate=new Date();

 

console.log(myDate.getDate());  //輸出月份的第幾天

console.log(myDate.toLocaleString()); //輸出包括年月日的時間

　　　　

4.Math內置對象

經常使用內置對象有以下表：

方法	含義
Math.floor()	向下取整，稱爲「地板函數」
Math.ceil()	向上取整，稱爲「天花板函數」
Math.max(a,b)	求a和b的最大值
Math.min(a,b)	求a和b的最小值
Math.random()	隨機數，默認產生0-1之間的隨機數

 

(1)Math.ceil() 向上取整，'天花板函數'

例：

var x = 1.234;

//天花板函數  表示大於等於 x，而且與它最接近的整數是2

var a = Math.ceil(x);

console.log(a);//2

(2)Math.floor 向下取整，'地板函數'

例：

var x = 1.234;

// 小於等於 x，而且與它最接近的整數 1，也稱爲去尾

var b = Math.floor(x);

console.log(b);//1

(3)求兩個數的最大值和最小值

例：

//求 兩個數的最大值 最小值

console.log(Math.max(2,5));//5

console.log(Math.min(2,5));//2

(4)隨機數 Math.random()

請記住公式：min - max之間的隨機數： min+Math.random()*(max-min)

例1：

var ran = Math.random();

console.log(ran);[0,1]之間的隨機小數

例2：　　

若是讓你取100-200之間的隨機數，怎麼作？

var res = 100+Math.random()*(200-100)

console.log(res);

5.JSON對象

(1)JSON的做用

JSON 是用於存儲和傳輸數據的格式。

JSON 一般用於服務端向網頁傳遞數據 。

 JSON 使用 JavaScript 語法，可是 JSON 格式僅僅是一個文本。

文本能夠被任何編程語言讀取及做爲數據格式傳遞。

(2)什麼是JSON

JSON 英文全稱 JavaScript Object Notation

JSON 是一種輕量級的數據交換格式。

JSON是獨立的語言 *

JSON 易於理解。

 

(3)JSON 實例及JSON 字符串與 JavaScript 對象相互轉換

例：

var str1 = '{"name": "hsz", "age": 24}';

var obj1 = {"name": "hsz", "age": 24};

// JSON字符串轉換成對象

var obj = JSON.parse(str1);

console.log(obj);  //{name: "hsz", age: 24}

// 對象轉換成JSON字符串

var str = JSON.stringify(obj1);

console.log(str); //{"name":"hsz","age":24}

 

(4)JSON 格式化後爲 JavaScript 對象

JSON 格式在語法上與建立 JavaScript 對象代碼是相同的。

因爲它們很類似，因此 JavaScript 程序能夠很容易的將 JSON 數據轉換爲 JavaScript 對象。

 

(5)JSON 語法規則

數據爲 鍵/值 對。

數據由逗號分隔。

大括號保存對象。

方括號保存數組。

JSON 數據 - 一個名稱對應一個值

JSON 數據格式爲 鍵/值 對，就像 JavaScript 對象屬性。

鍵/值對包括字段名稱（在雙引號中），後面一個冒號，而後是值：

"name":"hsz"

(6)JSON 對象與數組

JSON 對象保存在大括號內。

就像在 JavaScript 中, 對象能夠保存多個 鍵/值 對：

{"name":"hsz", "age":24}

 

JSON 數組保存在中括號內。

就像在 JavaScript 中, 數組能夠包含對象：

"sites":[

    {"name":"hsz", "age":24},

    {"name":"zero", "age":20},

    {"name":"one", "age":30}

]

在以上實例中，對象 "sites" 是一個數組，包含了三個對象。

 

若是還須要學習更多關於js的經常使用對象，請參考連接：http://www.runoob.com/jsref/jsref-tutorial.html

八．函數

函數：就是將一些語句進行封裝，而後經過調用的形式，執行這些語句。

函數的做用：

將大量重複的語句寫在函數裏，之後須要這些語句的時候，能夠直接調用函數，避免重複勞動。

簡化編程，讓編程模塊化。

例：

console.log("hello world");

sayHello();     //調用函數

//定義函數：

function sayHello(){

    console.log("hello");

    console.log("hello world");

}

運行結果爲：

 

 

1. 第一步定義函數

函數定義的語法：

function 函數名字(){

    //函數體內容  

}

解釋以下：

function：是一個關鍵字。中文是「函數」、「功能」。

函數名字：命名規定和變量的命名規定同樣。只能是字母、數字、下劃線、美圓符號，不能以數字開頭。

參數：後面有一對小括號，裏面是放參數用的。

大括號裏面，是這個函數的語句。

2. 函數的調用

函數調用的語法：

函數名字();

3. 函數的參數

函數的參數包括形參和實參

注意：實際參數和形式參數的個數，要相同。

例子：

//函數：求和

function sum(a, b) {

    console.log(a, b); //打印a和b的值

    // console.log(arguments); //

    console.log(a + b); //

}

sum(3, 4);  //3 4 7

sum("3", 4);//3 4 34

sum("Hello", "World"); //打印結果：Hello World HelloWorld

4. 函數的返回值

例子：

console.log(sum(3, 4));  //打印結果爲：7

//函數：求和

function sum(a, b) {

    return a + b;

}

 

九. 僞數組 arguments

arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。

1.返回函數實參的個數：arguments.length

例子：

function fn(a,b,c) {

    console.log(arguments);

    console.log(fn.length);         //獲取形參的個數

    console.log(arguments.length);  //獲取實參的個數

 

    console.log("----------------");

}

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

 

 

2.僞數組的注意點

之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。

舉例：

function fn(a,b) {

    arguments[0] = 99;  //將實參的第一個數改成99

    arguments.push(8);  //此方法不經過，由於沒法增長元素,會報錯

}

fn(2,4);

fn(2,4,6);

fn(2,4,6,8);

 

 

清空數組的幾種方式：

var array = [1,2,3,4,5,6];

 

array.splice(0);      //方式1：刪除數組中全部項目

array.length = 0;     //方式2：length屬性能夠賦值，在其它語言中length是隻讀

array = [];           //方式3：推薦