好程式設計師web前端培訓分享JavaScript學習筆記之陣列

　　 好程式設計師web 前端培訓分享 JavaScript 學習筆記 之 陣列 ， 什麼是陣列？字面理解就是  數字的組合 ， 其實不太準確，準確的來說陣列是一個  資料的集合 ， 也就是我們把一些資料放在一個盒子裡面，按照順序排好 [1, 2, 3, 'hello', true, false] ， 這個東西就是一個陣列，儲存著一些資料的集合

資料型別分類

·  number  /  string  /  boolean  /  undefined  /  null  /  object  /  function  /  array  / ...

·  陣列也是資料型別中的一種

·  我們簡單的把所有資料型別分為兩個大類  基本資料型別  和  複雜資料型別

·  基本資料型別：  number  /  string  /  boolean  /  undefined  /  null

·  複雜資料型別：  object  /  function  /  array  / ...

建立一個陣列

·  陣列就是一個  []

·  在  []  裡面儲存著各種各樣的資料，按照順序依次排好

字面量建立一個陣列

·  直接使用  []  的方式建立一個陣列

// 建立一個空陣列 var   arr1   =   []

// 建立一個有內容的陣列 var   arr2   =   [ 1 ,   2 ,   3 ]

內建建構函式建立陣列

·  使用 js 的內建建構函式  Array  建立一個陣列

// 建立一個空陣列 var   arr1   =   new   Array ()

// 建立一個長度為 10 的陣列 var   arr2   =   new   Array ( 10 )

// 建立一個有內容的陣列 var   arr3   =   new   Array ( 1 ,   2 ,   3 )

陣列的 length

·  length: 長度的意思

·  length 就是表示陣列的長度，陣列裡面有多少個成員，length 就是多少

// 建立一個陣列 var   arr   =   [ 1 ,   2 ,   3 ]

console.log(arr.length)   // 3

陣列的索引

·  索引，也叫做下標，是指一個資料在陣列裡面排在第幾個的位置

·  注意：  在所有的語言裡面，索引都是從 0 開始的

·  在 js 裡面也一樣，陣列的索引從 0 開始

// 建立一個陣列 var   arr   =   [ 'hello' ,   'world' ]

·  上面這個陣列中， 第 0 個  資料就是字串  hello ， 第 1 個  資料就是字串  world

·  想獲取陣列中的第幾個就使用  陣列[索引]  來獲取

var   arr   =   [ 'hello' ,   'world' ]

console.log(arr[ 0 ])   // hello console.log(arr[ 1 ])   // world

資料型別之間儲存的區別（重點）

·  既然我們區分了基本資料型別和複雜資料型別

·  那麼他們之間就一定會存在一些區別

·  他們最大的區別就是在儲存上的區別

·  我們的儲存空間分成兩種  棧  和  堆

·  棧： 主要儲存基本資料型別的內容

·  堆： 主要儲存複雜資料型別的內容

基本資料型別在記憶體中的儲存情況

·  var num = 100 ，在記憶體中的儲存情況

·  直接在  棧空間  內有儲存一個資料

複雜資料型別在記憶體中的儲存情況

·  下面這個 物件 的儲存

var   obj   =   {

   name :   'Jack' ,

   age :   18 ,

   gender :   '男' }

 

·  複雜資料型別的儲存

00001.  在堆裡面開闢一個儲存空間

00002.  把資料儲存到儲存空間內

00003.  把儲存空間的地址賦值給棧裡面的變數

·  這就是資料型別之間儲存的區別

資料型別之間的比較

·  基本資料型別是  值  之間的比較

var   num   =   1 var   str   =   '1'

console.log(num   ==   str)   // true

·  複雜資料型別是  地址  之間的比較

var   obj   =   {   name :   'Jack'   } var   obj2   =   {   name :   'Jack'   }

console.log(obj   ==   obj2)   // false

·  因為我們建立了兩個物件，那麼就會在 堆空間 裡面開闢兩個儲存空間儲存資料（兩個地址）

·  雖然儲存的內容是一樣的，那麼也是兩個儲存空間，兩個地址

