前端开发js 数组修复与扩展

angular.js前端开发|java怎么设计前端开发|jsp前端界面开发
Javascript数组提供的方法大多数和栈操作,队列操作有关这些也是常用的方法。本篇文章继续对数组方法内容进行扩展已提供更加常用的函数。
首先对IE8及以下的数组进行修复,因为这之前的版本中许多常用的数组方法并没有引入或者使用方法不太一致。
一、数组修复
1.indexOf修复:
var arrayPrototype = Array.prototype;
if (!(‘indexOf’ in arrayPrototype)) {
arrayPrototype.indexOf = function(item, index) {
var len = this.length,
i = ~~index; //取反再取反,保证i为整数
if (i < 0){
i = i + len;
}
for(; i < len; i++){
if(this[i] === item){
return i;
}
}
return -1;
}
}
2.lastIndexOf
if (! (‘lastIndexOf’) in arrayPrototype) {
arrayPrototype.lastIndexOf = function(item, index) {
var len = this.length,
i = ~~index;
if (i < 0) {
i = Math.max(0, n + i);
}
for (; i >= 0; i–) {
if (this[i] === item) {
return i;
}
}
return – 1;
}
}
3.迭代方法的修复
ECMAScript5为数组提供了5个迭代方法,每个方法都接受两个参数一个是运行每一项的函数,另一个是运行该函数的作用域对象;为了不支持ECMAScript5标准的浏览器,添加这几个迭代方法:
1)forEach,对数组中每一项运行给定函数没有返回值
if (! (‘forEach’ in arrayPrototype)) {
arrayPrototype.forEach = function(fn, scope) { //scope为运行作用域
for (var i = 0,
j = this.length; i < j; i++) {
fn.call(scope, this[i], i, this); //为回调传入三个参数:this,当前内容,索引,迭代的对象
}
}
}
2)filter,对数组中每一项运行给定函数,返回该函数返回true的函数
if (! (‘filter’ in arrayPrototype)) {
arrayPrototype.filter = function(fn, scope) {
var result = [];
for (var i = 0,
j = this.length; i < j; i++) {
if (fn.call(scope, this[i], i, this)) { //若fn返回true,则添加
result.push(this[i]);
}
}
return result; //返回结果
}
}
3)map,对数组中每一项运行给定函数,返回每一次调用产生的结果集合
if (! (‘map’ in arrayPrototype)) {
arrayPrototype.map = function(fn, scope) {
var result = [];
for (var i = 0,
j = this.length; i < j; i++) {
result[i] = fn.call(scope, scope, this[i], i, this);
}
return result;
}
}
4)every,对数组中每一项运行给定函数,如果每一项都返回true,则返回true
if (! (‘every’ in arrayPrototype)) {
arrayPrototype.every = function(fn, scope) { //scope为运行作用域
for (var i = 0,
j = this.length; i < j; i++) {
if (!fn.call(scope, this[i], i, this)) {
return false; //有错误的就返回false
}
}
return true;
}
}
5)some,对数组中每一项运行给定函数,如果任意一项返回true,则返回true
if(!(‘some’ in arrayPrototype)) {
arrayPrototype.some = function(fn, scope) { //scope为运行作用域
for(var i = 0, j = this.length; i < j; i++){
if (fn.call(scope, this[i], i, this)) {
return true; //有错误的就返回false
}
}
return false;
}
}
以上就是这5个迭代方法实现原理,通过代码我们可以发现,可以发现迭代方法都是通过一个循环遍历数组每项,作为参数传入指定函数;唯一的区别就是是否有返回值和判断条件,因此我们可以创建一个iterator函数模板,之后通过传入区别部分,来构造这些迭代方法。下面的示例是avalon.js中的迭代方法:
function iterator(vars, body, ret) {
var fun = ‘for(var ‘ + vars + ‘i=0,n = this.length; i < n; i++){‘ +
body.replace(”, ‘((i in this) && fn.call(scope,this[i],i,this))’) + ‘ //差别部分用三个变量代替
}’ +
ret
return Function(“fn,scope”, fun)
} //迭代器
根据迭代器,生成迭代方法:
forEach: iterator(“”, ”, “”),
filter: iterator(‘r=[],j=0,’, ‘if()r[j++]=this[i]’, ‘return r’),
map: iterator(‘r=[],’, ‘r[i]=’, ‘return r’),
some: iterator(“”, ‘if()return true’, ‘return false’),
every: iterator(“”, ‘if(!)return false’, ‘return true’)
4.差异方法修复:
1)IE6,7下unshift不返回数组长度
var _unshift = Array.prototype.unshift;
if ([].unshift(1) !== 1) {
Array.prototype.unshift = function() {
_unshift.apply(this, arguments);
return this.length; //修复不返回长度的
}
}
2)IE6,7,8中splice默认第二个参数为0,二不是数组长度
var _splice = Array.prototype.splice;
if ([1, 2].splice(1).length == 0) {
Array.prototype.splice() = function(num) {
if (arguments.length == 1) {
return _splice(this, num, this.length);
} else {
return _splice(this, arguments);
}
}
}
二、数组扩展
contains(Array array, Object item)
检查数组中是否包含给定元素, array要检查的数组,item要查找的元素,返回boolean包含为true
function contains(array, item) {
return array.indexOf(item) > -1;
}
removeAt(Array array, Number index)
移除数组中指定位置的元素,array为指定数组,index为索引,返回boolean表示是否成功
function removeAt(array, index) {
return array.splice(index, 1).length > 0;
}
remove(Array array, Object item)
移除数组中第一个匹配的元素,array要检查的数组,item要查找的元素,返回boolean表示是否成功
function remove(array, item) {
var index = array.indexOf(item);
return index > -1 ? removeAt(array, index) : false;
}
clean(Array array)
过滤掉数组里的空值,返回过滤后的数组
function clean(array) {
return array.filter(function(item) {
return item != null;
})
}
shuffle(Array array)
对指定数组随机重排序,返回新的排序后的数组
function shuffle(array) {
var len = array.length – 1,
temp, j;
for (; len > 0; len–) {
j = parseInt(Math.random() len); //生成区间
temp = array[len];
array[len] = array[j];
array[j] = temp;
}
return array;
}
重排序算法:例如数组长度为len,那么Math.random() len 就是一个区间为[0, len)中的一个值,parseInt后就是[0, len – 1]区间中的一个值, 将这个选择的值j所在位置元素与数组最后一项交换,第二次同理随机选择一个元素,与数组倒数第二项交换。这样循环便完成数组的重新排序。
flatten(Array array)
对指定数组,进行平坦化,返回一个一维数组:
function flatten(array) {
var newArray = []; //储存元素
function RFlatten(a) {
var len = a.length,
item;
for (var i = 0; i < len; i++) {
item = a[i];
if (Caelum.isArray(item)) {
RFlatten(item); //若元素为数组,递归调用
} else {
newArray.push(item);
}
}
return newArray;
}
return RFlatten(array); //递归实现数组平坦化
}
random(Array array)
随机返回数组中的一项:
function random(array) {
return array[Math.random() * array.length];
}
include(Array array, Object item)
把一个元素插入到数组,如果它不存在于这个数组;
function(array, item) {
if (!contains(array, item)) {
array.push(item);
}
}
unique(Array array)
去掉指定数组中的重复项,返回去重后的数组
function unique(array) {
var result = [],
len = array.length;
loop: for (var i = 0; i < len; i++) {
for (var x = i + 1; x < len; x++) {
if (result[i] === result[x]) {
continue loop;
}
}
result.push(array[i]);
}
return result;
}
merge( Array array1, Array array2, Array etc )
合并多个数组中的不重复元素到一个数组, 返回合并后的数组;
function merge(array) {
var args = [].slice.call(arguments),
len = args.length,
result = [];
for (var i = 0; i < len; i++) {
result = result.concat(args[i]); //连接所有数组
}
return unique(result); //去重
}
intersect(Array target, Array array)
取两个数组的交集,返回运算后的结果
function intersect(target, array) {
return target.filter(function(item) {
return~array.indexOf(item); //取反 || 取交集
})
}
diff(Array target, Array array)
取两个数组的补集,返回结果
function diff(target, array) {
for (var i = 0; i < target.length; i++) {
for (var j = 0; j < array.length; j++) {
if (target[i] === array[j]) {
target.splice(i, 1); //删除
i–;
break;
}
}
}
return target;
}
min|max|sun(Array array)
取出指定数组中最小|最大|和,返回结果
function min(array) {
return Math.min.apply(null, array); //array作为Math.min参数调用
}
function max(array) {
return Math.max.apply(null, array);
}
function sum(array) {
var len = array.length,
result = 0;
for (var i = 0; i < len; i++) {
result += array[i];
}
return result;
}
vue.js前端开发pdf|java能开发前端吗|javascript前端开发实用技术教程
» 本文来自:前端开发者 » 《前端开发js 数组修复与扩展》
» 本文链接地址:https://www.rokub.com/5040.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!