Javascript特效開發(二)

weixin_34321977發表於2017-05-16

本文內容承接Javascript特效開發(一)

第三章    Javascript特效開發第二階段

3.1、陣列

陣列是物件型別資料

2194177-2699c95afe02b258.png

1、陣列的兩種建立方式

(1)隱性方式建立陣列

2194177-2fb3d4329b18fc21.png

(2)通過建構函式建立陣列

2194177-742cf8c17b3b1aac.png

陣列的長度永遠比陣列的最大下標大1

2194177-56cd0343605f73c3.png

2、陣列物件

(1)length

設定或返回陣列元素的數目。

array.lenth;(注:length後沒有括號);

(2)陣列刪除或新增元素

a、

2194177-4a9cce2b60d2d591.png
2194177-b2eb82c7e2c57048.png

執行結果:

2194177-576f8f716f8a0086.png

b、萬能新增和刪除(splice)

2194177-6da8dd62e37ad990.png

執行結果:

2194177-199a89ddbb3214a0.png

(3)陣列擷取(slice)

slice在擷取的時候只包含開始不包含結束;

不改變原陣列,只會返回心新的結果;

只寫一個引數,表示從這個開始,擷取到最後;

2194177-e60b01f45b3da689.png
2194177-8e72d6930e782c85.png

執行結果:

2194177-3f7033c4f6818d2c.png

(4)陣列轉換成字串(join())

不傳參預設逗號連線,傳空字串緊密連結沒有間隔,傳其它則以其它方式進行連結;

2194177-3d7889a8b99b03a7.png

執行結果:

2194177-6535bc70f9d2a7ff.png

(5)陣列連結concat(陣列內容複製的技巧)

2194177-d7cf1a90bee3906e.png

執行結果:

2194177-759c2ab031b90b2c.png

(6)陣列去重

2194177-5b8ade1edb409d2d.png

執行結果:

2194177-ba0cbee78f6b3497.png

(7)陣列排序

a.氣泡排序:

2194177-629075b74da5e333.png

執行結果:

2194177-0234e96853735eca.png

b.sort() 方法用於對陣列的元素進行排序

2194177-c2136baa0c88ce2d.png
2194177-03093976db15ab36.png
2194177-152f5d99156b340b.png
2194177-a4ad9da1958cb392.png

方法中a-b表示從小到大排,若是b-a則從大到小排;

3.2 建立物件

(1)用原生形式建立物件(也叫JSON格式建立物件)

2194177-5cb65967938ca7bd.png

(2)建構函式方式建立物件

2194177-e748d1e202bf73e7.png

3.3屬性和方法的兩種訪問形式:

2194177-210e282a7dfdaf59.png

3.4物件的遍歷

2194177-13c7a4be37a1c843.png

執行效果:

2194177-d6109ce3354eda29.png

第四章    Javascript特效開發第三階段

4.1字串物件

(1)length

str.length; 獲取字串長度,不區分中英文;

(2)獲取型別

2194177-5c4135ebc275d101.png

str.chart(num);str[num];返回指定位置的字元結果是相同的。

(3)查詢型別

2194177-10f10ad1001d4bc9.png

(4)擷取型別

2194177-9604ca657aa44a8d.png

(5)轉換型別

2194177-bc9b60e15a43f107.png
2194177-18c7cf7c4b25a12d.png
2194177-198aa01df4f57f4e.png

4.2數學物件&隨機數

2194177-6e6732277f62679a.png

四捨五入的結果一定是整數;

整數向上向下取整還本身;

2194177-610f5cdfd3a88557.png

《Javascript特效開發(一)》與《Javascript特效開發(二)》主要是講的Javacript的ECMAscript部分,屬於最基礎的語法部分,後續《Javascript特效開發(三)》會對Javascript的DOM和BOM部分進行講解。

連結:www.jianshu.com/p/a886cc514a6b


如有問題歡迎交流。

如轉載請註明出處,謝謝!

相關文章