JS考核题

JS考核题

第一题 - 写出下列输出

1.typeof(typeof A);  
2.typeof({})
3.typeof(null)
4.(false == '' )
5.(NaN == NaN )
6.(null == undefined )
7.(null === undefined )
8.(0 == '' )
9.("20"+20)
10.(10+10+"20")

答案

1. string  // typeof函数的返回值为字符串类型
2. object
3. object  // null表示一个不确定的对象
4. true
5. false  // NaN不等于自身
6. true
7. false  // ===表示绝对相等,显然错误
8. true
9. 2020  // 字符串与数字相加,将数字转化为字符串进行拼接
10.2020  // 从左向右依次运算 

第二题 - call apply bind 的区别

首先,call/apply/bind都是用来改变this指向的

1. call
   call方法第一个参数是要绑定给 this 的值，后面传入的是一个参数列表。当第一个参数为 null、undefined的时候，默认指向window。
2. apply
   apply接收两个参数，第一个参数是要绑定给 this 的值，第二个参数是一个参数数组。当第一个参数为 null、undefined的时候，默认指向window。
3. 和 call 很相似，第一个参数是 this 的指向，从第二个参数开始是接收的参数列表。区别在于 bind 方法返回值是函数以及 bind 接收的参数列表的使用。(bind返回对应函数，便于之后调用)

第三题 - 写出下列输出结果，并修改输出为0-4（使用两种方法）

function x() {
	const result = [];
	for (var i = 0; i < 5; i++) {
		result[i] = function y() {
			console.log(i);
		};
	}
	return result;
}
const functions = x();
for (let j = 0; j < functions.length; j++) {
functions[j]();
};

答案

输出 5 5 5 5 5  // 形成闭包

方法1  // 立即执行函数
function x() {
	const result = [];
	for (var i = 1; i <= 5; i++) {
	    (function (i){
	        result[i] = function y() {
	            console.log(i);
	        }
	    }(i))
	}
return result;
}
const functions = x();
for (let j = 0; j < functions.length; j++) {
    functions[j]();
};

方法2  // let
function x() {
	const result = [];
	for (let i = 0; i < 5; i++) {
	result[i] = function y() {
		console.log(i);
	};
	}
	return result;
}
const functions = x();
for (let j = 0; j < functions.length; j++) {
functions[j]();
};

第四题 - 看码写话

1.
console.log(v1);
console.log(foo);
var v1 = 100;
function foo() {
	console.log(v1);
	var v1 = 200;
	console.log(v1);
}
foo();
console.log(v1);

// 依次输出 undefined, f foo(), undefined, 200, 100

2. 
let a = 10;
var b = 11
function fn() {
    console.log(this.a, this.b)
}
fn();
let obj = {
    a: 5,
    say: function() {
        console.log(this.a)
        fn();
        arguments[0]();
    }
}
obj.say(fn);

// 依次输出 undefined, 11, 5, undefined, 11, undefined, undefined

3.
setTimeout(()=>{
    console.log('timeout');
},0);
new Promise((resolve) => {
    console.log('a');
    setTimeout(()=>{
        console.log('c');
    }, 0);
    resolve();
    console.log('b');
}).then(() =>{
    console.log('promise');
}).catch(() =>{
    console.log('error');
});
console.log('code');

// 依次输出 a, b, code, promise, timeout, c

第五题 - 解释 prototype 、constructor 和 __proto__ 三者之间的关系

1. _ proto _ 属性是对象独有的，prototype属性是函数独有的，因为函数在js中也是对象，所以它拥有以上三种属性。
2. _ proto _ 属性的作用是：通过一个对象指向一个对象，进而实现js中的原型链查找。
3. prototype属性的作用是：在函数上定义一个原型对象，使得该函数创建的所有实例都具有共同的属性和方法。
4. constructor属性的含义就是指向对象的构造函数，所有对象的构造函数最终都指向Function。

