JS数组

323 阅读7分钟

数组

  在js对象中可以要通过键值对存储多个数据,数据类型没有限制。但是对象在存储同类型数据比较困难时就可以用数组来进行表达。

例如:var arr=['赵','张''李']<br>

  数组相当于一个大空间中有很多小空间,每个值前面的数字,表示这个小空间的编号,专业术语叫下标。第一个下标永远是0,依次向后递增,最后一个下标是值的个数-1,也就是说,数组这种数据中每个值是有顺序的。

[ ] 中定义数组中一个小小空间,根据数组给一个值,例如[5],则表示有五个空的小空间。其中第一个值的下标永远是0,最后一个的下标永远是值的个数-1.

在数组中,用length来定义数组的长度,例如:数组.length.

var arr = ['a','b','c','d']
var brr = [1,2,3,4,5]
console.log(arr.length)//4
console.log(brr.length)//5

数组中下标第一个值永远是数组[0],最后一个值永远是数组[数组.length-1]

数组的方法

push用法,给数组的末尾添加一个或多个元素-返回数组的新长度
var arr = ['a','b','c','d']
var l = arr.push('e')
console.log(arr)此时为var arr = ['a','b','c','d','e']
console.log(l)此时数组的长度就为5

unshift的用法,在数组的开头添加1个或者多个-返回数组的新长度

var arr= ['a','b','c']
var l =arr.unshift('d''e')为数组添加1个d一个e
console.log(arr)此时新的数组为var arr = ['a','b','c','d','e']
console.log(l)返回数组的长度,此时为5

splice用法,在数组中任意位置进行删除、添加、修改1个或者多个-返回数组的新长度(结合下标来进行操作)

var arr = ['a','b','c','d']
参数1:开始下标;参数2:删除的个数;参数3:在删除的位置放上的新的元素 - 可以是多个
arr.splice(1,1,'e') 此时新的数组为var arr = ['a','d','c','d'](这是修改数组其中的某一个)
var arr = ['a','b','c']
arr.splice(1,0,'d')此时新的数组为var arr = ['a','d','b''c']

shift用法删除数组的第一个元素-返回被删掉的元素

var arr = ['a','b','c'];
var ele = arr.shift()
console.log(arr) // ['b','c']
console.log(ele) // 'a'

pop-删除数组最后一个元素-返回被删掉的元素

var arr =[1,2,3]
var ele =arr.pop()
console.log(arr)[1,2]
console.log(ele)c

concat-数组的拼接

var arr = ['a','b','c'];
var brr = ['d','e','f'];
// 将arr和brr合成一个更大的数组
var crr = arr.concat(brr) // ['a','b','c','d','e','f']
// 将一个或多个值和数组合并成一个大数组
var crr = arr.concat(1,2,3)// ['a','b','c',1,2,3]

sort-数组的排序

升序
var arr = [6,7,8,1,5,4,3,2]
arr.sort()
console.log(arr)此时的数组顺序[1,2,3,4,5,6,7,8]
arr.sort(function(a,b)){a代表前面的数,b代表后面的数
return a-b ;  升序 - 如果前面的数 - 后面的数>0,则交换位置
return b-a ; 降序 - 如果后面的数 - 前面的数>0,则交换位置
}

reverse - 数组的反转

var arr = ['a','b','c'];
arr.reverse()
console.log(arr) // ['c','b','a']此时将数组顺序颠倒

join - 将数组中的元素使用指定的连接符连接在一起

var arr = ['a','b','c'];
var str = arr.join('_') 
console.log(str) // a_b_c// 参数是连接符

var str = arr.join()
console.log(str) // a,b,c // 默认使用逗号连接

var str = arr.join('')空字符为没有连接符
console.log(str) // abc

slice - 截取数组

var arr = ['a','b','c','d','e','f'];
// 将数组中的 'b','c','d'截取出来,组成新的数组
var brr = arr.slice(1,4) // 参数1是开始截取的下标,参数2是截取的结束下标,结果中不包含结束下标对应的元素
console.log(brr) // ['b','c','d']
// 如果省略第2个参数,默认从开始下标截取到数组末尾
var crr = arr.slice(1)
console.log(crr) // ['b','c','d','e','f']

indexOf - 查找某个元素在数组中第一次出现的位置

arr.indexOf(元素,[开始查找的起始下标])
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 - 查找数字5在数组中第一次出现的下标
console.log(arr.lastIndexOf(5)); // 5 - 查找数字5在数组中最后一次出现的位置
console.log(arr.indexOf(5,3)); // 5 - 从下标2开始查找数字5在数组中第一次出现的位置
console.log(arr.lastIndexOf(5,4)); // 2 - 从下标4开始查找数字5在数组中最后一次出现的下标
console.log(arr.indexOf("5")); // -1 - 数组中全是数字,找不到字符串5,所以返回-1

forEach - 遍历数组

