这是一篇关于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)