addEventListener wiele zdarzeń

Zamiast wywoływać dwa razy tą samą funkcję.

document.addEventListener("click", taSamaFunkcja);
document.addEventListener("touchstart", taSamaFunkcja);

Możemy to zrobić tak jak poniżej

["change", "keyup", "click", "touchstart", "input", "..."].forEach(function(event) {
  document.querySelectorAll('.element').addEventListener(event, function() {
    // i tutaj co potrzeba
  }, false);
});

Object.keys, values, entries

Poniżej kilka przykładów jak dobrać się do obiektów 🙂

var codes = {
  reset: [0, 0],
  bold: [1, 22]
};

Object.keys(codes).forEach(function (key) {
  console.log(key); // "reset", "bold"
});

Object.values(codes).forEach(function (key) {
  console.log(key); // [0,0] [1,22]
});

Object.entries(codes).forEach(function (key) {
  console.log(key); // ["reset", [0, 0]] ["bold", [1, 22]]
});

forEach, filter, map, sort, reduce

Trochę operacji na tablicach 🙂

const employments = [
  { name: 'Andrzej', category: 'Finanse', start: 1982, end: 2017 },
  { name: 'Agnieszka', category: 'Sprzedaż', start: 1992, end: 2008 },
  { name: 'Mariola', category: 'Samochody', start: 1991, end: 2007 }
];

const digits = [23, 22, 10, 1, 5, 54, 25, 24, 21];

Chcemy pobrać imię pracownika.
Najpierw w starym stylu.

for (let i = 0; i < employments.length; i++) {
  console.log(employments[i].name); // Andrzej, Agnieszka, Mariola
}

forEach – teraz pobierzemy przez forEach

employments.forEach(function(employment) {
  console.log(employment.name);
});

Możemy to zrobić jeszcze szybciej prze ES6

employments.forEach(employment => {
  console.log(employment.name);
});

filter – użyjemy teraz filter aby pobrać liczbę 21 lub większą

Najpierw w starym stylu.

let digitNumber = [];
for(let i = 0; i < digits.length; i++) {
  if(digits[i] >= 21) {
    digitNumber.push(digits[i]);
  }
}

console.log(digitNumber); // 23, 22, 54, 25, 24, 21

Teraz krócej 🙂

const digitNumber = digits.filter(function(digit) {
  if(digit >= 21) {
    return true;
  }
});

console.log(digitNumber);

I jeszcze krócej.

const digitNumbers = digits.filter(digit => digit >= 21);

console.log(digitNumbers);

A może by tak wyszukać osoby po kategorii np. Technologie

const retailEmployments = employments.filter(function(employment) {
  if(employment.category === 'Samochody') {
    return true;
  }
});

console.log(retailEmployments); // { category: "Samochody", end: 2007, name: "Mariola", start: 1991 }

A może da się jeszcze szybciej

const retailEmployments = employments.filter(employment => employment.category === 'Samochody');

console.log(retailEmployments);
const eightiesEmployments = employments.filter(employment => (employment.start >= 1980 && employment.start < 1990));

console.log(eightiesEmployments); // { category: "Finanse", end: 2017, name: "Andrzej", start: 1982 }

map – użyjmy map
Utworzymy tablice imion.

const employmentsNames = employments.map(function(employment) {
  return employment.name;
});

console.log(employmentsNames); // Andrzej, Agnieszka, Mariola

Możemy połączyć to z template.

const testEmployments = employments.map(function(employment) {
  return `${employment.name} [${employment.start} - ${employment.end}]`;
});

console.log(testEmployments); // ["Andrzej [1982 - 2017]", "Agnieszka [1992 - 2008]", "Mariola [1991 - 2007]"]

Lub nawet krócej.

const testEmployments = employments.map(
  employment => `${employment.name} [${employment.start} - ${employment.end}]`
);

console.log(testEmployments);

Możemy wielokrotnie użyć map.

const testDigits = digits
  .map(digit => Math.sqrt(digit))
  .map(digit => digit * 3);

console.log(testDigits); // [14.387494569938157, 14.071247279470288, 9.486832980505138, 3, 6.708203932499369, 22.045407685048602, 15, 14.696938456699067, 13.74772708486752]

sort – teraz przechodzimy do sort

const sortEmployments = employments.sort(function(ec1, ec2) {
  if(ec1.start > ec2.start) {
    return 1;
  } else {
    return -1;
  }
});

console.log(sortEmployments);
/*
{
  category: "Finanse",
  end: 2017,
  name: "Andrzej",
  start: 1982
}, [object Object] {
  category: "Samochody",
  end: 2007,
  name: "Mariola",
  start: 1991
}, [object Object] {
  category: "Sprzedaż",
  end: 2008,
  name: "Agnieszka",
  start: 1992
}
*/

Wersja skrócona.

const sortEmployments = employments.sort((a, b) => (a.start > b.start ? 1 : -1));

console.log(sortEmployments);

reduce – użyjmy reduce

let digitSum = 0;
for(let i = 0; i < digits.length; i++) {
  digitSum += digits[i];
}

console.log(digitSum); // 185

Inna wersja reduce.

const digitSum = digits.reduce(function(total, digit) {
  return total + digit;
}, 0);

console.log(digitSum); // 185
const digitSum = digits.reduce((total, age) => total + age, 0);

console.log(digitSum); // 185

I na koniec łączenie wszystkich metod.

const combined = digits
 .map(digit => digit * 2)
 .filter(digit => digit >= 40)
 .sort((a, b) => a - b)
 .reduce((a, b) => a + b, 0);

console.log(combined); // 338

Wykorzystanie array_unique

$str = ‚2009.1|2009.2|2009.6|2009.6|2009.6|2009.7 |2009.8|2009.8|2009.9|2009.9|2009.9|2009.10|2009.10|2009.10|2009.10’;
echo $str . ‚<br><br>’;

$tab = explode(‚|’, $str);
$tab2 = array_unique($tab);

echo ‚<pre>’; print_r($tab2); echo ‚</pre>’;
$cnt = count($tab2);

for($i=0; $i<$cnt; $i++) {
 echo $tab2[$i].’ ‚;
}

echo ‚<br><br>’;

foreach($tab2 as $row) {
 echo $row.’ ‚;
}
Wyniki:
2009.1|2009.2|2009.6|2009.6|2009.6|2009.7 |2009.8|2009.8|2009.9|2009.9|2009.9|2009.10|2009.10|2009.10|2009.10
Array
(
    [0] => 2009.1
    [1] => 2009.2
    [2] => 2009.6
    [5] => 2009.7
    [6] => 2009.8
    [8] => 2009.9
    [11] => 2009.10
)

for:
2009.1 2009.2 2009.6 2009.7 2009.8

foreach:
2009.1 2009.2 2009.6 2009.7 2009.8 2009.9 2009.10

Wybór następnego elementu z tablicy

$script_modes  = array(‚save_xml’
        => array(‚operation_type’ => ‚XML_TO_BASE’, ‚operation_mode’ => ‚LOAD_HTTP’),
       ‚save_to_base’
        => array(‚operation_type’ => ‚XML_TO_BASE’),
       ‚save_to_base2’
        => array(‚operation_type’ => ‚XML_TO_BASE’)
       );

if(!$script_mode) {
 $script_mode = key($script_modes);
 $script_mode = ‚save_to_base’;
}

foreach($script_modes as $mode => $param) {
 if($script_mode==$mode)
  break;
}

$script_mode = key($script_modes);

echo $script_mode . ‚.<br>’;