好程序員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
數組的常用方法
數組是一個複雜數據類型，我們在操作它的時候就不能再想基本數據類型一樣操作了
比如我們想改變一個數組
// 創建一個數組var arr = [1, 2, 3]
// 我們想把數組變成只有 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 是用來刪除數組末尾的一個元素
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 = 100var num2 = num
num2 = 200
console.log(num) // 100console.log(num2) // 200
相當於是把 num 的值複製了一份一摸一樣的給了 num2 變量
賦值以後兩個在沒有關係
複雜數據類型之間的賦值
var obj = {
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}
var obj = {
name: 'Jack'}fn(obj)console.log(obj.name) // Rose
和之前變量賦值的時候一樣，把 obj 內存儲的地址複製了一份一摸一樣的給到函數內部的行參 o
函數外部的 obj 和函數內部的行參 o，存儲的是一個地址，指向的是一個存儲空間
所以兩個變量操作的是一個存儲空間
在函數內部改變了空間內的數據
obj 看到的也是改變以後的內容