精华内容
下载资源
问答
  • 有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据 id的值删除当前对象。该怎么写代码呢?
  • fabricjs 删除object对象

    千次阅读 2017-12-09 13:25:08
    fabricjs 对于学习过fabric的人来说,对于canvas的操作...对于删除canvas 中的对象,fabricjs也提供了一个方法,remove(),可以移除指定对象。 但是,有一个小小的问题,我们在什么情境下或者什么条件下,执行移除操作

    fabricjs

    对于学习过fabric的人来说,对于canvas的操作,算是相当简化了,一些基础的操作我在这里就不多少了,网上有很多介绍,而且官网也是很详细的。

    下面我说一下删除fabricjs中canvas的对象。

    对于删除canvas 中的对象,fabricjs也提供了一个方法,remove(),可以移除指定对象。

    但是,有一个小小的问题,我们在什么情境下或者什么条件下,执行移除操作呢。(虽然是小问题,我还是纠结了很久,想找一个不是很反人类的操作方式)

    本来我是想为canvas的对象添加鼠标右键事件,以达到删除的目的,有了想法就去实现,不过我发现有一个坑,需要借助一些插件,

    例子:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset= "utf-8" >
    <style>
         canvas {
             border: 1px dashed black;
         }
    </style>
    <script src= "fabric.js" ></script>
    <script src= "jquery-3.1.1.js" ></script>
    <script src= "contextMenu/jquery.ui.position.min.js"  type= "text/javascript" ></script>
    <script src= "contextMenu/jquery.contextMenu.js"  type= "text/javascript" ></script>
    <link href= "contextMenu/jquery.contextMenu.css"  rel= "stylesheet"  type= "text/css"  />
    <script>
       var  canvas;
       //菜单项
       var  contextMenuItems;
     
       window.onload =  function () {
         canvas =  new  fabric.Canvas( 'canvas' );
     
         var  rect1 =  new  fabric.Rect({top: 50, left: 50, width: 70, height: 70, fill:  'red' });
         canvas.add(rect1);
         var  rect2 =  new  fabric.Rect({top: 50, left: 150, width: 70, height: 70, fill:  'red' });
         canvas.add(rect2);
         var  rect3 =  new  fabric.Rect({top: 50, left: 250, width: 70, height: 70, fill:  'red' });
         canvas.add(rect3);
     
         //在canvas上层对象上添加右键事件监听
         $( ".upper-canvas" ).contextmenu(onContextmenu);
     
         //初始化右键菜单
         $.contextMenu({
               selector:  '#contextmenu-output' ,
               trigger:  'none' ,
               build:  function ($trigger, e) {
                   //构建菜单项build方法在每次右键点击会执行
                   return  {
                       callback: contextMenuClick,
                       items: contextMenuItems
                   };
               },
           });
       }
     
       //右键点击事件响应
       function  onContextmenu(event) {
         var  pointer = canvas.getPointer(event.originalEvent);
         var  objects = canvas.getObjects();
         for  ( var  i = objects.length - 1; i >= 0; i--) {
           var  object = objects[i];
            //判断该对象是否在鼠标点击处
            if  (canvas.containsPoint(event, object)) {
              //选中该对象
              canvas.setActiveObject(object);
              //显示菜单
              showContextMenu(event, object);
              continue ;
            }
         }
     
         //阻止系统右键菜单
         event.preventDefault();
         return  false ;
       }
     
       //右键菜单项点击
       function  showContextMenu(event, object) {
         //定义右键菜单项
         contextMenuItems = {
            "delete" : {name:  "删除" , icon:  "delete" , data: object},
         };
         //右键菜单显示位置
         var  position = {
             x: event.clientX,
             y: event.clientY
         }
         $( '#contextmenu-output' ).contextMenu(position);
       }
     
       //右键菜单项点击
       function  contextMenuClick(key, options) {
         if (key ==  "delete" ) {
           //得到对应的object并删除
           var  object = contextMenuItems[key].data;
           canvas.remove(object);
         }
       }
    </script>
    </head>
    <body>
         <canvas id= "canvas"  width= "450"  height= "200" ></canvas>
         <div id= "contextmenu-output" ></div>
    </body>
    </html>

    具体可以参考:http://www.hangge.com/blog/cache/detail_1856.html

    麻烦归麻烦,但是封装一下还是可以使用的,但是还需要引入插件,对于我来说有点不可以接受,所以我只能换个思路。

    第二个方法,我是不是可以结合键盘操作,当我选中一个对象时,点击键盘的backspace,执行删除操作,虽然操作不是很反人类(还是有点反人类的),思路有了那就实现吧。

    首选,要做的是要选中对象,可以调用fabric的object:selected方法,然后调用键盘的监听事件

    代码:

        // 删除对象
        removeObject: function (that) {
          // 监控canvas的object:selected事件
          that.fabricCanvas.on('object:selected', function (option) {
            // 监控页面的键盘事件
            document.onkeydown = function (e) {
              // 是否点击delete
              if (e.keyCode === 8) {
                // 移除当前所选对象
                that.fabricCanvas.remove(option.target)
              }
            }
          })
        }

    发现了bug,怎么在多个对象之间切换选中,没有执行事件呢。

    经过我的测试,发现不管你选中那个对象,他都执行的是对象选中事件,也就是说,这个事件只会执行一次,除非你每次执行完,都移开,取消选中,但这有点太反人类了。

    那就换个事件实施,用mouse:down,鼠标点击就执行,这总可以了吧。

    代码:

    // 删除对象
        removeObject: function (that) {
          // 监控canvas的mouse:down事件
          that.fabricCanvas.on('mouse:down', function (option) {
            // 监控页面的键盘事件
            document.onkeydown = function (e) {
              // 是否点击delete
              if (e.keyCode === 8) {
                // 移除当前所选对象
                that.fabricCanvas.remove(option.target)
              }
            }
          })
        }

    试了一下,真的可以,确实删除了,不过操作的方式肯定没有鼠标右键删除的方式好,但也算一个方式吧。

    最后希望fabricjs尽快支持鼠标右键吧。

    展开全文
  • js delete删除对象的某个属性发现即使把当前对象重新赋值给临时变量后删除临时变量中的属性最终原对象的属性也会被删除例如 &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&...

    js delete删除对象的某个属性发现即使把当前对象重新赋值给临时变量后删除临时变量中的属性最终原对象的属性也会被删除例如

    <html>
    
    <head>
    </head>
    
    <body>
    <script>
    var obj={
    "name":"wdl",
    "phoneNum":12345678901
    }
    var newobj=obj;
    delete newobj["phoneNum"]
    alert("obj"+JSON.stringify(obj))//{"name":"wdl"}
    alert("newobj"+JSON.stringify(newobj))//{"name":"wdl"}
    
    </script>
    </body>
    
    </html>
    

    上边的例子我们发现确实被删除了,至于为什么会这样,是因为我们用等于号直接赋值一个新对象的时候,并不是拷贝了一个新对象而只是把原对象的引用地址赋值给新对象,所以我们再修改新对象的时候会影响原对象。

    知道了原因,就好解决了,我们现在知道我们应该是复制出一个新对象,而不是引用地址的指向,解决方法如下:

    <html>
    
    <head>
    </head>
    
    <body>
    <script>
    var obj1={
    "name":"wdl",
    "phoneNum":12345678901
    }
    var tempobj=JSON.stringify(obj1);
    var newobj1=JSON.parse(tempobj);
    delete newobj1["phoneNum"]
    alert("obj1"+JSON.stringify(obj1))//{"name":"wdl","phoneNum":12345678901}
    alert("newobj1"+JSON.stringify(newobj1))//{"name":"wdl","phoneNum":12345678901}
    </script>
    </body>
    
    </html>
    

    如果谁有更好的方法还请留言告知,十分感谢。

    展开全文
  • 例如:删除数组对象a中key值为3的对象,并返回新的数组。 let a=[ { key:1, name:'张三', }, { key:2, name:'李四', }, { key:3, name:'王五', }, ] 解决方法: let newArr = a.filter(item =&...

    例如:删除数组对象a中key值为3的对象,并返回新的数组。

    let a=[
    	{
    		key:1,
    		name:'张三',
    	}
    	{
    		key:2,
    		name:'李四',
    	},
    	{
    		key:3,
    		name:'王五',
    	}
    ]
    

    解决方法:

    let newArr = a.filter(item => item.key!== 3);
    console.log(newArr)	//[{key: 1, name: "张三"},{key: 2, name: "李四"}]
    

    filter()方法通过检查指定数组中符合条件的所有元素,返回一个新的数组, filter() 不会对空数组进行检测。不会改变原始数组。
    语法:

    array.filter(function(currentValue,index,arr), thisValue)
    //function(currentValue, index,arr)必须。函数,数组中的每个元素都会执行这个函数。currentValue:必须。当前元素的值,index:可选。当前元素的索引值 arr:可选。当前元素属于的数组对象
    

    返回值:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

    展开全文
  • 有些时候,我们需要根据数组对象中的 id ,来删除该项,如下代码所示: const arr = [ { id:1, name:"王佳斌" }, { id:2, name:"孙玉红" }, ... ] 假设当前 id 为 1,那么删除该项后是如下代码所示: const arr ...

    前言

    有些时候,我们需要根据数组对象中的 id ,来删除该项,如下代码所示:

    const arr = [
    	{ id:1, name:"王佳斌" },
    	{ id:2, name:"孙玉红" },
    	...
    ]
    

    假设当前 id1,那么删除该项后是如下代码所示:

    const arr = [
    	{ id:2, name:"孙玉红" },
    	...
    ]
    

    实现

    注意:该方法会改变原数组(因为splice)

    以下代码做了封装,直接传入相关参数即可使用。

    /**
     * 根据id删除数组项
     * @param {Number} id 需要删除的id
     * @param {Array} list 目标数组
     * @return {Array} 
     */
    deleteById: function(id, list)
    {
      for(let index = list.length - 1; index >= 0; index--) {
        if(list[index] && list[index].id === id) {
          list.splice(index, 1)
        }
      }
      return list
    }
    
    展开全文
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;...text/javascript"&gt;
  • Three.js删除模型对象(.remove()和·dispose()方法) 通过Threejs开发Web3D应用的时候,可能需要删除场景中的模型对象,如果想从一个场景Scene或组对象Group删除一个三维模型对象,可以通过.remove()和·dispose()...
  • js根据条件删除对象数组中的元素

    千次阅读 2020-08-18 22:01:07
    删除年龄20岁以上的对象: var newArr = objs.reduce((total, current) => { current.age >= 20 && total.push(current); return total; }, []);
  • js根据对象删除本身元素

    万次阅读 2017-09-26 14:26:29
    function del(e){ //var my = document.getElementById("a"); var my = $(e).parent()[0];  if (my !...1.第一种可以根据id获取当前元素,然后进行删除 2.第二种可以根据子元素,进行寻找到
  • 今天遇到一个很奇葩的需求,是这样的:当我点击文字的时候弹出一个删除按钮,可以删除刚才点击的文字. 诶?当时想了想,没什么难度吧.可是,既然是奇葩的需求怎么可能这么简单. 对,还有一个功能.我并不知道我点了哪个标签,...
  •  js内部的一些语法对象。 其中包括 String对象:处理字符串  Array对象:存储多个值,多种值 Date对象:处理日期和时间 等等 各个对象中都有相应的方法和属性可以使用。 全局函数不基于某个对象,可以在...
  • 1.DOM对象 ...可以对其中的内容进行修改和删除,同时也可以创建新的元素。 ...它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 ...通过js获取的DOM对象就是js对象 当浏览器支持js的dom...
  • JS对象的循环删除问题

    千次阅读 2017-09-11 16:56:02
    业务说明:对页面元素名称为subCheck的所有元素循环删除。 错误代码如下: var eles=document.getElementsByName("subCheck"); for(var =1,i var ele=eles[i]; $(ele).remove(); } 针对以上代码,若eles的长度为4的...
  • javascript添加删除div,对象的方法

    千次阅读 2017-04-22 10:56:53
    //删除一个元素或是div function deldiv(divid){ var div=document.getElementById(divid); div.parentNode.removeChild(div); } //添加一个div function adddiv(divid){ var div=document.cr
  • Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作。 通过 HTML DOM(如图所示),可访问 JavaScript HTML 文档的...
  • Vue.js可以传递$event对象 <body id=app> (>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) {...
  • js数组对象删除方法

    千次阅读 2017-04-02 06:53:38
    数组对象用来在单独的变量名中存储一系列的值。 我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象: var myArray=new Array() 官方参考:...
  • JS中动态删除对象中的某个属性

    千次阅读 2019-02-25 11:28:00
    let dog = { name:'', age:"" }; console.log(dog); //{name: "", age: ""} //删除当前dog对象中的age属性 delete dog.age; console.log(do...
  • //给种类下拉框添加监听事件  selectType.attachEvent('onchange',function(event){ ...  var obj = event.srcElement;  });...event.srcElement代表下拉框对象 this代表函数对象 ...//获取当前对象 emement
  • 我有一个这样一个对象,getData, 但是我不想要每一项的id,那怎么去删除呢(使用delete)? getData.map((item) =>{ delete item["id"]; }); console.log(getData);  
  • javascript删除当前行,添加行

    千次阅读 2010-03-01 18:22:00
    删除行 function del(obj) { obj.parentNode.parentNode.removeNode(true); } 单元格1 单元格2 单元格3 
  • 1.根据不同条件,删除数组中的元素或对象 for(var i=0,flag=true,len=attrList.length;i<len;flag ? i++ : i){ if(attrList[i] && (attrList[i].attrId=='530' || attrList[i].attrId=='534' || ...
  • JS对象与内置对象详细介绍

    万次阅读 多人点赞 2019-07-06 23:53:50
    JS对象就是Object,还有独立于宿主环境的ECMAScript实现提供的内置对象:Array,String,Date,Math。。。 首先我们来学习一下JS对象: Object: JS里有一句话叫万物皆对象(除了基本数据类型)。但是new String(’...
  • 最近遇见个需求,进入页面后想改一下页面结构。给当前某个元素添加(外包)个父元素。...// insertBefore(1, 2) 1 需插入的节点对象 ; 2 在该节点之前插入新节点的子节点 h1Element.parentNode.insertBefore(divEl
  • JavaScript 删除某个数组中指定的对象

    千次阅读 2017-05-25 19:11:32
    遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题。下面主要看看以下几种遍历删除List中元素的形式: 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合条件的一个元素 3....
  • JavaScript-对象和内置对象

    千次阅读 热门讨论 2021-05-24 18:19:17
    JS中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串、数值、数组、函数等。对象是具体的事物 对象是由属性和方法组成的,是属性和行为的结合体 属性:事物的特征,在编程中也叫成员变量...
  • * 删除数组指定下标或指定对象 * arr.remove(2);//删除下标为2的对象(从0开始计算) * arr.remove(str);//删除指定对象 */ Array.prototype.remove=function(obj){ for(var i =0;i &lt;this.length;i++){...
  • 点击“+”可以添加一行,点击“删除”可以删除当前行,可以在每一行中添加onclick方法deleteEnumItem进行调用 function deleteEnumItem() { var tab2=document.getElementById("enumTable");//获...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 191,592
精华内容 76,636
关键字:

js删除当前对象