細說JavaScript數組

這是一篇關於JavaScript數組的文章。以及數組屬性和方法在實際開發中的應用。

數組也是對象

在JS中數組也是對象，具備對象所具備的屬性和方法.。

數組的元素能夠經過索引訪問，這實際和對象訪問屬性的一種方式object[key] 本質是相同的。

let test_arr = [1, 2, 3]
test_arr[0] = 1     // 索引0是數組test_arr的一個屬性
0 in test_arr       // true
1 in test_arr       // true
2 in test_arr       // true 

let test_obj = {name: 'Tom', age: 20}
test_obj['name']    // 'Tom'
'name' in test_obj  // true

索引不是數組的屬性

test_arr.length = 10
4 in test_arr // false

數組能夠有除索引意外的屬性名

test_arr.foo = 'foo'
// 在谷歌控制檯打印出
test_arr  // [1, 2, 3, empty × 7, foo: "foo"]
// 取得foo屬性值
test_arr.foo    // "foo"

數組的length屬性永遠大於索引值,爲了確保這個實現，每當向數組添加一個元素時數組的length值增1.
能夠經過length值向數組增刪改數組元素

數組for循環優化

// 普通
for (let i = 0; i < test_arr.length; i++) {
    //...   
}
// 優化1, 每次循環時不用計算數組長度
for (let i = 0， len = test_arr.length; i < len; i++) {
    //...   
}
// 優化2
for (let i = 0， len = test_arr.length; i < len; i++) {
    if(!test_arr[i]) continue //這種過濾是有風險的，好比元素0也會被跳出當前循環
    // ...
}
// 優化3
for (let i = 0， len = test_arr.length; i < len; i++) {
    if(test_arr[i] === undefined) continue //過濾null就能夠加上判斷
    // ...
}

數組for in 循環

for (let i in test_arr) {
    if (!test_arr.hasOwnProperty(i)) continue  // 過濾繼承的屬性
    // ...
}

快速建立數組的副本

//在實際項目中，對於一個數組咱們不想改變原始數組，但又想對數組進行增刪操做，能夠建立一個元素的副本
var my_arr = test_arr.slice()
var my_arr = test_arr.concat()

數組轉化爲字符串

join方法使用時，調用數組每一個元素的toString()方法將數組每一個元素轉化成String類型，而後按照指定的分割符將每一個元素拼接一塊兒。

let arr = [1, 2, 3]
typeof arr[0]   // 'number'
arr.join('')[0] // '0'
typeof arr.join('')[0] "string"
arr = [1, 2, [3,4]]
arr.join('') // "123,4" // [3, 4].toString()返回3,4

push pop unshift shift

• push向數組尾部插入元素，返回插入元素後數組的長度
• pop方法刪除數組最後一個元素，返回刪除的元素
• unshift方法向數組首部插入一個或多個元素，若是是多個元素，插入時是一次性插入的，返回插入後數組的長度
• shift方法從數組首部刪除一個元素，返回刪除的元素

數組ES5方法（函數式編程）都不改變原始數組

• forEach遍歷，不能終止循環 ,我的更喜歡普通的for循環，即便forEach書寫更加簡潔
• map
• filter
• every|some
• reduce|reduceRight

數組ES6拓展

拓展運算符

...將數組轉換成用逗號分隔的參數序列。可替代數組的apply方法

function f(x, y, z) {// ...}
var args = []
f.apply(null, args)
f(...args)

Array.from()

Array.of()

find() && findIndex()