如何在JavaScript中等分数组的实现


Posted in Javascript onDecember 13, 2020

最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。

github 地址:https://github.com/qq449245884/vue-okr-tree

在本教程中,我们来学习一下如何使用Array.splice()方法将数组等分,还会讲一下,Array.splice() 和 Array.slice() 它们之间的不同之处。

1. 将数组分为两个相等的部分

我们可以分两步将数组分成两半:

使用length/2和Math.ceil()方法找到数组的中间索引

使用中间索引和Array.splice()方法获得数组等分的部分

Math.ceil() 函数返回大于或等于一个给定数字的最小整数。

const list = [1, 2, 3, 4, 5, 6];
const middleIndex = Math.ceil(list.length / 2);

const firstHalf = list.splice(0, middleIndex);  
const secondHalf = list.splice(-middleIndex);

console.log(firstHalf); // [1, 2, 3]
console.log(secondHalf); // [4, 5, 6]
console.log(list);    // []

Array.splice() 方法通过删除,替换或添加元素来更改数组的内容。 而 Array.slice() 方法会先对数组一份拷贝,在操作。

  • list.splice(0, middleIndex) 从数组的0索引处删除前3个元素,并将其返回。
  • splice(-middleIndex)从数组中删除最后3个元素并返回它。

在这两个操作结束时,由于我们已经从数组中删除了所有元素,所以原始数组是空的。

另请注意,在上述情况下,元素数为偶数,如果元素数为奇数,则前一半将有一个额外的元素。

const list = [1, 2, 3, 4, 5];
const middleIndex = Math.ceil(list.length / 2);

list.splice(0, middleIndex); // returns [1, 2, 3]
list.splice(-middleIndex);  // returns [4, 5]

2.Array.slice 和 Array.splice

有时我们并不希望改变原始数组,这个可以配合 Array.slice() 来解决这个问题:

const list = [1, 2, 3, 4, 5, 6];
const middleIndex = Math.ceil(list.length / 2);

const firstHalf = list.slice().splice(0, middleIndex);  
const secondHalf = list.slice().splice(-middleIndex);

console.log(firstHalf); // [1, 2, 3]
console.log(secondHalf); // [4, 5, 6]
console.log(list);    // [1, 2, 3, 4, 5, 6];

我们看到原始数组保持不变,因为在使用Array.slice()删除元素之前,我们使用Array.slice()复制了原始数组。

3.将数组分成三等分

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const threePartIndex = Math.ceil(list.length / 3);

const thirdPart = list.splice(-threePartIndex);
const secondPart = list.splice(-threePartIndex);
const firstPart = list;   

console.log(firstPart); // [1, 2, 3]
console.log(secondPart); // [4, 5, 6]
console.log(thirdPart); // [7, 8, 9]

简单解释一下上面做了啥:

  • 首先使用st.splice(-threePartIndex)提取了ThirdPart,它删除了最后3个元素[7、8、9],此时list仅包含前6个元素[1、2、3、4、5、6] 。
  • 接着,使用list.splice(-threePartIndex)提取了第二部分,它从剩余list = [1、2、3、4、5、6](即[4、5、6])中删除了最后3个元素,list仅包含前三个元素[1、2、3],即firstPart。

4. Array.splice() 更多用法

现在,我们来看一看 Array.splice() 更多用法,这里因为我不想改变原数组,所以使用了 Array.slice(),如果智米们想改变原数组可以进行删除它。

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

获取数组的第一个元素

list.slice().splice(0, 1) // [1]

获取数组的前5个元素

list.slice().splice(0, 5) // [1, 2, 3, 4, 5]

获取数组前5个元素之后的所有元素

list.slice().splice(5) // 6, 7, 8, 9]

获取数组的最后一个元素

list.slice().splice(-1)  // [9]

获取数组的最后三个元素

list.slice().splice(-3)  // [7, 8, 9]

到此这篇关于如何在JavaScript中等分数组的实现的文章就介绍到这了,更多相关JavaScript 等分数组内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
javascript实现控制div颜色
Jul 07 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
浅析vue深复制
Jan 29 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
使用Mock.js生成前端测试数据
Dec 13 #Javascript
javascript实现滚轮轮播图片
Dec 13 #Javascript
swiper实现导航滚动效果
Dec 13 #Javascript
swiperjs实现导航与tab页的联动
Dec 13 #Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
javascript前端实现多视频上传
Dec 13 #Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
You might like
php断点续传之如何分割合并文件
2014/03/22 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python实现二叉查找树实例代码
2018/02/08 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
打架检讨书50字
2014/01/11 职场文书
六一节目主持词
2014/04/01 职场文书
五心教育心得体会
2014/09/04 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2014年采购工作总结
2014/11/20 职场文书
旅行社计调工作总结
2015/08/12 职场文书