js基础查漏补缺（更新）

2018-06-24 01:13:21来源：未知阅读 ()

js基础查漏补缺：

NaN != NaN；
复制数组可以用slice；
数组的sort、reverse等方法都会改变自身；
Map是一组键值对的结构，Set是key的集合；
Array、Map、Set都属于iterable类型，可用for...of遍历；
!!是将变量转为布尔类型的方法；
0.1+0.2！==0.3（计算机中用二进制来存储小数，而大部分小数转成二进制之后都是无限循环的值，因此存在取舍问题，导致精度丢失）；
rest参数只能写在最后，前面用...标识；
一个函数接收另一个函数作为参数称之为高阶函数，比如map、reduce、filter、sort；
arr.map(String) 将数组元素都变为string类型；

// 数组去重
arr.filter(function(element, index, self) {
    return self.indexOf(element) === index;
})

// 筛选素数
arr.filter(function(num){
    var flag = true;
    if(num < 2){
        flag = false;
    }else{
        for(var i=2; i<num; i++){
            if(num % i == 0){
                flag = false;
                break;
            } 
        }
    }
    return flag;
})

返回闭包时尽量不要引用任何循环变量，或者后续会发生变化的变量，如果非要，可以用该函数的参数绑定值自执行；

借助闭包可以封装私有变量，携带状态，可以把多参数函数变成单参数；

由于this在箭头函数中已经按词法作用域绑定了，所以call和apply调用箭头函数时无法对this绑定，会忽略；

generator函数可以在执行过程中多次返回，看上去就像可以记住执行状态的函数，可以用for...of循环循环generator对象；

3. typeof NaN === 'number' typeof null === 'object'

尽量不要使用new String等去创建包装对象；

1+null === 1 1+undefined === NaN

123..toString() === '123' 或 (123).toString()

null，undefined没有toString方法

正则：\d(数字) \w(字母或数字) \s(空格) *(任意个字符) +(至少一个字符) ?(0或1个字符) {n}(n个字符) {n,m}(n到m个字符)

进阶正则：[]表示范围 ^开头 $结尾 ; / / 或 new RegExp() ;

模版解析：str.replace(/\{(.*?)\}/g, (match, key)=>obj[key.trim()]);

切分字符串：‘a,b;; c d’.split(/[\s\,\;]+/)

分组：用()表示要提取的分组，reg.exec(str)，返回一个数组，第一个是匹配到的整个字符串，后面的表示匹配成功的子串；失败返回null

默认贪婪匹配（匹配尽可能多的字符），非贪婪匹配（加上?）；

JSON.stringify第二个参数可以传入一个数组（输出指定的属性），也可传入一个函数（参数为key和value），第三个参数是缩进‘ ’；如果想精确控制序列化，可以给对象定义toJSON方法，直接返回需要的数据；

JSON.parse反序列化；

低版本浏览器无__proto__,所以用Object.create()；

Promise的任务会在当前事件循环末尾中执行，而setTimeout中的任务是在下一次事件循环执行；

// new运算符做了什么

function foo(fn, ...rest){
  let obj = Object.create(fn.prototype);
  let val = fn.apply(obj, rest);
  return isPrimitive(val) ? obj : val;
}

function isPrimitive(a){
  let b = typeof a;
  return !! (a===undefined || a===null || b==='boolean' || b==='number' || b==='string');
}

function A(){};
let a = foo(A);

4. location.assign('') location.reload()；

dom树的根节点是document；

服务器可以根据cookie来区分用户，如果在cookie中设置了HTTPOnly属性，js脚本将无法读取cookie信息，这样能有效防止xss攻击；

不要使用history对象；

children是只读的，firstElementChild，lastElementChild，innerText，textContent，appendChild，insertBefore(new, target)，removeChild，parentElement；

h5控件：type为date，datetime-local，color，获取值dom.value；

ajax：XMLHttpRequest对象，低版本ie用ActiveXObject；

5. 垃圾回收机制（Garbage Collection）：

标记清除（推荐），分为标记阶段（把所有活动对象做上标记，深度遍历）和清除阶段（销毁非活动对象）；

引用计数，会因为循环引用而无法清除；

6. requestAnimationFrame告诉浏览器在下次重绘之前调用指定函数来更新动画；一个在每次需要重新绘制动画时调用的包含指定函数的参数。这个回调函数有一个传参，DOMHighResTimeStamp，指示从触发 requestAnimationFrame 回调到现在（重新渲染页面内容之前）的时间（从 performance.now() 取得）。

7. es6、7大部分新特性的熟练理解和掌握

8. 希望2018年继续夯实基础，对每个知识点都有透彻的理解和认识，加油！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有