文章目录
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(` k e y : {key}: key:{arr[key]}`) 自动的
2.靠谱方式:2种访问数组
-
for循环:不会打出数组中的X下标
console.log(` i : {i}: i:{arr[i]}`)
for(let i=0;i<arr.length;i++){ console.log(`${i}:${arr[i]}`) } 0:1 1:2 2:3
-
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<arr.length;i++){ fn(arr[i],i,arr) }} undefined forEach(arr,function(x,y,z){console.log(x,y,z)}) VM1250:1 1 0 (3) [1, 2, 3, x: "x"] VM1250:1 2 1 (3) [1, 2, 3, x: "x"] VM1250:1 3 2 (3) [1, 2, 3, x: "x"]
-
for循环和forEach区别:
for循环有Continue和break,可以终止
for关键字,对应块级作用域,forEach是函数作用域
for(let i=0;i<arr.length;i++){ console.log(`${i}:${arr[i]}`) if(i===3){break;} } VM1655:2 0:1 VM1655:2 1:2 VM1655:2 2:3
查看数组单个元素
-
字符串下标法: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<arr.length;c++){
sum=sum+arr[c]
}
console.log(sum)
VM1122:4 6
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}