JS:JavaScript数组

205 阅读3分钟

JS的数组不是典型数组

JS 其实没有真正的数组,只有用对象模拟数组。

典型的数组

元素的数据类型相同

使用连续的内存存储

通过数字下标获取元素

image-20210410164017848.png

JS的数组

元素的数据类型可以不同

内存不一定是连续的(对象是随机存储的)

不能通过数字下标,而是通过字符串下标

这意味着数组可以有任何key

比如

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

image-20210410164635690.png

创建一个数组

新建

let arr = [1,2,3]
let arr = new Array(1,2,3)
let arr = new Array(3)

转化

let arr = '1,2,3'.split(',')

image-20210410165308925.png

let arr= '1,2,3'.split('')//空字符串,不是空格

image-20210410165639633.png

Array.from('123')

image-20210410165742575.png

注意,数字、布尔和对象都不能直接使用这个语法变为数组——

image-20210410174507674.png

对象加length后,可以使用Array.from()转化为数组。值得注意的是,只会将规定length的内容变为数组。

image-20210410174642335.png

伪数组

伪数组的原型链中没有数组的原型

image-20210420210859693.png

image-20210420210929199.png

所以真数组可以使用数组共有属性(比如push),但伪数组不行。即,没有数组共有属性的数组,就是伪数组

image-20210420211134250.png

let divList = document.querySelectorAll('div')创建的就是伪数组——

image-20210420212850586.png

合并两个数组,得到新数组

arr1.concat(arr2)

image-20210420213239055.png

这里arr1arr2不会发生变化,只是创建了一个新数组

截取一个数组的一部分

arr1.slice(1)//从第二个元素开始

arr1.slice(0)//全部截取,可用于复制数组

image-20210420213516278.png

注意,JS只提供浅拷贝。

关于浅拷贝与深拷贝的区别

增删查改

删元素

跟对象一样

let arr = ['a','b','c']
delete arr['0']
arr //[empty,'b','c']

image-20210421014526468.png

数组的长度并没有变。

image-20210421014700517.png

这种只有长度,没有下标的数组,叫做稀疏数组

如果直接改length可以删元素吗?

let arr = [1,2,3,4,5]
arr.length = 1

image-20210421015012666.png

但以上两种方法都不建议,可以使用以下三种方法删元素——

删除头部的元素
arr.shift()//arr被修改,并返回被删除元素

image-20210421015452142.png

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

image-20210421015633880.png

删除中间的元素
arr.splice(index,1)//删除index的一个元素
arr.splice(index,1,'x')//并在删除位置添加'x'
arr.splice(index,1,'x','y')//并在删除位置添加'x','y'

image-20210421020243989.png

查元素

查看所有元素属性名

方法一
let arr = [1,2,3,4,5]
arr.x = 'xxx'
Object.keys(arr)//遍历所有属性名
Object.values(arr)//遍历所有属性值

image-20210421113807808.png

方法二
for(let key in arr){console.log(`${key}:${arr[key]}`)}

image-20210421114330123.png

查看数字(字符串)属性名和值

方法一:

让i从0增长到length-1

for(let i = 0; i < arr.length; i++){
    console.log(`${i}: ${arr[i]}`)
}

可以查看数字属性名

image-20210421115509584.png

可以查看数字属性名和值

image-20210421115540863.png

方法二:
用forEach/map等原型上的函数
arr.forEach(function(item,index){
    console.log(`${index}: ${item}`)
})

image-20210421120757265.png

原理同下,只是js会把arr.forEach自动颠倒顺序为forEach(array,fn)

这就是为什么默认得到的是属性值。

image-20210421122338886.png

依据此项,可以得到第二个参数,属性名

image-20210421122645273.png

不仅如此,还可以得到第三个参数,array

image-20210421122752460.png

for循环与forEach的区别:
  1. for循环可以中断,但是forEach只能全部遍历。

  2. 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)//找到第一个偶数的索引

image-20210421230715650.png

增元素

在尾部加元素

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')

image-20210421232336727.png

改元素

修改数组中的元素

反转顺序
arr.reverse()//修改原数组

注意!reverse是修改原来的数组。

题 如何把字符串反转顺序?

image-20210422102457897.png

自定义顺序
arr.sort((a,b)=>a-b)

默认从小到大排序

image-20210422103052407.png

也可以使用函数,1,0,-1分别表示前者大相等后者大

如下,比较8>6,那么返回1,表示前者8更大。

image-20210426133318325.png

如下,比较8>6,返回-1,表示后者6更大。

image-20210426133934096.png

也可以指定某一项进行比较

image-20210426134655170.png

为了方便,直接使用简化后的公式即可。

如下,如果a>b,那么a-b>0,返回一个正值,表示前者大,原理和上面一样。

image-20210426135132688.png

数组变换

image-20210426135828895.png

map

n变n

原理

image-20210427174749997.png

使用map,一一映射,并不会改变原数组

image-20210427174843813.png

filter

n变少,不会改变原数组

image-20210427175258488.png

reduce

n变1

原理

image-20210427175503226.png

使用reduce,不会改变原数组

image-20210427175700503.png

怎样用reduce实现上面把数组变成平方的操作呢?

image-20210427180108963.png

怎么用reduce实现筛选偶数的操作呢?

image-20210427180714856.png

也可以进行简化