JS数组

courage酱
244 阅读5分钟

JS数组

JS数组与典型数组的区别

典型的数组

典型数组 1.元素的数据类型相同
2.使用连续的内存存储
3.通过数字下标获取元素

JS数组

JS数组 1.但JS的数组不这样
2.元素的数据类型可以不同
3.内存不一定是连续的(对象是随机存储的)
4.不能通过数字下标，而是通过字符串下标,这意味着数组可以有任何key
比如

let arr = [1,2,3]
arr['xxx'] = 1

总结：JS 的数组不是典型的数组，数组是一种特殊的对象（key和value模拟的），key（索引值）看起来是数字，其实是字符串

新建数组

let arr = [1,2,3]//简写形式
let arr = new Array(1,2,3)//正规写法
let arr = new Array(3)//变态写法，只有长度（length:3）什么都没有

数组常用方法（API）

分割字符串，生成列表

let a = '1,2,3'
a.split(',')//用逗号做分割
a.split('')//用空字符做分割
Array.from('123')//给Array传递一个参数生成数组(Array必须含有两个必要属性，下标和lenght)
Array.from({0:'a',1:'b',2:'c',3:'d',length:2})
//变态写法，如果length长度小于实际长度，会以length截取，删除多余的，大于则会生成空值

伪数组

伪数组//图片懒得改，大概意思传达到 没有数组的共有属性也就是缺少自带API，称之为伪数组

合并数组

代码

let arr1 = [3,3,3,3]
let arr2 = [4,4,4,4]
let arr3 = arr1.concat(arr2)//不会改变原先的数组生成一个新数组

效果图 数组合并

slice方法（切片器）

代码

let a = [1,2,3,4,5,6,7,8]
a1 = a.slice(2,5)//a.slice(start,end(结束位置减1))两头截取
a2 = a.slice(0)//复制全部数组元素（属于浅拷贝）
不会改变原来的数组

效果

slice

删除元素

//delete删除
let arr = ['a','b','c']
delete arr['0']
//修改length删除
let arr2 = [1,2,3,4,5]
arr2.length = 3

效果

删除元素 只有长度，没有下标的数组称为稀疏数组，建议不要改length

推荐方法

let arr = [1,2,3,4,5,6]
arr1 = arr.shift()//删除第一个元素，改变length,并且返回值为删除的元素
arr2 = arr.pop()//删除最后一个元素,改变length，并且返回值为删除的元素
let a = [1,2,3,4,5,6]
arr3 = arr.splice(2,1)//arr.splice(index,1)删除下标为2的元素，删除一个
arr4 = arr.splice(2,1,'x')//arr.splice(index,1,'x')删除下标为2的元素，并且替换成x
arr5 = arr.splice(2,1,'x','y')//arr.splice(2,1,'x','y')删除下标为2的元素,并且添加多个元素，但是会将原本索引值2后面的元素顶到后面

查看数组

全部查看

let arr = [1,2,3,4,5,6]
arr.x = 'x'
//对象的方式查看
Objeckt.keys(arr)//查看所有的key
Objeckt.values(arr)//查看所有的值
for(let i in arr){
    console.log(i)
}//适用于对象，不适用于数组

常规写法

arr = [1,2,3,4,5,6]
arr.x = 'x'
for(let i =0;i < arr.length;i++){
    console.log(`${i}:${arr[i]}`)
}//用数字0开始，限制数组循环条件，只访问数字下标

forEach遍历列表

arr = [1,2,3,4,5,6]
arr.forEach(function(item,index){
    console.log(`${index}:${item}`)
})//forEach中没有break等方法

查看单个属性

let arr = [1,2,3,4,5,6]
arr[0]//下标索引查看

索引越界

let arr = [1,2,3,4,5,6]
arr[arr.length] === undefined//下标从零开始，所以索引值比lenth小1，超出值为undefined
arr[-1] === undefined//-1也为undefined
报错举例
let arr = [1,2,3,4,5,6,7,8]
for(let i=0;i<=arr.length;i++){
    console.log(arr[i].toString())
}//超出索引值，值为undefined，所有没有toString方法

效果

超出索引 Cannot read property 'toString' of undefined
意思是你读取了undefined的toString属性，不是toString是undefined,x.toString()其中x如果是undefined就报错

查看元素是否在数组中

