22·灵魂前端工程师养成-JavaScript数组

2019-05-10 分类:JavaScript, 前端开发 阅读(22) 评论(0)

-曾老湿, 江湖人称曾老大。
-笔者QQ:133411023、253097001
-笔者交流群:198571640
-笔者微信:z133411023


-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。
-擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。
-devops项目经理兼DBA。
-开发过一套自动化运维平台(功能如下):

1)整合了各个公有云API,自主创建云主机。
2)ELK自动化收集日志功能。
3)Saltstack自动化运维统一配置管理工具。
4)Git、Jenkins自动化代码上线及自动化测试平台。
5)堡垒机,连接Linux、Windows平台及日志审计。
6)SQL执行及审批流程。
7)慢查询日志分析web界面。


JS没有真正的数组


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 str = '1,2,3'

str.split(',')
(3) ["1", "2", "3"]

let str2 = '1,2,3,4'.split(',')

str2
(4) ["1", "2", "3", "4"]

let str3 = '123'.split('')

str3
(3) ["1", "2", "3"]

//通过Array.from将不是数组的元素 变成数组(但是很局限)
Array.from('1234')
(4) ["1", "2", "3", "4"]

Array.from(123)
[]

Array.from(true)
[]

Array.from({name: 'zls'})
[]

Array.from({0:'a',1:'b',2:'c'})
[]

//对象必须有0 1 2 3的下标,然后有length
Array.from({0:'a',1:'b',2:'c',length:3})
(3) ["a", "b", "c"]


伪数组
array = [1,2,3,4,5] // new Array(1,2,3,4,5)
(5) [1, 2, 3, 4, 5]

array.__proto__ === Array.prototype
true

array
(5) [1, 2, 3, 4, 5]
0: 1
1: 2
2: 3
3: 4
4: 5
length: 5
__proto__: Array(0)


array2 = {0:'a',1:'b',2:'c',3:'d'}
{0: "a", 1: "b", 2: "c", 3: "d"}

array2.__proto__ === Array.prototype
false

注意: 在伪数组的原型链中,并没有数组的原型,它的原型是对象(Object)的原型

我们使用 document.querySelectorAll('div') 就是一个伪数组

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>

</html>
let divList =  document.querySelectorAll('div')
console.log(divList)

当你使用divList.push(4)的时候,会发现报错,根本没有办法使用数组的push

如果我们想要他变成数组,就要使用刚才所学 Array.from

let divList =  document.querySelectorAll('div')
let divArray = Array.from(divList)
console.log(divArray)

没有数组共用属性的数组,就是伪数组


合并两个数组,会得到新数组
//使数组变长(合并)

array1 = [1,2,3]
(3) [1, 2, 3]

array2 = [2,3,4]
(3) [2, 3, 4]

array1.concat(array2)
(6) [1, 2, 3, 2, 3, 4]

array1
(3) [1, 2, 3]

array2
(3) [2, 3, 4]

// 使数组变短(截取)
array3 = [1,2,3,4,5,6,7,8]
(8) [1, 2, 3, 4, 5, 6, 7, 8]

array4 = array3.slice(2)
(6) [3, 4, 5, 6, 7, 8]

array4
(6) [3, 4, 5, 6, 7, 8]

数组中的元素增删改查


删除元素
let arr = ['a','b','c']

delete arr['0']

// 很惊奇的事情发生了,数组的长度不变

let arr =  ['a','b','c','d']

arr.length
4

delete arr['0']
true

arr.length
4

arr
(4) [empty, "b", "c", "d"]

只有长度,没有下标的 数组,叫做:稀疏数组

如果修改长度,,,属性名就没有了

let arr =  ['a','b','c','d']

arr.length = 2
2

arr
(2) ["a", "b"]

注意: JS千万不要改length

所以,删除数组使用shift 或者 pop

let array = [1,2,3,4,5]

//从左边删除
array.shift()
1

array
(4) [2, 3, 4, 5]

array.shift()
2

array
(3) [3, 4, 5]

//从后面删除
array.pop()
5

array
(2) [3, 4]

//从中间删除,从下标为2的地方删除一个元素
let array1 = [1,2,3,4,5]

array1.splice(2,1)
[3]

array1
(4) [1, 2, 4, 5]

//在删除的同时还可以增加
let array2 = [1,2,3,4,5]

array2.splice(2,1,666)
[3]

array2
(5) [1, 2, 666, 4, 5]