·  複雜資料型別之間就是地址的比較，所以  obj  和  obj2  兩個變數的地址不一樣

·  所以我們得到的就是  false

陣列的常用方法

·  陣列是一個複雜資料型別，我們在操作它的時候就不能再想基本資料型別一樣操作了

·  比如我們想改變一個陣列

// 建立一個陣列 var   arr   =   [ 1 ,   2 ,   3 ]

// 我們想把陣列變成只有 1 和 2 arr   =   [ 1 ,   2 ]

·  這樣肯定是不合理，因為這樣不是在改變之前的陣列

·  相當於心弄了一個陣列給到 arr 這個變數了

·  相當於把 arr 裡面儲存的地址給換了，也就是把儲存空間換掉了，而不是在之前的空間裡面修改

·  所以我們就需要藉助一些方法，在不改變儲存空間的情況下，把儲存空間裡面的資料改變了

陣列常用方法之 push

·  push  是用來在陣列的末尾追加一個元素

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 push 方法追加一個元素在末尾 arr.push( 4 )

console.log(arr)   // [1, 2, 3, 4]

陣列常用方法之 pop

·  pop  是用來刪除陣列末尾的一個元素

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 pop 方法刪除末尾的一個元素 arr.pop()

console.log(arr)   // [1, 2]

陣列常用方法之 unshift

·  unshift  是在陣列的最前面新增一個元素

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 unshift 方法想陣列的最前面新增一個元素 arr.unshift( 4 )

console.log(arr)   // [4, 1, 2, 3]

陣列常用方法之 shift

·  shift  是刪除陣列最前面的一個元素

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 shift 方法刪除陣列最前面的一個元素 arr.shift()

console.log(arr)   // [2, 3]

陣列常用方法之 splice

·  splice  是擷取陣列中的某些內容，按照陣列的索引來擷取

·  語法：  splice(從哪一個索引位置開始，擷取多少個，替換的新元素)  （第三個引數可以不寫）

var   arr   =   [ 1 ,   2 ,   3 ,   4 ,   5 ]

// 使用 splice 方法擷取陣列 arr.splice( 1 ,   2 )

console.log(arr)   // [1, 4, 5]

·  arr.splice(1, 2)  表示從索引 1 開始擷取 2 個內容

·  第三個引數沒有寫，就是沒有新內容替換掉擷取位置

var   arr   =   [ 1 ,   2 ,   3 ,   4 ,   5 ]

// 使用 splice 方法擷取陣列 arr.splice( 1 ,   2 ,   '我是新內容' )

console.log(arr)   // [1, '我是新內容', 4, 5]

·  arr.splice(1, 2, '我是新內容')  表示從索引 1 開始擷取 2 個內容

·  然後用第三個引數把擷取完空出來的位置填充

陣列常用方法之 reverse

·  reverse  是用來反轉陣列使用的

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 reverse 方法來反轉陣列 arr.reverse()

console.log(arr)   // [3, 2, 1]

陣列常用方法之 sort

·  sort  是用來給陣列排序的

var   arr   =   [ 2 ,   3 ,   1 ]

// 使用 sort 方法給陣列排序 arr.sort()

console.log(arr)   // [1, 2, 3]

·  這個只是一個基本的簡單用法

 

陣列常用方法之 concat

·  concat  是把多個陣列進行拼接

·  和之前的方法有一些不一樣的地方，就是  concat  不會改變原始陣列，而是返回一個新的陣列

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 concat 方法拼接陣列 var   newArr   =   arr.concat([ 4 ,   5 ,   6 ])

console.log(arr)   // [1, 2, 3] console.log(newArr)   // [1, 2, 3, 4, 5, 6]

·  注意：  concat 方法不會改變原始陣列

陣列常用方法之 join

·  join  是把陣列裡面的每一項內容連結起來，變成一個字串

·  可以自己定義每一項之間連結的內容  join(要以什麼內容連結)

·  不會改變原始陣列，而是把連結好的字串返回

var   arr   =   [ 1 ,   2 ,   3 ]

// 使用 join 連結陣列 var   str   =   arr.join( '-' )

