js操作数组的方法,含ES5方法
数组元素的添加
1.添加到末尾:arrayObj.push()
push()将一个或多个新元素添加到数组结尾,并返回数组新长度。
var array = [1, 2, 3, 4, 5];
var len = array.push(12); //添加元素到数组的最后,返回新数组的长度。
console.log(array); //{"0":1,"1":2,"2":3,"3":4,"4":5,"5":12,"length":6}
console.log(len); //6
2.添加到开始:arrayObj.unshift()
unshift()将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度。
var array2 = [1, 2, 3, 4, 5];
var len2 = array2.unshift(0); //添加元素到数组的最前面,返回新数组的长度。
console.log(array2); //{"0":0,"1":1,"2":2,"3":3,"4":4,"5":5,"length":6}
console.log(len2); //6
数组元素的删除
1.删除最后一个:arrayObj.pop()
pop()移除最后一个元素并返回该元素值
var array = [23, 12, 5, 19, 3];
var temp = array.pop(); //移除最后一个元素并返回该元素值
console.log(temp); //3
console.log(array); //23,12,5,19
console.log(array.toString()); //{"0":23,"1":12,"2":5,"3":19,"length":4}
2.删除第一个:arrayObj.shift()
shift()移除最前一个元素并返回该元素值,数组中元素自动前移。
var array2 = [23, 12, 5, 19, 3];
var temp2 = array2.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移
console.log(temp2); //23
console.log(array2); //{"0":12,"1":5,"2":19,"3":3,"length":4}
console.log(array2.toString()); //12,5,19,3
3.删除指定的1至多个元素:
(1)arrayObj.splice(deletePos)
splice(deletePos)删除从指定位置deletePos开始、一直到数组末尾的元素,以数组形式返回删除的元素。
var array3 = [23, 12, 5, 19, 3];
var temp3 = array3.splice(2); //删除从数组下标2开始、一直到数组末尾的元素,以数组形式返回删除的元素
console.log(temp3); //{"0":5,"1":19,"2":3,"length":3}
console.log(array3); //{"0":23,"1":12,"length":2}
(2)arrayObj.splice(deletePos,deleteCount)
splice(deletePos,deleteCount)删除从指定位置deletePos开始的、指定数量deleteCount的元素,以数组形式返回删除的元素。
var array4 = [23, 12, 5, 19, 3];
var temp4 = array4.splice(1, 4); //删除从数组下标1开始往后总共4个元素,以数组形式返回删除的元素
console.log(temp4); //{"0":12,"1":5,"2":19,"3":3,"length":4}
console.log(array4); //{"0":23,"length":1}
(3)arrayObj.splice(deletePos, deleteCount, insert)
splice(deletePos, deleteCount, insert)删除从指定位置deletePos开始的、指定数量deleteCount的元素,以数组形式返回删除的元素。然后将新元素insert从指定位置deletePos处添加到数组中。
var array5 = [23, 12, 5, 19, 3];
var temp5 = array5.splice(1, 2, 28); //删除从数组下标1开始往后总共2个元素,以数组形式返回删除的元素。然后将新元素28从指定位置1处添加到数组中。
console.log(temp5); //{"0":12,"1":5,"length":2}
console.log(array5); //{"0":23,"1":28,"2":19,"3":3,"length":4}
数组元素的截取:arrayObj.slice(start, end)
slice(start, end)复制原数组中下标start开始到下标end前一位的所有元素,以数组的形式返回;如果省略 end ,将复制start 之后的所有元素 。
var array = [23, 12, 5, 19, 3];
var temp = array.slice(1, 3); //以数组的形式返回数组的下标为1和2(3-1)这两个元素组成的数组。
console.log(temp); //{"0":12,"1":5,"length":2}-->这是复制得到的新数组。
console.log(array); //{"0":23,"1":12,"2":5,"3":19,"4":3,"length":5}-->这是原数组,保持不变。
数组元素的合并:arrayObj.concat([item1[, item2[, . . . [,itemN]]]])
concat()将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组。
var aArray = [1, 2, 3];
var bArray = aArray.concat(4, 5); //使用concat,在数组aArray后拼接数字4、5。
console.log(aArray); //{"0":1,"1":2,"2":3,"length":3}
console.log(aArray.toString()); //1,2,3
console.log(bArray); //{"0":1,"1":2,"2":3,"3":4,"4":5,"length":5}
console.log(bArray.toString()); //1,2,3,4,5
var cArray = aArray.concat(bArray, 6, '李雷'); //使用concat,在数组aArray后拼接数组bArray、数字6、字符串“李雷”,将拼接后的结果赋值给数组cArray。
console.log(cArray); //{"0":1,"1":2,"2":3,"3":1,"4":2,"5":3,"6":4,"7":5,"8":6,"9":"李雷","length":10}
console.log(cArray.toString()); //1,2,3,1,2,3,4,5,6,李雷
数组的拷贝:arrayObj.concat()
concat()无参数时,返回数组的拷贝数组,注意是一个新的数组,不是指向。
var array = [10, 11, 13, 14]; //创建一个数组并初始化
var a = array.reverse(); //反转数组元素。返回的还是原来数组。
console.log(array); //{"0":14,"1":13,"2":11,"3":10,"length":4}
console.log(a); //{"0":14,"1":13,"2":11,"3":10,"length":4}
数组的反转:arrayObj.reverse()
reverse()反转元素(最前的排到最后、最后的排到最前),返回数组地址(即返回的还是原来数组,只不过里面的元素位置发生了反转)。 注意这个方法会改变原来的数组,而不会创建新的数组
var array = [10, 11, 13, 14]; //创建一个数组并初始化
var a = array.reverse(); //反转数组元素。返回的还是原来数组。
console.log(array); //{"0":14,"1":13,"2":11,"3":10,"length":4}
console.log(array.toString()); //14,13,11,10
console.log(a); //{"0":14,"1":13,"2":11,"3":10,"length":4}
console.log(a.toString()); //14,13,11,10
数组的排序:arrayObj.sort()
sort()对数组元素排序,返回数组地址(即返回的还是原来数组,只不过里面的元素位置发生了变化)。
var array = [10, 11, 13, 14, 100, 21];
// console.log(array); //{"0":10,"1":11,"2":13,"3":14,"4":100,"5":21,"length":6}
// console.log(array.toString()); //10,11,13,14,100,21
array.sort(); //对数组元素进行默认排序
console.log(array); //{"0":10,"1":100,"2":11,"3":13,"4":14,"5":21,"length":6}
console.log(array.toString()); //10,100,11,13,14,21
这里排序出现了问题,因为sort()默认的排列方式是按照字符的unicode码进行排列的( 以字母顺序或数字的字符串顺序),在排列数值的时候会出现问题,因此需要依赖一个比值函数function(a,b){return a-b}。
var array2 = [10, 11, 13, 14, 100, 21];
// console.log(array2); //{"0":10,"1":11,"2":13,"3":14,"4":100,"5":21,"length":6}
// console.log(array2.toString()); //10,11,13,14,100,21
/* 对数组元素进行指定规则的排序_按从小到大的顺序 */
array2.sort(function(a, b) {
return a - b;
})
console.log(array2); //{"0":10,"1":11,"2":13,"3":14,"4":21,"5":100,"length":6}
console.log(array2.toString()); //10,11,13,14,21,100
/* 冒泡排序法给数组排序 */
var array3 = [10, 2, 16, 30, 8];
for (var i = 0; i < array3.length - 1; i++) {
for (var j = 0; j < array3.length - i - 1; j++) {
if (array3[j] > array3[j + 1]) {
var temp = array3[j]; //备份当前数
array3[j] = array3[j + 1]; //后面的那个数前移
array3[j + 1] = temp; //当前数后移
}
}
}
console.log(array3); //{"0":2,"1":8,"2":10,"3":16,"4":30,"length":5}
console.log(array3.toString()); //2,8,10,16,30
数组的变形
1.数组转化为字符串: join()方法
join()方法将数组元素用某个字符连接成字符串
var arr = ['a', 'b', 'c', 'd'];
var str1 = arr.join('-');
console.log(typeof(str1)); //string
console.log(str1); //a-b-c-d
2.字符串转化为数组:split()方法
split()方法将字符串按某个字符切割成若干个字符串,并以数组形式返回
// 实例:输出今天是星期几
var str = '星期日,星期一,星期二,星期三,星期四,星期五,星期六';
var today = new Date();
var day = today.getDay();
console.log(day); //5
var arr = str.split(','); //按','分割
console.log(arr); //[星期日,星期一,星期二,星期三,星期四,星期五,星期六]
console.log("今天是:" + arr[day]);
ES5方法
1.forEach(function (currentValue, index, arr) , thisValue)
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
语法:array.forEach ()
参数 | 描述 |
---|---|
currentValue | 当前元素(必需) |
index | 当前元素索引(可选) |
arr | 当前元素所属的数组对象(可选) |
thisValue | 传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值(可选) |
//实例
var arr = [1, 2, 3, 4, 5];
var arr1 = [6, 7, 8, 9, 10];
arr.forEach(function (item,index) {
arr1[index] = item;//将arr中每个元素对应替换掉arr1中的元素,原数组不变
});
console.log(arr1);//[1, 2, 3, 4, 5]
2.map(function (currentValue, index, arr), thisValue)
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
用法:map和forEach一样,只不过每次操作一个元素可以有个返回值,然后构成新数组
//案例:将数组中的每个元素乘于3,并返回新数组
var numbers = [65, 44, 12, 4];
function multiplyArrayElement(num) {
return num * 3;
}
function myFunction() {
console.log(numbers.map(multiplyArrayElement));//[195, 132, 36, 12]
}
myFunction()
3.find()、findIndex()
find() 方法:返回数组中满足提供的测试函数的第一个元素的值;
findIndex() 方法:返回数组中满足提供的测试函数的第一个元素的索引;
它们和forEach() 接收的参数一样一样的。
//find()
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130 返回第一个满足要求的元素值
//findInde()
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3 返回第一个满足要求的元素索引
4.every()、filter()、some()
这三个方法是用来过滤的,every()some()返回true,false,前者返回是否全部通过,后者返回是否有元素通过;filter()返回通过元素构成的新数组
//some()
var arr = [ 29 , 100 , 104 , 55] ;
console.log(arr.some(function(element){
return element > 30
}))//true,表示有元素通过
//every()
var arr = [ 29 , 100 , 104 , 55] ;
console.log(arr.every(function(element){
return element > 30
})) //false,并非全部通过
//filter()
var arr = [ 29 , 100 , 104 , 55] ;
console.log(arr.filter(function(element){
return element > 30
}))//[100, 104, 55] 通过元素构成的新数组
5.reduce(callback(a,b),init)
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
执行过程:a、b的初始值分别是init和数组第一个元素,然后第一轮回调函数返回值给到a,再与数组第二个元素执行回调函数,循环往复,最终数组中所有值都遍历使用后,返回回调函数最后一次执行的返回值;
a:初始值是init,之后上一轮回调函数的返回值赋值给它;
b:当前元素;
init:传递给函数的初始值(可选)
var arr = [ 29 , 100 , 104 , 55] ;
console.log(arr.reduce(function(a,b){
console.log(a,b)
return a-b
},0))