arr.forEach(function(值, 下标, 当前数组){// 代码段});
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
	console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
此方法没有返回值,返回值为undefind,不会改变原来数组的值。

map - 遍历数组,并将每个元素经过函数处理后,形成新的元素,所有新元素组成新数组返回

arr.map(function(值,下标,当前数组){return 新的值 - 通常新的值是由旧的值处理以后得到});
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
	return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

filter - 用与同样的规则处理数组中的每个值,并组成新的数组返回filter,将数组中满足指定条件的值,组成新的数组返回.使用方法和功能跟map方法很像,只是运行规则不一样。 map方法中的函数,用于返回新的元素,而filter方法中的函数,根据返回true或false来筛选元素

arr.filter(function(值, 下标, 当前数组){return 筛选条件});
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(v, index) {return v>5}); 
console.log(arr2); //[6, 7, 8, 9, 10]

reduce - 数组求和,其中a第一次的时候,表示第一个元素,第二次开始表示上一次返回的数据,b第一次表示第二个元素,第二个开始表示第三个元素、第四个元素。。。

arr.reduce(function(a, b){
	return a + b
});

some - 判断数组中是否至少有一个元素是满足指定条件的 - 返回布尔值,some内置的原理,遍历数组,判断每个值是否满足条件,有满足的就返回true,并break循环,遍历完以后都没有一个是满足的,返回false

布尔值 = 数组.some(function(v,i,a){
    return 条件;
})
// 上面的i和a是可选参数

判断所有成绩中是否有不及格的成绩
var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v<60;
});
console.log(bool); // true

every - 判断数组中是否所有元素都满足指定的条件 - 返回布尔值,every内置的原理,遍历数组,判断每个值是否满足条件,有不满足的就返回false,并break循环,遍历完以后都满足,返回true

布尔值 = 数组.every(function(){
    return 条件
})
// 上面的i和a是可选参数 

判断是否所有成绩都及格了
var arr = [68,95,78,56,86,63];
var bool = arr.some(function(v,i,a){
    return v>60;
});
console.log(bool); // false

find - 查找数组中第一个满足指定条件的值,找到返回值,找不到就返回undefind,find的原理,遍历数组,判断每个元素是否满足条件,满足就返回这个元素,并break循环,如果遍历完了都没有满足条件的,就返回undefined

值 = 数组.find(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

找出所有成绩中第一个不及格的成绩
var arr = [68,95,78,56,86,63];
var ele = arr.find(function(v,i,a){
    return v<60
})
console.log(ele); // 56

findindex - 查找数组中满足条件的第一个对应的下标,找到返回下标,找不到则返回-1,findIndex的原理,遍历数组,判断每个元素是否满足条件,满足就返回这个元素的下标,并break循环,如果遍历完了都没有满足条件的,就返回-1

下标 = 数组.findIndex(function(v,i,a){
    return 条件
})
// 上面的i和a是可选参数

找出所有成绩中第一个不及格的成绩的下标
var arr = [68,95,78,56,86,63];
var index = arr.find(function(v,i,a){
    return v<60
})
console.log(index); // 3

冒泡排序

相邻的两个元素进行比较,将一个数组中的数字使用循环进行升序或降序排列
var arr = [3,2,1]
将相邻的元素比较们就是下标a的元素跟下标a+1的元素比较 - 所以循环要比正常遍历少一次
var arr = [3,2,1]; // ---> [1,2,3]
// 相邻的元素比较,就是下标i的元素跟下标i+1的元素比较 - 所以循环要比正常的遍历少一次
for(var a=0;a<arr.length-1;a++){// 如果前面的元素比后面的元素大if(arr[a]>arr[a+1]){// 则交换位置var tmp = arr[a]arr[i] = arr[a+1]arr[a+1] = tmp}

选择排序

降序,先找最大值,排在最左边,再找第二大的值,往左边靠...,已经排好的,不再参与比较
r arr = [3,2,1]; // ---》 [1,2,3]
// arr[0]放最小的值,所以将arr[0]跟后面所有值比较,如果有比arr[0]更小的,就跟arr[0]交换位置
for(var i=1;i<arr.length;i++){
    if(arr[0]>arr[i]){
    	var tmp = arr[0]
        arr[0] = arr[i]
        arr[i] = tmp
    }
}
// 此时的数组:[1,3,2]
// 第1个位置的数字排好了,排第2个位置上的数字
// arr[1]放剩下的数字中最小的,使用arr[1]跟后面的数字比较,如果有比arr[1]更小的,就跟arr[1]交换位置
for(var i=2;i<arr.length;i++){
    if(arr[1]>arr[i]){
    	var tmp = arr[1]
        arr[1] = arr[i]
        arr[i] = tmp
    }
}
// 此时的数组:[1,2,3]
// 重复代码用循环处理,3个数排2次,4个数排3次
for(var j=0;j<arr.length-1;j++){
    for(var i=j+1;i<arr.length;i++){
        if(arr[j]>arr[i]){
        	var tmp = arr[j]
            arr[j] = arr[i] 
            arr[i] = tmp
        }
    }
}
// 如果要进行降序排列,就将判断条件中的>换成<即可