JS 数组

数组是一种特殊的对象

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: []
})

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源