javascript 实用技巧和写法建议

1.前言

从大学到现在，接触前端已经有几年了，感想方面，就是对于程序员而言，想要提高自己的技术水平和编写易于阅读和维护的代码，我觉得不能每天都是平庸的写代码，更要去推敲，去摸索和优化代码，总结当中的技巧，积极听取别人的建议，这样自己的技术水平会提高的更快。那么今天，我在这里就分享一下关于javascript方面的写作的实用技巧和建议，这些技巧和建议是我平常在开发项目上会用到的，希望能让大家学到知识，更希望能起到一个交流意见的作用，也就是说大家有什么好的技巧或者建议，欢迎分享，或者觉得我的想法存在什么问题，欢迎指出!

2.更短的数组去重写法

    [...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
    //[2, "12", 12, 1, 6, 13]
    //es6的新特性

3.对象深浅拷贝

关于对象的深浅拷贝，我个人见解就是有一下几点：

1. 深拷贝和浅拷贝只针对像Object, Array这样的引用类型数据。

2. 浅拷贝是对对象引用地址进行拷贝，并没有开辟新的栈，也就是拷贝后的结果是两个对象指向同一个引用地址，修改其中一个对象的属性，则另一个对象的属性也会改变。

3. 深拷贝则是开启一个新的栈，两个对象对应两个不同的引用地址，修改一个对象的属性，不会改变另一个对象的属性。

浅拷贝

    var myInfo={name:'守候',sex:'男'};

    var newInfo=myInfo;

    newInfo.sex='女';

    console.log(myInfo)   //{name: "守候", sex: "女"}

假-深拷贝

假-深拷贝这个是自己随性命名的，大家看看就好，别当真！

    var myInfo={name:'守候',sex:'男'}; 

    var newInfo=Object.assign({},myInfo)




    

    newInfo.sex='女';

    console.log(myInfo)   //{name: "守候", sex: "男"}
    console.log(newInfo)   //{name: "守候", sex: "女"}

真-深拷贝

真-深拷贝这个是自己随性命名的，大家看看就好，别当真！

看着深浅拷贝，区别写法很简单，但是那个上面的深拷贝写法是有问题的。看下面案例

    var arr=[{a:1,b:2},{a:3,b:4}]
    var newArr=Object.assign([],arr)
    //截断数组
    newArr.length=1
    console.log(newArr)//[{a:1,b:2}]
    console.log(arr)//[{a:1,b:2},{a:3,b:4}]
    //操作newArr，这里看着对arr没影响，实际上已经挖了一个坑，下面就跳进去
    newArr[0].a=123
    //修改newArr[0]这个对象，也是影响了arr[0]这个对象
    console.log(arr[0])//{a: 123, b: 2}

为什么会这样呢，因为Object.assign并不是深拷贝，是披着深拷贝外衣的浅拷贝。最多也是Object.assign会课拷贝第一层的值，对于第一层的值都是深拷贝，而到第二层的时候就是 复制引用。类似的情况还有，slice方法和concat方法等。

要解决这个问题，就得自己封装方法！如下

    //利用递归来实现深拷贝，如果对象属性的值是引用类型（Array,Object），那么对该属性进行深拷贝，直到遍历到属性的值是基本类型为止。  




    
    function deepClone(obj){    
      if(!obj&& typeof obj!== 'object'){      
        return;    
      }    
      var newObj= obj.constructor === Array ? [] : {};    
      for(var key in obj){       
        if(obj[key]){          
          if(obj[key] && typeof obj[key] === 'object'){  
            newObj[key] = obj[key].constructor === Array ? [] : {}; 
            //递归
            newObj[key] = deepClone(obj[key]);          
          }else{            
            newObj[key] = obj[key];         
          }       
        }    
      }    
      return newObj; 
    }
    var arr=[{a:1,b:2},{a:3,b:4}]




    
    var newArr=deepClone(arr)
    console.log(arr[0])//{a:1,b:2}
    newArr[0].a=123
    console.log(arr[0])//{a:1,b:2}

还有一个方法就是简单粗暴法，我现在在用的一个方法！原理很简单，就是先把对象转成字符串，再把字符串转成对象！也能实现同样效果

    var newArr2=JSON.parse(JSON.stringify(arr));
    console.log(arr[0])//{a:1,b:2}
    newArr2[0].a=123
    console.log(arr[0])//{a:1,b:2}

上面所说的浅拷贝，真假深拷贝（自己随性命名的），这几种情况，在开发上都有可能要用到，至于要使用哪一种方式，视情况而定！

4.使用事件委托

一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！

    
    
        
             charset="UTF-8">