console.log(arr)   // [1, 2, 3] console.log(str)   // 1-2-3

·  注意：  join 方法不會改變原始陣列，而是返回連結好的字串

 

for 和 for in 迴圈

·  因為陣列的索引就可以獲取陣列中的內容

·  陣列的索引又是按照 0 ～ n 順序排列

·  我們就可以使用 for 迴圈來迴圈陣列，因為 for 迴圈我們也可以設定成 0 ～ n 順序增加

·  我們把這個行為叫做  遍歷

var   arr   =   [ 1 ,   2 ,   3 ,   4 ,   5 ]

// 使用 for 迴圈遍歷陣列 for   ( var   i   =   0 ;   i   <   arr.length;   i ++ )   {

   console.log(arr[i])}

// 會在控制檯依次列印出 1， 2， 3， 4， 5

·  i < arr.length  因為 length 就是陣列的長度，就是一個數字，所以我們可以直接用它來決定迴圈次數

·  console.log(arr[i])  因為隨著迴圈，i 的值會從 0 開始依次增加

·  所以我們實際上就相當於在列印  arr[0]  /  arr[1]  / ...

·  因為  物件  是沒有索引的，所以我們沒有辦法使用 for 迴圈來遍歷

·  這裡我們使用 for in 迴圈來遍歷物件

·  先來看一段程式碼

var   obj   =   {

   name :   'Jack' ,

   age :   18 }

for   ( var   key   in   obj)   {

   console.log(key)}

// 會在控制檯列印兩次內容，分別是 name 和 age

·  for in 迴圈的遍歷是按照物件中有多少成員來決定了

·  有多少成員，就會執行多少次

·  key  是我們自己定義的一個變數，就和 for 迴圈的時候我們定義的 i 一個道理

·  在每次迴圈的過程中，key 就代表著物件中某一個成員的  屬性名

函式引數傳遞基本資料型別和複雜資料型別的區別

·  之前我們知道了，基本資料型別和複雜資料型別在儲存上是有區別的

·  那麼他們在賦值之間也是有區別的

·  基本資料型別之間的賦值

var   num   =   100 var   num2   =   num

num2   =   200

console.log(num)   // 100 console.log(num2)   // 200

·  相當於是把 num 的值複製了一份一摸一樣的給了 num2 變數

·  賦值以後兩個在沒有關係

·  複雜資料型別之間的賦值

var   obj   =   {

   name :   'Jack' } var   obj2   =   obj

obj2.name   =   'Rose'

console.log(obj.name)   // Rose console.log(obj2.name)   // Rose

·  因為複雜資料型別，變數儲存的是地址，真實內容在 堆空間 記憶體儲

·  所以賦值的時候相當於把 obj 儲存的那個地址複製了一份給到了 obj2 變數

·  現在 obj 和 obj2 兩個變數儲存的地址一樣，指向一個記憶體空間

·  所以使用 obj2 這個變數修改空間內的內容，obj 指向的空間也會跟著改變了

函式的引數

·  函式的引數也是賦值的之中，在函式呼叫的時候，實參給行參賦值

·  和之前變數賦值的規則是一樣的

·  函式傳遞基本資料型別

function   fn(n)   {

   n   =   200

   console.log(n)   // 200 }

var   num   =   100 fn(num)console.log(num)   // 100

·  和之前變數賦值的時候一樣，在把 num 的值複製了一份一摸一樣的給到了函式內部的行參 n

·  兩個之間在沒有任何關係了

·  函式傳遞複雜資料型別

function   fn(o)   {

   o.name   =   'Rose'

   console.log(o.name)   // Rose }

var   obj   =   {

   name :   'Jack' }fn(obj)console.log(obj.name)   // Rose

·  和之前變數賦值的時候一樣，把 obj 記憶體儲的地址複製了一份一摸一樣的給到函式內部的行參 o

·  函式外部的 obj 和函式內部的行參 o，儲存的是一個地址，指向的是一個儲存空間

·  所以兩個變數操作的是一個儲存空間

·  在函式內部改變了空間內的資料

·  obj 看到的也是改變以後的內容