Entrevistador de front-end: ¿Puede implementar el método en el prototipo de matriz js?

       Un entrevistador me preguntó: ¿Puede usar for o while para implementar la mayoría de los métodos en el prototipo de matriz js? Estaba muy confundido en ese momento, no lo intenté yo mismo y no sabía si se podía hacer, pero no pensé que fuera demasiado difícil, así que dije: ¡Sí ! 很遗憾，后面他也祝我早日找到更匹配的工作了~

       Más tarde, traté de implementarlo yo mismo.En el proceso, algunos métodos fueron relativamente simples. Si hay deficiencias, espero que algunos hermanos mayores me den consejos, y hay algunos métodos que no puedo lograr: sort, reduceetc. Pero también puede lograr la mayoría de ellos. Para algunos métodos, he escrito las ideas de implementación 可能写得不清楚，, pero no he escrito los métodos para implementar las ideas, por lo que no puedo explicarlos. ¡Solo mira el código y entiende! ! !

en

       Explicación oficial: at()el método recibe un valor entero y devuelve el elemento en ese índice, lo que permite números positivos y negativos. Los enteros negativos cuentan hacia atrás desde el último elemento de la matriz. Significado aproximado: dado un índice, devuelve el valor del índice actual.

---

Ideas:

• Cuando el índice pasado es mayor que 0, el valor del índice actual se devuelve directamente.
• Cuando el índice pasado es menor que 0, devuelve el penúltimo ielemento, fórmula: this.length + i .
• Cuando el índice pasado es igual a 0, el primer elemento se devuelve directamente.

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


Array.prototype.myAt = function(i) {
    
    
	let index = parseInt(i)

	if (index > 0) {
    
    
		return this[index]
	} else if (index < 0) {
    
    
		return this[this.length + index]
	} else {
    
    
		return this[0]
	}
}

const value = sect.myAt(3)
const value1 = sect.myAt(-1)

console.log('原数组：', sect)
console.log(value)
console.log(value1)

concat

       Explicación oficial: concat()el método se utiliza para fusionar dos o más matrices. Este método no altera la matriz existente, pero devuelve una nueva matriz.

Ideas:

Primero prepare una matriz vacía, luego recorra la matriz original y coloque todos los valores en la matriz vacía preparada, que es exactamente igual que la matriz original.

• Cuando no se pasan parámetros (arguments.length < 1), devuelva esta matriz directamente
• Cuando no se pasan parámetros (arguments.length >= 1), se recorren los parámetros reales:
  • Cuando el parámetro real actual no es una matriz, se inserta directamente en la matriz preparada previamente.
  • Cuando el parámetro real actual es una matriz, recorra la matriz e inserte uno por uno en la matriz preparada previamente.

const array1 = ['倚天屠龙记', '射雕英雄传'];
const array2 = ['笑傲江湖', '神雕侠侣'];


Array.prototype.myConcat = function() {
    
    
	let temp = []

	for (let u = 0; u < this.length; u++) {
    
    
		temp.push(this[u])
	} 

	// 当不传参数时
	if (arguments.length < 1) {
    
    
		return temp;
	}

	// 如果有参数，遍历实参
	for (let i = 0; i < arguments.length; i++) {
    
    
		// 当前实参
		let currentArg = arguments[i]
		// 当实参不是数组类型
		if (Object.prototype.toString.call(currentArg) !== '[object Array]') {
    
    
			temp.push(currentArg)
		} else {
    
    
			for (let j = 0; j < currentArg.length; j++) {
    
    
				temp.push(currentArg[j])
			}
		}
	}

	return temp
}

let array3 = array1.myConcat()
let array4 = array1.myConcat(array2)
let array5 = array1.myConcat(array2, '天龙八部')

console.log(array3)
console.log(array4)
console.log(array4)

cada

       Explicación oficial: every()el método prueba si todos los elementos de una matriz pueden pasar la prueba de una función específica. Devuelve un valor booleano.

Ideas:

Primero juzgue si lo pasado es una función, si no es una función, ¡arroje un error! Si es un método, recorra esta matriz, ejecute la función de devolución de llamada y pase el valor, el índice y la matriz completa actualmente recorridos. Si la función de devolución de llamada devuelve false, directamente return false, si se recorre toda la matrizreturn true

