javascript的数组方法重写

push()方法:可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度

Array.prototype.myPush = function () {
	var L = this.length;
	for (var i = L; i < L + arguments.length; i++) {
		this[i] = arguments[i - L];
	}
	return this.length;
}

pop()方法:从数组的末尾移除最后一项,减少数组的length值,返回移除的项

Array.prototype.myPop = function () {
	if (this.length == 0) {
		return undefined;
	}
	var last = this[this.length - 1];
	this.length = this.length - 1;
	return last;
}

unshift()方法:在数组的前端添加任意个项,并返回新数组的长度。

Array.prototype.myUnshift = function () {
	var L = this.length;
	for (var i = L + arguments.length - 1; i >= 0; i--) {
		if (i > arguments.length - 1) {
			this[i] = this[i - arguments.length];
		} else {
			this[i] = arguments[i];
		}
	}
	return this.length;
}

shift()方法:移除数组中的第一个项并且返回该项,同时将数组的长度减一。

Array.prototype.myShift = function () {
	if (this.length == 0) {
		return undefined;
	}
	var firstElement = this[0];
	for (var i = 1; i < this.length; i++) {
		this[i - 1] = this[i];
	}
	this.length = this.length - 1;
	return firstElement;
}

forEach()方法:对数组中的每一元素运行给定的函数,没有返回值,常用来遍历元素。

Array.prototype.myForEach = function (callback) {
	for (var i = 0; i < this.length; i++) {
		var element = this[i];
		callback(element, i, this);
	}
}

every()方法:对数组中的每一运行给定的函数,如果该函数对每一项都返回true,则该函数返回true。

Array.prototype.myEvery = function (callback) {
	for (var i = 0; i < this.length; i++) {
		var item = this[i];
		if (!callback(item, i, this)) {
			return false;
		}
	}
	return true;
}

some()方法:对数组中的每一运行给定的函数,如果该函数对任一项都返回true,则返回true。

Array.prototype.mySome = function (callback) {
	for (var i = 0; i < this.length; i++) {
		var item = this[i];
		if (callback(item, i, this)) {
			return true;
		}
	}
	return false;
}

filter()方法:对数组中的每一运行给定的函数,会返回满足该函数的项组成的数组。

Array.prototype.myFilter = function (fn) {
	//fn作为判断元素的条件,所以返回值为boolean
	var newArray = [];
	var len = this.length;
	for (var i = 0; i < len; i++) {
		//判断是否满足函数条件
		if (fn(this[i], i)) {
			//过滤出满足条件的元素并深度克隆下来。
			if (typeof this[i] == 'object') {
				var obj = {};
				newArray.push(deepClone(obj, this[i]));
			} else {
				newArray.push(this[i]);
			}
		}
	}
	return newArray;
}

reduce()方法:接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

Array.prototype.myReduce = function (callback, initialValue) {
	var num = 0;
	if (initialValue != undefined) {
		total = initialValue;
	} else {
		total = this[0];
		num = 1;
	}
	for (i = num; i < this.length; i++) {
		var item = this[i];
		total = callback(total, item, i, this);
	}
	return total;
}

concat()方法:数组拼接,先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,返回副本,不改变原数组。

Array.prototype.myConcat = function () {
	var arr2 = [];
	for (var i = 0; i < this.length; i++) {
		arr2[i] = this[i];
	}
	for (var i = 0; i < arguments.length; i++) {
		if (Array.isArray(arguments[i])) {
			for (var j = 0; j < arguments[i].length; j++) {
				arr2.myPush(arguments[i][j]);
			}
		} else {
			arr2.myPush(arguments[i]);
		}
	}
	return arr2;
}

indexOf()方法:从数组开头向后查找,使用全等操作符,找不到该元素返回-1。第一个参数为要查找
的项,第二个参数(可选)为索引开始位置。

Array.prototype.myIndexOf = function (item, start) {
	var index = -1;
	if (start == undefined) {
		start = 0;
	}
	for (var i = start; i < this.length; i++) {
		if (this[i] == item) {
			index = i
			return index;
		}
	}
	return index;
}

join()方法:用于把数组中的所有元素放入一个字符串。

Array.prototype.myJoin = function (separator) {
	if (this.length == 0) {
		return "";
	}
	if (separator == undefined) {
		separator = ",";
	}
	var str = "" + this[0];
	for (var i = 1; i < this.length; i++) {
		str = str + separator + this[i];
	}
	return str;
}

reverse()方法:反转数组项的顺序

Array.prototype.myReverse = function () {
	var temp;
	for (var i = 0; i < Math.floor(this.length / 2); i++) {
		temp = this[i];
		this[i] = this[this.length - 1 - i];
		this[this.length - 1 - i] = temp;
	}
	return this;
}

deepClone():深度克隆

function deepClone(target, option) {
	if (option) {
		var copy, src;
		for (var prop in option) {
			//罗列出option的属性名
			copy = option[prop];
			//罗列出target的属性名用于对比copy值是否已经有了一样的名称。
			src = target[prop];
			//判断是引用值还是原始值
			if (copy && typeof copy == 'object') {
				//判断引用值是数组还是对象
				if (Object.prototype.toString.call(copy) == '[object Array]') {
					//如果target本身就有这个属性名那就用自己的属性名,如果没有就创建一个空数组用于存放属性值。
					src = src ? src : [];
				} else {
					src = src ? src : {};
				}
				//用递归函数层层渗透解析,一直到原始值。
				target[prop] = deepClone(src, copy);
			} else {
				target[prop] = copy;
			}
		}
	}
	return target;
}
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js 2.x 中,为了实现响应式的数组,你可以使用下面的方法重写数组的方法: 1. push:使用 `Array.prototype.push` 方法,然后手动调用 `Vue.set` 更新数组,例如: ```javascript this.array.push(newItem); Vue.set(this.array, this.array.length - 1, newItem); ``` 2. pop:使用 `Array.prototype.pop` 方法,然后手动调用 `Vue.delete` 删除最后一个元素,例如: ```javascript const deletedItem = this.array.pop(); Vue.delete(this.array, this.array.length); ``` 3. shift:使用 `Array.prototype.shift` 方法,然后手动调用 `Vue.delete` 删除第一个元素,例如: ```javascript const deletedItem = this.array.shift(); Vue.delete(this.array, 0); ``` 4. unshift:使用 `Array.prototype.unshift` 方法,在调用之前手动调用 `Vue.set` 更新数组的长度,例如: ```javascript this.array.unshift(newItem); Vue.set(this.array, 0, newItem); ``` 5. splice:使用 `Array.prototype.splice` 方法,然后手动调用 `Vue.delete` 删除或添加元素,例如: ```javascript // 删除元素 const deletedItems = this.array.splice(startIndex, deleteCount); for (let i = 0; i < deleteCount; i++) { Vue.delete(this.array, startIndex + i); } // 添加元素 this.array.splice(startIndex, 0, ...newItems); for (let i = 0; i < newItems.length; i++) { Vue.set(this.array, startIndex + i, newItems[i]); } ``` 通过手动调用 `Vue.set` 和 `Vue.delete`,你可以确保数组的变化能够触发 Vue.js 的响应式更新。 注意:以上方法适用于 Vue.js 2.x,在 Vue.js 3.x 中,你可以直接使用原生数组方法,因为 Vue.js 3.x 支持了 Proxy 来实现更好的响应式机制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值