Приемы решения типовых задач на javascript.

Приемы решения типовых задач на javascript.

Цикл for…in Проход по свойствам объекта.

Цикл for..in проходит не только по собственным, но и по унаследованным свойствам объекта.

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// Object.keys возвращает только собственные ключи
alert(Object.keys(rabbit)); // jumps

// for..in проходит и по своим, и по унаследованным ключам
for(let prop in rabbit) alert(prop); // jumps, затем eats

Проход по массиву (списку).

For

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    console.log(myStringArray[i]);
    //Do something
}

Array.prototype.forEach

const array = ["one", "two", "three"]
array.forEach(function (item, index) {
  console.log(item, index);
});

ES6

array.forEach(item => console.log(item));

Недостаток не использует break / continue

for-of выражение

let colors = ['red', 'green', 'blue'];
for (const color of colors){
    console.log(color);

}

Недостаток - старые браузеры.

Удаление элемента массива.

const array = [2, 5, 9];
const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

При помощи фильтра.

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

Стрелочной функцией в ES6

arr = arr.filter(item => item !== value)

Перевернуть массив.

const palindrome = str => {
  // Меняем регистр строки на нижний
  str = str.toLowerCase()
  // Переворачиваем строку и возвращаем результат сравнения
  return str === str.split('').reverse().join('')
}

Проверка кратности чисел.

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // Проверяем, кратно ли число 3 и 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // Проверяем, кратно ли число 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // Проверяем, кратно ли число 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}

Найти глассные в строке.

const findVowels = str => {
  let count = 0
  const vowels = ['a', 'e', 'i', 'o', 'u']
  for(let char of str.toLowerCase()) {
    if(vowels.includes(char)) {
      count++
    }
  }
  return count
}

Нахождение подстроки.

ES6

console.log(string.includes(substring));

indexOf

console.log(string.indexOf(substring) !== -1);

Числа фибоначи.

const fibonacci = num => {
  // Сохраняем последовательность Фибоначчи, которую собираемся сгенерировать,
  // внутри массива и инициализируем массив первыми двумя числами последовательности
  const result = [0, 1]

  for(let i = 2; i <= num; i++) {
    // Поместим сумму двух чисел, предшествующих позиции i в массиве результатов, 
    // в конец этого массива
    const prevNum1 = result[i - 1]
    const prevNum2 = result[i - 2]
    result.push(prevNum1 + prevNum2)
  }
  // Вернём последнее значение из массива результатов
  return result[num]
}

Переадресовать страницу.

window.location.href = 'адрес'

Таймаут

setTimeout(()=>{}, 1000)

Циклы в js

for (i = 0; i < cars.length; i++) {
    text += cars[i] + "<br>";
}

var sum = 0;
var number = 1;
while (number <= 50) {  // -- condition
  sum += number;        // -- body
  number++;             // -- updater
}

var sum = 0;
var number = 1;
do {
   sum += number;         // -- body
   number++;              // -- updater
} while (number <= 50);

Способы навешивания событий.

el.onclick = ()=>{} - только один обработчик
el.addEventListener('onclick', ()=> {}) несколько с сохранением порядка
el.attachEvent("on"+имя, ()=>{}) - несколько без порядка и доступа к элементу

Проверяем регуляркой поле ввода

Шаблон

<input type="text" id="test1">

<input type="text" id="test2">

<input type="text" id="test3">

<button id="button"> Validate</button>

Скрипт

$(window).on('load', function() {

    $('#button').on('click', () => {

        var text1 = $('#test1').val();

        var text2 = $('#test2').val();

        var text3 = $('#test3').val();

        console.log(text1);

        var reg1 = new RegExp('^[0-9]+$');
        console.log(reg1.test(text1))

        var reg2 = new RegExp('^[a-z]+$');
        console.log(reg2.test(text2))

        var reg3 = new RegExp('^[A-Z]+$');
        console.log(reg3.test(text3))

    })

});

Пузырьковая сортировка.

Суть алгоритма в сравнении пары соседних элементов — если они стоят в неправильном порядке, то их меняют местами.

myarr = [7,3,4,6,9,2];
function bible(arr) {
    for (var i = 0, endI = arr.length -1; i < endI; i++) {
        for(var j=0, endJ = endI; j < endJ; j++){
            if(arr[j] > arr[j+1]) {
                var swap = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = swap;
            }
        }
    }
    return arr;
}
console.log(bible(myarr))