const array1 = [1, 30, 39, 29, 10, 13]


Array.prototype.myEvery = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}
		
	// 遍历当前数组，执行回调函数并传入当前遍历的值
	for (let i = 0; i < this.length; i++) {
    
    
		let flag = fun(this[i], i, this)
		if (!flag) {
    
    
			return false
		}
	}

	 return true
}

console.log(array1.myEvery(item => item < 50))
console.log(array1.myEvery(item => item < 20))

llenar

       Explicación oficial: fill()el método llena todos los elementos de una matriz desde el índice inicial hasta el índice final con un valor fijo. No incluye el índice de terminación.

Ideas:

Prepare una matriz vacía, recorra esta matriz:

• Al pasar un parámetro, inserte este parámetro en una matriz vacía,
• Al pasar dos parámetros,
  • Cuando el valor atravesado es menor que el segundo parámetro, inserte el valor de la matriz en la matriz que acaba de preparar.
  • Cuando el índice recorrido es igual o mayor que el segundo parámetro, inserte el primer parámetro en la matriz que acaba de preparar.
• ¡Al pasar tres parámetros, lo mismo es cierto! ! !

const array1 = [1, 2, 3, 4];


Array.prototype.myFill = function() {
    
    
	let temp = []
	let leng = arguments.length

	for (let i = 0; i < this.length; i++) {
    
    
		if (leng === 1) {
    
    
			temp.push(arguments[0])
		} else if (leng === 2) {
    
    
			let start = parseInt(arguments[1])
			if(i < start) {
    
    
				temp.push(this[i])
			} else {
    
    
				temp.push(arguments[0])
			}
		} else {
    
    
			let start = parseInt(arguments[1])
			let end = parseInt(arguments[2])
			if(i < start || i >= end) {
    
    
				temp.push(this[i])
			} else {
    
    
				temp.push(arguments[0])
			}
		}
	}

	return temp
}

const array2 = array1.myFill(8)
const array3 = array1.myFill(8, 1)
const array4 = array1.myFill(8, 1, 3)

console.log(array2)
console.log(array3)
console.log(array4)

filtrar

       Explicación oficial: filter()el método crea una copia superficial de una parte de la matriz dada, que contiene todos los elementos que pasan la prueba implementada por la función proporcionada. Significado aproximado: filtre los datos que desee de la matriz.

Ideas:

¡Primero juzgue si el parámetro es una función, no una función, y arroje un error! Si es una función, recorra esta matriz, ejecute la función de devolución de llamada, cuando la función de devolución de llamada regrese true, inserte el valor actual en la matriz vacía preparada y finalmente devuelva esta matriz.

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


Array.prototype.myFilter = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	let temp = []

	for (let i = 0; i < this.length; i++) {
    
    
		let flag = fun(this[i], i, this)

		if (flag) {
    
    
			temp.push(this[i])
		}
	}

	return temp
}

let newSect = sect.myFilter(item => item.length === 2)

console.log(newSect)

encontrar

       Explicación oficial: find()el método devuelve el valor del primer elemento de la matriz que satisface la función de prueba proporcionada. De lo contrario regresa undefined.

Ideas:

¡Primero juzgue si el parámetro es una función, no una función, y arroje un error! Si es una función, recorra esta matriz, ejecute la función de devolución de llamada y, si la función de devolución de llamada devuelve true, returnrecorra el valor actual en ella. Si el recorrido ha terminado y la función de devolución de llamada no regresa true, entoncesreturn undefined

const array1 = [5, 12, 8, 130, 44];

Array.prototype.myFind = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = 0; i < this.length; i++) {
    
    
		let target = fun(this[i], i, this)
		if (target) {
    
    
			return this[i]
		}
	}
	
	return undefined
}

console.log(array1.myFind(item => item > 20));
console.log(array1.myFind(item => item > 200));

buscarÚltimo

       Explicación oficial: findLast()el método devuelve el valor del último elemento de la matriz que cumple las condiciones de la función de prueba proporcionada. Devuelve si no se encuentra ningún elemento correspondiente undefined.

