精华内容
下载资源
问答
  • 由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作 对于我们前端来说,数组有两种区别 1、var arr = [ 'aaa' , 'bbb' , 'ccc' ,' ddd' , 'eee' ] 这种暂且称之为纯数组 2、var ...

    由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作

    对于我们前端来说,数组有两种区别

    1、var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ]  这种暂且称之为纯数组

    2、var jsonArr =  [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:'lyy' , age: '18' } ] 这种暂且称之为对象数组

    首先,我们要删除数组中的某一项,我们一定要知道下边三种条件中的其中一种,才能达到精确删除的目的

    1、知道要删除项在数组中的下标

    2、知道要删除项的值

    3、如果要删除项是一个对象,而且我们知道这个对象中的唯一属性值

    //1、知道要删除项的下标值
    //index为删除项的下标值  arr为源数组
    var arrRemoveIndex = function(index,arr) {
        if (!arr || arr.length == 0) {
            return ""
        }
        arr.splice(index,1)
        return arr
    }
    
    //2、知道要删除项的值
    //it 为要删除项的值  arr为源数组
    var arrRemove = function (it, arr) {
        if (!arr || arr.length == 0) {
            return ""
        }
        let flag = arr.indexOf(it)
        if (flag > -1) {
            arr.splice(flag, 1)
            return arr
        } else {
            console.log("未查找到该元素")
        }
    }
    
    //3、如果要删除项为对象,我们需要知道该对象属性中的唯一值(不会重复的值)
    //arr是源数组,attr是目标数组中的属性名称,value是要删除的属性名称对应的值
    var arrRemoveJson = function (arr, attr, value) {
      if (!arr || arr.length == 0) {
        return ""
      }
      let newArr = arr.filter(function (item, index) {
        return item[attr] != value
      })
      return newArr
    }
    
    let arr = ['aaa','bbb','ccc','ddd']
    let arrJson = [{ id: 1 , name: 'cz'},{ id: 2 , name: 'mp'},{ id: 3 , name: 'xp'}];
    let newArr1 = arrRemoveIndex(1,arr);  // ['aaa','ccc','ddd']
    let newArr2 = arrRemove('bbb',arr);   // ['aaa','ccc','ddd']
    let newArr3 = arrRemoveJson(arr,'id','2') //[{id:1,name:'cz'},{id:3,name:'xp'}]
    
    

    以上可以放到工具类,方便反复调用。

    展开全文
  • JS 数组删除一个元素

    万次阅读 2019-05-14 14:12:29
    JS 删除数组中某一个元素 方式一: 在Array原型对象上添加删除方法 // 查找指定的元素在数组中的位置 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] =...

    JS 删除数组中某一个元素

    注意:很多人误以为数组的pop()方法可以删除指定元素,实则不是这样,虽然你给他传参也不会报错,但是它始终删除的是数组中的最后一个元素。

    方式一: 在Array原型对象上添加删除方法

        // 查找指定的元素在数组中的位置
    	Array.prototype.indexOf = function(val) {
    	        for (var i = 0; i < this.length; i++) {
                 if (this[i] == val) {
                     return i;
                 }
             }
             return -1;
         };
         // 通过索引删除数组元素
         Array.prototype.remove = function(val) {
             var index = this.indexOf(val);
             if (index > -1) {
                 this.splice(index, 1);
             }
         };
    	// demo使用
    	var arr = [1, 2, 3, 5, 6, 'abc', 'ert'];
    	arr.remove('abc');
    	/************** 打印输出 arr ***************/
    		[1, 2, 3, 5, 6, "ert"]
    	/************** 打印输出  ***************/
    

    方式二: ES6的简介写法

    	var arr = [
            {
               id: 1,
               name: 'Janche'
             },
             {
              	id: 2,
              	name: '老王'
             }
          ]
    	arr.splice(arr.findIndex(e => e.id === 1), 1) // 将删除id等于1的选项
    	/************** 打印输出 arr ***************/
    	{	
    		id: 2, 
    		name: "老王"
    	}
    	/************** 打印输出  ***************/
    
    展开全文
  • Html代码  ...  body>  ... script type="text/javascript">     var arr = new Array(6);   arr[0] = {id:1, name:'exg'};   arr[1] = {id:2, name:'aaa'};   arr[2] = 
    Html代码   收藏代码
    1. <html>  
    2.     <body>  
    3.   
    4.     <script type="text/javascript">  
    5.   
    6.     var arr = new Array(6);  
    7.     arr[0] = {id:1, name:'exg'};  
    8.     arr[1] = {id:2, name:'aaa'};  
    9.     arr[2] = {id:3, name:'bbb'};  
    10.     arr[3] = {id:4, name:'ccc'};  
    11.     arr[4] = {id:5, name:'eee'};  
    12.     arr[5] = {id:6, name:'fff'};  
    13.   
    14.     var existArr = new Array(2);  
    15.     existArr[0] = {id:1, name:'exg'};  
    16.     existArr[1] = {id:2, name:'aaa'};  
    17.   
    18.     document.write('数组长度: ' + arr.length + '<br/>');  
    19.     for (var i=0; i<arr.length; i++) {  
    20.        document.write(arr[i].id + '     ' + arr[i].name + '<br/>');  
    21.     }   
    22.   
    23.     for (var i=0; i<arr.length; i++) {  
    24.        for (var j=0; j<existArr.length; j++) {  
    25.           if (arr[i].id == existArr[j].id) {  
    26.               arr.splice(i, 1);    
    27.           }  
    28.        }  
    29.     }  
    30.   
    31.     /*  
    32.     arr.splice(2,1);  
    33.     */  
    34.     document.write('<br />移除重复元素后<br/>');  
    35.     for (var i=0; i<arr.length; i++) {  
    36.        document.write(arr[i].id + '     ' + arr[i].name + '<br/>');  
    37.     }  
    38.   
    39.     document.write('数组长度: ' + arr.length + '<br/>');  
    40.   
    41.   
    42.     </script>  
    43.   
    44.     </body>  
    45. </html> 
    展开全文
  • 数组 Array 是 JavaScript 内置对象,它其实是一个函数。在 Chrome 开发者工具 Console 中输入 Array,按回车键,得到以下结果:既然是函数,那么它就有一个原型属性 prototype,打印一下它的值,发现差不多有 30 多...

    文末有2道面试题可以挑战一下自己。

    数组 Array 是 JavaScript 内置对象,它其实是一个函数。在 Chrome 开发者工具 Console 中输入 Array,按回车键,得到以下结果:

    6e52326a8fb082c597c2d3ba91ff7398.png

    既然是函数,那么它就有一个原型属性 prototype,打印一下它的值,发现差不多有 30 多个函数,这些函数将在我们后续开发者扮演着重要的角色:

    「温馨提示,如果你不知道某个对象有哪些方法,可以在浏览器的开发者工具的 Console中输入 xxx.prototype,比如 String.prototype」

    98eee73f6a5814c63325cb11728b51d4.png

    通常创建数组有 2 种方式,一种是通过数组直接量 [] ,另一种是通过 new Array。下面是创建数组的两种方式

    62003761e6d66c02cf3f6630c3eb9fc7.png

    数组中可以是任意类型的元素,下面的数组中同时包含了字符串、数字和对象;

    041694c45c618186be5bad95a6fe377e.png

    数组的核心内容已经学完了,剩下的就是如何利用原型对象中的 API 对数组进行操作了。一起看看这些 API。

    concat,有拼接的意思,把多个数组中的值合并到一起。

    94ed6405b9a676fa7b4ba04a6051f780.png

    copyWithin(target: number, start: number, end?: number): this; 

    复制数组中某个区间的数据到指定位置,会修改原数组。

    fill(value:c T, start?: number, end?: number): this; 

    给某个区间填充指定的值,这个比较有用,下面给数组中所有元素设置为 1。

    1850facb9dacc9bb0fc08a612f94e5d6.png

    find,查找第一个符合条件的元素,返回值为元素的值

    findIndex,查找第一个符合条件的元素,返回值为元素在数组中的索引;参数是一个函数。

    e3ed373d8e61e7d2f8a82290e36abd24.png

    let numbers = [0, 5, 3, 6, 2];let e = numbers.findIndex(function(e, index, arr) {    return e > 5;});

    forEach(callback(currentValue [, index [, array]])[,thisArg]),遍历数组,这种遍历不能暂停,只能遍历到结尾自动结束;

    02c6c068fc458254520f5c9b2d210814.png

    includes, 数组中是否包含某个数据;

    a0fb89868f8bbb3e086c5525b07851ee.png

    indexOf,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,常用这个判断数组中是否包含某个元素;

    1733e8154ff8e241a11326399d2e212b.png

    join, 数组中的元素以某个字符串拼接起来;

    80525888b77c08463368c55ed2487c05.png

    lastIndexOf ,某个 item 在数组中的下标,如果下标为 -1 说明数组中不存在这个元素,从末尾开始遍历

    map,遍历数组中的元素,重新组成一个数组;

    const array1 = [1, 4, 9, 16];// pass a function to mapconst map1 = array1.map(x => x * 2);console.log(map1);// expected output: Array [2, 8, 18, 32]

    pop 删除数组中最后一个元素,返回值为删除的元素;

    df3f08561652dda9c7fc68d440a2bc9f.png

    push 在数组末尾插入一个元素,返回值为数组的长度;

    14df86c91abf007750a9b9282c45ca71.png

    reverse 翻转一个数组;

    shift 删除数组中第一个元素,返回值为删除的元素;

    slice(beg, end),取数组中某个范围内的元素组合成一个新的数组,不会改变原数组;

    85d85c9535f6249c361817056dab70ac.png

    some 查询数组中是否有符合某个条件的元素,比如查看数组是否存在偶数。

    const array = [1, 2, 3, 4, 5];// checks whether an element is evenconst even = (element) => element % 2 === 0;console.log(array.some(even));// expected output: true

    splice(start[, deleteCount[, item1[, item2[, ...]]]]),删除或插入元素到指定的位置。在数组第二个位置插入元素 drum,不进行删除。

    let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']let removed = myFish.splice(2, 0, 'drum')// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] // removed is [], no elements removed

    unshift 从头在数组中插入元素。

    const array1 = [1, 2, 3];console.log(array1.unshift(4, 5));// expected output: 5console.log(array1);// expected output: Array [4, 5, 1, 2, 3]

    总结

    本节内容主要介绍了数组相关的 API,只是做了简单的介绍,在实际的使用的过程中可以查看文末 MDN 关于各个 API 的详细介绍。今天的内容比较简单,大家加油。

    最后做几道面试题,挑战一下,今天的打卡指令就是写错你的答案,最好能给出解析;

    第 1 题

    let names = ['suyan', '前端小课'];names.length = 0;console.log(names[0]); // 它的值是?

    第 2 题:

    var numbers = [];for(var i = 0; i < 4; i++) {    numbers.push(function() {     return i; });}var result = numbers.map(function(e) {    return e();});console.log(result); // 值是什么?

    推荐阅读: 用2000字详细解答昨天的题目(再忙也要看一下)

    期中考试之 var、let、const

    第三阶段结语:告别网络编程

    打破讨论薪资的红线 之 签名原理(漫画)

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

    057c1bcaf5490ee15045c7a576843b69.png

    展开全文
  • 在项目中,需要过滤数组中使用过的数据,开始是想通过遍历的方式来实现,但是在过程中,发现效果不佳,代码量也比较多,就上网搜大家是怎么实现的,发现使用js数组的方法:filter,every就能很简单的解决该问题。...
  • js对象数组

    2019-12-31 21:02:49
    、 内置对象 1) 对象 2) Array 数组 创建 特点 属性和方法 二维数组 3)String 对象 创建 特点 属性 方法 Math 对象 定义 属性 方法 5)日期对象 创建日期对象 日期对象方法 、 内置对象 1) 对象 对象...
  • 该方法是用来删除对象数组里面某个对象,造轮子方便大家使用。
  • 有时候,我们需要根据 某属性与属性值 找到数组对象中对应的该项。 例如,现有如下结构数组对象: // Array Object const arr = [ { name: '王佳斌', age: '20' }, { name: '孙玉红', age: '15' } ] 现在,...
  • 一个表格,类似于下图,选中以后,做成纯前端批量删除 数据源 arr2是全部的数据,arr1是勾选的数据 let arr1 = [ { code: "123456781",color: "芭比粉"}, { code: "123456783",...
  • 数组 var arr = new Array(); //或者 var arr = []; //或者 var arr = [{index:'0'},{address:'1'}];... //删除并返回数组的最后一个元素。 //遍历 for(var i=0;i<arr.length;i++){ console.log(i+": "+a
  •   1 var a =[{name: 'Tom',...  现在给a数组中的第一个对象添加性别属性 1 2 3 a[0]['gender']='women' a[0]['address']="China" a[1].provinc...
  • 对象数组根据对象属性删除对应的对象 根据id查找到对象数组里面的对象,然后移除该对象 array 是定义的数组 var array = [{id:1,name:"b"},{id:2,name:"b"}]; for (var i = 0;i <array.length; i++){ ...
  • Javascript对象数组处理方法

    千次阅读 2018-05-25 16:30:25
    js对象数组,加一个对象。定义两个对象,定义一个空数组,然后把对象放入数组中。 let a1 = { index: 1, name: 'kiko', tel: 18579156626 }; let a2 = { index: 2, name: 'kiko', tel: 18579156626 }; let...
  • js个数组对象比较如果a数组中的id在b数组中没有,判断如果id相同删除数组中的这个对象,如果不相同,添加这个对象 let vm = this; let index = vm.handelTableList.findIndex( (val) => val.idNum === ...
  • 上面博客当条件不满足时也会删除index为0的数据,在上面博客的基础上优化下 function removeByValue(arr, attr, value){ let index = NaN; for(var i in arr){ if(arr[i][attr]==value){ index=i; break; .
  • js-对象 数组

    2018-11-16 16:46:00
    js-对象 数组 JavaScript 中的所有事物都是对象:字符串、数值、数组、函数... 1.什么是Object对象 1.是种类型,也就是引用类型,复杂数据类型 2.对象的值,就是引用类型的实例 3.也是种数据结构 math对象...
  • JS比较两个对象数组的差异

    千次阅读 2020-11-09 17:43:57
    后台传过来一个对象数组,vue渲染到页面中,然后修改了这个对象数组,可能是增删改了其中的某些对象。但是不是操作一下就发到后台去保存,而是只是前端页面在发生变化,最后点击提交按钮的时候才把变化过的数据传到...
  •  现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0]['address']="China" a[1].province="Jiangsu"  多添加了一些属性,是为了区别字符串单引号和双引号的, 用了.就不用中括...
  • 删除数组中元素的方法有delete,splice;这里先记录splice function bantchDelete (taskList,deleteTaskIds){ for (let i=0; i<taskList.length;){ let task = taskList[i]; //根据id删除 if (deleteTaskIds....
  • JavaScript核心对象 数组对象Array 字符串对象String 日期对象Date 数学对象Math ...数组对象 ...数组对象是用来在单一的变量名中存储一系列的值。数组是在编程语言中经常使用的一种...创建一个大小为的数组  va...
  • js 对象数组删除和查找的方法

    千次阅读 2019-04-04 09:51:00
    deleteItem: function (array,item) { const index = this.array.findIndex(text => text.name === item.name); this.array.splice(index, 1);} 亲测vue 中可用 转载于:...
  • I have an object that contains an array of objects. 我有一个包含对象数组的对象。 things = new Object(); things.
  • 对象数组添加新对象结果导致数组中已存在的对象也改变了 我需要将一个空数组中存放已有的某个对象,这个对象是复用的,结果每次执行添加后所有对象都成为了最后添加的那个。 this.ObjList.push(this.Obj); 问题...
  • 最近帮朋友弄一个简单的针对json数组的增删改成页面,正好涉及到了js去操作对象数组实现增删改查功能。我估计很多朋友应该也会遇到这类操作,所以记录一下以便分享。 2.数据准备 这里我就以学生对象数组为例了,其实...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 161,619
精华内容 64,647
关键字:

对象数组删除一个对象js