好程式員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]) // helloconsole.log(arr[1]) // world

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

既然我們區分了基本資料類型和複雜資料類型

那麼他們之間就一定會存在一些差別

他們最大的差別就是在存儲上的差別

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

棧： 主要存儲基本資料類型的内容

堆： 主要存儲複雜資料類型的内容

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

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

直接在 棧空間 内有存儲一個資料

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

下面這個 對象 的存儲

var obj = {

name: 'Jack',

age: 18,

gender: '男'}

複雜資料類型的存儲

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

.把資料存儲到存儲空間内

.把存儲空間的位址指派給棧裡面的變量

這就是資料類型之間存儲的差別

資料類型之間的比較

基本資料類型是 值 之間的比較

var num = 1var str = '1'

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

複雜資料類型是 位址 之間的比較

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

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

因為我們建立了兩個對象，那麼就會在 堆空間 裡面開辟兩個存儲空間存儲資料（兩個位址）

雖然存儲的内容是一樣的，那麼也是兩個存儲空間，兩個位址

複雜資料類型之間就是位址的比較，是以 obj 和 obj2 兩個變量的位址不一樣

是以我們得到的就是 false

數組的常用方法

數組是一個複雜資料類型，我們在操作它的時候就不能再想基本資料類型一樣操作了

比如我們想改變一個數組

// 我們想把數組變成隻有 1 和 2arr = [1, 2]

這樣肯定是不合理，因為這樣不是在改變之前的數組

相當于心弄了一個數組給到 arr 這個變量了

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

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

數組常用方法之 push

push 是用來在數組的末尾追加一個元素

var arr = [1, 2, 3]

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

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

數組常用方法之 pop

pop 是用來删除數組末尾的一個元素

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

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

數組常用方法之 unshift

unshift 是在數組的最前面添加一個元素

// 使用 unshift 方法想數組的最前面添加一個元素arr.unshift(4)

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

數組常用方法之 shift

shift 是删除數組最前面的一個元素

// 使用 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 個内容

第三個參數沒有寫，就是沒有新内容替換掉截取位置

// 使用 splice 方法截取數組arr.splice(1, 2, '我是新内容')

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

arr.splice(1, 2, '我是新内容') 表示從索引 1 開始截取 2 個内容

然後用第三個參數把截取完空出來的位置填充

數組常用方法之 reverse

reverse 是用來反轉數組使用的

// 使用 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 不會改變原始數組，而是傳回一個新的數組

// 使用 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(要以什麼内容連結)

不會改變原始數組，而是把連結好的字元串傳回

// 使用 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 順序增加

我們把這個行為叫做 周遊

// 使用 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 循環來周遊對象

先來看一段代碼

age: 18}

for (var key in obj) {

console.log(key)}

// 會在控制台列印兩次内容，分别是 name 和 age

for in 循環的周遊是按照對象中有多少成員來決定了

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

key 是我們自己定義的一個變量，就和 for 循環的時候我們定義的 i 一個道理

在每次循環的過程中，key 就代表着對象中某一個成員的 屬性名

函數參數傳遞基本資料類型和複雜資料類型的差別

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

那麼他們在指派之間也是有差別的

基本資料類型之間的指派

var num = 100var num2 = num

num2 = 200

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

相當于是把 num 的值複制了一份一摸一樣的給了 num2 變量

指派以後兩個在沒有關系

複雜資料類型之間的指派

name: 'Jack'}var obj2 = obj

obj2.name = 'Rose'

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

因為複雜資料類型，變量存儲的是位址，真實内容在 堆空間 記憶體儲

是以指派的時候相當于把 obj 存儲的那個位址複制了一份給到了 obj2 變量

現在 obj 和 obj2 兩個變量存儲的位址一樣，指向一個記憶體空間

是以使用 obj2 這個變量修改空間内的内容，obj 指向的空間也會跟着改變了

函數的參數

函數的參數也是指派的之中，在函數調用的時候，實參給行參指派

和之前變量指派的規則是一樣的

函數傳遞基本資料類型

function fn(n) {

n = 200

console.log(n) // 200}

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

和之前變量指派的時候一樣，在把 num 的值複制了一份一摸一樣的給到了函數内部的行參 n

兩個之間在沒有任何關系了

函數傳遞複雜資料類型

function fn(o) {

o.name = 'Rose'

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

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

和之前變量指派的時候一樣，把 obj 記憶體儲的位址複制了一份一摸一樣的給到函數内部的行參 o

函數外部的 obj 和函數内部的行參 o，存儲的是一個位址，指向的是一個存儲空間

是以兩個變量操作的是一個存儲空間

在函數内部改變了空間内的資料

obj 看到的也是改變以後的内容