JavaScript:侃侃Array的应用场景

qianjiahao

`前提`

``````function Student(name,gender,age){
this.name = name;
this.gender = gender;
this.age = age;

this.introduce = function () {
console.log('name : ' + this.name + ',
gender : ' + this.gender + ', age : ' +this.age);
}
}

function Empolyee(name,gender,age,work){

Student.apply(this,arguments);          //apply方法
//Student.call(this,name,gender,age);   //call方法

this.work = work;

}

var e = new Empolyee('lee','male','26','programmer');
console.log(e)
e.introduce();
``````

``````var array = [1,5,2,3];

console.log(Math.max.apply(this,array));
// 全局写法

function getMax(){
return Math.max.apply(this,Array.prototype.slice.apply(arguments));
}                             // 不指定函数参数写法
console.log(getMax(1,2,3,45,3));

function getMax(array){
return Math.max.apply(this,array);
}                             // 指定参数写法
console.log(getMax(array));
``````

`正文`

扁平化规则数组

``````var array = [[1,2],[3,4],[5,6]];

var result = array.reduce(function (p, c) {
return p.concat(c);
});
console.log(result);
// [ 1, 2, 3, 4, 5, 6 ]

``````

扁平化随机数组

``````var array = [1,[2,[3,4],[1,9,8],[' ',3]],1];
// 随机嵌套数组

function flatten(array){
var result = [];

array.map(function(ele){
if(!Array.isArray(ele)){     //判断是否为数组
result.push(ele);
}else{
result = result.concat(flatten(ele));
// 由于result是函数内部定义的，及每次递归result都会重置；
// 如果不将result保存，则到递归完成后，之前的数据将会被覆盖
}
});
return result;
}
console.log(flatten(array));
// [ 1, 2, 3, 4, 1, 9, 8, ' ', 3, 1 ]

``````

检查数组是否通过给定函数检查

``````var score = [56,90,40,80,76,88,94,27,83,66];
// 成绩

function isPassExam(ele,index,array){
return ele >= 60;
}
// 通过规则

var isAllPass = score.every(isPassExam);
console.log('is all pass the exam : ' + isAllPass);
// is all pass the exam : false

var isSomeonePass = score.some(isPassExam);
console.log('is someone pass the exam : ' + isSomeonePass);
// is someone pass the exam : true

var passedScore = score.filter(isPassExam);
console.log('score : ' + passedScore);
// score : 90,80,76,88,94,83,66

- every会遍历所有元素，直到有不能通过函数检查的元素为止，返回 false
- some会遍历所有元素，直到有能通过函数检查的元素为止，返回true
- filter会遍历所有元素，并将能通过函数检查的元素返回
``````

过滤函数参数

``````function filter(){
var array = [];

Array.prototype.slice.apply(arguments).map(function (ele) {
if(typeof ele == 'number'){
array.push(ele);
}
});

return array;
// do something
// ....
}

var result = filter(1,'123',4,'qianjiahao',2,false,[]);
console.log(result);
// [ 1, 4, 2 ]

{ '0': 1,
'1': '123',
'2': 4,
'3': 'qianjiahao',
'4': 2,
'5': false,
'6': [] }

arguments是个"类数组"，在使用"map"方法之前我们需要将其"slice"后转化为"数组"，但是因为"类数组"没有"slice"方法，所以我们使用了"apply"，让Array帮我们完成这个工作。
``````

乱序字符串/数组

``````var str = '6ab3c5de1f4g7';

var array = str.split('');

var result = str.split('').sort(function () {
return Math.random() > 0.5;
}).join('');
console.log(result);
// d7gfc51a34be7

result = array.sort(function () {
return Math.random() > 0.5;
});
console.log(result);
// [ 'd', '6', 'b', '4', 'e', 'a', 'c', '1', 'f', '5', '7', '3', 'g' ]

``````

从数组a中去除数组b的元素

``````var a = [1,5,2,6,4,7,9,0];
var b = [1,0,6,4,10];

var result = a.filter(function(ele){
return b.indexOf(ele) < 0;
});
console.log(result);

``````

`注意`

for..in..

``````for..in..迭代效率较低，建议使用for循环迭代或Array的原生迭代方法。
``````

``````var array = [1,2,3,4];

Array.prototype.newVariable = 100;

Array.prototype.newFunction = function () {};

var result = [];

for(var i in array){
result.push(array[i]);
}

console.log(result);
// [ 1, 2, 3, 4, 100, [Function] ]
``````

``````for(var i in array){
if(array.hasOwnProperty(i)){
result.push(array[i]);
}
}
// [ 1, 2, 3, 4 ]
``````

``````var array = [1,2,3,4];

Array.prototype.newVariable = 100;

Array.prototype.newFunction = function () {};

Array.prototype.hasOwnProperty = function (i) {
return i;
};
// 重写 hasOwnProperty() 方法

var result = [];

for(var i in array){
if(array.hasOwnProperty(i)){
result.push(array[i]);
}
}

console.log(result);
// [ 1, 2, 3, 4, 100, [Function], [Function] ]
// 又悲剧了。。。
``````

`优化`

``````var array = [1,2,3,4,5,3,7,8];

for(var i = 0;i<array.length;i++){
// ...
}
``````

``````for(var i = 0,len = array.length;i<len;i++){
// ...
}
``````

总结

`````` - 介绍了apply和call的用法
- 正文部分根据需求列举Array的应用场景
- 注意事项
- 优化方案
``````

8.4k 声望
591 粉丝