這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何理解JavaScript中的數(shù)組，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是一家專業(yè)提供靜安企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為靜安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

什么是數(shù)組？字面理解就是 數(shù)字的組合，其實不太準(zhǔn)確，準(zhǔn)確的來說數(shù)組是一個 數(shù)據(jù)的集合，也就是我們把一些數(shù)據(jù)放在一個盒子里面，按照順序排好[1, 2, 3, 'hello', true, false]，這個東西就是一個數(shù)組，存儲著一些數(shù)據(jù)的集合

數(shù)據(jù)類型分類

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

· 數(shù)組也是數(shù)據(jù)類型中的一種

· 我們簡單的把所有數(shù)據(jù)類型分為兩個大類 基本數(shù)據(jù)類型 和 復(fù)雜數(shù)據(jù)類型

· 基本數(shù)據(jù)類型： number / string / boolean / undefined / null

· 復(fù)雜數(shù)據(jù)類型： object / function / array / ...

創(chuàng)建一個數(shù)組

· 數(shù)組就是一個 []

· 在 [] 里面存儲著各種各樣的數(shù)據(jù)，按照順序依次排好

字面量創(chuàng)建一個數(shù)組

· 直接使用 [] 的方式創(chuàng)建一個數(shù)組

// 創(chuàng)建一個空數(shù)組var arr1 = []

// 創(chuàng)建一個有內(nèi)容的數(shù)組var arr2 = [1, 2, 3]

內(nèi)置構(gòu)造函數(shù)創(chuàng)建數(shù)組

· 使用 js 的內(nèi)置構(gòu)造函數(shù) Array 創(chuàng)建一個數(shù)組

// 創(chuàng)建一個空數(shù)組var arr1 = new Array()

// 創(chuàng)建一個長度為 10 的數(shù)組var arr2 = new Array(10)

// 創(chuàng)建一個有內(nèi)容的數(shù)組var arr3 = new Array(1, 2, 3)

數(shù)組的 length

· length: 長度的意思

· length 就是表示數(shù)組的長度，數(shù)組里面有多少個成員，length 就是多少

// 創(chuàng)建一個數(shù)組var arr = [1, 2, 3]

console.log(arr.length) // 3

數(shù)組的索引

· 索引，也叫做下標(biāo)，是指一個數(shù)據(jù)在數(shù)組里面排在第幾個的位置

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

· 在 js 里面也一樣，數(shù)組的索引從 0 開始

// 創(chuàng)建一個數(shù)組var arr = ['hello', 'world']

· 上面這個數(shù)組中，第 0 個 數(shù)據(jù)就是字符串 hello，第 1 個 數(shù)據(jù)就是字符串 world

· 想獲取數(shù)組中的第幾個就使用 數(shù)組[索引] 來獲取

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

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

數(shù)據(jù)類型之間存儲的區(qū)別（重點）

· 既然我們區(qū)分了基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型

· 那么他們之間就一定會存在一些區(qū)別

· 他們最大的區(qū)別就是在存儲上的區(qū)別

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

· 棧： 主要存儲基本數(shù)據(jù)類型的內(nèi)容

· 堆： 主要存儲復(fù)雜數(shù)據(jù)類型的內(nèi)容

基本數(shù)據(jù)類型在內(nèi)存中的存儲情況

· var num = 100，在內(nèi)存中的存儲情況

· 直接在 ?？臻g 內(nèi)有存儲一個數(shù)據(jù)

復(fù)雜數(shù)據(jù)類型在內(nèi)存中的存儲情況

· 下面這個 對象 的存儲

var obj = {

  name: 'Jack',

  age: 18,

  gender: '男'}

· 復(fù)雜數(shù)據(jù)類型的存儲

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

00002. 把數(shù)據(jù)存儲到存儲空間內(nèi)

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

· 這就是數(shù)據(jù)類型之間存儲的區(qū)別

數(shù)據(jù)類型之間的比較

· 基本數(shù)據(jù)類型是 值 之間的比較

var num = 1var str = '1'

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