Ideas:

El principio es el findmismo, excepto que al hacer un bucle en la matriz, haz un bucle de derecha a izquierda.

const array1 = [5, 12, 8, 130, 44]


Array.prototype.myFindLast = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = this.length - 1; i >= 0; i--) {
    
    
		let target = fun(this[i], i, this)
		if (target) {
    
    
			return this[i]
		}
	}
	return undefined
}

console.log(array1.myFindLast(item => item > 20))
console.log(array1.myFindLast(item => item > 200))

buscarÍndice

       Explicación oficial: findIndex()el método devuelve el índice del primer elemento de la matriz que satisface la función de prueba proporcionada. Devuelve -1 si no se encuentra ningún elemento correspondiente.

Ideas:

¡Primero juzgue si el parámetro es una función, no una función, y arroje un error! Si es una función, recorra esta matriz, ejecute la función de devolución de llamada y, si la función de devolución de llamada devuelve true, returnrecorra el índice actual en la matriz. Si el recorrido ha terminado y la función de devolución de llamada no regresa true, entoncesreturn -1

const array1 = [5, 12, 8, 130, 44]


Array.prototype.myFindIndex = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = 0; i < this.length; i++) {
    
    
		let target = fun(this[i], i, this)
		if (target) {
    
    
			return i
		}
	}
	
	return -1
}

console.log(array1.myFindIndex(item => item > 10));
console.log(array1.myFindIndex(item => item > 1000));

buscarÚltimoÍndice

       Explicación oficial: findLastIndex()el método devuelve el índice del último elemento de la matriz que cumple las condiciones de la función de prueba proporcionada. Si no se encuentra ningún elemento correspondiente, se devuelve -1.

Ideas:

El principio es el findIndexmismo, excepto que al hacer un bucle en la matriz, haz un bucle de derecha a izquierda.

const array1 = [5, 12, 8, 130, 44]
        

Array.prototype.myFindLastIndex = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = this.length - 1; i >= 0; i--) {
    
    
		let target = fun(this[i], i, this)
		if (target) {
    
    
			return i
		}
	}
	
	return -1
}

console.log(array1.myFindLastIndex(item => item > 10))
console.log(array1.myFindLastIndex(item => item > 1000))

para cada

       Explicación oficial: forEach()el método ejecuta la función dada una vez para cada elemento de la matriz.

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


Array.prototype.myForEach = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = 0; i < this.length; i++) {
    
    
		fun(this[i], i, this)
	}
}

sect.myForEach((item, i, arr) => console.log(item, i, arr))

incluye

       Explicación oficial: forEach()el método se usa para juzgar si una matriz contiene un valor específico, de acuerdo con la situación, devuelve si contiene true, de lo contrario, devuelve false.

Ideas:

Recorra la matriz, uno por uno para determinar si los parámetros y el valor actual del recorrido son iguales, si son iguales return true, de lo contrarioreturn false

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


Array.prototype.myIncludes = function(value) {
    
    
	if (!value) {
    
    
		return false
	}

	for (let i = 0; i < this.length; i++) {
    
    
		if (value === this[i]) {
    
    
			return true
		}
	}

	return false
}

console.log(sect.myIncludes('明教'))
console.log(sect.myIncludes('伊斯兰'))

índice de

       Explicación oficial: indexOf()el método devuelve el primer índice donde se puede encontrar el elemento dado en la matriz, o -1 si no existe.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];


Array.prototype.myIndexOf = function(target, index) {
    
    
	if (!target) {
    
    
		return -1
	}

	index = parseInt(index)
	let i = 0;
	if (index && index > 0 && index <= this.length) {
    
    
		i = index
	}
	if (index && index < 0 && index >= -(this.length)) {
    
    
		i = this.length + index
	}
	for (i; i < this.length; i++) {
    
    
		if (target === this[i]) {
    
    
			return i
		}
	}

	return -1
}

console.log(beasts.myIndexOf('bison'))
console.log(beasts.myIndexOf('bison', 4))

últimoÍndiceDe

       Explicación oficial: lastIndexOf()el método devuelve el último índice del elemento especificado (es decir, un valor o variable de JavaScript válido) en la matriz, o -1 si no existe. Mire hacia adelante desde la parte posterior de la matriz, comenzando desde fromIndex

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];


