Практика/Задачи JavaScript

[Crushing]

Предлагаю оставлять в этой теме задачки для новичков, всякие задания по типу: Сделать калькулятор который будет отнимать и прибавлять от одного числа другое. И оставлять готовое решение сразу, что бы если возникают проблемы можно было решить.

[Sigizmund]

Бесплатный интенсив по JavaScript, 30 дней = 30 задач. Всё приходит на e-mail. https://javascript30.com/

[DivMan]

Дан текст, положить каждую букву в span

<div class='span'>Какой-то текст</div>

<script>
var div = document.querySelector('.span')
var arr = [];
var res = [];
var fin = []

arr = div.innerHTML.split('')
for(var i = 0; i< arr.length; i++){
	res = res  + '<span>'+  arr[i] +  '</span>' + ','
}

fin = res.split(',').join('')

div.innerHTML = fin
console.log(fin)
</script>

 

[Tilonorrinco]

Прикольная задача мне попадалась на просторах интернета:

Что нужно сделать, чтобы при вызове [1,2,3,4].duplicate() возвращался измененный продублированный исходный массив?

Т.е. должно работать вот так:

var arr = [1,2,3,4,5];
arr.duplicate();
console.log(arr) //-> [1,2,3,4,5,1,2,3,4,5]

А вообще, есть сайты типа codewars.com / codefights.com -- там есть и задачи, и тесты, и различные варианты выполнения. По-моему, это самый подходящий вариант.

[Sigizmund]

1 час назад, DivMan сказал:

Дан текст, положить каждую букву в span

<div class='span'>Какой-то текст</div>

<script>
var div = document.querySelector('.span')
var arr = [];
var res = [];
var fin = []

arr = div.innerHTML.split('')
for(var i = 0; i< arr.length; i++){
	res = res  + '<span>'+  arr[i] +  '</span>' + ','
}

fin = res.split(',').join('')

div.innerHTML = fin
console.log(fin)
</script>

 

const element = document.querySelector(".span");
const lettersArr = element.textContent.split("");
const spansArr = lettersArr.map(letter => {
	let span = document.createElement("span");
	span.textContent = letter;
	return span;
});
element.textContent = "";
spansArr.map(span => {
	return element.appendChild(span);
});

или

const element = document.querySelector(".span");
const lettersArr = element.textContent.split("");
const spansArr = lettersArr.map(letter => {
	return `<span>${letter}</span>`;
});

element.innerHTML = spansArr.join("");

 

Edited October 27, 2017 by Sigizmund

[DivMan]

16 минут назад, Tilonorrinco сказал:

Прикольная задача мне попадалась на просторах интернета:

Что нужно сделать, чтобы при вызове [1,2,3,4].duplicate() возвращался измененный продублированный исходный массив?

Т.е. должно работать вот так:

var arr = [1,2,3,4,5];
arr.duplicate();
console.log(arr) //-> [1,2,3,4,5,1,2,3,4,5]

А вообще, есть сайты типа codewars.com / codefights.com -- там есть и задачи, и тесты, и различные варианты выполнения. По-моему, это самый подходящий вариант.

Сделал не совсем, как надо

var arr = [1,2,3,4,5];
console.log(arr);

function duplicate(mas) {
	return mas.concat(mas);
}

console.log(duplicate(arr)) //-> [1,2,3,4,5,1,2,3,4,5]

Я так понимаю, надо добавить метод массива в прототип?

Edited October 27, 2017 by DivMan

[Sigizmund]

1 час назад, Tilonorrinco сказал:

Прикольная задача мне попадалась на просторах интернета:

Что нужно сделать, чтобы при вызове [1,2,3,4].duplicate() возвращался измененный продублированный исходный массив?

Т.е. должно работать вот так:

var arr = [1,2,3,4,5];
arr.duplicate();
console.log(arr) //-> [1,2,3,4,5,1,2,3,4,5]

А вообще, есть сайты типа codewars.com / codefights.com -- там есть и задачи, и тесты, и различные варианты выполнения. По-моему, это самый подходящий вариант.

Метода duplicate у массивов нет, т.е. предлагается прописать его в Array.prototype, а это антипаттерн.

[Tilonorrinco]

DivMan, нет, это слишком просто

В задании нужно решить три проблемы:

1) сделать манкипатчинг расширить встроеннный объект (действительно, добавить метод в прототип массива)

2) сослаться на массив, не передавая ссылку на него аргументом

3) для дублирования нужно использовать деструктивный метод (массив после применения метода должен измениться)

 

Сигизмунд, этот аспект задачи направлен в первую очередь не на пропагандирование спорных практик (расширения встроенных объектов), а на понимание наследования и техники расширения методов объектов (как встроенных, так и собственных). А в расширении методов своих объектов ничего плохого нет, это очень хорошо  

Edited October 27, 2017 by Tilonorrinco
"манкипатчинг" означает немного другое

[Sigizmund]

Array.prototype.duplicate = function() {
	this.forEach(element => {
		return this.push(element);
	});
};