· 復(fù)雜數(shù)據(jù)類型是 地址 之間的比較

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

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

· 因為我們創(chuàng)建了兩個對象，那么就會在 堆空間 里面開辟兩個存儲空間存儲數(shù)據(jù)（兩個地址）

· 雖然存儲的內(nèi)容是一樣的，那么也是兩個存儲空間，兩個地址

· 復(fù)雜數(shù)據(jù)類型之間就是地址的比較，所以 obj 和 obj2 兩個變量的地址不一樣

· 所以我們得到的就是 false

數(shù)組的常用方法

· 數(shù)組是一個復(fù)雜數(shù)據(jù)類型，我們在操作它的時候就不能再想基本數(shù)據(jù)類型一樣操作了

· 比如我們想改變一個數(shù)組

// 創(chuàng)建一個數(shù)組var arr = [1, 2, 3]

// 我們想把數(shù)組變成只有 1 和 2arr = [1, 2]

· 這樣肯定是不合理，因為這樣不是在改變之前的數(shù)組

· 相當(dāng)于心弄了一個數(shù)組給到 arr 這個變量了

· 相當(dāng)于把 arr 里面存儲的地址給換了，也就是把存儲空間換掉了，而不是在之前的空間里面修改

· 所以我們就需要借助一些方法，在不改變存儲空間的情況下，把存儲空間里面的數(shù)據(jù)改變了

數(shù)組常用方法之 push

· push 是用來在數(shù)組的末尾追加一個元素

var arr = [1, 2, 3]

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

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

數(shù)組常用方法之 pop

· pop 是用來刪除數(shù)組末尾的一個元素

var arr = [1, 2, 3]

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

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

數(shù)組常用方法之 unshift

· unshift 是在數(shù)組的最前面添加一個元素

var arr = [1, 2, 3]

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

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

數(shù)組常用方法之 shift

· shift 是刪除數(shù)組最前面的一個元素

var arr = [1, 2, 3]

// 使用 shift 方法刪除數(shù)組最前面的一個元素arr.shift()

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

數(shù)組常用方法之 splice

· splice 是截取數(shù)組中的某些內(nèi)容，按照數(shù)組的索引來截取

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

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

// 使用 splice 方法截取數(shù)組arr.splice(1, 2)

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

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

· 第三個參數(shù)沒有寫，就是沒有新內(nèi)容替換掉截取位置

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

// 使用 splice 方法截取數(shù)組arr.splice(1, 2, '我是新內(nèi)容')

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

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

· 然后用第三個參數(shù)把截取完空出來的位置填充

數(shù)組常用方法之 reverse

· reverse 是用來反轉(zhuǎn)數(shù)組使用的

var arr = [1, 2, 3]

// 使用 reverse 方法來反轉(zhuǎn)數(shù)組arr.reverse()

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

數(shù)組常用方法之 sort

· sort 是用來給數(shù)組排序的

var arr = [2, 3, 1]

// 使用 sort 方法給數(shù)組排序arr.sort()

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

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

數(shù)組常用方法之 concat

· concat 是把多個數(shù)組進(jìn)行拼接

· 和之前的方法有一些不一樣的地方，就是 concat 不會改變原始數(shù)組，而是返回一個新的數(shù)組

var arr = [1, 2, 3]

// 使用 concat 方法拼接數(shù)組var newArr = arr.concat([4, 5, 6])

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

· 注意： concat 方法不會改變原始數(shù)組

數(shù)組常用方法之 join

· join 是把數(shù)組里面的每一項內(nèi)容鏈接起來，變成一個字符串

· 可以自己定義每一項之間鏈接的內(nèi)容 join(要以什么內(nèi)容鏈接)

· 不會改變原始數(shù)組，而是把鏈接好的字符串返回

var arr = [1, 2, 3]

// 使用 join 鏈接數(shù)組var str = arr.join('-')

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

· 注意： join 方法不會改變原始數(shù)組，而是返回鏈接好的字符串

for 和 for in 循環(huán)

· 因為數(shù)組的索引就可以獲取數(shù)組中的內(nèi)容

