JavaScript의 일반적인 배열 연산 소개(코드 예제)

이 글은 JavaScript의 일반적인 배열 연산(코드 예제)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

일상적인 개발에서 프런트엔드 데이터 처리는 불가분의 관계입니다. 여기서는 ES6/ES7/ES8의 새로운 배열 API를 정리하겠습니다.

Flat n차원 배열

Array.Flat() -- ES10

메소드는 지정된 깊이에 따라 배열을 재귀적으로 순회하고 순회된 하위 배열의 요소와 모든 요소를 ​​병합하여 새 배열로 반환합니다. 그것 . Array.Flat(n)은 평면 배열용 API입니다. n 값이 무한대이면 차원은 무한합니다.

[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)

Flat() 메서드는 배열에서 빈 항목을 제거합니다.

var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

교체 계획 : 핵심은 재귀 및 배열 병합 방법 concat을 사용하여 평면성을 구현합니다

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]

Array.from() 메서드는 유사 배열 또는 반복 가능 개체에서 새 배열 인스턴스를 생성합니다.

From 및 set은 배열을 중복 제거하는 데 사용됩니다. set은 반복되지 않는 배열을 정의하는 ES6의 새로운 데이터 유형입니다. Array.from은 배열과 유사한 배열을 배열로 변환합니다.

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]

교체 계획:

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]

배열 중복 제거 및 병합

function combine(){ 
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
} 
var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));

Sort Array.sort()

[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] 降序

교체 계획: 오름차순

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]

배열에서 최대값 찾기 Math.max()

반환 주어진 세트 숫자의 최대값입니다. 주어진 인수 중 하나 이상을 숫자로 변환할 수 없으면 NaN이 반환됩니다.

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(현재 배열)

summation 감소

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

대안 솔루션: 합계, 슬라이스 가로채기를 사용하여 배열을 변경한 다음 재귀 사용 summation

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]);

merge concat

concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고 새 배열을 반환합니다.

push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

[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]
// 相当于 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply( ['parsnip', 'potato'], ['celery', 'beetroot']);
console.log(vegetables);

교체 계획:

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

값이 포함되어 있는지 확인

includes(), find(), findIndex()는 ES6 API입니다

[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

교체 계획:

[1,2,3].some(item=>{
    return item===3
}) //true 如果不包含返回false

클래스 배열 변환 Array.from() — ES6

Array-like: 길이 속성이 있지만 속성이 음수가 아닌 정수입니다. 일부 배열 메서드가 없지만 이것이 배열 메서드를 사용할 수 없다는 의미는 아닙니다.

예: document.getElementsByTagName('p')은 배열과 같은 값을 반환합니다.
call, 적용: 슬라이스에서 인수를 가리키도록 이를 변경하므로 인수는 배열 메서드를 호출할 수도 있습니다.
Array.from은 유사한 배열이거나 iterable 객체를 배열로 생성합니다
배열 객체의 Slice() 메소드는 원본 배열을 연산하지 않고 배열을 잘라내는 것으로 얕은 복사라고 할 수 있습니다

var a={
    0:"aa",
    1:"cc",
    2:"dd",
    length:3
}
var callArr = Array.prototype.slice.call(a);
var applyArr = Array.prototype.slice.apply(a)
var fromArr = Array.from(a)
console.log(a,callArr, applyArr, fromArr);

Array.prototype.slice 이해:

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;
}

Loop fill -- ES6

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

every -- ES5; 각 항목이 조건을 만족하면 부울 값을 반환합니다.

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

some 하나의 항목이 조건을 만족하면 부울 값을 반환합니다.

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

필터 배열 필터 -- ES5

메소드는 함수에 의해 구현된 테스트의 모든 요소를 ​​제공하는 모든 것을 포함하는 새로운 배열을 생성합니다.

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

객체와 배열은 키, 값, 항목을 변환합니다.

fromEntries

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}

new Map() 생성자는 반복 가능한 항목을 허용합니다. Object.entries 메소드를 사용하면 Object를 Map으로 쉽게 변환할 수 있습니다:

var obj = { foo: "bar", baz: 42 }; 
var map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

[관련 권장사항:

JavaScript 비디오 튜토리얼]

위 내용은 JavaScript의 일반적인 배열 연산 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!