js总结二（有目录)

Math.min() 比 Math.max() 大

正则表达式字面一致也不相等

1） 3. 这是一个合法的数字， 3..toString() 其实就是 (3.).toString()，就是3
2） 但是 3.toString()，这里的 3. 也被当成数字用，所以就是 (3.)toString()，所以会报错，一个数字后面没有接个点，直接调函数，报语法错误，
3） 3..toString() 就是 (3.)..toString() ，直接语法错误

null和undefined

正文

—————————————————————————————————

1. call/apply/bind 实现
2. 数组去重
3. js事件循环机制
4. 深入浅出浏览器渲染原理
   
5. promise.all 实现
6. js数组、字符串API
7. Set实现交集、并集、差集
8. Map的相关问题
9. symbol写法
10. es5与es6继承的区别

—————————————————————————————————
1、 call/apply/bind 实现

apply

Function.prototype.apply = function(base, args) { // 拓展Function原型
    base = base || window; // 传递绑定的对象为null或undefined时指向window
    base.fn = this; // 调用_apply时的this指向的是调用者也就是函数对象，将函数对象赋值给base对象的一个属性
    var result = base.fn(...args); // 调用base.fn时，fn中的this指针指向的是base，展开参数传参
    delete base.fn; // 删除base对象的fn属性
    return result; // 将返回值返回
}

call

Function.prototype.call = function(base, ...args) { // 拓展Function原型，使用Rest操作符接收剩余参数
    base = base || window; // 传递绑定的对象为null或undefined时指向window
    base.fn = this; // 调用_call时的this指向的是调用者也就是函数对象，将函数对象赋值给base对象的一个属性
    var result = base.fn(...args); // 调用base.fn时，fn中的this指针指向的是base，展开参数传参
    delete base.fn; // 删除base对象的fn属性
    return result; // 将返回值返回
}

bind

Function.prototype.bind = function(base, ...args1) { // 拓展Function原型，使用Rest操作符接收剩余参数
    return (...args2) => { // 箭头函数不会生成自身作用域下的this，会从自己的作用域链的上一层继承this
        base = base || window; // 传递绑定的对象为null或undefined时指向window
        base.fn = this; // 调用箭头函数时的this指向的是调用者也就是函数对象，将函数对象赋值给base对象的一个属性
        var result = base.fn(...args1, ...args2); // 调用base.fn时，fn中的this指针指向的是base，并使用Spread操作符展开参数传参
        delete base.fn; // 删除base对象的fn属性
        return result; // 将返回值返回
    }
}

2、数组去重
数组去重大全

1、利用Set
获取去重后的大小要通过 size
Set是一个对象，向里面追加元素，要通过 add() 方法

var arr=[2,3,3,3,2,1,5,35];
      var arr2=new Set(arr);
      //或者
      [...new Set(arr)]
      console.log(arr2 instanceof Array);//false
      console.log(arr2 instanceof Object);//true

2、利用indexOf去重
思想：定义一个空数组result，遍历要去重的数组，如果result中没有这个值，就把该值放入结果数组中

