JavaScript 주제 8: 배열 평면화

1. 재귀

3.apply+some

• 4. toString
• 6. 당신만의 flat tool 방식
• 은 마지막에 작성
• (무료 학습 추천:
• javascript 비디오 튜토리얼

)

1. Recursion for 루프는 배열 연산을 수행할 때 가장 쉽게 생각하는 것은 시간과 공간의 복잡성을 고려하지 않을 때 재귀가 완벽한 선택이어야 한다는 것입니다! 예:

输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

코드:

function flatten(arr) {
    let res = [];
    for (let i = 0; i <p></p>참고: <p><strong></strong></p>배열에 있는 요소의 기본 유형을 결정하세요<p><strong>배열이 아닌 경우: 새 배열에 직접 저장하세요</strong> </p>배열인 경우: 배열이 아닌 마지막 요소가 새 배열에 저장될 때까지 첫 번째 단계를 단계별로 반복합니다.<p><strong></strong></p> 2. 감소<ol>
<li>먼저 가 감소하는 것이 무엇인지 살펴보겠습니다. 의 기능: <code>reduce() </code> 메서드는 배열의 각 요소에 대해 제공한 <code>감소기 함수</code>를 (오름차순으로) 실행하여 그 결과를 단일 반환으로 요약합니다. 값. <li>
<li>예: </li>
</ol><pre class="brush:php;toolbar:false">输入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
输出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

코드:

function flatten(arr) {
    return arr.reduce((prev, next) => {
        // prev表示上一次操作的结果
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
    // 注意reduce的初始值应该是[]，否则无法进行拼接}

reduce是做什么的：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

示例：

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在数组类型的元素，就抹平一层
        arr = [].concat.apply([], arr)
    }
    return arr;}

代码：

let res = [];res  = res.concat({});// 等价于[].concat.apply([], [{}])

注意：

仔细对照方法一和方法二，两者思路完全一致——找到数据类型是数组的子元素，对其进行抹平处理，只不过实现的细节略有不同。

唯一需要注意的地方就是拼接时数据的基本类型要以数组开始。

三、apply+some

既然方法二是方法一的变式，那个方法三也可以说是方法二的变式，但不在采用递归的方式，而是一层一层“拆除”嵌套的方式

先来看看用到的API：

• apply：调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。
• some：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

代码：

arr = [].concat.apply([], arr);// 等价于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)

注意：

大家疑惑的点主要在apply，其实主要目的就是减少括号

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在数组类型的元素，就抹平一层
        arr = [].concat(...arr)
    }
    return arr;}

在本例中：

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item    })}

四、ES6展开运算符

大家可能业也注意到了，方法一到方法三 我们不断的借助现有方法，以精简我们的代码量，本方法也是如此～

我们利用ES6的展开运算符（用于取出参数对象的所有可遍历属性，拷贝到当前对象之中），继续精简方法三：

代码：

function flatten(arr) {
    return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}

五、toString

如果前面四个方法是我们可以实现的主流的方式，那么接下来的几个就是我们可以实现的“非主流”方式，直接上代码！

function flatten(arr) {
    return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}

注意：

将数据转换类型存在类型的限制，如果原始数据是这样的：[1, ‘2’]，那么就会出现问题

六、正则

假如我们默认了类型会被转换这一缺陷，那么还可以通过更暴力里的方式来将数组扁平化：

 /*
 * @private
 * @param {Array} array 需要扁平化的数组
 * @param {number} depth 最多处理几层
 * @param {boolean} [isStrict] 是否严格处理函数
 * @param {Array} [result=[]] 输出的数组
 * @returns {Array}
 */function flatten(array, depth, isStrict, result) {
    result || (result = [])
    // 边界
    if (array == null) return result;

    for (const value of array) {
        if (depth > 0 && Array.isArray(value)) {
            if (depth > 1) {
                flatten(value, depth - 1, isStrict, result)
            } else {
                result.push(...value); // 只拆1层
            }
        } else if (!isStrict) {
            result[result.length] = value        }
    }
    return result;}

注意：

如果是纯数组，貌似没什么问题

const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]

但如果数组内存在对象，就需要消除JSON后的后果，这样更严谨一些～

到这里，六种方法算是包括了大部分数组扁平化的实现，那么如果希望将我们的方法“升级”成工具怎么办？这时候我们就要“抄袭”一下loadsh了~

