【前端算法】将数组中的0移动到数组末尾

简介: 灵活使用双指针思想

将数组中的0移动到数组末尾

  • 如输入[1,0,3,0,11,0],输出[1,3,11,0,0,0,]
  • 只移动0,其他顺序不变
  • 必须在原数组进行操作

如果不限制“必须咋原数组操作”

  • 定义arr1、arr2 两个数组
  • 遍历数组,非0的push到arr1, 0的push到arr2
  • 最后返回arr1.concat(arr2)

传统思路

  • 遍历数组,遇到0则push到数组末尾
  • 用slipce截取掉当前元素
  • 时间复杂度是O(n^2) ——算法不可用

代码实现

function moveZero1 (arr:number[] ):void {
  const len = arr.length
  if(len === 0) return

  // 记录0的个数
  let zeroLen = 0

  //O(n^2)
  for (let i = 0; i < len - zeroLen; i++) {
    if (arr[i] === 0) {
      arr.push(0) // 在末尾加0
      arr.splice(i,1) // 删除原来的0,O(n)
      i-- // 数组截取了一个元素,i要递减,否则遇到连续的0户报错
      zeroLen++ // 记录0的个数 +1
    }
  }
}

功能测试

const arr = [1,0,3,0,11,0]
moveZero1(arr)
console.log(arr)

结果

[ 1, 3, 11, 0, 0, 0 ]

单元测试

describe('移动数组的0到末尾',() => {
  it('正常情况', () => {
    const arr = [1,0,3,0,11,0]
    moveZero1(arr)
    expect(arr).toEqual([ 1, 3, 11, 0, 0, 0 ])

  })

  it('没有0', () => {
    const arr = [ 1, 3, 11]
    moveZero1(arr)
    expect(arr).toEqual([ 1, 3, 11])
  })

  it('全是0', () => {
    const arr = [ 0,0,0,0,0]
    moveZero1(arr)
    expect(arr).toEqual([ 0,0,0,0,0])
  })
})

使用双指针优化

  • 定义j指向第一个0,i指向j后面的第一个非0
  • 交换i和j的值,继续向后移动
  • 只遍历一次,时间复杂度O(n)

代码实现

function moveZero2 (arr:number[]):void {
  const len = arr.length
  if(len === 0) return

  let i 
  let j = -1 // 指向第一个0

  for (i = 0; i < len; i++) {
    if (arr[i] === 0) {
      if (j < 0) {
        j = i
      }
    }

    if (arr[i] !== 0 && j >= 0) {
      // 交换
      const temp = arr[i] // 非0 赋值给临时变量
      arr[i] = arr[j] // 将0移动到原来非0的位置
      arr[j] = temp // 非0 赋值给原来0的位置
      j++ // 交换完毕,向前一步

    }
  }
}

功能测试

const arr = [ 1, 11, 0, 0, 3, 0 ]
moveZero2(arr)
console.log(arr)

结果

[ 1, 11, 3, 0, 0, 0 ]

单元测试

describe('移动数组的0到末尾',() => {
  it('正常情况', () => {
    const arr = [1,0,3,0,11,0]
    moveZero2(arr)
    expect(arr).toEqual([ 1, 3, 11, 0, 0, 0 ])

  })

  it('没有0', () => {
    const arr = [ 1, 3, 11]
    moveZero2(arr)
    expect(arr).toEqual([ 1, 3, 11])
  })

  it('全是0', () => {
    const arr = [ 0,0,0,0,0]
    moveZero2(arr)
    expect(arr).toEqual([ 0,0,0,0,0])
  })
})

性能比较

const test1 = []
for (let i = 0; i < 100 * 10000; i++) {
  if(i % 10 === 0) {
    test1.push(0)
  } else {
    test1.push(i)
  }
  
}
console.time('moveZero1')
moveZero1(test1)
console.timeEnd('moveZero1')

const test2 = []
for (let i = 0; i < 100 * 10000; i++) {
  if(i % 10 === 0) {
    test2.push(0)
  } else {
    test2.push(i)
  }
  
}

console.time('moveZero2')
moveZero2(test2)
console.timeEnd('moveZero2')

打印结果

moveZero1: 29.445s
moveZero2: 3.641ms

100万数据测试,双指针完胜循环嵌套

总结

  • 向面试官确认:是否必须修改原数组?
  • 数组是连续存储结构,要慎用splice、unshift等API
  • 双指针思路
相关文章
|
1月前
|
算法
Leetcode 初级算法 --- 数组篇
Leetcode 初级算法 --- 数组篇
37 0
|
3月前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
37 0
|
3月前
|
算法 测试技术
【算法】二分算法——寻找旋转排序数组中的最小值
【算法】二分算法——寻找旋转排序数组中的最小值
|
27天前
|
算法 程序员 索引
数据结构与算法学习七:栈、数组模拟栈、单链表模拟栈、栈应用实例 实现 综合计算器
栈的基本概念、应用场景以及如何使用数组和单链表模拟栈,并展示了如何利用栈和中缀表达式实现一个综合计算器。
26 1
数据结构与算法学习七:栈、数组模拟栈、单链表模拟栈、栈应用实例 实现 综合计算器
|
13天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
20天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
27天前
|
存储 算法 定位技术
数据结构与算法学习二、稀疏数组与队列,数组模拟队列,模拟环形队列
这篇文章主要介绍了稀疏数组和队列的概念、应用实例以及如何使用数组模拟队列和环形队列的实现方法。
20 0
数据结构与算法学习二、稀疏数组与队列,数组模拟队列,模拟环形队列
|
1月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
44 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
21天前
|
移动开发 算法 前端开发
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
19 0
|
2月前
|
算法 前端开发 机器人
一文了解分而治之和动态规则算法在前端中的应用
该文章详细介绍了分而治之策略和动态规划算法在前端开发中的应用,并通过具体的例子和LeetCode题目解析来说明这两种算法的特点及使用场景。
一文了解分而治之和动态规则算法在前端中的应用