数组再分的实现
实现数组再分
开发的时候遇到了一个比较少见的关于数组的操作，如何根据数组中的某个键的属性值是否相同，重新整合数组中的值，如同代码示例中的根据数组的name属性，将name相同的数组元素重新组合在一起。最初的设想是for循环找出每个元素之后，内嵌一个for循环进行比对，找出相应数据存放，结果是数组中的数据重复打印。于是从网上搜索并解决问题，以下便是代码示例。
代码示例
[代码]//实验代码 未分组变量
arrayDemo: [{
"name": "z",
"age": 15,
"high": 10,
"phone": 12345678911
},
{
"name": "q",
"age": 15,
"high": 10,
"phone": 12345678910
},
{
"name": "w",
"age": 15,
"high": 10,
"phone": 12345678912
},
{
"name": "e",
"age": 15,
"high": 10,
"phone": 12345678913
},
{
"name": "r",
"age": 15,
"high": 10,
"phone": 12345678914
}, {
"name": "z",
"age": 15,
"high": 10,
"phone": 12345678915
},
{
"name": "z",
"age": 15,
"high": 10,
"phone": 12345678916
}, {
"name": "f",
"age": 15,
"high": 10,
"phone": 12345678917
}
]
//调用数组排列方法
this.arrayGroup(arrayDemo);
/**
* 数组分组
*/
arrayGroup: function(array) {
var groups = []; //存放新数组
for (var i = 0; i < array.length; i++) { //遍历数组每一项
// 读取每条数据的名称 取出 分类的条件
var groupName = array[i].name;
var groupValue = { // 符合分类条件的属性值组合成对象放入新数组中value属性中
'age': array[i].age,
'high': array[i].high,
'phone': array[i].phone
}
var groupItem = { //新数组中存放的对象
'name': '',
value: []
}
groupItem.name = groupName;
groupItem.value.push(groupValue);
if (i == 0) { //设置为基准值进行对比
groups.push(groupItem);
} else { //遍历剩余数组项
var index = -1; //第二层循环找到属性值相同的数组成员并且放入新数组中
for (var k = 0; k < groups.length; k++) {
if (groupName == groups[k].name) {
index = k;
break;
}
}
if (index == -1) { //没有找到
groups.push(groupItem);
} else {
groups[k].value.push(groupValue); //将属性值存放到新数组中
}
}
}
console.log('groups', groups);
}
[代码]
结果示例
[图片]
解决这个问题之后，鉴于花费在这个问题上的时间，重新搜集了有关数组的操作方法记录下来，以减少下次花费时间。
数组相关方法扩展
filter()
filter()方法创建一个新数组, filter为数组中的每个元素调用一次 callback 函数，并利用调用callback函数返回true或等价于true的值的元素创建一个新数组。
[代码]filter语法：
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
/**
* filterdemo 过滤掉所有小于10的数组项
*/
filterDemo: function() {
var filterArray = [12, 14, 8, 9, 100];
var filterResult = filterArray.filter(function(item) {
if (item > 10) {
return true;
}
});
console.log('filterResult', filterResult)
}
[代码]
[图片]
map()
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
[代码]//map语法：
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
/**
* map方法示例 所有数组成员乘以5
*/
mapDemo: function() {
var mapArray = [1, 2, 3, 4, 5];
var mapResult = mapArray.map(function(item) {
return item * 5
})
console.log('mapResult', mapResult);
}
[代码]
[图片]
foreach()
foreach()方法对数组中的每个元素执行一次提供的函数。
[代码]语法:
array.forEach(function(currentValue, index, arr), thisValue)
/**
* forEach 代码示例
*/
forEachDemo: function() {
var arr = [1, 5, 8, 9]
arr.forEach(function(item) {
console.log('item', item)
})
}
/**
* forEachDemo 无法使用break跳出循环
*/
forEachDemo: function() {
var arr = [1, 5, 8, 9]
arr.forEach(function(item) {
if (item == 1) {
break
}
console.log('item', item)
})
}
/**
* forEach 被调用的时候，不会直接改变调用它的对象，但是对象可能会被callback改变原数组为 var words = ['one', 'two', 'three', 'four'];调用foreach后 原数组被改变
*/
forEachDemo: function() {
var words = ['one', 'two', 'three', 'four'];
words.forEach(function(word) {
console.log(word);
if (word === 'two') {
words.shift();
}
});
}
[代码]
[图片]
foreach无法使用break跳出循环
[图片]
forEach 被调用的时候，不会直接改变调用它的对象，但是对象可能会被callback改变
[图片]
for-in
for-in常用来遍历对象，以任意顺序去遍历一个对象可枚举的属性
[代码] /**
* for-in 实例 输出对象的属性
*/
forInDemo: function() {
var obj = {
name: 'ar',
color: 'yellow',
day: 'sunday',
number: 6,
age:15
}
for (var key in obj) {
console.log(obj[key])
}
}
[代码]
[图片]
在合适的场景下选用合适的数组操作方法，可以使得复杂的代码变得更加的易读和简练，更容易让人理解。
掌上电视