js零散知识点总结

Posted 2022-10-19 cx1215

js事件流模型：
      “事件冒泡”：事件由最具体的元素接收，然后逐级向上传播；
      “事件捕获”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体元素；
      “dom事件流”：三个阶段：事件捕获，目标阶段，事件冒泡；
      （附：事件流详解）：
               ie事件流：冒泡型事件：button->div->body
               netscape事件流：捕获型事件：body->div->button
               dom事件模型：body->div->button->button->div->body;
               dom事件流同时支持两种事件模型：但是捕获事件先发生，从document对象开始，也在document对象结束
               ie9以下不支持addEventListener/removeEventListener,采用attachEvent/detachEvent

json与xml的区别：
                xml定义：可拓展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的语言。xml是SGML（标准通用标记语言）的子集，非常适合web传输。
                xml提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。
                xml优点：
                        1、格式统一，符合标准；
                        2、容易与其他系统进行交互，数据共享比较方便
                缺点：
                        1、xml文件格式文件庞大，格式复杂，传输占用更多带宽
                        2、服务器和客户端都需要花费大量代码来解析xml，服务器和客户端代码变得异常复杂和不容易维护。
                        3、客户端不同浏览器之间解析xml的方式不一致，需要重复编写很多代码。
                        4、服务器端和客户端解析xml花费更多资源和时间

    与json的优缺点比较：
                        1、可读性、可拓展性都很出色，但是xml的编码难度更高。
                        2、json的解码难度几乎为0，而xml得考虑子父节点；
                        3、xml的通用性更广，json则广泛应用于前端。
                        4、json相对xml，数据体积更小；与js交互更方便；
                        5、json对数据的描述性比xml较差；
                        6、json的无论是传播还是解析速度远远快于xml；

双等号的类型转换：

1 console.log(undefined == null); // true
2 console.log(1 == true);  // true
3 console.log(2 == true);  // false
4 console.log(0 == false); // true
5 console.log(0 == ‘‘);   // true
6 console.log(NaN == NaN); // false
7 console.log([] == false); // true
8 console.log([] == ![]);  // true

总结：undefined与null相等 但不全等（===）；当为number与string时，会将string转换为number； number和boolean时，会将boolean转换为number；number或string与Object，会将Object转换成number或string

=== ：全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。

非全等号由感叹号加两个等号（!==）表示，只有在无需类型转换运算数不相等的情况下，才返回 true。

undefined与null 的区别:

null:

是Null类型的值.
是个空值，空对象指针.
typeof null，结果为Object;
null用来表示尚未存在的对象.

undefined :

是Undefined类型的值。
typeof undefined，结果为undefined;
一个声明了变量，但未初始化值，结果就是undefined
没有返回值的函数，返回的也是undefined,
没有实参的形参也是undefined;

性能优化的方法:

　　（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

　　（2） 前端模板 JS+数据，减少由于html标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

　　（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

　　（4） 当需要设置的样式很多时设置className而不是直接操作style。

　　（5） 少用全局变量、缓存DOM节点查找的结果。

　　（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

　　（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

深浅拷贝：

1、浅拷贝 
    浅拷贝只是拷贝基本类型的数据，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，因此存在父对象被篡改的可能，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存

 1 //实现浅拷贝
 2 function shallowCopy( target )
 3  if(typeof target !== ‘object‘) return ;
 4  //判断目标类型，来创建返回值
 5  var newObj = target instanceof Array ? [] : ;
 6  
 7  for(var item in target)
 8   //只复制元素自身的属性，不复制原型链上的
 9   if(target.hasOwnProperty(item))
10    newObj[item] = target[item]
11   
12  
13  
14  return newObj
15 </strong>
16  
17 //测试
18  
19 var test = [1,‘a‘,name:‘lei‘,age:18];
20  
21 var copy = shallowCopy(test);
22 console.log(copy[2].name);  //lei
23  
24 copy[2].name = ‘zhang‘;
25 console.log(test[2].name);  //zhang  原数据也被修改

2、深拷贝

 深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用"浅拷贝"。（深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象）

 1 //实现深拷贝
 2 function deepCopy( target )
 3  if(typeof target !== ‘object‘) return ;
 4  //判断目标类型，来创建返回值
 5  var newObj = target instanceof Array ? [] : ;
 6   
 7  for(var item in target)
 8   //只复制元素自身的属性，不复制原型链上的
 9   if(target.hasOwnProperty(item))
10    newObj[item] = <strong>typeof target[item] == ‘object‘ ? deepCopy(target[item]) : target[item] //判断属性值类型
11 </strong>  
12  
13   
14  return newObj
15 
16   
17 //测试
18 var test = [1,‘a‘,name:‘lei‘,age:18];
19   
20 var copy2 = deepCopy(test);
21 copy2[2].name = ‘zhang‘
22   
23 console.log(test); ////[1,‘a‘,name:‘lei‘,age:18] 未受到影响