首先要明确一点,JS其实没有真正的数组,只是用对象来模拟数组。以下是典型数组与JS数组之间的不同。
典型的数组
- 元素的数据类型相同
- 使用连续的内存存储
- 通过数字下标获取元素
JS数组
- 元素的数据类型可以不同
- 内存不一定是连续的(对象是随机存储的)
- 不能通过数字下标,而是通过字符串下标
例如
let arr = [1,2,3]
arr ['xxx'] = 1
创建数组
新建一个数组
let arr = [1,2,3]
let arr = new Array(1,2,3)
把不是数组的转化成为一个数组
可以利用split()方法
split()方法通过在指定分隔符字符串的每个实例处分离字符串,将String转换为字符串数组.
let arr = '1,2,3'.split(',')
let arr = '123'.split('')
Array.from('123')
合并两个数组,得到新的数组
arr1.concat(arr2)
截取一个数组的一部分
arr1.slice(1) //注意是从第二个元素开始的
arr1.slice(0) //全部拷贝
扩展
伪数组 : 没有数组共用属性的数组,即伪数组的原型链中并没有数组的原型。
例如
let divList = document.querySelectorAll('div')
增删改查(指的是数组中的元素)
删除元素
删除元素与删除对象的方法差不多,只不过删除数组中的元素之后数组的长度并没有什么变化
例如:运行以下代码
let arr = ['a','b','c']
delete arr['0']
会得到这样的结果
虽然删除了第一个元素,但是在第一个元素的位置上有一个empty元素,数组的长度其实并没有改变。
所以基于此,一般采取这样的方式来进行数组元素的删除操作
- 删除头部元素
arr.shift() //arr被修改,并返回被删元素
- 删除尾部元素
arr.pop() //arr被修改,并返回被删元素
- 删除中间元素
例如
let arr = [1,2,3,4,5]
arr.splice(2,1) //删除arr数组中位置是2的一个元素
arr.splice(2,1,'x') //并在删除位置添加'x'
arr.splice(2,1,'x','y') //并在删除位置添加'x','y'
查看所有元素
- 查看所有属性名
let arr = [1,2,3,4,5]; arr.x = 'xxx'
Object.keys(arr)
for(let key in arr){console.log(`${key}:${arr[key]}`)}
- 查看数字(字符串)属性名和值
for(let i = 0;i<arr.length;i++){
console.log(`${i}:${arr[i]}`)
}
注意:要自己让i从0增长到length-1
- 也可以用forEach/map等原型上的函数
arr.forEach(function(item,index){
console.log(`${index}:${item}`)
})
查看单个属性
- 跟对象一样
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属性,不是toString是undefined
注意 : x.toString()其中x如果是undefined就报这个错。
所以一般采取如下方式进行单个元素的查看
- 查找某个元素是否在数组里
arr.indexOf(item) //存在返回索引,否则返回-1
- 使用条件查找元素
arr.find(item => item % 2 ===0) //找第一个偶数
- 使用条件查找元素的索引
arr.findIndex(item => item % 2 ===0) //找第一个偶数的索引
扩展
function forEach(array,fn){
for(let i=0; i<array.length;i++){
fn(array[i] , i , array)
}
}
- forEach用for访问array的每一项
- 对每一项调用fn(array[i], i , array)
增加数组中的元素
- 在尾部加元素
arr.push(newItem) //修改arr,返回新长度
arr.push(item1,item2) //修改arr,返回新长度
- 在头部加元素
arr.unshift(newItem) //修改arr,返回新长度
arr.unshift(item1,item2) //修改arr,返回新长度
- 在中间添加元素
arr.splice(index,0,'x') //在index处插入'x'
arr.splice(index,0,'x','y')
修改数组中的元素
- 反转顺序
arr.reverse() //修改原来数组
- 自定义顺序
arr.sort((a,b) => a-b)
数组变换
- map : n变n
通过arr.map把数字变成星期
let arr = [0,1,2,2,3,3,3,4,4,4,4,6]
let arr2 = arr.map(item=>{return{0:'周日',1:'周一',2:'周二',3:'周三',4:'周四',6:'周六'}[item]})
console.log(arr2)
- filter : n变少
通过filter找出所有大于 60 分的成绩
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let scores2 = scores.filter(item=>item-60>0?true : false)
console.log(scores2)
或者
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]
- reduce : n变1
通过reduce算出所有奇数之和
let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
let sum = scores.reduce((sum, n)=>{
if(n%2===1){
return sum+n
}else{
return sum
}
},0)
console.log(sum)
或者可以这样写
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