本文章讲解JavaScript中的数组对象以及其相关方法。包括了数组的遍历,数组内容的增删改,数组元素的擦护照检索,数组的排序,数组的迭代等方法。内容比较齐全,希望可以帮助大家。
目录
数组的作用:存储一系列的值,无序结合,数组可以存储任何的数据类型
数组的创建的方式:
- var
var arr=['asd',1,2,'我是数组']
- new
var arr1= new Array(1,2,3)
console.log(arr1);
var arr1= Array(1,2,3)
console.log(arr1);
如何遍历数组
for循环遍历
var arr =[1,2,3,4,5]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
输出结果:
扩展:遍历字符串也是如此
var str='asdasf'
for (var i = 0; i < str.length; i++) {
console.log(str[i]);
}
遍历对象 for-in
for in是一种特殊的循环,主要用来遍历对象。
语法:
for(var key in object){}
举例,使用for-in遍历object:
var obj={
name:'张三',
age:19,
data:123,
set:1234
}
for (var key in obj) {
console.log(key);//属性名
console.log(obj[key]);//属性值
}
输出结果如下:html:27是打印key,28是打印的obj[key]
如此可见,在遍历object的时候,key是属性名,而obj[key]是属性值
举例:使用for-in遍历数组
var arr=['asd',1,2,'我是数组']
for (var key in arr) {
console.log(key);//下标
console.log(arr[key]);//每一项
}
输出结果:html:32是打印key,33是打印的arr[key]
如此可见,在遍历数组时候,key是下标。
举例:使用for-in遍历字符串
var str='asdasd'
for(var key in str){
console.log(str[key]);
}
输出结果:html:37是打印key,38是打印的str[key]
如此可见,在遍历字符串的时候,与遍历数组基本类似。
for和for-in的区别
先上代码:
var arr=['asd',1,2,'我是数组']
for (var key in arr) {
console.log(typeof key);//string
}
for (var i = 0; i < arr.length; i++) {
console.log(typeof i);//number
}
输出结果:
如此可见:for in遍历数组,输出的key的类型是string类型,而for循环是输出number类型的。
所以:
- for-in遍历对象更合适,但是他可以遍历数组 ,字符串,遍历出来的数组,字符串都是下标,下标是string类型,不方便进行运算,而for不能遍历对象(因为对象没有下标)遍历数组 字符串时下标是number类型可以参与运算
- 建议使用for-in 遍历对象 , for循环遍历数组 字符串
给数组修改, 添加,删除内容
基本方法:
简单的改,增,把数组下标为0的元素改为a,给数组增加新元素4.
var arr = [1, 2, 3]
console.log(arr[0]);
arr[0] = 'a'//修改原数组的内容
arr[3] = 4//给数组添加内容
console.log(arr);
给数组添加数字,给空数组arr,使用for循环添加1到20数字的元素,共长20。
var arr=[]
for(var i=1;i<=20;i++){
arr[arr.length]=i
}
console.log(arr);
栈方法
push()
给数组末尾添加值, push()可以添加一个或多个元素进入数组尾部,返回值是新数组的长度。
语法:数组.push('你要添加的内容')
举例:给空数组arr添加内容
var arr=[]
arr.push('a','b',1)
console.log(arr);
结果:
举例,用push()往数组里面添加数组
var arr = [1, ['a', 's', 'd'],8]
arr.push('a', 'b', 1, [1, 3, 4])
console.log(arr);
结果:
如此可见,往数组里面添加数组,添加进去的数组作为一个元素放在被添加的数组里面。
push()案例:把字符串添加进入数组中
我们可以使用for循环,遍历字符串,并在遍历的时候使用push()把字符串挨个添加进入数组。
var arr = [1, 2, 'b', 3, 'a']
var str = '1232134'
for (var i = 0; i < str.length; i++) {
arr.push(str[i])
}
console.log(arr);
效果:
pop()
给数组末尾删除内容,每次使用删除一个元素,()内写东西不影响删除。返回值是删除的内容。
语法:数组.pop()
举例:
var arr = [1, 2, 'b', 3, 'a']
console.log(arr.pop());//返回值删除项
console.log(arr);
结果:如图所示,删除了数组末尾的a。
pop()案例:清空一个数组
也是使用for循环,用类似遍历的方式,来使用pop()来清空数组,因为数组在删除的时候会改变长度,所以把数组原来的长度赋值给a。
var arr = [1, 2, 'b', 3, 'a']
var a = arr.length
for (var i = 0; i < a; i++) {
arr.pop()
}
console.log(arr);
队列方法
unshift()
给数组前面添加内容,可添加一个或多个,并返回数组长度。
语法:数组.unshift('添加的项')
举例:
var arr = ['a', 'b', 'c']
arr.unshift('d', 'o', 'p');//6 新数组的长度
console.log(arr);
结果:
shift()
在数组的前面删除一项,()里面的内容不影响删除,返回值是删除的内容。
语法:数组.shift()
var arr = ['a', 'b', 'c']
console.log(arr.shift());//返回的时删除项
console.log(arr);
结果:html60是输出删除的内容,61是经过删除后的数组。可见,第一项a被删除了。
栈与队列方法的区别:
栈方法:push pop后面添加或者删除
push:可以添加多个,返回新数组的长度
pop:只能删除一个,返回删除项
队列方法:unshift shift都前面添加或者删除
unshift:可以添加多个,返回新数组的长度
shift:只能删除一个,返回删除项
splice()
splice()的功能比较强大,既可以做到删除,添加和更改数组内容,还可以选择在何处更改数组内容。
语法:splice(开始项,删除项,添加项)
开始项:从哪个位置开始,number类型
删除项:删除的个数,number类型
添加项:要添加的内容,可以是任意类型,可选参数
删除
var arr=[1,2,3,4]
arr.splice(0,2)
console.log(arr);//3,4
输出结果为[3,4],删除了前两位。
此时的返回值:你删除的项,以数组的方式返回
添加
var arr=[1,2,3,4]
arr.splice(4,0,5)
console.log(arr);//1,2,3,4,5
输出结果为[1,2,3,4,5]
使用splice()来添加时,相当于开始位置选择数组末尾元素下标+1,删除项为0,然后添加元素。就是在最后删除0个元素添加一个元素完成添加。
因为没有删除内容,所以此时返回值:空
替换
var arr=[1,2,3,4]
arr.splice(2,1,'a')
console.log(arr);
输出结果为:[1,2,'a',4]
如此可见,第三项,也就是下标为2的元素被替换了。相当于开始位置是下标为2的元素,删除了一项,也就是删除了下标为2的元素,并在此添加了一项'a'。
此时返回值:被替换下来到项,也就是被删除的那一项。
案例:数组的去重
第一种方法:使用for循环和splice()
我们使用for循环,用类似选择性排序的办法来让每个元素进行比较。
如果二者相同则使用splice()删除它,
因为删除后数组长度减1,后面那个元素向前占用前一个元素位置,所以j--使得j在这次不自增,重新检查这一项
var arr = [1, 2, 3, 4, 5, 2, 1, 1, 6, 3, 3, 4, 5, 1]
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {//如果两个数组元素相等则使用splice删除它
arr.splice(j, 1)
j--
//因为删除后数组长度减1,后面那个元素占用前一个元素位置
//所以j--使得j在这次不自增,重新检查这一项
}
}
}
console.log(arr);
第二种方法:建立新数组接收旧数组
我们遍历旧数组,并且使用indexOf()判断新数组里是否存在旧数组的元素,如果没有就将其添加进入新数组,如果已经存在,就不添加,自然做到了去重的效果。
var arr = [1, 2, 3, 4, 5, 2, 1, 1, 6, 3, 3, 4, 5, 1]
var newArr = []
for (var i = 0; i < arr.length; i++) {//遍历旧数组
if (newArr.indexOf(arr[i]) === -1) {//判断新数组里面是否存在这一项
newArr.push(arr[i])//使用push()将其添加进入新数组
}
}
console.log(newArr);
数组内元素的查找检索
indexOf()
语法:
indexOf('查找的字符',index)
'查找的字符':要查找的字符
index:下标,可选参数,表示从从下标几开始查找
返回值是所要查找的字符首次出现的位置,返回其下标
找到返回字符正确的下标,找不到就返回-1
举例:只写要查找的元素。
var arr = [1,2,3,4,5]
console.log(arr.indexOf(4));
结果:打印了元素4的下标3
举例:
var arr = ['终','日','看','山','不','厌','山']
console.log(arr.indexOf('山',4));//
结果:上面的代码就是从下标为4的元素,也就是从“不”开始往后寻找山这个字符,打印结果是6。
案例:indexOf()检测数组中某个元素的个数
function indexs(arr, val) {//封装一个函数
var num = 0
var index = arr.indexOf(val)//把indexOf的值赋给index
while (index !== -1) {//如果index不为-1,说明找到了要检索的字符
num++//找到一个num就+1
index = arr.indexOf(val, index + 1)//从找到字符的位置的下一个字符开始继续查找
}
console.log(num);//输出,返回num
return num
}
indexs(['a','b','c','a','b','c','a','a'], 'a')//调用函数并传递参数
lastIndexOf()
语法:
lastIndexOf('查找的元素',index)
lastIndexOf()与indexOf()相差无几,只不过它是从后往前查找,返回元素首次出现的位置下标
举例:
var arr = [1, 2, 3, 1, 2, 3]
// lastindexOf
console.log(str.lastIndexOf(2));
console.log(str.indexOf(2));
打印结果为:4,和1,表明了indexOf()是从前往后查找,而lastIndexOf()与此相反。
举例:
var arr = [1, 2, 3, 1, 2, 3]
console.log(arr.lastIndexOf(2, 3));
结果:输出打印1,说明lastIndexOf()是从下标为3的元素向前查找的。
数组的其他方法
join()
将数组转化为字符串
var arr = [1, 1, 2, 3]
var str = '123'
//将数组转化为字符串
console.log(arr.join());//将数组转化为字符串
console.log(typeof (arr.join()));//输出类型为string
split()
将字符串转换为数组。就是把字符串分割开,然后以数组的方式进行存储。所以即便字符串全是数字组成的字符串,变成数组,数组内的元素都是string类型的。
语法:字符串.split(以字符串中的谁为分割符分割开)
spilit(),括号里面的内容是规定以字符串中的谁为分割符分隔开,空格,逗号等都可以作为分隔符。
例如:我们split()括号内没有内容,那么字符串不会分割,在转化为数组时,整个字符串就变成了数组的一个元素。
var str = '123'
console.log(str.split());//字符串转化为数组
console.log(typeof (str.split()));//输出类型为
输出结果:
例如:字符串是C/S/D/N,我们split()括号内写上'/',那么这个/就变成了分隔符,字符串的C,S,D,N会变成新数组的四个元素。
var str1 ='C/S/D/N'
console.log(str1.split('/'));//字符串转化为数组
输出结果:
concat()
合并数组。用于连接多个数组,不会改变原有数组,返回新的数组。
//合并数组
console.log(arr.concat(['a','b'],['c','b']));//将两个或多个数组合并为一个
reverse()
反转数组
var arr = [1, 2, 3]
console.log(arr.reverse());//反转数组
slice()
截取数组,语法:数组.slice(开始下标,结束下标),截取包括开始但不包括结束。
var arr = [1, 2, 3]
//截取数组
//数组.slice(开始下标,结束下标)
console.log(arr.slice(1, 2));//包括开始不包括结束
数组的排序
选择排序
基础的知识点,不做赘述。
var arr = [8, 6, 7, 3, 9, 1]
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var num = arr[i]
arr[i] = arr[j]
arr[j] = num
}
}
}
console.log(arr);
冒泡排序
基础的知识点不做赘述
var arr = [5, 4, 7, 3, 9, 1]
for (var i = 0; i < arr.length; i++) { //控制循环的次数
for (var j = 0; j < arr.length; j++) {
if (arr[j] > arr[j + 1]) {
var num = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = num
}
}
}
console.log(arr);
快速排序
简言之,快速排序就是选取一个中间值,把数组中的元素依次与其比较,大于它的放在它右边,小于它的放在它左边。
在此写一个递归函数,使用快速排序的办法,来完成数组的排序。
在代码内有注释进行详解。
var arr=[1,5,7,4,1,5,2,6,9,2,3,8]//定义数组
function sum(arr) {
if (arr.length <= 1) {//递归的结束条件,当arr的数组长度小于等于1时,结束递归
return arr
}
//找到中间值的下标,将数组长度除以2,并且使用Math.floor向下取整
var cont = Math.floor(arr.length / 2)
//使用splice()把中间项删除
var num = arr.splice(cont, 1)[0]
//定义两个空数组,来存放排序后的数组
var left= []
var right = []
for (var i = 0; i < arr.length; i++) {
if (arr[i] > num) {//如果这个元素大于中间值num,就把他放进空数组right
right.push(arr[i])
} else {//如果这个元素小于等于中间值num,就把他放进空数组left
left.push(arr[i])
}
};
//返回值:使用了concat()把数组拼接起来返回,并且把排序过一次的数组left和right去回调作为实参,参与递归
return sum(left).concat(num, sum(right))
}
console.log(sum(arr));
sort()
我们在使用sort()排序数组的时候,一般这样使用:
语法:
数组.sort(function(a,b){
return a-b
})
注意,sort()会改变原数组。
列举:降序,b-a
var arr = [5, 4, 7, 3, 9, 1]
var sum=arr.sort(function(a,b){
return b-a//此时是降序
})
console.log(sum);
升序:a-b
var arr = [5, 4, 7, 3, 9, 1]
var sum=arr.sort(function(a,b){
return a-b//此时是升序
})
console.log(sum);
数组的迭代
注意,数组迭代的相关方法,对空数组均不操作。
forEach()
它类似for循环,作用是调用数组的每个元素,并将元素传递给回调函数。
语法:
数组.forEach(function(item,index ,arr){
//代码块
})
item:数组里的每一个元素,每一项
index:数组的下标
arr:原数组
举例:
forEach()遍历了数组,并且打印出了数组的每一项的值,下标和原数组。
var arr1 = [1, 2, 4, 5]
arr1.forEach(function (item, index, arr) {
console.log(item + '-----' + index + '------' + arr);
})
Map()
作用:对数组进行操作,返回一个新数组,对空数组不操作
语法:
数组.map(function(item,index ,arr){
//代码块
})
举例:
使用map()把数组的每一项的值都乘以2.
var arr1 = [1, 2, 4, 5]
var a = arr1.map(function (item, index, arr) {
return item * 2
})
console.log(a);
console.log(arr1);
结果,先输出的数组a,再输出的原数组。
Filter()
作用:对数组进行操作,返回满足条件的那一部分元素,并以新数组的方式返回,对空数组不操作
语法:
数组.filter(function(item,index ,arr){
//代码块
})
举例:
var arr1 = [1, 2, 4, 5]
var a = arr1.filter(function (item, index, arr) {
return item > 3
})
console.log(a);//打印经过操作的新数组
console.log(arr1);//打印旧数组
结果:
Every()
作用:对数组的每一项进行操作,如果都满足条件返回true,如果有一个不满足就返回false,遇到不满足的元素直接返回false,对后面的元素不在判断
语法:
数组.every(function(item,index ,arr){
//代码块
})
举例:
var arr1 = [1, 2, 4, 5]
var a = arr1.every(function (item, index, arr) {
return item > 3
})
结果会输出false.
Some()
作用:对数组的每一项进行操作,如果有一个元素满足条件就返回true,都不满足就返回false,遇到满足的元素就会直接返回true,对后面的元素不再判断。
语法:
数组.some(function(item,index ,arr){
//代码块
})
举例:
var arr1 = [1, 2, 4, 5]
var a = arr1.some(function (item, index, arr) {
return item > 10
})
结果会返回false。
案例:把数组中大于100的元素渲染到界面上并且换行
使用filter()
var arr1 = [1, 200, 3, 400, 5, 600, 7, 800]
var a1 = arr1.filter(
function (item, index, arr1) {
if (item > 100) {
document.write(item + '</br>')
}
}
)
结果:
数组迭代方法的总结:
- forEach:循环遍历数组
- map:对数组进行操作,返回一个新的数组,和原数组是映射关系,数组的长度不变
- filter:过滤,对数组进行操作,返回一个新的数组,将原数组中满足条件的返回,数组的长度不固定
- every:对数组进行操作,返回布尔值,将原数组中全部满足条件才会返回true,有一个不满足就是false
- some:对数组进行操作,返回布尔值,将原数组中全部不满足条件才会返回false,有一个满足就是true