Vue 배열 응답식 조작 및 고급 함수 사용 코드 상세 설명

배열의 응답식 조작
//this.letters.push('123');//끝에 요소 추가
//this.letters.pop();//끝에서 요소 삭제
//this.letters.unshift('111');//처음에 요소 추가
//this.letters.shift();//처음부터 요소 삭제
//this.letters.splice(1,2);//1 로 표시된 요소부터 두 요소 삭제
//this.letters.splice(1,2,'777','888');//아래에 1로 표시된 요소부터 두 요소를 삭제하고 새 요소를 삽입합니다.
//this.letters.splice(1, 0, '777', '888');//아래 첨자 1에 두 요소 삽입
//this.letters.splice(2);//이전 두 요소를 보존하고 다른 요소는 삭제합니다
고급 함수
1. 필터 함수
필터도 Array의 일부 요소를 필터링한 다음 나머지 요소를 되돌려주는 데 자주 사용되는 작업입니다.
filter는 전송된 함수를 각 요소에 순서대로 작용한 다음 반환값이true인지false인지에 따라 이 요소를 보존할지 버릴지 결정합니다.

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
  // 100 true， newArray 
  return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

2,map 고급 함수
맵 함수 역시 수조의 모든 항목을 훑어볼 수 있습니다. 메타데이터 함수는 매개 변수이고,num은 맵이 훑어보는 모든 항목입니다. 메타데이터 함수function 메타데이터는 새 수조에 추가됩니다.

const nums = [2,3,5,1,77,55,100,200];
let newArray = nums.filter(function (n) {
  // 100 true， newArray 
  return n < 100;
})
console.log(newArray);//[2,3,5,1,77,55]

3,reduce 고급 함수
reduce 함수 역시 수조의 모든 항목을 훑어보고 리셋 함수와'0'을 매개 변수로 전송합니다. 0은 리셋 함수에서preValue의 초기 값이 0임을 나타냅니다. 리셋 함수에서 매개 변수preValue는 리셋 함수function에서 되돌아오는 값이고currentValue는 현재 값입니다.

const nums = [2,3,5,1,77,55,100,200];
let new3Array = nums.reduce(function (preValue,currentValue) {
  // [2,3,5,1,77,55,100,200]， 0+2=2， preValue 2， 2+3=5， 
  return preValue+currentValue;
},0);// 0 preValue 
console.log(new3Array);//443

4.sort 정렬 알고리즘
Array의sort() 방법은 기본적으로 모든 요소를 String으로 변환하고 정렬하기 때문에, 결과'10'은'2'의 앞에 있습니다. 문자'1'은 문자'2'의 ASCII 코드보다 작기 때문입니다.sort () 방법의 기본 정렬 규칙을 모르면 숫자를 직접 정렬하여 절대 구덩이에 빠뜨립니다!

// ， ：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
}); // [1, 2, 10, 20]

// ， ：
var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return 1;
  }
  if (x > y) {
    return -1;
  }
  return 0;
}); // [20, 10, 2, 1]

이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.