第六题 - 原生js实现鼠标移入切换tab

<div class="tab">
    <div class="activite">选择1div>
    <div class="">选择2div>
    <div class="">选择3div>
div>
<div class="inner">
    <div class="activite">内容1div>
    <div class="">内容2div>
    <div class="">内容3div>
div>

.tab div{
    margin: 3px;
    width: 60px;
    height: 20px;
    border: 1px solid;

    float: left;

}

.tab .activite{
    background-color: blanchedalmond;
}
.inner div{
    clear: both;
    width: 200px;
    height: 20px;
    border: 1px solid;
    display: none;
}

.inner .activite{
    display: block;
}

var tabs = document.getElementsByClassName('tab')[0].getElementsByTagName('div')
    var inners = document.getElementsByClassName('inner')[0].getElementsByTagName('div')
    for(let i = 0; i < 3; i++){
        tabs[i].onmousedown = function (e) {
            if(this.className == ''){
                for(let i = 0; i < 3;i++){
                    if(tabs[i].className == 'activite'){
                        tabs[i].className = ''
                    }
                }
                this.className = 'activite'
                for(let i = 0; i < 3;i++){
                    if(inners[i].className == 'activite'){
                        inners[i].className = ''
                    }
                }
                for(let i = 0; i < 3;i++){
                    if(tabs[i].className == 'activite'){
                        inners[i].className = 'activite'
                    }
                }
            }
        }   
    }

第七题 - 写出三种继承方式并描述

	//父类
	function Person(){}

	//子类
	function Student(){}

	//继承
	Student.prototype = new Person();

		//父类
	function Person(){
		this.hobbies = ['music','reading']
	}

	//子类
	function Student(){
		Person.call(this);
	}

	var stu1 = new Student();
	var stu2 = new Student();

	stu1.hobbies.push('basketball');

	console.log(stu1.hobbies);  // ["music", "reading", "basketball"]
	console.log(stu2.hobbies);  //  ["music", "reading"]

	//父类
	function Person(name){
		this.hobbies = ['music','reading'];
	}

	Person.prototype.say = function(){
		console.log('i am a person');
	}
	//子类
	function Student(name){
		Person.call(this);  //构造函数继承（继承属性）
	}

	Student.prototype = new Person();  //原型继承（继承方法）

	var stu1 = new Student('lucy');
	var stu2 = new Student('lili');

	stu1.hobbies.push('basketball');

	console.log(stu1.hobbies);  // ["music", "reading", "basketball"]
	console.log(stu2.hobbies);  // ["music", "reading"]

	console.log(stu1.say === stu2.say);  // true

第八题

1. 将下列对象按照年龄从小到大排序，年龄相同的按照姓名排序

   person1={name:'jane',age:35}
   person2={name:'maru',age:23}
   person3={name:'harvey',age:21}
   person4={name:'anne',age:21}
   

   var arr = [
       {name:'jane',age:35},
       {name:'maru',age:23},
       {name:'harvey',age:21},
       {name:'anne',age:21}
       ]
   arr.sort((a, b) => {
         if(a.age != b.age){
             return a.age - b.age
         }else{
             if(a.name > b.name){
                 return 1
             }else{
                 return -1
             }
         }
     })
   
   

2. 实现一个函数，去除数组内重复的数字

    var arr =  [33, 11, 11, 11, 22, 22, 55, 55]
    var arr1 = []
    arr.forEach((value, index) => {
        if (arr.indexOf(value) == index) {
            arr1.push(value)
        }
    })
   

3. 最后一个单词的长度

   var lengthOfLastWord = function(s) {
   if(s.length>=1){
   
       s= s.split(" ")
       while(s[s.length-1]<1){
            s.pop(s.length-1);
       }
   
       if(s.length>0){            
           s=s[s.length-1];
           return s.length;
       }
   }
   return 0;    
   };
   
   s = "Hello world";
   console.log(lengthOfLastWord(s))