Array filter metodu

Giriş

Açıklaması şöyle. Eğer hiçbir öğe testi geçemezse boş dizi döndürür.

Function Array.filter returns those elements of an array, which match the specified condition.

Eğer kendimiz kodlasaydık şöyle yapardık

function filter(array, condition) {
  result = []
  for (element of array)
    if condition(element)
      result.push(element)
  return result
}

Java İle Farkı

JavaScript Array.filter() metodu Java'dan farklı çalışıyor. Java stream'lerinde tüm stream bir eleman için çalışıyor. Yani önce tek bir eleman için filter() daha sonra transform() daha sonra collect() çalışıyor. JavaScript ise elemanları teker teker işlemiyor. Array.filter() metodu önce tüm diziyi filtreler. Daha sonra sonucu stream'deki diğer çağrıya geçirir. Açıklaması şöyle

For instance, Javascript’s filter method outputs an array containing all the matching elements, so if you have a chain of operators, each operator in the chain operates on all elements and completes before the next begins.

filter metodu - value

Şöyle yaparız. İşlem sonunda arr dizisi 1,3,5 değerlerini içerir.

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

arr = arr.filter(function(v) {
  return bar.indexOf(v) === -1;
});




filter metodu - value + index
Örnek
Elimizde şöyle bir kod olsun.

const array1 = [true, false, false, true];
const array2 = ['a', 'b', 'c', 'd'];

array2 dizinden array1 içinde aynı konumdaki değeri true olan nesneleri almak için şöyle yaparız.

const array1 = [true, false, false, true];
const array2 = ['a', 'b', 'c', 'd'];
const res = array2.filter((_, i) => array1[i]);
console.log(res);

React Select Bileşeni

Örnek
Şöyle yaparız.

class App extends React.Component {

  render() {
    return (
      <div>
        <h4>{this.state.counter}</h4>
        <select name="listOne" onChange={this.incrementIfTest}>
          <option />
          <option>DownloadPrepare</option>
          <option>Test</option>
        </select>
        <select name="listTwo" onChange={this.incrementIfTest}>
          <option />
          <option>DownloadPrepare</option>
          <option>Test</option>
        </select>
      </div>
    );
  }
}

Array find metodu

Giriş
Açıklaması şöyle.

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

Eğer nesne değerini bulmak yerine bir koşulu sağlayan elemen olduğunu bulmak istersek some() metodunu kullanırız.

find() metoduna callback ve thisArg geçilebilir.

callback 3 tane parametre alabilir.
1. element - array'deki o anda ziyaret edilen nesne
2. index -  array'deki o andaki index
3. array - ziyaret edilen array

Örnek - 3 parametreli callback
Şöyle yaparız

listPerson.find(findPerson, {id});
function findPerson(element, index, array) {
  return element.id === this.id;
}

Örnek - 1 parametreli callback
Şöyle yaparız.

const numbers=[10,20,30,40,50]

const output=numbers.find(function(n){
  return n>num
});

Örnek  - 1 parametreli closure
Şöyle yaparız.

listPerson.find(element => element.id === id);

Örnek -  1 parametreli closure
Şöyle yaparız.

var Obj1 = {id: 2, name: 'Banana'}
var ArrObj = [{id: 1, name: 'Apple', 'eat': 'rice'}, {'id': 2, 'name': 'Banana'}];
var res = ArrObj.find(({id}) => id === Obj1.id );
console.log(res);




HTML P Tag

Bu tag'in izlediği hiyerarşi şöyle olmalı

<h1> > <h2> > <h3> > <h4> > <h5> > <h6> > <p>