자바 스 크 립 트 면접 기법 의 배열 중 일부 로 우 동작

머리말
본 고 는 주로 응용 에서 배열 api 의 일부 소란 조작 을 말한다.
예 를 들 어 한 줄 의 코드 가 평면 화 된 n 차원 배열,배열 의 무 게 를 제거 하고 배열 의 최대 치,배열 의 구 화,정렬,대상 과 배열 의 전환 등;
위의 이 응용 장면 들 을 당신 은 한 줄 의 코드 로 실현 할 수 있 습 니까?
1.평면 화 n 차원 배열
1.궁극 편

[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]].flat(3) //[1,2,3,4,5]
[1,[2,3,[4,5]]].toString() //'1,2,3,4,5'
[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n] 

Array.flat(n)는 ES 10 평면 배열 의 api 로 n 은 차원 을 나타 내 고 n 값 이 Infinity 일 때 차원 은 무한대 이다.
2.시작 편

function flatten(arr) {
 while(arr.some(item=>Array.isArray(item))) {
 arr = [].concat(...arr);
 }
 return arr;
}
flatten([1,[2,3]]) //[1,2,3]
flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]

실질 적 으로 재 귀 와 배열 의 합병 방법 인 concat 를 이용 하여 평면 을 실현 하 는 것 이다.
2.무 거 운 것 을 제거한다
1.궁극 편

Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4])] //[1,2,3,4]

set 는 ES6 에서 새로 나 온 중복 되 지 않 는 배열 의 데이터 형식 입 니 다.Array.from클래스 를 배열 로 바 꾸 는 것 이다.
set 의 값 을 문자열 로 변환 하 는 확장 연산 자
2.시작 편

Array.prototype.distinct = function(){
 var arr = this,
 result = [],
 i,
 j,
 len = arr.length;
 for(i = 0; i < len; i++){
 for(j = i + 1; j < len; j++){
 if(arr[i] === arr[j]){
 j = ++i;
 }
 }
 result.push(arr[i]);
 }
 return result;
}
[1,2,3,3,4,4].distinct(); //[1,2,3,4]

새 배열 의 저장 값 을 취하 고 두 배열 의 값 을 순환 하여 비교 합 니 다.
3.정렬
1.궁극 편

[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],     
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1]   

sort 는 js 내 장 된 정렬 방법 으로 매개 변 수 는 함수 입 니 다.
2.시작 편
거품 정렬:

Array.prototype.bubleSort=function () {
 let arr=this,
 len = arr.length;
 for (let outer = len; outer >= 2; outer--) {
 for (let inner = 0; inner <= outer - 1; inner++) {
 if (arr[inner] > arr[inner + 1]) {
  //  
  [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
  console.log([arr[inner], arr[inner + 1]]);
 }
 }
 }
 return arr;
 }
[1,2,3,4].bubleSort() //[1,2,3,4] 

정렬 선택

 Array.prototype.selectSort=function () {
 let arr=this,
  len = arr.length;
 for (let i = 0, len = arr.length; i < len; i++) {
 for (let j = i, len = arr.length; j < len; j++) {
 if (arr[i] > arr[j]) {
 [arr[i], arr[j]] = [arr[j], arr[i]];
 }
 }
 }
 return arr;
 }
 [1,2,3,4].selectSort() //[1,2,3,4] 

4.최대 치
1.궁극 편

Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
 return Math.max(prev,cur);
},0) //4

Math.max()Math 대상 이 내 장 된 방법 으로 매개 변 수 는 문자열 입 니 다.
reduce 는 ES5 의 배열 api 로 매개 변 수 는 함수 와 기본 초기 값 이 있 습 니 다.
함수 에는 네 개의 인자 가 있 습 니 다.pre(지난번 반환 값),cur(현재 값),curIndex(현재 값 색인),arr(현재 배열).
2.시작 편
우선 정렬 한 다음 값 을 취한 다.
5.화 해 를 구하 다
1.궁극 편

[1,2,3,4].arr.reduce(function (prev, cur) {
 return prev + cur;
 },0) //10 

2.시작 편

function sum(arr) {
 var len = arr.length;
 if(len == 0){
 return 0;
 } else if (len == 1){
 return arr[0];
 } else {
 return arr[0] + sum(arr.slice(1));
 }
}
sum([1,2,3,4]) //10

slice 를 이용 하여 배열 을 바 꾸 고 재 귀 구 화 를 이용 합 니 다.
6.합병
1.궁극 편

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]

2.시작 편

let arr=[1,2,3,4];
[5,6].map(item=>{
 arr.push(item)
}) //arr  [1,2,3,4,5,6],      return  ,return     [5,6]

7.포함 치 판단
1.궁극 편

[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1         
[1, 2, 3].find((item)=>item===3)) //3          undefined
[1, 2, 3].findIndex((item)=>item===3)) //2          -1

includes(),find(),findIndex()는 ES6 api 입 니 다.
2.시작 편

[1,2,3].some(item=>{
 return item===3
}) //true        false

8.클래스 배열 전환
1.궁극 편

Array.prototype.slice.call(arguments) //arguments    (   )
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]

클래스 배열:length 속성 이 있 지만 배열 방법 이 없습니다.
call,apply:slice 에 있 는 this 지향 arguments 를 바 꾸 는 것 이기 때문에 arguments 도 배열 을 호출 할 수 있 는 방법 입 니 다.
Array.from 은 유사 한 배열 이나 교체 가능 한 대상 을 배열 로 만 듭 니 다.
클래스 배열 을 문자열 로 확장 하고 배열 로 정의 합 니 다.
2.시작 편

Array.prototype.slice = function(start,end){ 
 var result = new Array(); 
 start = start || 0; 
 end = end || this.length; //this       ，   call ，    this   ，           ，     
 for(var i = start; i < end; i++){ 
  result.push(this[i]); 
 } 
 return result; 
 } 

9.각 설정 값
1.궁극 편

[1,2,3].fill(false) //[false,false,false] 

fill 은 ES6 의 방법 입 니 다.
2.시작 편

[1,2,3].map(() => 0)

10.모든 항목 이 만족 하 는 지 여부

[1,2,3].every(item=>{return item>2}) //false

every 는 ES5 api 입 니 다.모든 만족 은 true 로 돌아 갑 니 다.
11.만족

[1,2,3].some(item=>{return item>2}) //true

some 는 ES5 api 입 니 다.만족 하 는 반환 true
12.필터 배열

[1,2,3].filter(item=>{return item>2}) //[3]

filter 는 ES5 api 로 추 가 된 항목 을 만족 시 키 는 배열 을 되 돌려 줍 니 다.
13.대상 과 배열 전환

Object.keys({name:'  ',age:14}) //['name','age']
Object.values({name:'  ',age:14}) //['  ',14]
Object.entries({name:'  ',age:14}) //[[name,'  '],[age,14]]
Object.fromEntries([name,'  '],[age,14]) //ES10 api,Chrome    , firebox  {name:'  ',age:14}

총결산
이상 은 이 글 의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.