J43 向原型上扩展push、去重方法

333 阅读3分钟

1.通过类原型找内置的属性和方法

  • 1.JS中有很多内置类,而且在内置类的原型上有很多内置的属性和方法
    • 方法中的THIS是要操作的arr这个数组实例
    • 作用是向arr(也就是this)的末
    • 返回结果是新增后数组的长度

Array.prototype:数组作为Array的实例,就可以调取原型上的公共属性方法,完成数组的相关操作 => arr.push():arr基于__proto__原型链的查找机制,找到Array.prototype上的push方法,然后把push方法执行,push方法执行 尾追加新的值

  • 2.向内置类原型扩展方法:(添加的不能和内置类上的方法重名+加前缀)
    • Array.prototype.xxx = xxx
    • 这种方法存在风险:我们自己设置的属性名可能会把内置的属性给覆盖掉
    • 一般我们自己在内置类原型上扩展的方法,设置的属性名最好加上前缀
  • 3.重定向内置类,浏览器自带的属性和方法都会丢失
    • Array.prototype={...}
    • 浏览器为了保护内置类原型上的方法,不允许我们重新定向内置类原型的指向(严格模式下会报错)

2.模拟内置的PUSH方法

在类的原型上编写的方法,让方法执行,我们一般都这样操作:实例.方法(),所以方法中的THIS一般都是我们要操作的这个实例,我们基于THIS操作就是操作这个实例

Array.prototype.MyPush=function MyPush(value) {
		this[this.length]=value;
		return this.length;
	}
	let arr = [10, 20];
	console.log(arr.MyPush(100),arr);//=>3 [10,20,100]
	
	let arr2 = [];
	console.log(arr2.push('张三'), arr2);//=>1 ['张三']

3.数组去重写成方法放到数组原型上

  • 1.虽然内置类的原型上有很多的方法,但是不一定完全够项目开发所用,所以真实项目中,需要我们自己向内置类原型扩展方法,来实现更多的功能操作
  • 2.数组的原型上有SORT实现数组排序的方法,但是没有实现数组去重的方法,我们接下里向内置类原型扩展方法:myUnique,以后arr.myUnique执行可以把数组去重
  • 3.链式写法:执行完上一个方法,紧接着调用下一个方法执行
  • 4.arr之所以能调用myUnique或者sort等数组原型上的方法,是因为arr是Array的实例,所以链式写法的实现思路很简单:只需要让上一个方法执行的返回结果依然是当前类的实例,这样就可以立即接着调用类原型上的其它方法了

1.链式写法数组去重

Array.prototype.myUnique = function myUnique() {
	// this:当前要操作的数组实例
	let obj = {};
	for (let i = 0; i < this.length; i++) {
		let item = this[i];
		if (typeof obj[item] !== "undefined") {
			this[i] = this[this.length - 1];
			this.length--;
			i--;
			continue;
		}
		obj[item] = item;
	}
	obj = null;

	//为了实现链式写法
	return this;
};
//链式写法
let arr = [12, 23, 13, 23, 12, 12, 2, 3, 1, 2, 3, 2, 1, 2, 3];
arr.myUnique().sort((a, b) => a - b);
console.log(arr);

2.分开写

//调用方法的时候,调用相应数据类型上的方法,否则无法调取
arr.myUnique().sort((a, b) => a - b).map(item => {
    return '@@' + item;
}).push('张三').shift();
//Uncaught TypeError: arr.myUnique(...).sort(...).map(...).push(...).shift is not a function  push返回的是新增后数组的长度,是个数字,不再是数组了,就不能继续调用数组的方法了

//分开写	
let arr = [12, 23, 13, 23, 12, 12, 2, 3, 1, 2, 3, 2, 1, 2, 3];
arr.myUnique();
arr.sort((a, b) => a - b);
console.log(arr); 

3.传统去重写法

function unique(arr) {
	let obj = {};
	for (let i = 0; i < arr.length; i++) {
		let item = arr[i];
		if (typeof obj[item] !== "undefined") {
			// 当前项已经存在 当前项等于最后一项
			arr[i] = arr[arr.length - 1];
			arr.length--;
			i--;
			continue;
		}
		obj[item] = item;
	}
	return arr;
}
let arr = [12, 23, 13, 23, 12, 12, 2, 3, 1, 2, 3, 2, 1, 2, 3];
arr = unique(arr);
console.log(arr);