前台面试题

1，遍历

        let arr = [1,2,3];        arr.name = 'a';        Array.prototype.sex = "ds";        console.log(arr);//[1,2,3,name:'a']        for(var i=0;i<arr.length;i++) {            console.log(arr[i]) //1,2,3        }      //可以遍历对象和数组        for(var key in arr) {             console.log(key)//0,1,2,name,sex (hasOwnproperty)        }       console.log(Object.keys(arr));//['0','1','2','name']      //只能数组        for(var key of arr) {            console.log(key)//1,2,3        }      //只能数组        arr.forEach(i => {            console.log(i) //1,2,3        })

2, 逻辑运算符
1 && 2 若 1 可转换为 true，则返回 2；否则，返回 1。
1 || 2 若 1 可转换为 true，则返回 1；否则，返回 2。
可以转为false:
null；NaN；0；空字符串（"" or '' or ``）；undefined

        alert(1 && 2); //2        alert(0 && 2); //0        alert(0 && undefined); //0        alert(1 || 2); //1        alert(0 || 2); //2        alert(0 || undefined); //undefined

3,闭包

       for(var i=10;i>0;i--) {            (function(k){                setTimeout(function() {                    console.log(k); //10,9,8,7                }, 0)            })(i)        } 

4，变量提升

       (function() {            console.log(name);//报错且终止运行。 在初始化之前未能Cannot access 'name' before initialization            console.log(age);//假如在报错之前的话可以输出undefined            let name = 's';            var age = 14;        })()

5，数字属性名==变量属性名的时候，

1. 后者覆盖前者

        let a={},b='0',c=0;        a[b]='超逸';        a[c]='博客';        console.log(a[b]); //博客

2)symbol公告唯一值

    let a = {},b = Symbol('0'),c = Symbol(0);        a[c] = '博客';        a[b] = '超逸';        console.log(a[c]);//博客

6, 多层嵌套深拷贝

       function isArray(val) {            return Object.prototype.toString.call(val) === ['Object Array'];        }        function isObject(val) {            return typeof val === 'Object' && typeof val !== null;            //注意: typeof null/[]/{} === 'Object';         }        function DeepClone(val) {            var obj = isArray(val) ? [] : {};            for (var key in val) {                if (isObject(val[key])) {                    obj[key] = DeepClone(val[key]);//递归                } else {                    obj[key] = val[key];                }            }            return obj;        }

7: 综合

       function Foo(){            getName=function(){                console.log(1);            };            return this;        }        Foo.getName = function (){            console.log(2);        };        Foo.prototype.getName = function (){            console.log(3);        };        var getName = function(){            console.log(4);        };        function getName(){            console.log(5);        }        Foo.getName();//2        getName();//4        Foo().getName();//1        getName();//1        new Foo.getName();//4 先Foo.getName() 无参数new        new Foo().getName();//3 先new Foo()实例，而后找构造函数原型上的getName        new new Foo().getName();//3

8，浏览器是多线程的，而js是单线程的

      async function async1(){            console.log('async1 start');            await async2();            console.log('async1 end');        }        async function async2(){            console.log('async2');        }        console.log('script start');        setTimeout(function(){            console.log('setTimeout');        },0)        async1();        new Promise(function (resolve){            console.log('promise1');            resolve();        }).then(function(){            console.log('promise2');        });        console.log('script end');script start ----async1 start ---async2 ---- promise1（同步执行立即执行） -- script end ---- async1 end ---promise2（微任务）----settimeout(宏任务)

9，多维数组拉平

arr = [1, 2, [3, 4, [5, 6, [7, 8]]]].join(',').split(',');//["1", "2", "3", "4", "5", "6", "7", "8"]arr =  [1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity) ;//es6方法 [1, 2, 3, 4, 5, 6, 7, 8]

10,父子组件执行顺序：

11,块级作用域 let const 定义的不是顶层对象

       const a = {            b: function(){console.log(this)},            c: ()=>{console.log(this);}        };        a.b(); //a        a.c(); //window        console.log(window.a);//undefined        let a = 'ss'; 等价于       {           let a = 'ss'          }

12,js实现es6数组方法
filter:

      Array.prototype.filter1 = function(fn) {            console.log(this);//谁调用就是谁 [1,2,3,4]            var arr = [];            // 遍历数组，回调函数为true 就返回            this.forEach(i => {                if (fn(i)) {                    arr.push(i);                }            })            return arr;                    }        console.log([1,2,3,4].filter1(item => {return item > 2;}));//[3,4]

every:

        Array.prototype.every1 = function(fn) {            console.log(this);//谁调用就是谁 [1,2,3,4]            var arr = [];            // 遍历数组，回调函数为true 就返回            this.forEach(i => {                if (fn(i)) {                    arr.push(i);                }            })            // 每一个都符合条件            return arr.length === this.length;                    }        console.log([1,2,3,4].every1(item => {return item > 2;}));//false

some:

        Array.prototype.some1 = function(fn) {            console.log(this);//谁调用就是谁 [1,2,3,4]            var arr = [];            // 遍历数组，回调函数为true 就返回            this.forEach(i => {                if (fn(i)) {                    arr.push(i);                }            })            // 至少有一个            return arr.length > 0;                    }        console.log([1,2,3,4].some1(item => {return item > 2;}));//true

map:

        Array.prototype.map1 = function(fn) {            console.log(this);//谁调用就是谁 [1,2,3,4]            var arr = [];            // 遍历数组，回调函数返回结果放到新数组            this.forEach(i => {                arr.push(fn(i));            })            return arr;        }        console.log([1,2,3,4].map1(item => {return item * 2;}));//[2,4,6,8]

find:

        Array.prototype.find1 = function(fn) {            console.log(this);//谁调用就是谁 [1,2,3,4]            // 遍历数组，回调函数为真返回第一个元素并跳出循环            for(var i=0; i<this.length;i++) {                if(fn(this[i])) {                    return this[i];                }            }           }        console.log([{a: 1,b: 2},{a: 111,b:222}, {a: 111, b:2}].find1(item => {return item.a === 111;}))//{a: 111,b:222}