function unique(arr) {
            var result = [];
            for (var i = 0; i < arr.length; i++) {
                if (result.indexOf(arr[i]) == -1) {
                    result.push(arr[i]);
                }
            }
            return result;
        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

3、通过 sort() 去重
思想：先排序，result中默认有一个arr[0]元素，遍历arr，相邻元素进行比较，如果不一致，就放入结果数组

function unique(arr) {
            arr.sort();
            var result = [arr[0]];
            for (var i = 1; i < arr.length; i++) {
                if(arr[i]!=arr[i-1]){
                    result.push(arr[i]);
                }
            }
            return result;
        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

4、利用 splice 方法
思想：双重循环
注意点：j 一定要 --

function unique(arr) {
            for (var i = 0; i < arr.length; i++) {
                for(var j=i+1;j<arr.length;j++){
                    if(arr[i]==arr[j]){
                        arr.splice(j,1);
                        j--;//注意！！！
                    }
                }
            }
            return arr;
        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

5、利用 includes 方法
思想：与2差不多

function unique(arr) {
            var result = [];
            for (var i = 0; i < arr.length; i++) {
                if (!result.includes(arr[i])) {
                    result.push(arr[i]);
                }
            }
            return result;
        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

6、利用 filter 函数
参数：item，index，arr
indexoOf 参数：查询的数值，位置
思想：返回当前元素的第一个索引等于当前索引值的元素

function unique(arr) {
            return arr.filter(function (item, index, arr) {
                return arr.indexOf(item,0)===index;
            })
        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

7、利用Map
思想：定义一个map，遍历arr，如果map中存在该元素（以键表示），让该键所对的值为true，否则，将值设为false，并且放入map中

function unique(arr) {
            var map=new Map();
            var result=new Array;
            for(let i=0;i<arr.length;i++){
                if(map.has(arr[i])){
                    map.set(arr[i],true);
                }
                else {
                    map.set(arr[i],false);
                    result.push(arr[i]);
                }
            }
            return result;

        }
        var arr = [2, 3, 3, 3, 2, 1, 5, 35];

        console.log(unique(arr));

3、js事件循环机制

js事件循环机制
同步任务 异步任务
异步任务分为宏任务和微任务
宏任务：script settimeout setinterval setimmeidate io ui渲染
微任务：promise.then process.nextTick promise
settimeout会立即执行，是里边的内容会延迟调用
——————————————————————
看了一天的博客、视频，还是阮一峰写的好~
js事件循环机制-阮一峰
深入理解浏览器和Node.js的事件循环机制（Event Loop）——前端泡泡
浏览器与nodejs事件循环机制
——————————————————————
区别：
1、浏览器微任务是在每一个宏任务事件执行结束之后执行，nodejs是在每一个事件循环阶段之间执行
2、nodejs事件轮询机制，共有6个阶段，settimeout在poll阶段，setimeadiate在poll之后的check阶段，这两个任务的执行顺序不一定，如果事件在io callback中，setimeadiate会优先于settimeout执行，nextTick优先于所有微任务
3、promise.then是异步任务，是微任务

demo

        console.log("start");
        new Promise((resolve) => {
            console.log("promise1");
            setTimeout(() => {
                console.log("setout1");
            }, 0);
            resolve(3);
        }).then(res => {
            console.log("then1");
        });
        setTimeout(() => {
            console.log("setout2");
        }, 0);
        console.log("middle");
        setTimeout(() => {
            console.log("setout3");
            setTimeout(() => {
                console.log("setout4");
                new Promise((resolve) => {
                    console.log("hah");
                    resolve(3);
                }).then(res => {
                    console.log("then2");
                });
            }, 0);
        }, 100);
        console.log("end");

执行结果

执行过程说明

5. promise.all 实现
all实现

6、 js数组、字符串API

//数组
        var arr = [1, 2, 4, 5];
        //splice 
        //参数  开始索引  结束索引  插入的元素...item 
        //影响元素组，rearr返回的是删除的元素  
        var rearr=arr.splice(0,0,[...[5,6,7]]);
        console.log(arr);
        var rearr=arr.splice(0,0,5,6,7);
        console.log(arr);//5 6 7 1 2 4 

        //reduce
        console.log(arr.reduce((total, current, index, arr) => {
            return total += current;
        }));

        //Array.of(); 转换为一个数组
        console.log(Array.of(1,2,3,4,5));
        //[1,2,3,4,5]

        //entries
        for(let [key, value] of arr.entries()){console.log([key,value])}

//字符串
        //replace 第一个参数可以是字符串也可以是正则 ，第二个是新字符 用来替换前面的字符 默认替换第一个字符
        var str="hahHahhh";
        console.log(str.replace(/h/gi,"b"));//babbabbb
        console.log(str.replace(/h/g,"b"));//babHabbb
        console.log(str.replace("h","b"));//bahHahhh

        //substring start end   substr不建议使用 esma标准没有规范化
        //这两个会把负数变为0
        var a1=str.substring(0,4);
        var a2=str.substring(-2,4);
        console.log(a1);//hahH
        console.log(a2);//hahH
        var b1=str.substring(0,4);
        var b2=str.substring(-1,4);
        console.log(b1);//hahH
        console.log(b2);//hahH

        //substr
        str.substr(length,length);

        //slice start end 可以为负数  是负数就和字符串长度相加，如果大于0，从该位置开始，如果小于0，从0开始
        var str1 ="abcdef";
        var c=str1.slice(3,5);//de
        var c=str1.slice(-3,5);//de
        var c=str1.slice(-3,-5);//""
        var c=str1.slice(-5,-3);//bc
        var c=str1.slice(-7,-3);//abc
        console.log(c);

es6
es6官方文档

7、set实现交并差集

8、Map注意问题
1）键名

2）获取对象的值

//Map
//只有对同一个对象的引用，Map结构才将其视为同一个键。这一点要非常小心!!!!!
var map=new Map();
map.set(['a'],1);
console.log(map.get(['a']));//undefiend

var b=['b'];
map.set(b,2);
console.log(map.get(b));//2 

9、symbol写法

10、es5与es6继承区别