27-【JS 全解】JS 数组

js的数组不是典型的数组

1.典型的数组：相同的数据类型，连续的数据存储，可通过数字下标进行查找

2.js的数组：元素数据类型可不同、内存不一定连续，如对象的地址、通过字符串下标查找、数组可以有任何key,如arr[‘xxx’]=1

数组的新建

新建

• let arr=[1,2,3]
• let arr=new Array(1,2,3) //元素3个
• let arr=new Array(3) //长度

转化

• let arr=‘1,2,3’.split(’,’) //字符串来创建
• let arr=‘123’.split(’’) //空字符0123下标
• **Array.from()**把其他类型转成数组，并不是所有都可以，对象有0123下标和length属性，如果length=2,就是两个，其余会删除

var c='1,2,3'
c.split(',')
(3) ["1", "2", "3"]

var c='123'
c.split('')
(3) ["1", "2", "3"]

let c=Array.from('123')
c
(3) ["1", "2", "3"]

Array.from({'0':1,'1':2,'2':3,'length':3})
(3) [1, 2, 3]

伪数组

伪数组的原型并没有数组的共有属性（原型），push pop…

let arr={0:'1',1:'2',2:'3',length:3}
arr

用Array.from()将伪数组变成js真数组，如let div Array=Array.from(divList)

合并一个数组

arr1.concat(arr2) 合并两个数组得新数组，不改变原来数组

截取一个数组一部分

arr.slice(2) //从第三个元素开始，像切蛋糕，不改变原来数组

arr.slice(2) //常用于复制一个数组

js只提供浅拷贝

数组元素删除

1.不靠谱删除法：

• delete arr[’2‘] 方法：删除了第三个元素，但是为empty，长度不改变
• arr.length=2 方法:改变长度可以删除元素 但不推荐

2.靠谱删除方法

删除头部元素：arr.shift() //arr被修改，返回被删元素

删除尾部元素：arr.pop() //arr被修改 ，返回被删的

删除中间元素：arr.aplice(index,个数，’xxx’,‘yyy’) //删除位置并添加‘xxx’,‘yyy’,index为元素下标

arr2.splice(2,3,'666','777')
(3) [3, 4, 5]
arr2
(8) [1, 2, "666", "777", 6, 7, 8, 9]

let arr2=[1,2,3,4,5,6,7,8,9]
undefined
arr2.splice(2,3)
(3) [3, 4, 5]

查看数组元素

查看数组所有元素

1.不靠谱方式：