七、实现自己的扁平化工具方法

这里我们简化了loadsh里的flatten函数，具体改动我们来看代码：

const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]

1. 该方法提供了扁平化层数

rrreee

2. 该方法提供了扁平化后相反的效果

rrreee

isStrict참고:

방법 1

과 방법 2을 주의 깊게 비교하세요. 두 가지 아이디어는 완전히 동일합니다. 배열 데이터 유형은 Smooth it out이지만 약간 다른 세부 사항으로 구현합니다. 주의해야 할 점은 스플라이싱 시 기본 데이터 유형이 배열로 시작해야 한다는 것입니다. Three, apply+some

방법 2는 방법 1의 변형이므로 방법 3도 방법 2의 변형이라고 할 수 있지만 더 이상 재귀적이지 않고 계층별로 "해체"됩니다. 중첩 방법 🎜🎜먼저 사용된 API를 살펴보겠습니다. 🎜🎜🎜apply: 주어진 이 값으로 함수를 호출하고 배열(또는 배열과 유사한 객체) 형식으로 제공합니다. 매개변수. 🎜🎜some: 배열에 있는 하나 이상의 요소가 제공된 기능 테스트를 통과하는지 테스트합니다. 부울 유형 값을 반환합니다 🎜🎜🎜🎜코드: 🎜🎜rrreee🎜🎜참고: 🎜🎜🎜혼란의 주요 지점은 적용입니다. 실제로 주요 목적은 괄호를 줄이는 것입니다 🎜rrreee. 🎜 이 예에서는: 🎜rrreee🎜🎜4. ES6 스프레드 연산자🎜🎜🎜방법 1에서 방법 3까지 우리는 코드 양을 간소화하기 위해 지속적으로 기존 방법에 의존한다는 것을 알 수 있습니다. ~🎜 🎜ES6의 확산 연산자(매개변수 객체의 모든 탐색 가능한 속성을 꺼내서 현재 객체에 복사하는 데 사용됨)를 사용하여 계속해서 간소화된 방법 3: 🎜🎜🎜코드: 🎜🎜rrreee🎜🎜5. 🎜🎜처음 네 가지 방법이 우리가 구현할 수 있는 주류 방법이라면 다음 몇 가지 방법은 우리가 구현할 수 있는 "비주류" 방법입니다. 코드로 이동하세요! 🎜rrreee🎜🎜참고: 🎜🎜🎜데이터를 변환할 때 유형 제한이 있습니다. 원본 데이터가 [1, '2']와 같으면 문제가 발생합니다🎜🎜🎜6 규칙성🎜🎜🎜. 유형이 변환된다는 결함 외에도 더 폭력적인 방법으로 배열을 평면화할 수도 있습니다. 🎜rrreee🎜🎜참고: 🎜🎜🎜순수 배열이면 문제 없는 것 같습니다🎜rrreee🎜하지만 배열에 객체가 있으면 JSON의 결과를 제거해야 더 엄격해집니다~🎜🎜이 시점에서 6가지 방법에는 배열 평면화 구현의 대부분이 포함되어 있으므로 " 우리의 방법을 도구로 업그레이드? 이때 우리는 loadsh를 "표절"해야 합니다~🎜🎜🎜🎜🎜7. 자신만의 평면화 도구 방법을 구현하세요🎜🎜🎜여기서 loadsh의 평면화 기능을 단순화했습니다. 특정 변경 사항에 대한 코드를 살펴보겠습니다.🎜rrreee🎜🎜이 방법은 평면화 레이어 수를 제공합니다🎜🎜rrreee

🎜이 방법은 병합 후 반대 효과를 제공합니다🎜🎜rrreee🎜isStrict 매개변수가 설정된 후 노출된 요소는 병합 후 유지되고 얕은 레이어는 제거됩니다. 요소. 🎜🎜여기에 글을 쓰면서 우리는 플랫 처리 아이디어를 이해했으며 특정 구현 기능을 갖추고 있습니다. 위 코드를 완전히 이해할 수 있다면 플랫 부분이 어렵지 않을 것이라고 믿습니다. loadsh 방법~🎜🎜🎜🎜관련 무료 학습 권장 사항: 🎜🎜🎜javascript🎜🎜🎜(동영상) 🎜🎜🎜

위 내용은 JavaScript 주제 8: 배열 평면화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!