JavaScript 배열 방법: Mutator VS Non Mutator 및 반환 값

최초 출시 my blog
JavaScript 배열 방법을 사용하면 데이터를 조작할 수 있습니다.그러나 우리는 그것들을 조심스럽게 사용해야 한다. 이것은 그것들이 우리의 진열을 어떻게 조작하느냐에 달려 있다.그중 일부는 불변성에 의존하고, 다른 일부는 가변 방식을 사용한다.그들이 우리의 데이터를 어떻게 조작하는지 이해하면 예측 가능한 응용 프로그램을 구축하는 데 도움을 줄 수 있다.
본고에서, 나는 당신에게 변이와 비변이 수조의 방법과 그 반환 값을 이해하도록 인도할 것입니다.
주의해라, 본고는 수조 방법에 대한 소개가 아니다.나는 변성이 쉽고 불변성에 관심을 가질 것이다.그래서 만약 당신이 수조 방법의 초보자라면, 이 글은 당신에게 도움이 될 것입니다.

2020년 15개 필수 JavaScript 배열 방법

이브라히마 엔도르・ 20년 1월 9일・ 4분 읽기

#javascript #beginners

그렇지 않으면, 우리 시작합시다.

Mutator array methods

sort()

unshift()

shift()

splice()

push()

reverse()

pop()

fill()

forEach()

Non-mutator array methods

slice()

join()

includes()

filter()

concat()

every()

find()

findIndex()

map()

reduce()

some()

flat()

flatMap()

변이자 진열 방법

다음 방법은 그룹을 수정합니다.

정렬 ()

그것은 수조의 원소를 정렬한다.
반환값: 정렬된 배열.

const myAwesomeArray = [5, 4, 3, 2, 1]

// Sort from smallest to largest
myAwesomeArray.sort((a, b) => a - b)
//------->return value: [1, 2, 3, 4, 5]

이동 취소()

그것은 하나 이상의 요소를 그룹의 시작에 추가합니다.
반환값: 배열의 새 길이입니다.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.unshift(6)
//------->return value: (6)

shift（）

그것은 그룹에서 첫 번째 요소를 삭제합니다.
반환값: 삭제된 요소 또는 undefined (그룹이 비어 있는 경우)

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.shift()
//------->return value: (5)

맞춤법 ()

기존 요소를 삭제하거나 대체하거나 새 요소를 추가합니다.
반환값: 삭제된 요소/요소를 포함하는 배열입니다.요소를 삭제하지 않으면 빈 그룹으로 돌아갑니다.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.splice(0, 1, 8)
//------->return value: [5]

밀어넣기 ()

그것은 하나 이상의 요소를 그룹의 끝에 추가합니다.
반환값: 배열의 새 길이입니다.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.push(7)
//------->return value: (6)

대칭 이동()

그것은 수조를 반전시킨다.
반환값: 배열 반전.

const myAwesomeArray = ["e", "d", "c", "b", "a"]

myAwesomeArray.reverse()
//------->return value: ['a', 'b', 'c', 'd', 'e']

pop（）

그것은 그룹에서 마지막 요소를 삭제합니다.
반환값: 그룹에서 삭제된 요소입니다. 그룹이 비어 있으면 undefined 반환합니다.

const myAwesomeArray = [5, 4, 3, 2, 1]

myAwesomeArray.pop()
//------->return value: 1

채우기()

그것은 같은 값으로 그룹의 모든 요소를 채웁니다.
반환값: 수정된 배열.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.fill(0, 1, 3)
//------->return value: [1, 0, 0, 4, 5]

forEach（）

그것은 함수를 수조의 모든 요소에 적용한다.
반환값: 반환undefined.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.forEach(element => console.log(element.name))
//------->return value: undefined

비변이 수조 방법

다음 방법은 그룹을 수정하고 그룹의 일부 표시 형식을 되돌려 주지 않습니다.

슬라이스 ()

그것은 정수조의 일부분을 추출한다.
반환값: 추출된 요소를 포함하는 새 그룹입니다.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.slice(0, 3)
//------->return value: [1, 2, 3]

