细说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()