· 數(shù)組的索引又是按照 0 ～ n 順序排列

· 我們就可以使用 for 循環(huán)來循環(huán)數(shù)組，因為 for 循環(huán)我們也可以設(shè)置成 0 ～ n 順序增加

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

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

// 使用 for 循環(huán)遍歷數(shù)組for (var i = 0; i < arr.length; i++) {

  console.log(arr[i])}

// 會在控制臺依次打印出 1， 2， 3， 4， 5

· i < arr.length 因為 length 就是數(shù)組的長度，就是一個數(shù)字，所以我們可以直接用它來決定循環(huán)次數(shù)

· console.log(arr[i]) 因為隨著循環(huán)，i 的值會從 0 開始依次增加

· 所以我們實際上就相當(dāng)于在打印 arr[0] / arr[1] / ...

· 因為 對象 是沒有索引的，所以我們沒有辦法使用 for 循環(huán)來遍歷

· 這里我們使用 for in 循環(huán)來遍歷對象

· 先來看一段代碼

var obj = {

  name: 'Jack',

  age: 18}

for (var key in obj) {

  console.log(key)}

// 會在控制臺打印兩次內(nèi)容，分別是 name 和 age

· for in 循環(huán)的遍歷是按照對象中有多少成員來決定了

· 有多少成員，就會執(zhí)行多少次

· key 是我們自己定義的一個變量，就和 for 循環(huán)的時候我們定義的 i 一個道理

· 在每次循環(huán)的過程中，key 就代表著對象中某一個成員的 屬性名

函數(shù)參數(shù)傳遞基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型的區(qū)別

· 之前我們知道了，基本數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型在存儲上是有區(qū)別的

· 那么他們在賦值之間也是有區(qū)別的

· 基本數(shù)據(jù)類型之間的賦值

var num = 100var num2 = num

num2 = 200

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

· 相當(dāng)于是把 num 的值復(fù)制了一份一摸一樣的給了 num2 變量

· 賦值以后兩個在沒有關(guān)系

· 復(fù)雜數(shù)據(jù)類型之間的賦值

var obj = {

  name: 'Jack'}var obj2 = obj

obj2.name = 'Rose'

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

· 因為復(fù)雜數(shù)據(jù)類型，變量存儲的是地址，真實內(nèi)容在 堆空間 內(nèi)存儲

· 所以賦值的時候相當(dāng)于把 obj 存儲的那個地址復(fù)制了一份給到了 obj2 變量

· 現(xiàn)在 obj 和 obj2 兩個變量存儲的地址一樣，指向一個內(nèi)存空間

· 所以使用 obj2 這個變量修改空間內(nèi)的內(nèi)容，obj 指向的空間也會跟著改變了

函數(shù)的參數(shù)

· 函數(shù)的參數(shù)也是賦值的之中，在函數(shù)調(diào)用的時候，實參給行參賦值

· 和之前變量賦值的規(guī)則是一樣的

· 函數(shù)傳遞基本數(shù)據(jù)類型

function fn(n) {

  n = 200

  console.log(n) // 200}

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

· 和之前變量賦值的時候一樣，在把 num 的值復(fù)制了一份一摸一樣的給到了函數(shù)內(nèi)部的行參 n

· 兩個之間在沒有任何關(guān)系了

· 函數(shù)傳遞復(fù)雜數(shù)據(jù)類型

function fn(o) {

  o.name = 'Rose'

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

var obj = {

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

· 和之前變量賦值的時候一樣，把 obj 內(nèi)存儲的地址復(fù)制了一份一摸一樣的給到函數(shù)內(nèi)部的行參 o

· 函數(shù)外部的 obj 和函數(shù)內(nèi)部的行參 o，存儲的是一個地址，指向的是一個存儲空間

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

· 在函數(shù)內(nèi)部改變了空間內(nèi)的數(shù)據(jù)

· obj 看到的也是改變以后的內(nèi)容

上述就是小編為大家分享的如何理解JavaScript中的數(shù)組了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。