array2.splice(2,1,777,888,999)
[666]

array2
(7) [1, 2, 777, 888, 999, 4, 5]


遍历元素
let arr = [1,2,3,4,5]

arr.x = 'x'
"x"

Object.keys(arr)
(6) ["0", "1", "2", "3", "4", "x"]


//查看数组的value,下面几种方法都是有问题的
arr
(5) [1, 2, 3, 4, 5, x: "x"]

// 为什么带个x?
Object.values(arr)
(6) [1, 2, 3, 4, 5, "x"]


// 为什么带个x?
for(let i in arr){
    console.log(i)
}
VM617:2 0
VM617:2 1
VM617:2 2
VM617:2 3
VM617:2 4
VM617:2 x

//正确方式,看到所有的key
for(let i=0;i<arr.length;i++){
    console.log(i)
}
0
1
2
3
4

//看到所有的key和value
for(let i=0;i<arr.length;i++){
    console.log(i,arr[i])
}
0 1
1 2
2 3
3 4
4 5


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(xxx){
  console.log(xxx)
} )
1
2
3
4
5

arr.forEach( function(xxx,yyy){
  console.log(xxx,yyy)
} )
1 0
2 1
3 2
4 3
5 4

arr.forEach( function(xxx,yyy){
  console.log(`${xxx}:${yyy}`)
} )
1:0
2:1
3:2
4:3
5:4

//使用map函数遍历数组
arr.map( function(xxx,yyy){
  console.log(xxx,yyy)
} )
1 0
2 1
3 2
4 3
5 4

查看单个元素
let arr = [1,2,3,4,5,6,7]

arr[1]
2

arr[0]
1

//越界索引
for(let i=0;i<=arr.length;i++){
    console.log(arr[i].toString())
}
1
2
3
4
5
6
7
Uncaught TypeError: Cannot read property 'toString' of undefined
    at <anonymous>:2:24

读取了undefined的toString属性

//查找某个元素是否在数组中
let arr = [1,23,45,33,16,66,88]

arr.indexOf(1)
0

arr.indexOf(88)
6

//找某个元素是不是偶数,或者是5的倍数
let arr = [12,23,12,222,45,16,100]

arr.find((x)=> x%5 === 0)
45

arr.find(function(x){ return x%5 === 0 })
45

arr.find(function(x){ return x%2 === 0 })
12


//找到下标
arr.findIndex(function(x){ return x%2 === 0 })
0

给数组增加元素

错误添加元素方式

//从下面我们会发现,如果突然写个很大的下标,数组长度会变成101,空元素有很多,这样就变成了一个稀疏数组
let arr2 = [1,2,3,4,5,7,8,9,4,5,6,7]

arr2[12] = 22
22

arr2
(13) [1, 2, 3, 4, 5, 7, 8, 9, 4, 5, 6, 7, 22]

arr2.length
13

arr2[13] = 33
33

arr2
(14) [1, 2, 3, 4, 5, 7, 8, 9, 4, 5, 6, 7, 22, 33]

arr2.length
14

arr2[100] = 666
666

arr2
(101) [1, 2, 3, 4, 5, 7, 8, 9, 4, 5, 6, 7, 22, 33, empty × 86, 666]

arr2.length
101

推荐方式

//push在最后面添加元素
let arr = [1,2,3,4,5,6]

arr.push(7)
7

arr
(7) [1, 2, 3, 4, 5, 6, 7]

arr.push('a','b','c')
10

arr
(10) [1, 2, 3, 4, 5, 6, 7, "a", "b", "c"]

//unshift在最前面添加元素
arr.unshift(0)
11

arr
(11) [0, 1, 2, 3, 4, 5, 6, 7, "a", "b", "c"]

arr.unshift('x','y','z')
14

arr
(14) ["x", "y", "z", 0, 1, 2, 3, 4, 5, 6, 7, "a", "b", "c"]

//在指定位置添加
arr
(14) ["x", "y", "z", 0, 1, 2, 3, 4, 5, 6, 7, "a", "b", "c"]

arr.splice(9,0,6.5) //在下标是9的位置,删除0个元素,添加一个元素为6.5
[]

arr
(15) ["x", "y", "z", 0, 1, 2, 3, 4, 5, 6.5, 6, 7, "a", "b", "c"]


修改数组元素
//方法一:还是使用splice
arr.splice(9,1,6.666)
[6.5]

