JS中的数组简介
JS中一共有七种数据类型:number,string,null,undefined,Boolean,symbol以及Object,其中数组属于object,js数组不是典型的数组,因为典型的数组中元素的数据类型都是相同的,并且使用连续的内存储存,是通过数字下标获取元素的,但是JS的数组不是这样的,JS数组中元素的类型可以不一样,内存也不一定连续(对象是随机储存的),不能通过数子下标,而是通过字符串下标,平时使用的数组名[数子下标]
的这种情况,JS引擎会把数子下标加上引号替换成字符串下标 数组名['数子下标']
,意思就是说数组中的下标是字符串
//当使用数子下标时
array[0] //js引擎会把数子下标换成字符串下标
array['0']
这就意味着数组可以是任何key,例如看下图
![9c363bedaeab6231e1ccc4a938e3a343.png](https://i-blog.csdnimg.cn/blog_migrate/305d1cbd5ab8b08168cfeeaabfc28232.png)
先声明数组arr1=[1,2,3,4,5,6],然后添加索引为xxx,值为“xxx”的元素,输出之后显示有xxx:‘xxx’这个元素,但是注意,这个时候数组的length的值本应为7,但却是6,所以这样写法不推荐。
创建一个数组
可以通过let arr = []
的形式来创建一个数组名为arr的空数组,但是平时我们创建数组为let arr = new Array()
的方式,其中括号内可以传参数,所传递的参数个数不同,意思也不同
let arr = new Array();//当没有传递参数的时候就是单纯的声明一个空的数组,没有大小
let arr = new Array(5);//当传递一个参数的时候就是创建一个大小为5的数组名为arr的数组
let arr = new Array(1,2,3)//当传递多个参数的时候就是创建一个内容为1,2,3的大小为3的数组
最后我们说一下伪数组,区分伪数组的最简单的办法就是看它的原型链中是否有数组的原型,比如:`let listArr = document.querySelectorAll('div'),这个返回的是一个对象的数组,但是它的原型中没有数组的原型,所以是伪数组。
数组的增删改查
删:
我们先说说删除操作,因为数组是对象,所以也可以用delete来删除数组的元素,但是JS中有点bug,请看下列代码:
![41273089483809fcf1dfb883b09037ae.png](https://i-blog.csdnimg.cn/blog_migrate/ab73e4ed194246303fb9002cdf36e143.png)
我们声明了一个对象之后用delete来删除数组中的第二个元素,执行操作之后第二个元素被替换为empty,并且数组的长度还是6,没有发生改变,所以不推荐使用这种方式来删除数组中的元素,还有一种不推荐的删除数组元素的方式就是改变数组的length来删除元素,这里不做解释,请看下面的代码:
![83714b08054a286ffda3f80768f31f77.png](https://i-blog.csdnimg.cn/blog_migrate/b4ff286bb396c9a463690e328536ee1e.png)
改变数组的长度之后数组果然变短了,的确删除了元素,但是这种方式不推荐。下面来说说推荐的方式,直接上代码:
arr.shift() //删除头部的元素,数组被修改,并且返回被删除的元素
arr.pop() //删除尾部的元素,数组被修改,并且返回被删除的元素
//使用splice来删除元素,传递的参数不同所起到的作用也不同
arr.splice(index,number) //删除数组的下标为index在内的之后的number个的元素
arr.splice(index,number,'string') //删除数组的下标为index在内的之后的number个的元素,
//并且在删除的部分添加字符串'string',这里看可以是多个字符串
个人感觉只要记住了splice的用法之后就可以了,因为splice的功能包含shift和pop,并且还可以添加元素,所以只用记住一个就可以了,其他的可以作为 了解
查:
有光查看键名的也有查看键值的,还有查看所有的键值对的
Object.keys(arr); //查看所有的键名的
object.values(arr); //查看所有键值的
arr; //直接输出数组的
也可以使用for循环或者foreach来遍历数组的
//for循环
for(let i = 0; i < arr.length; i++){
console.log(i + ":" + arr[i]);
}
for(let key in arr1){
console.log( (`${key}: ${arr1[key]}` ))
}
//foreach循环
arr1.forEach(function(element){
console.log(element)
})
详细的forEach使用可以参考MDN文档:
Array.prototype.forEach()developer.mozilla.org![c1d8ed495b05db53fd13fc8bb2dac9d4.png](https://i-blog.csdnimg.cn/blog_migrate/9cb28e8f892066e6bda62923d9176a77.jpeg)
也可以查看单个属性就是刚开始提到的那种办法arr[1]
这样的,但是使用这种方法的时候要注意数组越界
还有一个函数可以查看某个元素是否在数组里面
arr.indexOf(items);//如果存在返回下标,如果不存在饭后-1
增:
可以使用push()函数来在尾部添加元素:
arr.push(items)
//在尾部添加元素,会修改原数组,并且括号里面的元素可以是多个
arr.unshift(items)
//在头部添加元素,会修改原数组,并且括号里面的元素可以是多个
同样的也可以使用splice()
来增加元素,用法上面已经介绍了,在添加的时候要把第二个参数修改为0:arr.splice(index,0,'hhh')
在下标为index的位置前面添加元素,键值为'hhh'。
下面介绍几个函数:
1.arr.reverce()
反转函数,会修改原数组
2.arr.sort(function(a,b){return a-b}
排序函数,里面的参数a-b的值大于零时是从小到大排,小于零时为从大到小排。详情可以参考MDN文档:
![c1d8ed495b05db53fd13fc8bb2dac9d4.png](https://i-blog.csdnimg.cn/blog_migrate/9cb28e8f892066e6bda62923d9176a77.jpeg)
3. arr.map(function(){})
创建一个新数组,其结果是该数组中的每个元素都调用一次提供的函数后的返回值。下面的函数把数组中的每个元素都乘于2
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
return num * 2;
});
// doubles数组的值为: [2, 8, 18]
// numbers数组未被修改: [1, 4, 9]
4.array.filter(function(){})
方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 下例使用 filter
创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]
5.`array.reduce(function(){})方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。这个函数比较复杂,建议参考MDN文档:
Array.prototype.reduce()developer.mozilla.org![c1d8ed495b05db53fd13fc8bb2dac9d4.png](https://i-blog.csdnimg.cn/blog_migrate/9cb28e8f892066e6bda62923d9176a77.jpeg)
下面我用我的理解来解释一下
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
解释如下:
arr.reduce(function(累计器,正在处理的元素,正在处理的元素的索引(可选),调用reduce的数组(可选)),初始值])
![c58963a7eacf162f0f6e2368d6bba47d.png](https://i-blog.csdnimg.cn/blog_migrate/446c794f97c68c0063f48c53c4a500c4.jpeg)
举一个简单的例子:
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// 和为 6