정보실

웹학교

정보실

javascript 배열 작업 치트 시트

본문

배열은 광범위한 사용 사례가 있는 목록과 같은 객체입니다. 내 의견으로는 가장 일반적인 것이 이 치트 시트에 설명되어 있습니다.


https://devinduct.com/cheatsheet/8/array-operations 


새 배열 만들기 


let cars = ['Mazda', 'Ford', 'BMW'];
// or
let cars = new Array('Mazda', 'Ford', 'BMW');

console.log(cars); // outputs ['Mazda', 'Ford', 'BMW']

항목 접근하기


let car = cars[1];
console.log(car); // outputs 'Ford'

항목은 색인을 통해 액세스 됩니다. 0에서 인덱싱 시작


배열 끝 부분에 새 항목 추가 


let newLength = cars.push('Opel');
console.log(cars); // outputs ['Mazda', 'Ford', 'BMW', 'Opel']

메서드 push는 배열의 새로운 길이를 반환합니다. 이 예에서는 숫자 4를 반환합니다.


배열 시작 부분에 새 항목 추가 


let newLength = cars.unshift('Renault');
console.log(cars); // outputs ['Renault', 'Mazda', 'Ford', 'BMW', 'Opel']

메서드 unshift는 배열의 새로운 길이를 반환합니다. 이 예에서는 숫자 5를 반환합니다.


배열 끝에서 항목 제거 


let removedItem = cars.pop();
console.log(cars); // outputs ['Renault', 'Mazda', 'Ford', 'BMW']

메소드 pop은 제거 된 항목을 리턴합니다. 이 예에서는 'Opel'텍스트를 반환합니다.


배열 앞에서 항목 제거 


let removedItem = cars.shift();
console.log(cars); // outputs ['Mazda', 'Ford', 'BMW']

메서드 shift는 제거 된 항목을 반환합니다. 이 예에서는 'Renault'텍스트가 반환됩니다.


특정 위치에서 항목 제거 


let removedItem = cars.splice(2, 1);
console.log(cars); // outputs ['Mazda', 'Ford']

메서드 splice는 제거 된 항목을 반환합니다. 이 예에서는 하나의 항목 [ "BMW"]이있는 배열을 반환합니다.


특정 위치에 항목 추가 


let removedItem = cars.splice(1, 0, 'BMW');
console.log(cars); // outputs ['Mazda', 'BMW' 'Ford']

위의 코드는 위치 1에 새 항목 (BMW)을 삽입합니다. 두 번째 매개 변수는 삭제할 항목의 개수입니다. splice를 호출 한 후 아무것도 삭제하지 않았으므로 반환 된 배열은 비어 있습니다 (0은 두 번째 매개 변수로 제공됨)


특정 위치의 항목 바꾸기 


let removedItem = cars.splice(2, 1, 'Renault');
console.log(cars); // outputs ['Mazda', 'BMW', 'Renault']

이 경우 splice 메서드는 하나의 항목 [ 'Ford']이 있는 배열을 반환합니다.


배열 반전(Reverse) 


let carsRev = cars.reverse();
console.log(cars); // outputs ['Renault', 'BMW', 'Mazda']

참고 : 원래 배열을 역순으로 수정합니다.


정렬(Sorting) 


메서드 sort는 배열의 요소를 정렬하고 정렬 된 요소를 반환합니다.


let cities = ['Paris', 'London', 'New York', 'Barcelona', 'Madrid', 'San Francisco'];
cities.sort();
console.log(cities); // outputs ['Barcelona', 'London', 'Madrid', 'New York', 'Paris', 'San Francisco']

// custom sorting function - sorts our array by name length in ascending order
cities.sort((cityA, cityB) => {
   // if the result is less than 0 cityA comes first
   // if the result is greater than 0 cityB comes first
   // if the result is equal to 0 the items remain unchanged concerning each other
   return cityA.length - cityB.length;
});

console.log(cities); // outputs ['Paris', 'London', 'Madrid', 'New York', 'Barcelona', 'San Francisco']

참고 : sort 메서드는 원래 배열을 수정합니다.


필터링(Filtering) 


배열 필터 메서드는 콜백에서 제공된 조건을 통과 한 항목으로 채워진 새 배열을 반환합니다. 요소가 조건을 통과하지 않으면 빈 배열이 반환됩니다.


// example 1
let citiesByLength = cities.filter(city => {
    return city.length > 6;
});
console.log(citiesByLength) // outputs ['New York', 'Barcelona', 'San Francisco']

// example 2
let citiesWithTwoWords = cities.filter(city => {
    let words = city.split(' '); // split by an empty space;
    return words.length > 1;
});

console.log(citiesWithTwoWords); // outputs ['New York', 'San Francisco'];

참고 : 필터 메서드는 원래 배열을 수정하지 않습니다.


특정 항목 또는 해당 색인 찾기 


메소드 find 및 findIndex는 조건을 만족하는 배열에서 첫 번째 항목의 값을 반환합니다.


// find an item
let city = cities.find(city => {
    return city === 'London';
})

페이지 정보

조회 72회 ]  작성일19-07-28 23:04

웹학교