前端杂记

本博客记录前端学习过程中杂七杂八的知识点，会持续更新….

1. escape,encodeURI和encodeURIComponent区别

escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z；
encodeURI不编码字符有82个：!，#，$，&，’，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z；
encodeURIComponent不编码字符有71个：!， ‘，(，)，*，-，.，_，~，0-9，a-z，A-Z
总结：escape基本被encodeURI包含了，可不使用escape，传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。

2. JS里的’+’与’==’规则

‘+’规则：加号两边只要有字符串就做拼接，都没有字符串就做加法，与undefined加为NaN，有对象调toString()
‘==’规则：大的原则是将等号两边转为number类型再比较，这里要注意不是转为boolean再比较

3. JS中的一些奇特用法

 var a=obj||{};       //当obj为false时，a={}
 var b=obj&&obj.name; //当obj存在时才读取name属性
 var c=!!flag;        //将flag转为boolean类型,flag可以是任意类型
 var d=~~12.5;        //取12.5整数部分,等同于Math.floor(12.5)，但是该写法省几个字节，且简洁
 [].prototype.call    //代替Array.prototype.call

4. JS进制转换

两个关键函数：

    parseInt(str,str对应的进制数)//将str转为10进制数，如
    parseInt('101',2)=5
    Number.toString(进制数)//将number转为任意进制的字符串形式，如var a=5;a.toString(2)='101';

5.innerHTML和outerHTML区别

一个例子说明问题：

<div id="test"> 
   <span style="color:red">test1</span> test2 
</div>

1）innerHTML的值是“<span style=”color:red”>test1</span> test2 ”

2）outerHTML的值是<div id=”test”><span style=”color:red”>test1</span> test2</div>

6.JSON.stringify(obj,replacer,space)

这里想说容易忽略的第二个和第三个参数，第二个参数可以改变obj转为字符串后的内容，space表示缩进，若省略，那么obj转成的字符串默认在一行显示，如果想让该字符串像对象那样展示，可以将space设为4

7.关于html标签自定义属性的两种获取方式

(1)、使用getAttribute(‘属性名’)；
(2)、使用HTML5的dataset，例子如下：

<div id="test" data-age="24">
        Click Here
</div>

var test = document.getElementById('test');
console.log(test.getAttribute('data-age'));//24
console.log(test.dataset.age);//24

注意点：1、获取属性时要去除‘data-’前缀；2、若属性中还含有连字符，如‘data-age-cat’,要转为驼峰式：dataset.ageCat；3、兼容性到IE11+;
为何使用：该方式可以集中管理自定义属性，dataset只是attribute的一个子集

8. JS作用域和执行环境的区别

• 执行环境分为全局和局部执行环境，局部执行环境是函数执行过程中创建的。
• 作用域链是基于执行环境的变量对象的，由所有执行环境的变量对象(对于函数而言是活动对象，因为在函数执行环境中，变量对象是不能直接访问的，此时由活动对象(activation object,缩写为AO)扮演VO(变量对象)的角色。)共同组成。
  当代码在一个环境中执行时，会创建变量对象的一个作用域链。
• 作用域链的用途：是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。

9.JS的in操作符

用途：判断对象是否为数组/对象的元素/属性
格式：（变量 in 对象）
当“对象”为数组时，“变量”指的是数组的“索引”；
当“对象”为对象是，“变量”指的是对象的“属性”。
数组示例：
var arr = [“a”,”b”,”2”,”3”,”str”];
var result = (“b” in arr); //false
var result1 = (4 in arr); //true
对象示例：
var obj={
w:”wen”,
j:”jian”,
b:”bao”
}
var result=(2 in obj); //false
var result1=(“j” in obj); //true