• 查看对象的方法：如Object.keys()或Object.values()
• 查看对象：for in方法 for(let key in arr){console.log(`$key:${arr[key]}`) 自动的

2.靠谱方式：2种访问数组

• for循环：不会打出数组中的X下标

  console.log(`$i:${arr[i]}`)

  for(let i=0;i

• forEach遍历数组

  遍历这个数组，然后每次调用这个函数

  0: 1
  1: 2
  2: 3
  x: "x"
  
  
  arr.forEach((xxx,yyy)=>{
  console.log(`${yyy}:${xxx}`)})
  0:1
  1:2
  2:3
  等同于itemindex
  arr.forEach(function(item,index){console.log(`${index}:${item}`)})
  0:1
  1:2
  2:3
  

  拆分forEach函数

  function forEach(arr,fn){
  for(let i=0;i

• for循环和forEach区别：

  for循环有Continue和break,可以终止

  for关键字，对应块级作用域，forEach是函数作用域

  for(let i=0;i

查看数组单个元素

• 字符串下标法：arr[0]

• 索引越界

  Cannot read property 'toString' of undefined
  

  for(let i=0;i<=arr.length;i++){
  console.log(arr[i])
  console.log(arr[i].toString())
  }
  VM1786:2 1
  VM1786:3 1
  VM1786:2 2
  VM1786:3 2
  VM1786:2 3
  VM1786:3 3
  VM1786:2 undefined
  

  由于arr.[arr.length]===undefined 不是七大类型之一，没有toString()

查找某个元素是否在数组中

**arr.indexOf(item)**方法返回的是下标，不存在为-1

arr.indexOf(3)
2
arr.indexOf(7)
-1

条件查询数组符合的第一个元素

• arr.find(x=>x%5===2) 返回符合条件的第一个值

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

• arr.findIndex(x=>x%5===2) 返回符合条件的第一个值的下标

增加数组元素

1.不靠谱方式：

对象方法 ：会直接改变长度，当key不正确时，长度变化不正确，出现稀疏数组

arr[100]=4
4
arr
(101) [1, 2, 3, empty × 97, 4]
0: 1
1: 2
2: 3
100: 4
length: 101 

2.靠谱方法：

• 增加数组头部元素 ：arr.unshift() 返回新的长度

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

• 增加数组尾部元素：arr.push(item) 返回新的长度

arr
(5) [5, 5, 1, 2, 3]
arr.push(6)
6
arr
(6) [5, 5, 1, 2, 3, 6]

• 在数组中间添加元素：

  arr.splice(index,0/1,‘x’,‘y’) 在index处插入，其中0代表不删除 1代表删除 返回增删的元素值

arr
(6) [5, 5, 1, 2, 3, 6]
arr.splice(2,0,'8')
[]
arr
(7) [5, 5, "8", 1, 2, 3, 6]

arr
(7) [5, 5, "8", 1, 2, 3, 6]
arr.splice(3,1,'8')
[1]
arr
(7) [5, 5, "8", "8", 2, 3, 6]

修改数组中元素

1.arr[100]=9

2.arr.splice(8,1,‘xxx’)

3.反转顺序：arr.reverse()

改变原arr值

arr=[1,2,3]
(3) [1, 2, 3]
arr.reverse()
(3) [3, 2, 1]

4.如何把一个字符串倒叙排列？

a.split(’’).reverse().join(’’)

a
"abcde"
a.split('')
(5) ["a", "b", "c", "d", "e"]
a.split('').reverse()
(5) ["e", "d", "c", "b", "a"]
a
"abcde"
a.split('').reverse().join('')
"edcba"

5.定义顺序：arr.sort()

let arr=[2,3,1]
undefined
arr.sort()
(3) [1, 2, 3]

-1可反向排列，0表示a b相同，1默认 都是从小到大，数字决定大小

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

特殊数组，内含多个对象，进行分数排序，用箭头函数

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

let arr=[
{name:'小花',score:99},
{name:'小白',score:120},
{name:'小红',score:95},
]

arr.sort((a,b)=>a.score-b.score)
排序正常

数组变换

都不改变原数组

map n变n

1.例如求平方

let arr=[1,2,3]
undefined
arr.map(item=>item*item)
(3) [1, 4, 9]

2.reduce求平方

arr.reduce((result,item)=>{
return result.concat(item*item)
},[])
[1, 4, 9]
//简化版 改成箭头函数 去掉了return和{}
arr.reduce((result,item)=>result.concat(item*item)
,[])
[1, 4, 9]

filter 把n变少

1.求偶数

arr.filter(item=>item%2===0?true:false)

2.使用reduce进行求偶数

当直接过时相当于concat[]

arr.reduce(
(result,item)=>{
if(item%2===1){return result}
else{return result.concat(item)}
},[]
)
[2]
//简化代码：省去if语句和return
arr.reduce(
(result,item)=>item%2===1?result:result.concat(item)
,[]
)
[2]
//升级版简化
arr.reduce(
(result,item)=>result.concat(item%2===1?[]:item)
,[]
)
[2]

reduce把n变1

1.计算求和：sum初始值为0

//for循环方法
for(let c=0;c

2.reduce方法求和

arr.reduce((sum,item)=>sum+item,0)
6

数组转换例子

1.把数字变成星期

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item=>item===0?'周日':'周'+(item))
console.log(arr2)
//不完整

//0正好作为起始值下标
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr1=['周日','周一','周二','周三','周四','周五','周六']
let arr2 = arr.map(item=>arr1[item])
console.log(arr2)

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr1=['周日', '周一', '周二','周三', '周四','周五','周六']
let arr2 = arr.map(item=> arr1[item])
console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周四', '周四','周六']

2.找出所有大于 60 分的成绩

let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map((i)=>{
  return {0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六'}[i]
})
console.log(arr2)

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(n => n>= 60)
console.log(scores2) //  [95,91,82,72,85,67,66, 91]

3.算出所有奇数之和

let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
  return n%2===0?sum:sum+n
},0)
console.log(sum) // 奇数之和：598 
//简化版
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum,n)=>(n%2===1)?sum+n:sum
,0)
console.log(sum)

4.难题：数组变对象

let arr=[{名称:'动物',id:1,parent:null},{名称:'狗',id:2,parent:1},{名称:'猫',id:3,parent:2}]

arr.reduce((result,item)=>{
result[item.id]=item;
return result;
},{})

arr.reduce((result,item)=>{
if(item['parent']===null){
result['名称']=item['名称'];
result['id']=item['id']}
else{
result.children.push(item);
delete item.parent;
item.children=null;
}
return result;
},{id:null,children:[]})

//结果为一个对象，children数组是含有两个对象的
{id: 1, children: Array(2), 名称: "动物"}
children: Array(2)
0: {名称: "狗", id: 2, children: null}
1: {名称: "猫", id: 3, children: null}