数组是一种特殊的对象
JS 没有真正的数组,只是用对象来模拟数组
典型的数组
- 元素的数据类型相同
- 使用连续的内存存储
- 通过数字下标获取元素
JS 的数组
- 元素的数据类型可以不同
- 内存不一定是连续的(对象是随机存储的)
- 不能通过数字下标,而是通过字符串下标
- 意味着数组可以有任何 key
- 比如 let arr = [1,2,3]
- arr ['xxx'] = 1
创建数组
新建
- let arr = [1,2,3]
- let arr = new Array (1,2,3)
- let arr = new Array(3)
转化
- let arr = '1,2,3'.split (',')
- let arr = '1,2,3'.split ( '' )
- Array.from( '123' )
let people = '1,2,3' people.split(',') // ["1", "2", "3"] let man = 'strong' man.split('') // ["s", "t", "r", "o", "n", "g"] Array.from('string') // ["s", "t", "r", "i", "n", "g"]
伪数组
- let divList = ducument.querySelectorAll('div')
- 没有数组共用属性的数组就是伪数组
- 伪数组的原型链中没有数组的原型
合并两个数组得到新数组
- arr1.concat(arr2)
截取一个数组的一部分
- arr1.slice(1) // 从第二个元素开始
- arr1.slice(0) // 全部截取,可以用来复制数组
- JS 只提供浅层拷贝
数组的增删改查
删数组
和对象一样的方法,用 delete 删(不推荐)
- let arr = ['a','b','c']
- delete arr['0']
- // [empty, "b", "c"]
- 数组的长度不会改变
- 只有长度,没有对应下标的数组,叫做稀疏数组
改 length 删数组(不推荐)
- let arr = [1,2,3,4,5]
- arr.length=3
- // [1, 2, 3]
- 不要随便改 length
删除头部的元素
arr.shift() // arr 被修改,并返回被删元素
let arr = [1,2,3,4,5,6] arr.shift() 1 // (5) [2, 3, 4, 5, 6]
删除尾部的元素
arr.pop() // arr 被修改,并返回被删元素
let arr = [1,2,3,4,5,6] arr.pop() 6 // (5) [1, 2, 3, 4, 5]
删除中间的元素
- arr.splice(index,1) // 删除 index 的一个元素
- arr.splice(index,1,x) // 并在删除位置添加 'x'
- arr.splice(index,1,x,y) // 并在删除位置添加 'x','y'
let arr1 = [8,4,2,4] (2) [4, 2] // (2) [8, 4] let arr2 = [9,8,7,6,5,4,3,2] arr2.splice(2,3,'x7','x6','x5') (3) [7, 6, 5] // (8) [9, 8, "x7", "x6", "x5", 4, 3, 2]
查数组
查看所有属性名
- let arr = [1,2,3,4,5] ; arr.x = 'xxx'
- Object.keys(arr)
- for (let key in arr) {console.log(`${key}:${}arr[key]`)}
let arr = [1,2,3,4,5] arr.x = 'x' Object.keys(arr) // (6) ["0", "1", "2", "3", "4", "x"] Object.values(arr) // (6) [1, 2, 3, 4, 5, "x"] for (let i in arr){console.log(i)} // 0 1 2 3 4 x
查看数字(字符串)属性名和值
for 循环
- for (let i=0 , i<arr.length ,i++ ){console.log(`${i}:${}arr[i]`)}
- 要让 i 从 0 增长到 length-1
let arr = [1,2,3,4,5] arr.x = 'x' for (let i = 0 ; i<arr.length ; i++){ console.log(i) } // 0 1 2 3 4 for (let i = 0 ; i<arr.length ; i++){ console.log(`${i}:${arr[i]}`) } // 0:1 1:2 2:3 3:4 4:5
forEach
- arr.forEach(function(item, index){ console.log(`${index}: ${item}`) })
- 也可以用 forEach / map 等原型上的函数
- forEach 用 for 访问 array 的每一项
- 对每一项调用 fn(array[i],i,array)
let arr = [1,2,3,4,5] arr.x = 'x' arr.forEach(function(xxx){console.log(xxx)}) // 1 2 3 4 5 arr.forEach(function(xxx,yyy){console.log(`${yyy}:${xxx}`)}) 0:1 1:2 2:3 3:4 4:5
for 和 forEach 的区别
- for循环 可以随时 break 和 continue , forEach 不行,没有办法结束
- for 是关键字,没有函数作用域,只有块级作用域,forEach 是函数,是函数作用域。
查看单个属性
和对象一样
- let arr = [111,222,333]
- arr[0]
索引越界
- arr[arr.length] === undefined
- arr[-1] === undefined
举例
for(let i = 0; i<= arr.length; i++){ console.log(arr[i].toString()) }
- 报错 Cannot read property 'toString' of undefined
- 意思是你读取了 undefined 的 toString 属性
- x.toString() 其中如果 x 是 undefined 就会报这个错
查看某个元素是否在数组里
arr.indexOf(item) // 存在返回索引,否则返回 -1
使用条件查找元素
arr.find(item => item %2 === 0) // 找到第一个偶数
使用条件查找元素的索引
arr.findIindex(item => item %2 === 0) // 找到第一个偶数的索引
增数组
增加数组中的元素
在尾部加元素
arr.push(newltem) //修改arr,返回新长度
arr.push(item1, item2) //修改arr,返回新长度在头部加元素
arr.unshift(newltem) //修改arr,返回新长度
arr.unshift(item1, item2) //修改arr,返回新长度在中间添加元素
arr.splice(index, 0,'x') //在index处插入'x'
arr.splice(index,0, 'x', 'y')
数组变换
map
- n 变 n
filter
- n 变少
reduce
- n 变 1
let arr = [2,3,4,5,6,7,8]
for (let i=0 ; i<arr.length ; i++){
arr[i]= arr[i]*arr[i]
}
// (7) [4, 9, 16, 25, 36, 49, 64]
for (let arr[i]=0 ; arr[i]<length ;i++){
sum+= arr[i]
}
console.log(sum)
// 35
let arr = [2,3,4,5,6,7,8]
arr.map(item => item*item)
// (7) [4, 9, 16, 25, 36, 49, 64]
arr.filter(item => item %2 ===0 ? true : false)
// (4) [2, 4, 6, 8]
arr.reduce((sum,item) => {return sum+item},0)
// 35
arr.reduce((result,item) => {return result.concat(item*item)},[])
// (7) [4, 9, 16, 25, 36, 49, 64]
arr.reduce((result,item) => {if( item%2 === 1){
return result
}else{
return result.concat(item)}
},[])
// (4) [2, 4, 6, 8]
arr.reduce((result,item) => result.concat( item % 2 === 1 ? [] : item ) ,[])
// (4) [2, 4, 6, 8]
测试题
let arr = [
{ 名称:' 动物 ', id: 1, parent: null},
{ 名称:' 狗 ', id: 2, parent: 1},
{ 名称:' 猫 ', id: 3, parent: 1} ]
数组变成对象
{id: 1, 名称: ' 动物 ', children: [
{id: 2, 名称: ' 狗 ', children: null},
{id: 3, 名称: ' 猫 ', children: null},
]
}
arr.reduce((result, item) => {
if (item.parent === null) {
result.id = item.id
result['名称'] = item['名称']
} else {
result.children.push(item)
delete item.parent
item.children = null
}
return result
}, {
id: null,
children: []
})
*本文为鲲游北冥的原创文章,著作权归本人和饥人谷所有,转载务必注明来源