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 arr = '1,2,3'.split(',')
let arr= '1,2,3'.split('')//空字符串,不是空格
Array.from('123')
注意,数字、布尔和对象都不能直接使用这个语法变为数组——
对象加length后,可以使用Array.from()转化为数组。值得注意的是,只会将规定length的内容变为数组。
伪数组
伪数组的原型链中没有数组的原型
所以真数组可以使用数组共有属性(比如push),但伪数组不行。即,没有数组共有属性的数组,就是伪数组
let divList = document.querySelectorAll('div')创建的就是伪数组——
合并两个数组,得到新数组
arr1.concat(arr2)
这里arr1和arr2不会发生变化,只是创建了一个新数组
截取一个数组的一部分
arr1.slice(1)//从第二个元素开始
arr1.slice(0)//全部截取,可用于复制数组
注意,JS只提供浅拷贝。
增删查改
删元素
跟对象一样
let arr = ['a','b','c']
delete arr['0']
arr //[empty,'b','c']
数组的长度并没有变。
这种只有长度,没有下标的数组,叫做稀疏数组。
如果直接改length可以删元素吗?
let arr = [1,2,3,4,5]
arr.length = 1
但以上两种方法都不建议,可以使用以下三种方法删元素——
删除头部的元素
arr.shift()//arr被修改,并返回被删除元素
删除尾部的元素
arr.pop()//arr被修改,并返回被删除元素
删除中间的元素
arr.splice(index,1)//删除index的一个元素
arr.splice(index,1,'x')//并在删除位置添加'x'
arr.splice(index,1,'x','y')//并在删除位置添加'x','y'
查元素
查看所有元素属性名
方法一
let arr = [1,2,3,4,5]
arr.x = 'xxx'
Object.keys(arr)//遍历所有属性名
Object.values(arr)//遍历所有属性值
方法二
for(let key in arr){console.log(`${key}:${arr[key]}`)}
查看数字(字符串)属性名和值
方法一:
让i从0增长到length-1
for(let i = 0; i < arr.length; i++){
console.log(`${i}: ${arr[i]}`)
}
可以查看数字属性名
可以查看数字属性名和值
方法二:
用forEach/map等原型上的函数
arr.forEach(function(item,index){
console.log(`${index}: ${item}`)
})
原理同下,只是js会把arr.forEach自动颠倒顺序为forEach(array,fn)。
这就是为什么默认得到的是属性值。
依据此项,可以得到第二个参数,属性名
不仅如此,还可以得到第三个参数,array
for循环与forEach的区别:
-
for循环可以中断,但是forEach只能全部遍历。
-
for循环是块级作用域,而forEach是函数作用域。
查看单个属性
跟对象一样
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.toStirng()其中x如果是undefined就报这个错。
查看某个元素是否在数组里
arr.indexOf(item)//存在返回索引,否则返回-1
使用条件查找元素
arr.find(item => item % 2 === 0)//找到第一个偶数
使用条件查找元素的索引
arr.findIndex(item => item % 2 === 0)//找到第一个偶数的索引
增元素
在尾部加元素
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()//修改原数组
注意!reverse是修改原来的数组。
题 如何把字符串反转顺序?
自定义顺序
arr.sort((a,b)=>a-b)
默认从小到大排序
也可以使用函数,1,0,-1分别表示前者大,相等和后者大
如下,比较8>6,那么返回1,表示前者8更大。
如下,比较8>6,返回-1,表示后者6更大。
也可以指定某一项进行比较
为了方便,直接使用简化后的公式即可。
如下,如果a>b,那么a-b>0,返回一个正值,表示前者大,原理和上面一样。
数组变换
map
n变n
原理
使用map,一一映射,并不会改变原数组
filter
n变少,不会改变原数组
reduce
n变1
原理
使用reduce,不会改变原数组
怎样用reduce实现上面把数组变成平方的操作呢?
怎么用reduce实现筛选偶数的操作呢?
也可以进行简化