通过indexOf()方法

let arr = [1,2,3,4,5,6,7,8]
arr.indexOf('8')

效果

indexOf 如果存在返回索引值，不存在返回-1

find方法

let arr = [1,2,3,4,5,6,7,8]
arr.find((x)=> x%5 ===0)//满足条件返回第一个符合条件的元素
//也可以写成
arr.find(function(x){
    return x%5 === 0
})//find接受一个函数，函数的返回值为find找的第一个元素
arr.findIndex(function(x){
    return x%5 === 0 
})//返回找到的一个元素的下标

增加数组中的元素

错误的示范

let arr = [1,2,3,4,5,6,7,8]
arr[100] = 666

效果 添加数组元素错误示范

推荐写法

尾部添加

//尾部添加
let arr = [1,2,3,4,5,6,7,8]
arr.push(9)//将元素添加到最后一位
arr.push('a','b','c')//添加多个元素
//头部添加
arr.unshift('哇塞')//将元素添加到第一位
arr.unshift('小可爱','大可爱')//头部添加多个元素
//中间添加元素，指定插入方法
arr.splice(3,0,'x')//将x插入到下标为3的地方
arr.splice(6,0,'aaa','bbb')//添加多个元素

效果 添加元素效果图

更换数组元素

let arr = [1,2,3,4,5,6,7,8]
arr.splice(6,1,'aaa')//删除索引值为6的元素，添加'aaa'完成替换
arr[6] = 7 //直接赋值修改

数组顺序反转

//反转数组
let arr = [1,2,3,4,5,6,7,8]
arr.reverse()//完成反转
//题外话，反转字符串
let a = '上海自来水来自海上'
a.split('').reverse().join('')//split先将字符串转换成数组，再用reverse将数组逆转，再用join将数组合并成字符串

数组排序

//乱序数组排序
let arr = [1,3,7,6,5,4,2]
arr.sort()//从小到大
arr.sort(function(a,b){
    if(a>b){
        return -1
    }else if(a===b){
        return 0
    }else{
        return 1
    }
})//sort接受一个函数，对调-1和1,改变排列顺序
//数组中对象排序
let a = [{name:'小明',score:99},{name:'小红',score:100},{name:'小李',score:98}]
a.sort(function(a,b){
    if(a.score>b.score){
        return 1
    }else if(a.score===b.score){
        return 0
    }else{
        return -1
    }
})
//快捷写法
a.sort((a,b) => a.score - b.score)

效果 对象排序方法

数组变换（不会改变原数组）

map

let arr = [1,2,3,4,5,6,7,8,9,10]
//映射
arr.map(item => item*item)//n变n
//filter 筛选
arr.filter(item => item %2 === 0)
//reduce迭代
arr.reduce((sum,item)=>{return sum +item},0)//sum是初始值，初始值是0，迭代item
let arr = [1,2,3,4,5,6,7,8,9,10]
arr.reduce((result,item)=>{return result.concat(item*item)},[])
//初始值为[空数组]，返回值为每次在空数组中获得一个item的次方列表并且进行合并
arr.reduce((result,item)=>{
    if(item%2 === 0){
        return result
    }else{
        return result.concat(item)
    }
},[])
//简写模式
arr.reduce((result,item)=>item % 2 === 1 ? result :result.concat(item),[])

Js数据类型

口诀:两空四基一对象

  1. 两空:null undefind //简单数据类型
  2. 四基:number string symbol boolean
  3. 一对象:object (函数/数组/对象/data)//复杂数据类型

JS错误处理

错误类型

  1. Error:所有错误的父类型.
  2. ReferenceError：引用的变量不存在.
  3. TypeError:数据类型不正确的错误.
  4. RangeError:数据值不在其所允许的范围内.
  5. SyntaxError:语法错误.

错误处理

//捕获错误
try{
    let b
    console.log(d.xxx)
}catch(error){
    console.log(error.message)
    console.log(error.stack)
    //也可以写成console.dir(error)
}
//抛出错误:throw error
function something(){
    if(Date.now()%2 === 1){
        console.log('当前时间为奇数，可以执行任务')
    }else{
        throw new Error('当前时间为偶数',无法执行任务)
    }
}
try{
    something()
}catch(error){
    alert(error.message)
}
avatar
文章
阅读
粉丝