join（）

그것은 그룹의 모든 요소를 문자열로 연결합니다.
반환값: 모든 그룹 요소가 연결된 문자열입니다. 그룹이 비어 있으면 빈 문자열을 반환합니다.

const myAwesomeArray = ["JavaScript", "is", "awesome"]

myAwesomeArray.join(" ")
//------->return value: "JavaScript is awesome"

포함 ()

이것은 그룹에 주어진 값이 포함되어 있는지 확인합니다.
반환 값: 부울 값 true 또는 false 을 반환합니다.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.includes(3)
//------->return value: true

필터()

그것은 어떤 요소가 테스트를 통과했는지 확인하기 위해 함수 필터 그룹을 사용한다.
반환값: 테스트를 통과한 요소를 포함하는 새 그룹입니다. 그렇지 않으면 빈 그룹입니다.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
]

myAwesomeArray.filter(element => element.name === "Mass")
//-------> return value : [{id: 3, name: "Mass"},
//                  {id: 4, name: "Mass"}]

concat（）

그것은 연결을 통해 두 개 이상의 그룹/값을 합칠 것이다.
반환값: 배열/값이 연결된 새 배열.

const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> return value : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

매()

그것은 수조의 모든 요소가 테스트 함수를 통과했는지 검사한다.
반환 값: 부울 값 true 또는 false 을 반환합니다.

const myAwesomeArray = ["a", "a", "a", "a", "a"]

myAwesomeArray.every(test => test === "a")
//-------> return value : true

찾기 ()

그것은 제공된 테스트 기능을 만족시키는 요소를 찾았다.
반환값: 테스트 함수의 첫 번째 요소를 만족시킵니다. 그렇지 않으면 undefined 반환됩니다.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.find(element => element.id === 3)
//-------> return value : {id: 3, name: "Mass"}

findIndex（）

테스트 함수를 충족시키는 요소를 찾은 인덱스를 되돌려줍니다.
반환값: 테스트 함수의 첫 번째 요소를 만족시키는 인덱스입니다. 그렇지 않으면 -1 반환됩니다.

const myAwesomeArray = [
  { id: 1, name: "john" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
]

myAwesomeArray.findIndex(element => element.id === 3)
//-------> return value : 2

지도 ()

이것은 함수를 매개 변수로 합니다. 이 매개 변수는 그룹의 모든 요소에서 실행됩니다.
반환값: 리셋 함수 결과를 포함하는 모든 요소를 포함하는 새 그룹입니다.

const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)

//-------> return value : [25, 16, 9, 4, 1]

감소()

이것은 그룹의 모든 요소에reducer 함수를 실행합니다.
반환 값: 그룹이 줄어든 후 얻은 단일 값입니다.

const myAwesomeArray = [1, 2, 3, 4, 5]

myAwesomeArray.reduce((total, value) => total * value)
//-------> return value = 120

일부 ()

그것은 테스트 함수와 일치하는 요소가 하나 이상 있는지 확인합니다.
반환 값: 부울 값 true 또는 false 을 반환합니다.

const myAwesomeArray = ["a", "b", "c", "d", "e"]

myAwesomeArray.some(test => test === "d")
//-------> return value : true

납작함 ()

모든 하위 패턴 요소를 새 패턴에 평평하게 배치합니다.
반환값: 연결된 하위 그룹 요소를 포함하는 새 그룹입니다.

const myAwesomeArray = [[1, 2], [3, 4], 5]

myAwesomeArray.flat()
//-------> return value : [1, 2, 3, 4, 5]

평면도()

그것은 함수를 그룹의 모든 요소에 적용한 후에 결과를 하나의 그룹으로 평평하게 한다.
반환값: 모든 요소가 리셋 함수의 결과이고 평평하게 펴진 새 그룹입니다.

const myAwesomeArray = [[1], [2], [3], [4], [5]]

myAwesomeArray.flatMap(arr => arr * 10)
//-------> return value : [10, 20, 30, 40, 50]

BLOG
NEWSLETTER
GITHUB
CODEPEN