JS-Array 數組對象/指定分隔符連接數組元素join()/顛倒數組元素順序reverse()/選定元素slice()/數組排序sort()/編程練習

Array 數組對象

數組對象是一個對象的集合,里邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”,用來表示它在數組中的位置,是從零開始的

數組定義的方法:

  1. 定義了一個空數組:
var  數組名= new Array();
  1. 定義時指定有n個空元素的數組:
var 數組名 =new Array(n);

3.定義數組的時候,直接初始化數據:

var  數組名 = [<元素1>, <元素2>, <元素3>...];

我們定義myArray數組,并賦值,代碼如下:

var myArray = [2, 8, 6]; 

說明:定義了一個數組 myArray,里邊的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

數組元素使用:

數組名[下標] = 值;
注意: 數組的下標用方括號括起來,從0開始。

數組屬性:

length 用法:<數組對象>.length;返回:數組的長度,即數組里有多少個元素。它等于數組里最后一個元素的下標加一。

數組方法:


image.png

數組連接concat()

concat() 方法用于連接兩個或多個數組。此方法返回一個新數組,不改變原來的數組。

語法

arrayObject.concat(array1,array2,...,arrayN)
參數說明:


image.png

注意: 該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。

我們創建一個數組,將把 concat() 中的參數連接到數組 myarr 中,代碼如下:

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

運行結果:

1,2,3,4,5
1,2,3

我們創建了三個數組,然后使用 concat() 把它們連接起來,代碼如下:

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

運行結果:

hello!,I,love,JavaScript,!

指定分隔符連接數組元素join()

join()方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。

語法:

arrayObject.join(分隔符)
參數說明:


image.png

注意:返回一個字符串,該字符串把數組中的各個元素串起來,用<分隔符>置于元素與元素之間。這個方法不影響數組原本的內容。 我們使用join()方法,將數組的所有元素放入一個字符串中,代碼如下:

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

運行結果:

I,love,JavaScript

我們將使用分隔符來分隔數組中的元素,代碼如下:

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

運行結果:

I.love.JavaScript

顛倒數組元素順序reverse()

reverse() 方法用于顛倒數組中元素的順序。

語法:

arrayObject.reverse()

注意:該方法會改變原來的數組,而不會創建新的數組。

定義數組myarr并賦值,然后顛倒其元素的順序:

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

運行結果:

1,2,3
3,2,1

選定元素slice()

slice() 方法可從已有的數組中返回選定的元素。

語法

arrayObject.slice(start,end)

參數說明:


image.png

1.返回一個新的數組,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素。

  1. 該方法并不會修改數組,而是返回一個子數組。

注意:

  1. 可使用負值從數組的尾部選取元素。

2.如果 end 未被規定,那么 slice() 方法會選取從 start 到數組結尾的所有元素。

  1. String.slice() 與 Array.slice() 相似。

我們將創建一個新數組,然后從其中選取的元素,代碼如下:

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>

運行結果:

1,2,3,4,5,6
3,4
1,2,3,4,5,6

數組排序sort()

sort()方法使數組中的元素按照一定的順序排列。

語法:

arrayObject.sort(方法函數)

參數說明:


image.png

1.如果不指定<方法函數>,則按unicode碼順序排列。

2.如果指定<方法函數>,則按<方法函數>所指定的排序方法排序。

myArray.sort(sortMethod);
注意: 該函數要比較兩個值,然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b,其返回值如下:

若返回值<=-1,則表示 A 在排序后的序列中出現在 B 之前。
若返回值>-1 && <1,則表示 A 和 B 具有相同的排序順序。
若返回值>=1,則表示 A 在排序后的序列中出現在 B 之后。

1.使用sort()將數組進行排序,代碼如下:

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

運行結果:

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代碼沒有按照數值的大小對數字進行排序。

2.如要實現這一點,就必須使用一個排序函數,代碼如下:

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序,如降序,把“a - b”該成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

運行結果:

80,16,50,6,100,1
1,6,16,50,80,100

編程練習

某班的成績出來了,現在老師要把班級的成績打印出來。

效果圖:

XXXX年XX月X日 星期X--班級總分為:81

格式要求:

1、顯示打印的日期。 格式為類似“XXXX年XX月XX日 星期X” 的當前的時間。

2、計算出該班級的平均分(保留整數)。

同學成績數據如下:

"小明:87; 小花:81; 小紅:97; 小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"

任務
第一步:可通過javascript的日期對象來得到當前的日期。

提示:使用Date()日期對象,注意星期返回值為0-6,所以要轉成文字"星期X"

第二步:一長竄的字符串不好弄,找規律后分割放到數組里更好操作哦。

第三步:分割字符串得到分數,然后求和取整。

提示:parseInt() 字符串類型轉成整型。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內容

  • 第1章 認識JS JavaScript能做什么?1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現...
    mo默22閱讀 1,313評論 0 5
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,786評論 0 8
  • 變量命名、聲明、賦值 1.必須以字母、下劃線或美元符號開頭,后面可以跟字母、下劃線、美元符號和數字。2.變量名區分...
    wq04200閱讀 636評論 0 1
  • 什么是對象JavaScript 中的所有事物都是對象,如:字符串、數值、數組、函數等,每個對象帶有屬性和方法。對象...
    阿r阿r閱讀 451評論 0 9
  • 第1章 系好安全帶,準備啟航 1.1讓你認識JS 1.1.1 JavaScript能做什么?增強頁面動態效果(...
    張中華閱讀 1,385評論 4 10