Array.prototype.myLastIndexOf = function(target, index) {
    
    
	if (!target) {
    
    
		return -1
	}

	index = parseInt(index)
	let i = this.length - 1;
	if (index && index > 0 && index <= this.length) {
    
    
		i = index
	}
	if (index && index < 0 && index >= -(this.length)) {
    
    
		i = this.length + index
	}
	for (i; i >= 0; i--) {
    
    
		if (target === this[i]) {
    
    
			return i
		}
	}

	return -1
}

console.log(beasts.myLastIndexOf('bison'))
console.log(beasts.myLastIndexOf('bison', 4))

unirse

       Explicación oficial: join()el método concatena todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve la cadena. Si la matriz tiene solo un elemento, ese elemento se devolverá sin un separador.

const elements = ['Fire', 'Air', 'Water']


Array.prototype.myJoin = function(target) {
    
    
	let str = ''

	for (let i = 0; i < this.length; i++) {
    
    
		if (!target) {
    
    
			str += this[i] + ','
		} else {
    
    
			str += this[i] + target
		}
				
	}
	return str.slice(0, str.length - 1)
}

console.log(elements.myJoin())
console.log(elements.myJoin('-'))
console.log([].myJoin()) // ''

mapa

       Explicación oficial: map()el método crea una nueva matriz que consta del valor devuelto después de llamar a la función proporcionada una vez para cada elemento de la matriz original.

Ideas:

¡Primero juzgue si el parámetro es una función, no una función, y arroje un error! Si es una función, recorra esta matriz, ejecute la función de devolución de llamada para pasar el valor actual, el índice y esta matriz del recorrido, inserte el valor de retorno de la función de devolución de llamada en una matriz vacía temporal y, finalmente, esta matriz temporal return.

const array1 = [5, 12, 8, 130, 44];


Array.prototype.myMap = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	let temp = []
	for (let i = 0; i < this.length; i++) {
    
    
		let value = fun(this[i], i, this)
		temp.push(value)
	}

	return temp
}

let map1 = array1.myMap(item => item + 2)
let map2 = array1.myMap(item => item / 2)

console.log('array1：', array1)
console.log(map1)
console.log(map2)

contrarrestar

       Explicación oficial: reverse()el método invierte la posición de los elementos en la matriz y devuelve la matriz. El primer elemento de la matriz se convierte en el último y el último elemento de la matriz se convierte en el primero. Este método cambia la matriz original.

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


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

	return this
}

let reSect = sect.myReverse()
console.log('改变后的数组：', sect)
console.log(reSect)

rebanada

       Explicación oficial: slice()el método devuelve un nuevo objeto de matriz, que es una copia superficial de la matriz original determinada por el inicio y el final (incluido el inicio, excluyendo el final). La matriz original no se cambiará.

const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']


Array.prototype.mySlice = function(begin, end) {
    
    
	let start = begin || 0
	let ending = end || this.length

	if (begin < 0) {
    
    
		start = this.length + begin
	}
	if (end < 0) {
    
    
		ending = this.length + end
	}

	let temp = []

	for (let i = start; i < ending; i++) {
    
    
		temp.push(this[i])
	}

	return temp
}

console.log(sect.mySlice(1, 3))
console.log(sect.mySlice(-2))

alguno

       Explicación oficial: some()el método prueba si al menos un elemento de la matriz pasa la prueba de función proporcionada. Devuelve un valor de tipo booleano.

const array1 = [5, 12, 8, 130, 44]

Array.prototype.mySome = function(fun) {
    
    
	let isFunction = Object.prototype.toString.call(fun) === '[object Function]'

	if (!isFunction) {
    
    
		throw new Error('请传入一个方法。')
	}

	for (let i = 0; i < this.length; i++) {
    
    
		let flag = fun(this[i], i, this)

		if (flag) {
    
    
			return true
		}
	}

	return false
}

console.log(array1.mySome(item => item === 130))
console.log(array1.mySome(item => item > 100))
console.log(array1.mySome(item => item > 200))