【JavaScript】题库

0、字符串中括号（(、)、{、}、[、]）的匹配

• 简单写法
  IE 不兼容,主要是因为用到了ES6的语法

function isValid(str){
    if(!str.trim()) return -1;
    var stack = [];
    var keys   = [')',']','}'];
    var values = ['(','[','{'];
    var isBreak = -1;
    for(var i=0;i<str.length;i++){
        var char = str.charAt(i);
        if(values.includes(char)){
            // 开始
            stack.push(char);

        }else{
            var index = keys.indexOf(char);
            if(index > -1){
                // 闭合
                if(!stack.length || values[index] != stack.pop()){
                    isBreak = i;
                    break;
                }
            }
        }
    }
    if(isBreak > -1){
        return isBreak
    }
    return stack.length - 1
}

• 兼容写法

function isValid(str){
    if(!str.trim()) return -1;
    var stack = [];
    var dict = {"]": "[", "}": "{", ")": "("};
    var values = Object.values(dict);
    var isBreak = -1;
    for(var i=0;i<str.length;i++){
        var char = str.charAt(i);
        if(values.includes(char)){
            stack.push(char);

        }else if(dict[char]){
            if(!stack.length || dict[char] != stack.pop()){
                isBreak = i;
                break;
            }
        }
    }
    if(isBreak > -1){
        return isBreak
    }
    return stack.length - 1
}

1、call、apply的区别

• 相同点：
  • 都是Function类原型上的方法，函数的实例都可以调用；
  • 都能执行函数并改变函数this指向；
• 不同点：
  • call，可以传多个参数，一个个传参（性能稍微好点，尤其是参数>3）；
  • apply，只传两个参数，第二个参数以数组形式；
  • bind，也是改变this指向，不立即执行，也是一个个传，传数组就当做一个；
  • call(obj,...arr)：利用ES6展开运算符实现传数组，所以一般可以替代apply；

---

2、实现(5).add(3).minus(2)，使其输出6；

~function(){
	function check(n){
		n = Number(n);
		return isNaN(n)?0:n;
	}//数字检验,isNaN内部以Number方法转化检验
	function add(n){
		return this+n;
	}
	function minus(n){
		return this-n;
	}
	Number.prototype.add = add;
	Number.prototype.minus = minus;
	/*
	["add","minus"].forEach(item=>{
		Number.prototype.[item]= eval(item)
	})
	*/
}

---

3、箭头函数与普通函数（function）的区别，构造函数可以new实例，箭头函数为什么不可以？

箭头函数es6语法；
1、可以简写：let fn = item=>item;
2、箭头函数没有自己的this：
不能通过（call\apply\bind）等方法改变内部this，
只与执行上下文有关；
3、回调函数中this一般是window；

4、面向对象、变量提升、运算符优先级考查

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，Foo执行返回window，将全局getName修改
getName();//1
new Foo.getName();//2，这里是访问属性（优先级19），与Foo执行不同，new+（无参列表，优先级18）
//相当于 new(Foo.getName)(),函数执行；
new Foo().getName();//3，先new Foo()出实例，然后实例原型上的方法;==实例.getName()
new new Foo().getName();//3，两个new，先算有点，new (实例.getName)()

5、同步、异步考查

• 浏览器是多线程，分给js一个单线程，执行js时，主线程先执行，期间遇到异步操作（宏任务、微任务）就放到任务队列中，当主线程中同步任务执行完，此时任务队列中已经放好宏、微任务，通过事件循环，去队列中执行异步操作：
  • 微任务优先于宏任务；当队列中所有微任务执行完，再执行宏任务；
  • 宏任务中又有微任务，会在执行完本次宏任务后清空自身的微任务；
  • async、await:是await所在行及前面代码有同步按同步，后面的代码当做微任务；
    

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