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: '男'
  }

• 

• 復雜資料型別的存盤

  1. 在堆里面開辟一個存盤空間

  2. 把資料存盤到存盤空間內

  3. 把存盤空間的地址賦值給堆疊里面的變數

• 這就是資料型別之間存盤的區別

資料型別之間的比較

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

  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 方法不會改變原始陣列，而是回傳鏈接好的字串