數(shù)組
- 什么是數(shù)組？
- 字面理解就是 數(shù)字的組合
- 其實不太準確量蕊，準確的來說數(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ù)類型 和 復雜數(shù)據(jù)類型
- 基本數(shù)據(jù)類型：
number/string/boolean/undefined/null - 復雜數(shù)據(jù)類型：
object/function/array/ ...
創(chuàng)建一個數(shù)組
- 數(shù)組就是一個
[] - 在
[]里面存儲著各種各樣的數(shù)據(jù)残炮，按照順序依次排好
字面量創(chuàng)建一個數(shù)組
- 直接使用
[]的方式創(chuàng)建一個數(shù)組
// 創(chuàng)建一個空數(shù)組
var arr1 = []
// 創(chuàng)建一個有內容的數(shù)組
var arr2 = [1, 2, 3]
內置構造函數(shù)創(chuàng)建數(shù)組
- 使用 js 的內置構造函數(shù)
Array創(chuàng)建一個數(shù)組
// 創(chuàng)建一個空數(shù)組
var arr1 = new Array()
// 創(chuàng)建一個長度為 10 的數(shù)組
var arr2 = new Array(10)
// 創(chuàng)建一個有內容的數(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ù)組的索引
- 索引势就，也叫做下標，是指一個數(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]) // hello
console.log(arr[1]) // world
數(shù)據(jù)類型之間存儲的區(qū)別（重點）
- 既然我們區(qū)分了基本數(shù)據(jù)類型和復雜數(shù)據(jù)類型
- 那么他們之間就一定會存在一些區(qū)別
- 他們最大的區(qū)別就是在存儲上的區(qū)別
- 我們的存儲空間分成兩種 棧 和 堆
- 棧： 主要存儲基本數(shù)據(jù)類型的內容
- 堆： 主要存儲復雜數(shù)據(jù)類型的內容
基本數(shù)據(jù)類型在內存中的存儲情況
-
var num = 100舅锄，在內存中的存儲情況
- 直接在 棧空間 內有存儲一個數(shù)據(jù)
復雜數(shù)據(jù)類型在內存中的存儲情況
- 下面這個 對象 的存儲
var obj = {
name: 'Jack',
age: 18,
gender: '男'
}
- 復雜數(shù)據(jù)類型的存儲
- 在堆里面開辟一個存儲空間
- 把數(shù)據(jù)存儲到存儲空間內
- 把存儲空間的地址賦值給棧里面的變量
- 這就是數(shù)據(jù)類型之間存儲的區(qū)別
數(shù)據(jù)類型之間的比較
- 基本數(shù)據(jù)類型是 值 之間的比較
var num = 1
var str = '1'
console.log(num == str) // true
- 復雜數(shù)據(jù)類型是 地址 之間的比較
var obj = { name: 'Jack' }
var obj2 = { name: 'Jack' }
console.log(obj == obj2) // false
- 因為我們創(chuàng)建了兩個對象司忱，那么就會在 堆空間 里面開辟兩個存儲空間存儲數(shù)據(jù)（兩個地址）
- 雖然存儲的內容是一樣的皇忿，那么也是兩個存儲空間畴蹭，兩個地址
- 復雜數(shù)據(jù)類型之間就是地址的比較，所以
obj和obj2兩個變量的地址不一樣 - 所以我們得到的就是
false
數(shù)組的常用方法
- 數(shù)組是一個復雜數(shù)據(jù)類型鳍烁，我們在操作它的時候就不能再想基本數(shù)據(jù)類型一樣操作了
- 比如我們想改變一個數(shù)組
// 創(chuàng)建一個數(shù)組
var arr = [1, 2, 3]
// 我們想把數(shù)組變成只有 1 和 2
arr = [1, 2]
- 這樣肯定是不合理叨襟，因為這樣不是在改變之前的數(shù)組
- 相當于心弄了一個數(shù)組給到 arr 這個變量了
- 相當于把 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ù)組中的某些內容铺峭，按照數(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 個內容 - 第三個參數(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 個內容 - 然后用第三個參數(shù)把截取完空出來的位置填充
數(shù)組常用方法之 reverse
-
reverse是用來反轉數(shù)組使用的
var arr = [1, 2, 3]
// 使用 reverse 方法來反轉數(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ù)組進行拼接 - 和之前的方法有一些不一樣的地方傀履，就是
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ù)組里面的每一項內容鏈接起來莉炉，變成一個字符串 - 可以自己定義每一項之間鏈接的內容
join(要以什么內容鏈接) - 不會改變原始數(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ù)組中的內容
- 數(shù)組的索引又是按照 0 ～ n 順序排列
- 我們就可以使用 for 循環(huán)來循環(huán)數(shù)組絮宁，因為 for 循環(huán)我們也可以設置成 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 開始依次增加 - 所以我們實際上就相當于在打印
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)
}
// 會在控制臺打印兩次內容忍饰，分別是 name 和 age
- for in 循環(huán)的遍歷是按照對象中有多少成員來決定了
- 有多少成員贪嫂，就會執(zhí)行多少次
-
key是我們自己定義的一個變量，就和 for 循環(huán)的時候我們定義的 i 一個道理 - 在每次循環(huán)的過程中艾蓝，key 就代表著對象中某一個成員的 屬性名
函數(shù)參數(shù)傳遞基本數(shù)據(jù)類型和復雜數(shù)據(jù)類型的區(qū)別
- 之前我們知道了力崇，基本數(shù)據(jù)類型和復雜數(shù)據(jù)類型在存儲上是有區(qū)別的
- 那么他們在賦值之間也是有區(qū)別的
- 基本數(shù)據(jù)類型之間的賦值
var num = 100
var num2 = num
num2 = 200
console.log(num) // 100
console.log(num2) // 200
- 相當于是把 num 的值復制了一份一摸一樣的給了 num2 變量
- 賦值以后兩個在沒有關系
?
? - 復雜數(shù)據(jù)類型之間的賦值
var obj = {
name: 'Jack'
}
var obj2 = obj
obj2.name = 'Rose'
console.log(obj.name) // Rose
console.log(obj2.name) // Rose
- 因為復雜數(shù)據(jù)類型，變量存儲的是地址赢织，真實內容在 堆空間 內存儲
- 所以賦值的時候相當于把 obj 存儲的那個地址復制了一份給到了 obj2 變量
- 現(xiàn)在 obj 和 obj2 兩個變量存儲的地址一樣餐曹，指向一個內存空間
- 所以使用 obj2 這個變量修改空間內的內容，obj 指向的空間也會跟著改變了
函數(shù)的參數(shù)
- 函數(shù)的參數(shù)也是賦值的之中敌厘，在函數(shù)調用的時候台猴，實參給行參賦值
- 和之前變量賦值的規(guī)則是一樣的
- 函數(shù)傳遞基本數(shù)據(jù)類型
function fn(n) {
n = 200
console.log(n) // 200
}
var num = 100
fn(num)
console.log(num) // 100
- 和之前變量賦值的時候一樣，在把 num 的值復制了一份一摸一樣的給到了函數(shù)內部的行參 n
- 兩個之間在沒有任何關系了
?
? - 函數(shù)傳遞復雜數(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 內存儲的地址復制了一份一摸一樣的給到函數(shù)內部的行參 o
- 函數(shù)外部的 obj 和函數(shù)內部的行參 o饱狂，存儲的是一個地址曹步，指向的是一個存儲空間
- 所以兩個變量操作的是一個存儲空間
- 在函數(shù)內部改變了空間內的數(shù)據(jù)
- obj 看到的也是改變以后的內容
?
?
?
?
本文轉自知乎號：千鋒HTML5學院
