如何在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 相关文章推荐
JS高级笔记
Jul 13 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
javascript每日必学之继承
Feb 23 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 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 开源框架22个简单简介
2009/08/24 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
浅谈python 类方法/静态方法
2020/09/18 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
后进生转化工作制度
2014/01/17 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python