반응하기 전에 이것을 배우십시오

이 기사에서는 React/React Native의 효과적인 첫 학습 주기를 갖기 위해 알아야 할 기본 Javascript 개념을 살펴봅니다.

목차


  • 지도() 및 필터()
  • 슬라이스() 및 스플라이스()
  • concat()
  • find() & findIndex()
  • 파괴
  • 레스트 & 스프레드 오퍼레이터
  • 약속하다

  • 지도 및 필터



    둘 다 배열 메서드이며 필터를 적용할 때 둘 다 새 배열을 반환하여 일치하지 않는 항목을 추가로 제거합니다.

    지도:

    const Data =[
        {id: '1',title: "car"},
        {id: '2',title: "bus"},
        {id: '3',title: "plane"},
        {id: '4',title: "train"},
        {id: '5',title: "ship"},
    ]
    
    const upperData = Data.map(element => element.title.toUpperCase());
    console.log(upperData)
    



    Output:
    ['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']
    


    필터:

    const Data =[
        {id: '1',title: "car"},
        {id: '2',title: "bus"},
        {id: '3',title: "plane"},
        {id: '4',title: "train"},
        {id: '5',title: "ship"},
    ]
    
    const filterData = Data.filter(element => element.id %2 === 0);
    console.log(filterData)
    



    Output:
    [ { id: '2', title: 'bus' }, { id: '4', title: 'train' } ]
    


    슬라이스 및 스플라이스



    메서드는 선택한 요소가 포함된 새 배열을 반환하고 splice 메서드는 기존 배열의 내용을 변경합니다.

    접착:

    const Data =[
        'Car',
        'Bus',
        'Helicopter',
        'Train'
    ]
    
    const CopyArray = [...Data]
    
    CopyArray.splice(0,1)
    console.log(CopyArray)
    



    Output:
    ['Bus', 'Helicopter', 'Train']
    



    const Data =[
        'Car',
        'Bus',
        'Helicopter',
        'Train'
    ]
    
    const CopyArray = [...Data]
    
    CopyArray.splice(CopyArray.length,1,"Plane")
    console.log(CopyArray)
    



    Output:
    ['Car', 'Bus', 'Helicopter', 'Train', 'Plane']
    


    일부분:

    const Data =[
        'Car',
        'Bus',
        'Helicopter',
        'Train'
    ]
    
    const CopyArray = [...Data]
    
    const newArray = CopyArray.slice(0,2)
    console.log(newArray)
    console.log(Data)
    



    Output:
    ['Car', 'Bus']
    ['Car', 'Bus', 'Helicopter', 'Train']
    


    연결



    이 메서드는 두 개 이상의 배열을 병합하는 새로운 배열을 반환합니다.

    연결:

    const array1 = [1, 2, 3, 4, 5];
    const array2 = [6, 7, 8, 9, 10];
    const array3 = [11, 12, 13, 14, 15];
    
    const mergeArray = array1.concat(array2, array3);
    
    console.log(mergeArray);
    



    Output:
    [
       1,  2,  3,  4,  5,  6,
       7,  8,  9, 10, 11, 12,
      13, 14, 15
    ]
    


    찾기 및 찾기인덱스



    find 메서드는 조건을 만족하는 첫 번째 요소를 반환하고 findIndex는 해당 요소의 인덱스를 반환합니다.

    찾기인덱스:

    const data = [
      { id: 1, title: "first" },
      { id: 2, title: "second" },
      { id: 3, title: "third" },
      { id: 4, title: "fourth" },
    ];
    
    const itemIndex = data.findIndex((element) => element.id === 3);
    console.log(itemIndex);
    



    Ouput:
    2
    


    찾기:

    const data = [
      { id: 1, title: "first" },
      { id: 2, title: "second" },
      { id: 3, title: "third" },
      { id: 4, title: "fourth" },
    ];
    
    const item = data.find((element) => element.id === 3);
    console.log(item);
    
    



    Output:
    { id: 3, title: 'third' }
    


    파괴



    소멸 할당은 배열 또는 개체 속성의 값을 변수로 직접 압축 해제(할당)할 수 있는 특수 구문입니다.

    const name = ["jack", "pritom"];
    
    const [firstName, lastName] = name;
    
    console.log(firstName, lastName);
    
    



    Output:
    jack pritom
    



    const data = {
      id: 1,
      name: "jack pritom",
      loveMusic: true,
      species: "human",
    };
    
    const { name: dataName, species, ...rest } = data;
    
    console.log(dataName);
    console.group(species);
    console.group(rest);
    



    Output:
    jack pritom
    human
    { id: 1, loveMusic: true }
    


    휴식 및 확산 연산자



    나머지 매개변수를 사용하면 지정되지 않은 수의 매개변수를 배열에 배치할 함수에 전달할 수 있으며, 확산 연산자를 사용하면 반복 가능한(즉, 배열)의 내용을 개별 요소로 확산할 수 있습니다.

    확산:

    const introduction = ["my", "name", "is", "jack"];
    
    const copyArr = [...introduction];
    console.log(copyArr);
    console.log(...copyArr);
    



    Output:
    [ 'my', 'name', 'is', 'jack' ]
    my name is jack
    


    쉬다:

    const getSize = (...args) => {
      return args.length;
    };
    
    console.log(getSize(1, 2, 3));
    console.log(getSize(10, 20, 30, 100));
    
    



    Output:
    3
    4
    


    약속하다



    간단히 말해서 약속은 비동기 작업을 처리하는 데 사용됩니다. 각 Promise는 성공 또는 실패로 끝날 수 있으며 세 가지 상태(보류, 이행 또는 거부)가 있을 수 있습니다. 아래 예에서는 API에서 데이터를 가져오는 동안 async await 구문으로 약속을 처리합니다.

    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
    
        if (!response.ok) throw new Error(response.status);
        const result = await response.json();
        return result;
      } catch (e) {
        console.log(e);
      }
    };
    
    


    나를 따라와 : Github

    좋은 웹페이지 즐겨찾기