JS数组学习之splice方法

AbnerMing 发布于2019-08-20 11:57 / 2000人阅读

摘要：确认需要移除的长度，最小为，确认原数组变化后的新长度按照索引位置，获取长度的新数组，用于返回对原数组进行替换新元素。

array.splice(start,deleteCount,item1,item2....)

splice方法从array移除n个元素(大于或等于0)，并且可以用新的item替换被移除的元素。参数start是从数组array中移除元素的最开始位置（数组的索引，正负数表示方向，负数表示从数组末尾开始往前数,但是不论正负，移除的方向始终是索引递增的方向）。参数deleteCounts是要移除的元素个数(如果设置为 0，则不会删除)。后面的items用来替换被移除的位置上(可多可少)。splice最终返回一个包含被移除元素的数组，并且原数组也被改变。

splice主要作用是从一个数组中删除元素（改变原数组），slice主要作用是从数组中复制一段元素（不改变原数组），两者有本质区别

用法：

var a = [1,2,3,4,5],b=a.splice(0,2,6,7,8);
//a ==> [6, 7, 8, 3, 4, 5]
//b ==> [1,2]

原生方法实现分析:

确认开始索引位置 start，最小为0。

确认需要移除的长度 deleConuts，最小为0，

确认原数组变化后的新长度

按照索引位置，获取deleConuts长度的新数组，用于返回

对原数组进行替换items新元素。

最终代码实现

//按照步骤，数组会被分成3个部分，左边,arr_left,中间被删除arr_delete,右边arr_right
Array.prototype.splice = function(start,deletCounts){
    var max = Math.max,
        min = Math.min,
        len = this.length,//数组长度
        insertCounts = max(arguments.length - 2 ,0),//用来替换的数组的个数，不包括参数值中的前2个
        result = [],//存储用来返回的数组
        ;
    //确定索引开始位置
    start = start >= 0 ? start || len + start ;//负数表示从数组末尾开始往前数
    //最多能删除从索引开始到数组结束位置 
    deletCounts = max(min(typeof "deletCounts" === "number" ? deletCounts : len ,len - start),0);
    var changeCounts = insertCounts - deletCounts ,//新增-删除
        new_len = len + changeCounts ;//原数组变化后的新长度
    //生成返回的数组    
    for (var i = 0; i < deletCounts; i++) {
        var item = this[start + i];//从索引开始后的元素（包括start）
        if(item !== undefined){
            //超过原数组最大索引值会不存在
            result[i] = item
        }
        if(start + i > len - 1){
            //超过原数组最大索引，后续不需要再处理
            break 
        }
    } 
    //替换被删除项
    var arr_right_length = len - start - deletCounts;//右边arr_right长度
    if(changeCounts > 0 ){
        //新增大于删除，则将数组右边部分arr_right 向右挪动差值个单位，相当于右边的索引都增加 changeCounts(防止有重叠部分，从右往左复制)
        var i = 1;
        while(arr_right_length){
            this[new_len - i] = this[len - i];
            k ++;
            arr_right_length -- ;
        }
    }else if(changeCounts < 0){
        //新增小于删除，则将右边arr_right 向左挪动差值个单位
        var i = start + insertCounts ;//右边新的索引
        for(var k = 0 ;k < arr_right_length ;k++){
            this[i] = this[i - changeCounts] ;//因为是负数，所以 i -changeCounts表示更大
            i ++ ;
        }
        this.length = new_len;//需要手动修改数组长度
    }   
    for(var i = 0;i < insertCounts ; i++){
        //对新增的部分进行赋值处理
        this[start + i] = arguments[2+i]
    }
    //返回被删除的元素
    return result
}

附上一图，希望能够更明了（画工太拙劣）：

不对的地方还望指导，谢谢！

云服务器 GPU云服务器 js数组splice用法学习之substr() 深度学习之概要 webrtc学习之九

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80723.html

php学习之留言板

摘要：用到对数据进行删除，具体请看的编写相关姿势有发送请求字符串模板页面元素内容赋值请求返回到这，整体结构就完成了。前言在对php语法有一定了解之后开始，这是第一个php练手项目，涵盖的知识有公共部分的引用表单的提交请求的接收与响应 interface+implements的使用基于文件的所处理的增删改查 json的格式化与字符串序列化项目地址message boardps...

biaoxiaoduan 2019-06-27 16:18 评论0 收藏0
jQuery源码学习之event

摘要：回调队列中的元素是对象，代表一个事件回调，拥有多个属性，如等等，其中是回调函数，在触发时通过传递，具体的在后面讲。类型是时键表示事件名，规则同上，键值表示事件触发时的回调函数。 jQuery源码学习之event jQuery的事件机制为异步回调，事件监听的属性、参数和回调的等保存在Data实例中，在元素上保存该对象的引用。有方法handle，内部执行dispatch；有属性events...

XboxYan 2019-08-26 12:11 评论0 收藏0
JS学习之Object

摘要：文中的多为构造函数原型对象属性为函数的专属属性，表示函数的原型对象。关于各种数据类型的属性的展示对象的构造器函数该属性指向创建该对象原型的构造函数。对对象的冻结状态的设置和判断，前者让冻结对象，后者判断对象是否被冻结。前言上篇文章介绍了JS的对象,本文将介绍Object这个基类，主要介绍其属性和方法（其实这些在MDN里都有^_^,点击这里可以直通MDN）。好了废话不多说了，直接开始...

qujian 2019-08-20 13:42 评论0 收藏0
JS学习之JSON数据格式

摘要：简析简介，是一种数据格式而不是编程语言，它和并没有从属关系，任何编程语言都可以使用语法规则分为三类简单值与语法相同，可以在中表示字符串，数值，布尔值和，但是其不支持数值字符串对象键值和键名都得用双引号数组解析和序列化目标对象，过滤器，字符串 JSON简析 1.简介 JSON，是一种数据格式而不是编程语言，它和JavaScrip并没有从属关系，任何编程语言都可以使用JSON; 2.语法...

isaced 2019-08-21 17:21 评论0 收藏0
集合框架源码学习之HashMap(JDK1.8)

摘要：所谓拉链法就是将链表和数组相结合。若遇到哈希冲突，则将冲突的值加到链表中即可。在编写程序中，要尽量避免。目录： 0-1. 简介 0-2. 内部结构分析　　0-2-1. JDK18之前　　0-2-2. JDK18之后 0-3. LinkedList源码分析　　0-3-1. 构造方法　　0-3-2. put方法　　0-3-3. get方法　　0-3-4. resize方法 ...

yangrd 2019-08-15 15:15 评论0 收藏0