arr
(15) ["x", "y", "z", 0, 1, 2, 3, 4, 5, 6.666, 6, 7, "a", "b", "c"]

//方法二:直接修改
arr[9] = 8.888
8.888

arr
(15) ["x", "y", "z", 0, 1, 2, 3, 4, 5, 8.888, 6, 7, "a", "b", "c"]

//数组反转
arr.reverse()
(15) ["c", "b", "a", 7, 6, 8.888, 5, 4, 3, 2, 1, 0, "z", "y", "x"]

arr
(15) ["c", "b", "a", 7, 6, 8.888, 5, 4, 3, 2, 1, 0, "z", "y", "x"]

//面试题,如何把字符串反转?

let str = 'abcd'

str.split('')
(4) ["a", "b", "c", "d"]

str.split('').reverse()
(4) ["d", "c", "b", "a"]

str.split('').reverse().join('')
"dcba"

//顺序是乱的数组,变成有序数组
let arr = [5,2,1,3,4]

arr.sort()
(5) [1, 2, 3, 4, 5]

arr
(5) [1, 2, 3, 4, 5]

arr.sort(function(a,b){
    if(a>b){
        return 1
    }else if(a===b){
        return 0
    }else{
        return -1
    }
})
(5) [1, 2, 3, 4, 5]

arr.sort(function(a,b){
    if(a>b){
        return -1
    }else if(a===b){
        return 0
    }else{
        return 1
    }
})
(5) [5, 4, 3, 2, 1]

//如果是下面的数组,JS根本就不知道,按照什么排序
let stu = [
    {name: 'zhang3',score: 99},{name: 'li4',score: 95},{name: 'wang5',score: 100}]
    
stu.sort()
(3) [{…}, {…}, {…}]
0: {name: "zhang3", score: 99}
1: {name: "li4", score: 95}
2: {name: "wang5", score: 100}


//所以我们需要通过sort的函数,来告诉JS用score排序
stu.sort(function(a,b){
  if(a.score > b.score){
    return 1
  }else if(a.score === b.score){
    return 0
  }else{
    return -1
  }
})
(3) [{…}, {…}, {…}]
0: {name: "li4", score: 95}
1: {name: "zhang3", score: 99}
2: {name: "wang5", score: 100}

//简便写法

stu.sort((a,b) => a.score - b.score)

(3) [{…}, {…}, {…}]
0: {name: "li4", score: 95}
1: {name: "zhang3", score: 99}
2: {name: "wang5", score: 100}

数组变换

//map: n变n
let arr = [1,2,3,4,5,6]

arr.map(item => item * item)
(6) [1, 4, 9, 16, 25, 36]

//filter: n变少
arr
(6) [1, 2, 3, 4, 5, 6]

arr.filter(item => item%2 === 0 ?true :false)
(3) [2, 4, 6]

arr.filter(item => item%2 === 0)
(3) [2, 4, 6]

//reduce:n变1,抢劫...
for(let i=0;i<arr.length;i++){
    //sum = sum + arr[i] 可以简写
    sum += arr[i]
}
21

arr.reduce((sum,item)=>{return sum+item},0)
21

//使用reduce实现,map的例子
arr.reduce((result,item) => {return result.concat(item * item)},[])
(6) [1, 4, 9, 16, 25, 36]

//使用reduce实现,filter的例子
arr.reduce((result,item) => {
  if(item % 2 === 1){
    return result
  } else{
    return result.concat(item)
  }
},[])
(3) [2, 4, 6]

//简化代码
arr.reduce((result,item) => item % 2 === 1 ?result :result.concat(item),[])
(3) [2, 4, 6]

//有经验的前端简化代码
arr.reduce((result,item) => result.concat(item % 2 === 1 ?[] :item),[])
(3) [2, 4, 6]

面试题:数据变换
//将下列数组
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) => {
  result[item.id] = item
  return result
},{})

{1: {…}, 2: {…}, 3: {…}}
1: {2: {…}, 名称: "动物", id: 1, parent: null}
2: {3: {…}, 名称: "狗", id: 2, parent: 1}
3: {名称: "猫", id: 3, parent: 1}

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

关于 曾老湿
我只是一个躲在角落里瑟瑟发抖的小运维,随时准备给大佬端茶递水。
WeChat:z133411023
QQ:133411023
欢迎新朋友你的到来!
还没有人抢沙发呢~
昵称
邮箱
网站
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册