前言

之前在网上零零散散收集了一些前端相关的基础题，每天一题坚持了200天，并自己整理了答案。

现将200道题汇总于此，希望对一些刚接触前端的同学有帮助，大佬请绕行

第1-10题

1.下面代码的执行结果是什么

function getInfo(member, year) {
	member.name = "Alice";
	year = "2020"
}
var person = { name: "Tom" }
var brithYear = "2010";
getInfo(person, brithYear);
console.log(person, brithYear);

答案：{name:Alice},2010

2.下面代码的执行结果是什么

var p = new Promise(resolve => {
    console.log(4);
    resolve(5);
});
function func1() {
    console.log(1)
}
function func2() {
    setTimeout(() => {
        console.log(2)
    });
    func1();
    console.log(3);
    p.then(resolved => {
        console.log(resolved)
    }).then(() => {
        console.log(6)
    });
}
func2();

答案：4 1 3 5 6 2 解析：事件循环机制，主程序执行完，再执行微队列，再执行宏队列；Promise then会先进入微队列，setTimeout等进入宏队列

3.下面的代码的执行结果是什么

function Car(){
    this.name = "BMW"
    return {
        name:"maserati"
    }
}
var car = new Car();
console.log(car.name);

答案：maserati 解析：new构造函数产生对象时，有显示返回一个对象的情况，this就是该对象

4.模拟实现placeholder作用

<input type="text" name="user" value="请输入用户名" style="color:#999"
onfocus="if(this.value=='请输入用户名'){this.value = '';this.style.color='#424242'}"
onblur="if(this.value == ''){this.value = '请输入用户名';this.style.color='#999'}" >

5.下面代码的执行结果是什么

var a = 1;
var b = 2[a,b] = [b,a]
console.log(a,b)

答案：a是1，b是[undefined , 1]
解析：预编译和包装类对象的结果

6.下面代码最后打印arr是什么

var arr = [1,2,3,4,5];
arr.length = 1;

答案：[1] 解析：length会影响数组

7.下面代码执行结果是什么

var arr = [1+1,1*2,1/2];
console.log(arr);

答案：[2,2,0.5] 解析：数组保存的时候，每一位的表达式都会先运算

8.下面代码的执行结果是

var one = (false || {} || null);
var two = (null || false || "");
var three = ([] || 0 || true);
console.log(one,two,three);

答案：{},"",[] 解析：本题考查||运算符的用法。其实记住一条规律：||运算符返回的是能确认最终结果的值！

9.下面代码执行结果是？

var h5course = false;
var result = h5course / 0;
if (result) {
    console.log(result * 2 + '2' + 4)
} else {
    console.log(!result * 2 + '2' + '4')
}

答案："224" 解析：0/0,null/0,undefined/0,false/0都为NaN，其他正数/0为infinity，其他负数除以0位-infinity。!NAN为true，true*2为2

10.下面代码执行结果是什么？

var a = 0, b=0;
function A(a){
    A = function(b){
        alert(a + b++)
    }
    alert(a++)
}
A(1)
A(2)

答案：1，4 解析：深入预编译和闭包就会得出结果

第11-20题

11.下面代码的执行结果是？

var str = new Array(5).toString()
console.log(str);

答案：",,,," 解析：new Array(n) 返回的是以length为n、每一位为空的数组。所以正因为new Array有这样那样的问题，一般推荐使用字面量如：var arr = [5]

12.下面代码的执行结果是什么？

console.log(123..toString());

答案："123" 解析：包装类的原因，js会将123.通过new Number(123.)打包成包装类对象。调用的是Number.prototype.toString，所以new Number(123.).toString === Number.prototype.toString

13.下面代码的执行结果是？

var x = 1;
var y = 2;
function show() {
    var x = 3;
    return {
        x: x,
        fun: function (a, b) {
            x = a + b;
        }
    }
}
var obj = show();
obj.fun(x, y);
console.log(obj.x)
console.log(x)

答案：3，1 解析：考查知识点闭包和预编译

下面的代码执行结果是？

var a = (true + false) > 2 + true;
console.log(a);

答案：false 解析：涉及知识点运算符的计算顺序和类型转换；有()先算()，存在隐式类型转换true + false 变成1+0，算数运算优先比较运算符，所以先算2+1 最后比较是：1>3 得出false

15.说说运算符的优先级

【小括号()】 > 【逻辑非!】 > 【算数*/%】> 【算数+-】> 【关系比较><==】 > 【逻辑与&&、逻辑或||】 > 【三目 ? :】 > 【赋值=】大致是这样，具体可以查看这篇文档，里面有个表：developer.mozilla.org/zh-CN/docs/…

16.下面代码执行结果是？

var num = 3;
console.log(num.toString(2));
console.log(num.toFixed(2));

答案：11、3.00 解析：toString方法传入一个参数时，表示把一个数当成10进制转成对应的进制的数，这里3被当成10进制，变成2进制就是11；而toFixed方法把目标数变成保留指定位数的小数，注意会四舍五入！这里保留两位小数，即变成3.00

17.下面代码的执行结果是什么？

function a(x){
    return x*2
}
var a;
console.log(a);

答案：function a(x){return x*2}

18.下面代码的运行结果是什么？

function fun(n, o) {
    console.log(o);
    return {
        fun: function (m) {
            return fun(m, n);
        }
    }
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(2);
c.fun(2);
c.fun(3);

答案：

undefined 0 0 0

undefined 0 1 2

undefined 0 2 2

19.下面代码的执行结果是？

var a = []+[]+"alice".split("");
console.log(a);

答案："a,l,i,c,e" 解析：[]+[]为空字符串'',空字符串加数组，等于把数组变成字符串的形式，相当于数组调用了toString

20.有两个变量a和b，其值为number类型且非NaN，不借助其他变量，完成a与b的交换

答案：方式有很多种，下面是其中给一种 var a = 101; var b = 102; a = a + b; b = a - b; a = a - b; console.log(a,b)

第21-30题

21.下面代码的执行结果是？

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.moveTo = function (x, y) {
        this.x = x;
        this.y = y;
        console.log(this.x, this.y)
    }
}
var p1 = new Point(0, 0);
var p2 = { x: 0, y: 0 };
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10])

答案：1,1 和 10,10 解析：this指向有两点，(1) 函数谁调用里面this指向谁，(2) apply call bind可改变函数执行时的this指向

22.下面代码的执行结果是什么？

var globalVar = 0;
(function (outerArg) {
    var outerVar = 456;
    (function (innerArg) {
        var innerVar = 10;
        console.log(globalVar, outerArg, outerVar, innerArg, innerVar);
    }(789))

}(123))

答案：0，123，456，789，10 解析：立即执行函数与普通函数执行没有区别

23.下面代码执行结果是什么？

console.log(1 + undefined);//NaN
console.log(1 + null);//1
console.log(null + undefined);//NaN 
console.log(true + false);//1
console.log(1 + '2');//12
console.log(2 + []);//2
console.log(2 + { a: 1 });//2[object Object]
console.log([] + {});//[object Object]
console.log({} + []);//[object Object]
console.log(3 + {});//3[object Object]
console.log({} + 3);//[object Object]3

答案：如上

解析：知识点加号运算符存在隐式类型转换，其中加对象时，相当于数值+"[object Object]",充当字符串连接符

24.下面代码的执行结果是什么？为什么

var a = {},b={key:"b"},c={key:'c'};
a[b] = 123;
a[c] = 456;
console.log(a[b]);

答案：456 解析：在设置对象的属性时，如果属性传入是一个对象，js会隐式的讲变量变成对象对应的[object Object] 所以：a[b]和a[c]其实都相当于a["[object Object]"],所以他们操作的都是a对象的同一个属性，因此结果为456

25.下面代码的执行结果是什么？

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000);
}

答案：5 5 5 5 5 解析:异步setTimeout是放在宏任务中，等执行完for循环之后再放到任务队列中执行可以用let或者立即执行函数解决方法一： for(let i = 0;i<5;i++){ setTimeout(function(){ cosnole.log(i); },i1000) } 方法二： for (var i = 0; i < 5; i++) { (function(i){ setTimeout(() => { console.log(i)//0 1 2 3 4 }, i100); }(i)) }

26.下面代码执行结果是？

var user = "Alice"
function changeUser(){
    user  = "Tom";
    return;
    function user(){
        console.log('user function')
    }
}
changeUser();
console.log(user);

答案：Alice

解析：原因很简答，在执行changeUser函数的时候，预编译将里头函数user提升了，后面改变user = "Tom"，改变的是changeUser函数里面的局部变量。

27.下面代码执行的结果是什么？

(function(){
    var user = author = "Alice";
}());
console.log(author);
console.log(user);

答案：Alice、Uncaught ReferenceError: user is not defined

解析：全局里面没有user，所以访问时会报错。而author是暗示全局变量，是有值的。

28.下面代码的执行结果是？

console.log(0 || 1);
console.log(1 || 2);
console.log(0 && 1);
console.log(1 && 2);

答案是：1 1 0 2

解析：||或运算，前面为真，返回前面的，前面为false，返回后面的

&&与运算符前面为假，返回前面的，前面为真，返回后面的

29.下面代码的执行结果是什么？

console.log(1 + '2' + '3');
console.log(1 + +'2' + '3');
console.log(1 + -'1' + '2');
console.log(+'1' + '2' + '3');
console.log('A' - 'B' + "2");
console.log("A" - "B" + 2);

答案：'123' '33' '02' '123' 'NaN2' NaN 解析：（1）任何数据类型+字符串都为字符串；（2）一元正负可以将其变成数值型；（3）非数字类型或者非数字型字符串字符串相减，值为NaN

30.下面代码的执行结果是？

(function(){
    try{
        throw new Error
    }catch(x){
        console.log(x)//Error
        var x = 1;
        var y = 2;
        console.log(x)//1
    }
    console.log(x);//undefined
    console.log(y);//2
})();

答案: 1 undefined 2

解析：最开始执行匿名立即执行函数参数的作用域中，由于预编译将变量x和y提升了值为undefined

当执行catch函数时，里面有自己的形参变量x，这里的值是错误信息：Error,后面赋值为1；所以里面catch中先打印Error后打印1

y被赋值为2;

所以外面打印的值：x为undefined，y为改变的值2

第31-40题

31.下面代码的执行结果是？

var a = 10;
function fn() {
    console.log(this.a)
}
var obj = {
    a: 5,
    method: function (fn) {
        fn();//自己执行的，所有this指向window，打印出10
        arguments[0]();
    }
}
obj.method(fn, 1)

答案：10 undefined

解析：函数自己执行里面this指向window，

函数传入另外一个函数作为参数，通过arguments[0]的形式调用，相当于arguments.0(),arguments.0就代表该函数，所以里面this指向arguments。

再比如：

var length = 10;
function fn() {
    console.log(this.length)
}
var obj = {
    length: 5,
    method: function (fn) {
        fn();//自己执行的，所有this指向window，打印出10
        arguments[0]();//相当于arguments.0(),这里arguments的length为2，并且arguments.0中的0就是传入的fn，所以执行函数，相当于arguments调用。打印出2
    }
}
obj.method(fn, 1)

答案是：10 2

32.下面代码的执行结果

var fn = function a(){
    a = 1;
    console.log(typeof a)
}
fn();//function
console.log(typeof a)//undefined

答案：function undefined

解析：关于有名函数表达式需要注意2点：

（1）有名函数表达式的函数名（a）在函数体内还代表一个函数

（2）在函数体外部是会自动忽略函数的名称，即函数体外面是不能访问到（a）

（3）在函数体内部，函数名（a）不能再被修改

33.说说this和$(this)在jQuery中有什么不同？

答案：this是js关键字中的一个，表示当前DOM元素；而$(this)返回的一个jQuery对象，可以调用jQuery中封装的方法

34.下面代码的执行结果是什么？

function fn1() {
    return {
        str: 'hello'
    }
}
function fn2() {
    return
    {
        str: 'hello'
    }
}
console.log(fn1());
console.log(fn2());

答案：{str: "hello"} undefined 解析：js语言特性，如果语句表达是完整的，换行后默认会在语句后面加入‘;’

35.如何获取函数实参和形参的个数？

答案：

function fn(a,b){
    //1. 获取实参个数的方式：
    console.log(arguments.length);//5
    //2. 获取形参个数的方式：
    console.log(arguments.callee.length)//2
    arguments.callee===fn,所以也可以用fn.length获取形参个数
    console.log(fn.length)//2
}
fn(1,2,3,4,5);

36.下面代码执行结果是？

function Foo() {
    getName = function () {
        alert(1)
    }
    return this;
}
Foo.getName = function () {
    alert(2)
}
Foo.prototype.getName = function () {
    alert(3)
}
var getName = function () {
    alert(4)
}
function getName() {
    alert(5)
}
// 分析此时GO里有的东西：{
// getName: function getName() {alert(4)},
// Foo: function Foo(){getName = function () {alert(1)}  return this; }
// }
// 并且Foo的静态方法中有个Foo.getName = function () {alert(2)}
// 原型上还有个方法getName = function () {alert(3)}
// 下面的结果是？
Foo.getName();//2
getName()//4
Foo().getName()//Foo(),返回this为window，并且GO中的getName变成alert(1),所以这里是：1
getName()//1
new Foo.getName()//将Foo.getName函数作为构造函数执行，所以弹出：2
new Foo().getName();//调用的是原型上的方法 所以打印： 3
new new Foo().getName()//这里是js运算符的优先级问题，相当于new((new Foo()).getName)();答案输出：3

答案：如上

37.下面代码的执行结果是？

var user = 'alice';
function firstFn(){
    console.log(user);
}
function secondFn(){
    var user = 'tom';
    firstFn();
}
firstFn();

答案:'alice'

解析：变量查找是顺着作用域链查找的，例子中，secondFn的作用域没有加到firstFn，

需要注意的是，看是否有加入到某个作用域链中，主要是看该函数的定义位置，而不是使用位置。

38.如何阻止a标签的默认跳转事件？

答案：

let tagA = document.getElementsByTagName('a')[0]
taga.onclick = function (e) {
    //w3c
    // e.preventDefault();
    //IE独有的
    // e.returnValue = false;
    //都可以用
    return false;
}

39.如何让一个元素不显示

答案：

let odiv = document.getElementsByClassName("div")[0]
// 方法1
odiv.style.display = 'none'
// 方法2
odiv.style.visibility = "hidden"
// 方法3
odiv.styly.opacity = 0

40.下面代码的执行结果是？

let arr = [1, 2, 3, 4]
arr[10] = 10
arr[20] = 20
console.log(arr[15])

答案：undefined

解析：可以溢出读和写，溢出读时值为undefined，溢出写时，中间空位值为undefined

第41-50题

41.下面代码的执行结果是什么？

console.log(typeof undefined == typeof NULL)

答案：true

解析：js大小写敏感,NULL不是null,如果是typeof null返回的是object类型

42.下面代码的执行结果是

function fn(xx){
    this.x = xx
    return this
}
var x = fn(5)
var y = fn(10)
console.log(x.x)
console.log(y.x)

答案：undefined 10

解析：在fn(5)执行完，window.x === window;在fn(10)执行的时候，window.x = 10，window.y === window;

因此x.x其实就是new Number(10).x,所以打印出undefined，y.x其实就是window.x ，所以打印出10

43.下面代码的执行结果什么？

var x = 5;
function fn(x){
    x = 8
    console.log(x)
}
fn()
console.log(x)

答案：8、5

解析：fn打印的x是局部变量x，所以先打印8，外面打印全局window的x，所以打印出5

44.下面代码的执行结果是

(function(x){
    return (function(y){
        console.log(x)
    })(2);
})(1)

答案：1

解析：第一个立即执行函数执行的时候，ao上有个x值为1，然后return第二个立即执行函数执行，这里还能访问到x，所以打印出1

45.下面代码的输出结果是什么？

var result = (function f(n) {
    return (n > 1) ? n * f(n - 1) : n
})(10)
console.log(result)

答案：10的阶层，即3628800

46.下面代码的执行结果是什么，为什么？

function fn(){
    var a = b = {}
    a.name = 'alice'
    b.age = 10
    console.log(b.name,a.age)
}
console.log(typeof a)
console.log(typeof b)

答案：alice 10 undefined object

解析：引用值的赋值是地址，地址指向一个对象。暗示全局变量属于window所有

47.下面代码的执行结果是？

console.log(+true)
console.log(!'str')

答案：1，false

解析：一元正负默认隐式调用Number()；！默认取反后调用Boolean(),即!'str'相当于Boolean('str')

48.下面代码的执行结果是？

function Person(firstName,lastName){
    this.firstName = firstName
    this.lastName = lastName
}
let p1 = new Person('Lewis','Carroll')
let p2 =  Person('Lewis','Carroll')
console.log(p1)
console.log(p2)

答案：Person{fristName: 'Lewis', lastName: 'Carroll'}, undefined

49.下面代码的执行结果是什么？

function show(){
    "use strict";
    // name = "alice";
    age = 12;
    // console.log(`${name}今年${age}岁了`)
}
show()

答案：严格模式下，变量必须声明后再赋值，否则ReferenceError

解析：经过测试发现，如果严格模式下变量没声明就赋值为字符串，居然不报错。暂时待进一步验证

50.下面代码的执行结果是？

(function(){
    console.log(1)
    setTimeout(() => {
        console.log(2)
    }, 1000);
    setTimeout(() => {
        console.log(3)
    }, 0);
    console.log(4)
})()

答案：1 4 3 2

解析：考查的是执行队列的问题

第51-60题

51.下面代码，当点击页面button时，event.target打印的是什么？

<div onclick="console.log('first div',event.target)">
    <div onclick="console.log('second div')">
        <button onclick="console.log('button')">click me!</button>
    </div>
</div>

答案：event.target打印的是--> click me!

解析：点击tutton时，由于事件冒泡会传递到父级元素触发相同事件。而event.target记录的是事件的目标源头

52.下面的代码执行结果是什么？

function checkAge(data) {
    if (data === { age: 18 }) {
        console.log('我今年18岁了')
    } else if (data == { age: 18 }) {
        console.log('我今年成年了')
    } else {
        console.log('emmm...')
    }
}
checkAge({ age: 18 })

答案：emmm...

解析：引用值对比的是地址

53.下面代码的执行结果是？

let count = 0
console.log(count++)
console.log(++count)
console.log(count)

答案：0 2 2

解析：考查++运算符，如果++在后，先执行语句再+1；如果++在前面，先将数进行+1 然后在执行语句

54.如何判断一个变量是数组

let arr = []
//方法1
arr.contructor === Array
//方法2
arr instanceof Array
//方法3
Array.isArray(arr)

55.数组中的push pop unshift shift分别有什么用途？

push方法：给数组末尾添加一位或多位，返回变化后的数组长度

pop方法：给数组末尾移除一位，返回移除的元素

unshift ：给数组前面添加一位或者多位，返回变化后的数组长度

shift ：移除数组最前位，返回移除的元素

注意：以上方法都会改变原始数组

56.下面代码的执行结果是？

(function(){
    var x = y = 12 
})()
alert(y)

答案：12

解析:暗示全局变量,即变量未经声明就赋值,该变量属于window

57.下面代码的执行结果是什么？

var x = 'global'
function fn1(){
    console.log(x)
}
function fn2(){
    var x = 'fn2'
    fn1()
}
fn2();

答案：global

解析：作用域是静态的，不取决于函数执行位置，而是取决于函数定义所在位置。

58.下面代码的执行结果是？

var a = 1
var b = a
b++
console.log(a, b)

答案：1，2 解析：原始值赋值是值的拷贝

59.下面代码的执行结果是？

var a = [1,2,3,4]
var b = a;
a.push(5)
console.log(a,b)

答案：[1,2,3,4,5] [1,2,3,4,5] 解析：引用值的赋值是地址的拷贝，指向的是同一个空间

60.下面代码的执行结果是？

var x = 5;
function F(){
    x = 12;
    console.log(x);
    console.log(this.x);
    var x;
    console.log(x)
}
new F()

答案：12 undefined 12

解析：考点一 new关键字；考点二预编译

第61-70题

61.下面代码的执行结果是什么？

var arr = [1,2,3,4]
delete arr[1]
console.log(arr.length)
delete arr[3]
console.log(arr.length)

答案：4 4 解析：此处delete会移除arr数组中的第1位数据，虽然删除后该位置为empty，但数组的length不会变

62.下面代码的执行结果是什么？

var res = (12).toFixed(2)
console.log(res)

答案：'12.00' 解析：涉及到数字和包装类知识。如果是12.toFixed(2)就报错，相当于12.xxx！

63.下面代码的执行结果是什么？

console.log(12 + '5')
console.log(12 - '5')

答案：125 7

解析：+号运算符中有一个数是字符串时，则加号作用是字符串连接。-号运算符会将两边通过Number()转成数字再进行减法操作

64.下面代码的执行结果是什么？

var a = new Array(3);
var b = [undefined,undefined,undefined];
var c = [null,null,null];
var d = [false,false,false];
var e = [0,0,0];
console.log(a.join('-'));
console.log(b.join('-'));
console.log(c.join('-'));
console.log(d.join('-'));
console.log(e.join('-'));

答案：

false-false-false

0-0-0

解析：数组的join方法会将数组成员安装指定字符连接；特别的，如果join中数组成员是null或者undefined就会当成空串

65.如何获取一个大于等于0且小于等于9的随机整数？

console.log(Math.floor(Math.random()*10))

66.下面代码的执行结果是什么？

function sum(a, b) {
    return a + b;
}
console.log(sum(1, '2'));

答案："12"

解析：字符串拼接

67.哪些对象没有原型？

答案：（1）基础的顶层对象；（2）通过Object.create(null)创建的对象

68.下面代码的执行结果是什么？

var obj = {
  a: 1,
  b: 2,
  a: 3
}
console.log(obj)

答案：{a:3,b:2}

解析：非严格模式对象里头变量可重复，但会后面的会覆盖前面的

69.下面HTML代码的执行结果是什么？

<div onclick="console.log('div')">
    <button onclick="console.log('btn')">click me!!</button>
</div>

答案：btn div

解析：结构上非视觉上嵌套的元素存在事件冒泡功能，即从子元素冒泡向父元素

70.下面代码的执行结果是？

console.log(typeof typeof 12)

答案：'string'

解析：任意类型经过第一次typeof之后返回类型都是字符串

第71-80题

71.下面代码的执行结果是什么？

var arr = [1, 2, 3];
arr[10] = 4;
console.log(arr);

答案：[1, 2, 3, empty * 7, 4]

解析：数组可以溢出写，中间没有内容部分为空（empty），读取时值为undefined

72.下面代码的执行结果是什么？

String.prototype.showInfo = ()=>{
    return 'This is showInfo!'
}
let str = 'aaa';
let res = str.showInfo();
console.log(res);

答案：'This is showInfo!'

解析：包装类和原型

73.下面代码的执行结果是什么？

console.log(!!undefined)
console.log(!!null)
console.log(!!'')    
console.log(!!0)
console.log(!!1)

答案：false false false false true 解析：!!运算符用于将值变成布尔值

74.下面代码的执行结果是什么？

console.log(1>2>3);
console.log(3>2>1);
console.log(1<2<3);
console.log(3<2<1);

答案：false false true true 解析：比较运算符，按顺序从左往右比较，将前面的结果跟后一个比较，有数值会优先转成数字

75.下面代码的执行结果是什么？

let  arr = [1,2,3];
arr.unshift('a');
arr.push('b');
let newArrr = [4,...arr,5];
console.log(newArrr);

答案：[4,'a',1,2,3,'b',5] 解析：考查数组的基本使用，以及扩展运算符的基本使用

76.下面代码的执行结果是什么？

console.log('12'/0);
console.log(0/0);
console.log(true == 1);
console.log(NaN === NaN);

答案：infinity NaN true false 解析：考查运算符

77.下面代码的执行结果是什么？

let a = 1;
a = (++a, a++);
console.log(a);
a = (a++, ++a);
console.log(a);

答案：2 4

解析：考查++运算符和逗号运算符。

++在前就先++在执行该语句，++在后就先执行完该语句在++

逗号运算符，会返回逗号后面的结果，当然前面的语句也会执行

78.js中定义函数的几种方式：

(1) 函数声明

function fn1(){}

(2)函数表达式

let fn2 = function(){}

(3)通过Function构造函数

let fn3 = new Function('a','b','return a+ b')

Function最后一个参数表示函数体，其余参数作为形参

79.下面代码的执行结果是什么？

function Person(){}
console.log(Person.prototype === Function);
console.log(Person.prototype === Function.prototype);
console.log(Person.__proto__ === Function.prototype);
console.log(new Person().__proto__ === Person.prototype);

答案：false false true true

解析：关于原型。原型是function对象的属性，它定义了构造函数构造出对象的共有祖先

80.下面代码的执行结果是什么？

function f(){
    f = 12;
    console.log(f);
}
console.log(f);
f();
console.log(f);

答案：f(){} 12 12 解析：暗示全局变量

第81-90题

81.下面代码的执行结果是什么？

var fn = (function(temp){
    arguments[0] = 'Hello';
    return function(){
        console.log(temp,arguments[0])
    }
})('Mike')
fn('Alice');

答案：Hello,Alice 解析：考查立即执行函数，以及形参与arguments相互映射

82.下面代码的执行结果是什么?

if(function fn(){}){
    console.log(typeof fn)
}
console.log(typeof fn)

答案：'undefined' 'undefined'

解析：在if语句的小括号中，js会自动将里面的东西通过Boolean()变成对应的布尔值，所以里头函数声明并不能再其他地方使用该函数

83.下面代码的执行结果是什么？

console.log(1..toString())
console.log(NaN.toString())
console.log(typeof temp) 
console.log(1 ++)

答案：前三个分别是：'1' 'NaN' 'undefined'；

但最后一个语法有误：Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

解析：由于js执行的时候会先扫一遍看有没有语法错误，然后在一行一行的执行js语句。如果语法有误时，并不会执行其他语句。所以这里会出现SyntaxError

84.说说call和apply函数

（1）call和apply都是Function.prototype上定义的函数，任何一个函数都有call和apply方法

（2）当函数调用和call或apply方法时，call和apply会改变函数里头的this指向，然后执行该函数

（3）call和apply唯一不同在于传参形式，

call第一个参数是this指向，第二个开始分别对应函数的参数，

apply第一个参数也是this指向，第二个参数是数组，数组里头分别对应形参

（4）另外与call和apply相似的函数，bind()。该函数只是绑定函数的this指向，不会立即执行该函数。

85.下面代码的执行结果是什么？

var obj = {
    name: 'obj'
}
var bar = {
    name:'bar',
    show:function(){
        var name = 'foo'
        console.log(this.name)
    }
}
bar.show.call(obj);

答案：'obj'

86.下面代码的执行结果是什么？

var val = 1
var fn = function(){
    var val = 2;
    return function(){
        console.log(this.val)
        console.log(val)
    }
}
fn()()

答案：1 2 解析：fn()执行返回function(){},然后再执行，执行时里面this为window，所以this.val是1，val是局部变量val为2

87.下面代码执行结果是什么？

var a = function () {
    this.b = 2;
}
a.prototype.b = 20;
b = new a();
console.log(b.b);
var b = 1000;
a();
console.log(this.b)

答案：2，2

解析：b被new出来的时候，里面自己保存了一个b，所以不用去原型上找，即第一个b.b打印出2

当a()执行的时候，由于里面this指向window，所以执行了window.b=2；所以最后全局答应this.b就是window.b,即打印出2

88.下面代码的执行结果是什么？

var a = { n: 1 }
var b = a
a.m = a = { m: 2 }
console.log(a)
console.log(b)

答案:a为{m:2}，b为{n:1,m:{m:2}} 解析：这题需要特别注意，在js在读取a.m = a = { m: 2 }的时候，是从左往右；执行赋值是从右往左的。所以先开始a和b指向的空间{n:1}变成{n:1,m:{m:2}}，而a被重新赋值为{m:2}，所以最终解雇结果a为{m:2}，b为{n:1,m:{m:2}}

89.下面代码的执行结果是什么？

function Foo(){}
var f1 = new Foo()
console.log(f1.constructor)
Foo.prototype = {}
var f2 = new Foo()
console.log(f2.constructor)

答案：Foo(){}, Object(){} 解析：需要注意constructor是定义在原型上的东西，所以它会先找到自己的原型，然后再看constructor指向谁。因此，在没改变原型前new出来的实例f1的constructor指向Foo，改变构造函数的原型后再new出来的对象f2的constructor就是Object(){}

90.下面代码的执行结果是什么？

function Person(){
    this.name = 'alice'
    return true;
}
var p = new Person();
console.log(p)

答案：Person {name: "alice"}

解析：构造函数构造对象时，如果构造函数本身显示return 原始值，会自动忽略，任然返回构造出来的this，如果显示返回引用值，那么this会被覆盖

第91-100题

91.下面代码的执行结果是什么？

var val = 1;
val.length = 2;
console.log(val.length)

答案：undefined 解析：调用原始类型的什么属性，其实是js内部将原始值变成包装类对象，执行完之后删除该对象。所以val.length为undefined

92.下面代码的执行结果是什么

var fn = function a(){
    console.log(a)
    a = 1;
    console.log(a)
}
fn();
console.log(a)

答案：function a(){...} function a(){...} Uncaught ReferenceError: a is not defined 解析：具名函数表达式的特点，函数名可以在函数内部访问，但是无法被修改。

93.下面代码的执行结果是什么？

function a() {
    console.log(1)
}
function b() {
    console.log(2)
}
function c() {
    console.log(3)
}
function d() {
    console.log(4)
}
false && a();//&&前面为false后面不会再看，所以这里不执行a()
true || b();//||前面为true后面不会再看，所以这里不执行b()
false || c();//||前面为false后面会再看，所以这里执行c()，打印出3
true && d();//&&前面为true后面会再看，所以这里执行d()，打印出4

答案：3 4

解析：主要&&和||运算符的特点，原则是根据前面的真假值来判断是否还要执行后面的表达式

94.下面代码的执行结果是什么？

function fn(a){
    let a = 10;
    console.log(a)
}
fn(1)

答案：Uncaught SyntaxError: Identifier 'a' has already been declared 解析：函数内，用let或者const声明的变量，不能与形参名相同，否则会报错

95.下面代码的执行结果是什么？

function fn1(){
    var a = 1;
}
function fn2(){
    return;
}
console.log(fn1(),fn2())

答案：undefined undefined 解析：没有返回的函数，默认返回undefined；只写return的就相当于没写返回，也是undefined

96.手写圣杯继承

var inherit = (function () {
    function F() { };
    return function (Target, Origin) {
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.prototype.constructor = Target;
        Target.prototype._super = Origin.prototype;
    }
}());

97.封装一个函数mul，用于计算n的阶层

function mul(n){
    if(n==0||n==1){
        return 1;
    }
    return n*arguments.callee(n-1);
}

98.封装一个函数bytesLengh，用于查找任意字符串的字节长度

function bytesLengh(str) {
    var count = str.length;
    for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255){
            count++;
        }
    }
    return count;
}
charCodeAt(n)：返回字符串第n位字符的unicode编码，大于255字节长度为2，小于为1

99.封装一个方法insertAfter,功能类似insertBefore

Element.prototype.insertAfter = function (targetNode, afterNode) {
    var beforeNode = afterNode.nextElementSibling;
    if (beforeNode) {
        this.appendChild(targetNode);
    }
    this.insertBefore(targetNode, beforeNode);
}

100.手动封装异步加载js的方法asyncLoadScript

function asyncLoadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if (script.readyState) {//readyState是IE中的状态码
        script.onreadystatechange = function () {
            //绑定监听状态码的事件，IE状态码变成complete或者loaded，表示该元素加载完
            if (script.readyState == "complete" || script.readyState == "loaded") {
                callback();//回调函数，当script加载完后调用
            }
        }
    } else {
        //非IE 用onload事件，表示当script加载完时
        script.onload = function () {
            callback();//回调函数，当script加载完后调用
        }
    }
    script.src = url;//放在这，是为了避免IE立即加载完，立即加载完就不再触发onreadystatechange
    document.head.appendChild(script);//加载到页面中去
}
//=============test code=========================
asyncLoadScript('./js/tools.js', function () {
    //code
    console.log('按照加载完了：' + url + '文件')
});

第101-110题

如何清空和截断数组arr

var arr = [1,2,3,4]

答案：清空：arr.length = 0; 截断：arr.length = n;其中n表示需要截断的位置

下面代码的执行结果是什么？

var arr = [1,0,'',null,undefined,false,true,NaN]
var res = arr.filter(Boolean)
console.log(res)

答案：[1,true] 解析：数组的filter函数，用于遍历数组，将符合条件的成员过滤出来。

封装一个方法hasClass，用于检测元素是否具有指定类名

function hasClass(el,className){
    return el.classList.contains(className)
}

标准盒模型下，块级元素宽度如何计算？

答案：元素宽度 = content宽度 + 左右padding + 左右border

字符串对象中的substring函数和slice函数的区别？相同点：（1）substring与slice都是用于字符串截取（2）都可以接受两个参数start和end，分别表示开始索引和结束索引位（不包含end位置）不同的是：（1）如果end<start substring会将start和end交换; 而slice会直接返回空串,表示没截取到（2）如果start或者end有负数 substring会把小于0的数，当成0来计算而slice允许是负数，表示倒数第几位开始或结束
一道和em有关的题，问s5、s6的font-size和line-height分别是多少px？

结构
<div class="p2">
    <div class="s5">1</div>
    <div class="s6">1</div>
</div>
样式
.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;}

答案： p2：font-size: 16px; line-height: 32px s5：font-size: 32px; line-height: 64px s6：font-size: 32px; line-height: 64px 解释 p2 line-height: 2自身字体大小的两倍 s5 数字无单位行高，继承原始值，s5的line-height继承的2，自身字体大小的两倍 s6 无需解释

说说CSS权重值

!important 无穷大行间样式 1000 id 100 类伪类属性 10 标签伪元素 1 通配符 0

如何获取浏览器窗口高度和宽度

答案： window.innerHeight window.innerWidth 解析：不包含地址栏书签栏等

109.以下代码的执行结果是什么？

var i = 0, j = 0;
for (; i < 10, j < 5; i++, j++) {
    k = i + j
}
console.log(k)

答案：8 解析：注意for循环的执行顺序

找到数组arr中的最大值，写出三种方法

var arr = [1,3,4,-1,0,10,15,7]
方法1
var max = arr.sort(function (a, b) {
    return b - a
})[0]
方法2
var max = Math.max(...arr);
方法3
var max = -Infinity
for (var i = 0; i < arr.length; i++) {
    if (max < arr[i]) {
        max = arr[i]
    }
}

第111-120题

求出下面代码的执行结果

var a = 1
var b = a++
console.log(a, b)
var x = 1
var y = ++x
console.log(x, y)

答案：2 1 2 2 解析：注意++运算符放前和放后的区别

112.下面代码的执行结果是什么？

function fn(){
    alert(1)
}
alert(fn())

答案：分别弹出1 和 undefined 解析：先执行fn()，弹出1，函数返回值为undefined。所以alert(fn())相当于执行alert(undefined)

下面代码的执行结果是什么？

function fn(){
    var a = 0
    function innerFn(){
        a++;
        console.log(a)
    }
    return innerFn;
}
fn()()
var newFn = fn()
newFn()
newFn()

答案：1 1 2 解析：闭包实现私有变量

下面代码的执行结果是什么？

var a = 100
function fn(){
    alert(a)
    var a = 10
    return this.a
}
alert(fn())

答案：undefined 100 解析：执行fn()预编译的结果，局部变量a声明提升，弹出undefined，返回window.a，所以第二次弹出100

下面代码的执行结果是？

var arr1 = [1,2,3,4]
var arr2 = arr1.concat()
arr2.push(arr1.splice(1,0))
console.log(arr1,arr2)

答案：[1, 2, 3, 4] [1, 2, 3, 4，[]] 解析：concat用于连接数组，不改变原数组，返回连接后的新数组。 splice表示截取，可接受三个参数，第一个表示从第几位开始，第二个表示截取长度，第三个要添加的新数据，该函数返回截取部分这里splice截取0位，所以返回[]数组，所以最后面push到arr2上，所以arr2为[1, 2, 3, 4，[]]

下面代码的执行结果是？

var arr = new Array(3)
arr[1] = 5
arr[2] = 12
console.log(arr[0])

答案：undefined 解析：数组通过new构造函数Array产生时，如果传递一个数字，会创建对应长度的数组，数组的每一项为空，访问时值为undefined

下面代码的执行结果是什么呢？

var a = 100;
console.log(a++);
console.log(++a);

答案：100 102 解析：关于++运算符，如果++在前，就先去++再运行语句。如果++在后面，就先运行语句，后执行变量++

下面代码的执行结果是什么？

var a = !(3 <= 1)
var b = ("abc" == "abc") && ("cc" != "dd")
var c = (4 >= 4) && (5 <= 2)
var d = (2 < 3) || (3 < 2)
console.log(a, b, c, d)

答案：true true false true 解析：第一个！相当于取反，3<=1结果是false，取反是true 接着b，关于&&运算符，当前面表达式结果为true时，返回后面表达式的结果，由于后面表达返回true，所以b的值为true 接着c，同理，返回后面表达式的结果，5<=2,返回false。即c为false 接着d，关于||运算符，如果前面表达式返回true，这结果就为前面表达式的结果。即这里d为true

下面地址栏说法正确的是？

A.window.location.search获取的值是问号到#号之间的内容，包含问号不包含#号 B.修改地址栏中的#号后面的值页面不会刷新 C.window.location与window.location.href相同 D.window.location.hash获取的是#号及其后面的内容答案：ABCD

下面代码的执行结果是？

var str = 'abcdef'
str.length = 2
console.log(str)

答案：abcdef

第121-130题

下面代码的执行结果是什么？

function fn(){
    return foo;
    foo = 1;
    function foo(){}
    var foo = 'abc'
}
console.log(typeof fn())

答案：function 解析：预编译过程，先变量声明提升，再函数声明整体提升

下面代码的执行结果是什么？

var x = 1;
var obj = {
    x:2,
    foo:{
        x:3,
        fn:function(){
            return this.x
        }
    }
}
var f = obj.foo.fn
console.log(f())
console.log(obj.foo.fn())

答案：1 3 解析：关于this关键字，f()的时候，里面this执行window，所以打印出1；而obj.foo.fn()执行，里面的this指向foo，所以打印3

下面代码的执行结果是什么？

var x = 1;
var obj = {
    x: 2,
    foo: function () {
        setTimeout(function () {
            var x = 3;
            console.log(this.x)
        },1000)
    }
}
obj.foo()

答案：1 解析：setTimeout里面this指向window

124.下面代码的执行结果是什么？

var x = 1;
function fn() {
    this.x = 2;
    return x
}
var f = new fn();
console.log(f.x)

答案：2 解析：关于new关键字，在通过new生成对象时，里面this执行该对象，并且返回该对象。但是要注意，如果显示返回一个引用值，则new的结果为该引用值

125.下面代码的执行结果是什么？

var fn = function foo(){}
console.log(typeof foo)

答案：undefined 解析：具名函数表达式，函数名只会在函数里面使用。在函数外部是不存在的

下面代码的执行结果是？

var a = 12;
if(true){
    console.log(a)
    let a = 2
}

答案：Uncaught ReferenceError: Cannot access 'a' before initialization 解析：TDZ的原因，默认不能再定义之前使用

下面代码的执行结果是什么？

var a = [1,2,3,4,1,2,3,4,5,6,'a',undefined,null,false,true]
var s = new Set(a)
console.log(s.size)

答案：11 解析：Set数据结果换将传入的数组去重

下面代码的执行结果是什么？

let x = 1;
function foo(y=x){
    let x = 2
    console.log(y)
}
foo()

答案：1

下面代码的执行结果是什么？

fn(1)
var a = 2
function fn(a){
    console.log(a)
}

答案：1 解析：预编译会导致变量和函数有提升效果，所以可以在函数声明之前使用调用函数。调用函数是将形参a赋值为1，所以打印出局部a，即1

下面代码的执行结果是什么？

let x = 1
function f1(x,y=x){
    console.log(y)
}
function f2(y=x){
    let x = 0
    console.log(y)
}
f1(2)
f2()

答案：2 1 解析：f1执行值传递x的值为2，所以y的默认值为2；而f2执行时候，y的默认值为x，去全局里找x为1；所以先后分别打印2和1

第131-140题

下面那个属性对input和textarea元素都生效

A.readonly
B.disabled

答案：B 解析：比如在input类型为checkbox时，设置readonly，是一样可以选择是否选中

下面代码的执行结果是什么？

function F(){}
var f = new F
console.log(f.prototype)

答案：undefined 解析：prototype是函数身上的属性，并非是实例身上的属性

下面代码的执行结果是什么？

if(false){
    var a = 12
    let b = 5
}
console.log(a)
console.log(b)

答案：undefined Uncaught ReferenceError: b is not defined 解析：预编译的时候var声明的变量会有提升效果，值为undefined。let声明的遍历有块级作用域的概念，在外面不能使用。

求两个数组的差集，例如[1,2,3]和[2,3,4]的差集就是[1,4]

let arr1 = [1,2,3,4,5]
let arr2 = [4,5,6,7,8]
let a = new Set(arr1)
let b = new Set(arr2)
let arr3 = new Set(arr1.filter(x=>!b.has(x)))
let arr4 = new Set(arr2.filter(x=>!a.has(x)))
let diff = [...arr3,...arr4]
console.log(diff)//[1,2,3,6,7,8]

下面代码的执行结果是什么？

var [a='a',b=a,c='c'] = [1,2,undefined]
console.log(a,b,c)

答案：1,2,'c' 解析：解构赋值，a和b分别赋值为1,2；而c不同，变量默认没有赋值的时候就是undefined，同理如果赋值为undefined相当于没有赋值，所以使用默认值'c''

下面代码的执行后，ul里面的内容顺序是为？

//HTML代码
<ul id='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
<ul>
//js代码
var list =  document.getElementById('list')
var li = list.querySelectorAll('li')
list.replaceChild(li[2],li[1])
list.insertBefore(li[1],list.children[2])

答案：1 3 2

下面代码的执行结果是什么？

var a = 1;
function a(a){
    console.log(a)
    var a = 2
}
console.log(a)
a(3)

答案：1 Uncaught TypeError: a is not a function 解析：预编译导致变量声明提升以及函数整体提升，预编译之后，执行语句将a赋值为1,所以在执行a(3)会报错

下面代码的执行结果是什么

var name = 'Alice';
(function(){
    if(name === 'undefined'){
        var name = 'Tom'
        console.log(name)
    }else{
        console.log(name)
    }
})()

答案：Tom 解析：立即函数执行时，由于if语句中有声明name，所以在预编译的时候会将name提升，并且值为undefined，所以打印Tom

下面代码的执行结果是什么

var name = 'Alice'
(function(){
    if(name === 'undefined'){
        var name = 'Tom'
        console.log(name)
    }else{
        console.log(name)
    }
})()

答案： Uncaught TypeError: "Alice" is not a function 解析：由于'alice'后面没有结束符号，下面跟着()，便以为是函数。导致结果报错

下面代码的执行结果是什么？

var a = 1;
function fn(){
    a = 2;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a)
}
fn()

答案：2 1 2 解析：考查预编译的知识点

第141-150题

下面代码的执行结果是什么？

if (!'a' in window){
    var a = 1
}
console.log(a)

答案：undefined 解析：预编译会将if语句里面的变量声明a提升，值为undefined

下面代码的执行结果是？

var obj = {
    val: 2,
    del: function () {
        this.val *= 2;
        console.log(val)
    }
}
obj.del()

答案：1 解析：我们知道执行obj.del()之后，obj.val变成了4，但是需要注意val找变量的时候，会沿着作用域查找，会找到外面被声明的的val，而非obj对象上的。

下面代码的执行结果是什么？

var name = 'Alice';
var  obj = {
    name:'Tom',
    getName:function(){
        return function(){
            return this.name
        }
    }
}
console.log(obj.getName()())

答案：Alice 解析：谁调用this指向谁，obj.getName()执行时this指向obj，而执行完后返回一个function，这个function执行时没人调用，所以里面this指向window，最后输出window上的name

下面代码的执行结果是什么？

var name = 'Alice';
var  obj = {
    name:'Tom',
    getName:function(){
        var self =  this;
        return function(){
            return self.name
        }
    }
}
console.log(obj.getName()())

答案：Tom 解析：self将this保存下来了，也就是self指向的是obj

下面代码的执行结果是什么？

var a = 1;
setTimeout(() => {
    a = 2;
}, 0);
console.log(a)

答案：1

下面代码的执行结果是什么

(function (){
    var  a = b = 1;
})()
console.log(typeof a === "undefined")
console.log(typeof b === "undefined")

答案：true false 解析：暗示全局变量，凡是未声明就赋值的变量归window所有

下面代码的执行结果是什么？

var a = (function(foo){
    return typeof foo.bar;
})({foo:{bar:1}})

答案：undefined 解析：立即执行函数中，参数foo的值为{foo:{bar:1}，所以foo.bar是不存在的

下面代码的执行结果是什么？.

function f(){
    return f;
}
console.log(new f() instanceof f)

答案：false 解析：new f()返回的是f函数本身，即相当于问f instanceof f，答案是false

下面代码的执行结果是什么？

function A() { }
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n:2,
    m:3
}
var c = new A()
console.log(b.n,b.m)
console.log(c.n,c.m)

答案：1 undefined 2 3

下面代码的执行结果是什么？

console.log(false.toString());
console.log([1,[2],3].toString());
console.log(1..toString());
console.log(2.toString())

答案：'false' '1,2,3' '1' SyntaxError

第151-160题

下面代码的执行结果是什么？

console.log([]!==[])

答案：true 解析：不存在隐式类型转换的!==和===

下面代码的执行结果是什么？

var a = 1;
console.log(a++)
console.log(++a)
console.log(a)

答案：1 3 3 解析：关于++运算符，++在前先++，++在后后++

下面代码的执行结果是什么？

var a = { n: 1 }
var b = a;
a.x = a = { n: 2 }
console.log(a.n, b.n)
console.log(a.x, b.x)

答案：2 1 undefined {n:2}

下面代码的执行结果是什么呢？

console.log(c);
var c;
function c(a){
    console.log(a)
    var a = 3;
    function a(){}
}
c(1)

答案：function c(a){...} function a(){} 解析：预编译导致变量和函数提升，并且先变量声明提升，而后函数整体提升

下面代码的执行结果是什么？

console.log(typeof a)
function a(){}
var a;
console.log(typeof a)

答案：function function 解析：预编译先变量声明提升，而后函数整体提升

下面代码的执行结果是什么？

var a;
var b = 'undefined'
console.log(typeof a,typeof b, typeof c)

答案：undefined string undefined 解析：变量未赋值，默认为undefined；b被赋值为字符串undefined，所以类型是string；未声明的变量使用typeof检测，返回undefined

下面代码的执行结果是什么？

var obj = {n:1}
function fn(a){
    a.n = 2
}
fn(obj)
console.log(obj.n)

答案：2

下面代码的执行结果是什么？

var x = 10;
function fn(){
    console.log(x)
}
function show(f){
    var x = 20;
    f()
}
show(fn)

答案：10

下面代码的执行结果是什么?

Object.prototype.bar = 1;
var foo = {
    g: undefined
}
console.log(foo.bar)
console.log('bar' in foo)
console.log(foo.hasOwnProperty("bar"))
console.log(foo.hasOwnProperty('g'))

答案：1 true false true

下面代码的执行结果是什么？

Object.prototype.a = 1;
var obj = {
    b:2
}
for(var i in obj){
    console.log(obj[i])
}

答案：2 1 解析：for in循环中，会先变量obj自身属性的key，然后再去变量原型上的属性

第161-170题

下面代码的执行结果是什么？

function fn1() {
    return {
        a: 1
    }
}
function fn2() {
    return
    {
        b: 1
    }
}
console.log(fn1())
console.log(fn2())

答案：{a:1} undefined 解析：当函数return那行没跟任何东西时，则会当成没有任何返回内容

下面代码的执行结果是什么？

console.log((function () { return typeof arguments })())

答案：object 解析：函数中arguments是类数组，本质是object

下面代码的执行结果是什么？

console.log(Boolean(false))
console.log(Boolean(""))
console.log(Boolean(null))
console.log(Boolean('0'))
console.log(Boolean(0))
console.log(Boolean(NaN))

答案：false false false true false false 解析：关于Boolean的使用

下面代码的执行结果是什么呢？

var x = 1;
if(function fn(){}){
    x += typeof fn;
}
console.log(x)

答案：1undefined

下面代码的执行结果是什么呢？

console.log('b' + 'a' + +'a' + 'a')

答案：baNaNa 解析：前面'b' + 'a'变成'ba'，接着+（+"a"）,+'a'的一元运算符，结果是NaN，所以变成baNaN，最后加'a'

下面代码的执行结果是什么？

var obj = {
    a: 1,
    b: 2
}
Object.setPrototypeOf(obj, { c: 3 })
Object.defineProperty(obj,'d',{value:4,enumerable:false})
for (const key in obj) {
    console.log(key)
}

答案：a b c 解析:由于d属性在定义的时候，其配置设置项enumerable值为false，所以在forin的时候，该属性是不会被遍历出来的

下面代码的执行结果是什么？

var x = 1;
var f = {
    x:2,
    getx:function(){
        return this.x;
    }
}
console.log(f.getx())
var xGetter = f.getx;
console.log(xGetter())

答案：2 1 解析：谁调用，this指向谁

下面代码的执行结果是什么？

var x = 1;
x += typeof fn;
console.log(x);
function fn() { }

答案：1function

下面代码的执行结果是什么呢？

var a = [1,2,3]
console.log(a.join())

答案：1,2,3 解析：数组的join方法用于按指定字符连接数组元素，不传默认情况按英文逗号连接

下面代码的执行结果是什么？

var a = [1]
var b = ['2']
console.log(b - a)

答案：1 解析：考查减号运算符，如果减号两边都是数组，且两个数组都只有一个成员，且此成员是数字或者是数字字符串，就会将里头的当数字相减

第171-180题

下面代码的执行结果是什么？

var b = 1;
function outer(){
    var  b = 2
    function inner(){
        b++;
        var b = 3;
        console.log(b)
    }
    inner()
}
outer()

答案：3

下面代码的执行结果是什么？

console.log(1 > 2 > 3)
console.log(1 < 2 < 3)

答案：false true

下面代码的执行结果是什么？

(function(){
    console.log(1)
    setTimeout(function(){
        console.log(2)
    },100)
    setTimeout(function(){
        console.log(3)
    },0)
    console.log(4)
}())

答案：1 4 3 2

下面代码的执行结果是什么？

function sum(x,y){
    if(y != undefined){
        return x + y
    }else{
        return function(y){
            return x + y
        }
    }
}
console.log(sum(1,2))
console.log(sum(1)(2))

答案：3 3

执行下面代码，当用于点击页面中的“按钮”时，会打印出什么？

for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('按钮' + i));
    btn.addEventListener('click', function () {
        console.log(i);
    });
    document.body.appendChild(btn)
}

答案：每个按钮被点击时，都会打出一个5 解析：在点击之前，for循环已经执行完，当这个时候访问i时，已经变成了5

下面代码的执行结果是什么？

var length = 10;
function fn(){
    console.log(this.length)
}
var obj={
    length:5,
    method:function(fn){
        fn();
        arguments[0]();
    }
}
obj.method(fn,1)

答案：10 2 解析：fn执行时，this指向window；而使用arguments获取参数fn执行时，fn里头的this执行该arguments，而arguments中有个length属性，表示传递的参数个数

下面代码的执行结果是什么？

(function(x){
    return (function(y){
        console.log(x)
    }(2))
}(1))

答案：1

下面代码的执行结果是什么？

var a = {},
    b = {key:'b'},
    c = {key:'c'};
a[b] = 123;
a[b] = 456;
console.log(a[b])

答案：456 解析：当对象作为对象的key时，会变成[object Object],所以a[b]和a[b]其实是一样的

下面代码的执行结果是什么？

var obj = {
    foo: 'bar',
    fn: function () {
        var self = this;
        console.log(this.foo, self.foo);//
        (function () {
            console.log(this.foo, self.foo);//undefined bar
        }());
    }
}
obj.fn();

答案：bar bar undefined bar 解析：obj.fn执行时，fn里面this指向调用者obj，而当fn里头的立即执行函数执行时，里面的this指向window

下面有关循环说法正确的是？

A. for in循环遍历不到继承的属性 B. do while在判断条件前会执行一次代码块 C. for循环中三个表达式可以省略，分号也可以省略 D. while循环语句至少会执行循环体一次答案：B

第181-190题

以下哪个不是JavaScript中的错误类型？ A. 语法错误 B. 系统错误 C. 类型错误 D. 引用错误答案：B
下面代码的执行结果是什么？

function fn(){
    return;
}
console.log(fn())

答案：undefined 解析：当函数无明确返回时或者return后面没有啥时，则函数执行结果为undefined

下面代码的执行结果是什么？

var obj = {a:1}
console.log(obj && obj.a)

答案：1 解析：关于&&运算符，当&&前面的表达式的值转成布尔值为真时，则返回后面表达式的结果

下面代码的执行结果是什么？

var x = 5, y = 12;
console.log(x < 10 && y > 1)
console.log(x == 5 || y == 5)
console.log(!(x == y))
console.log(!!x == x)

答案：true true true false 解析：关于逻辑运算符的基本使用

如何遍历对象身上的属性，非原型继承而来的属性？

答案：可通过for in 循环遍历出所有属性，再通过对象身上的hasOwnProperty()判断遍历出来属性是对象身上的还是原型上的，代码如下

function fn(obj) {
    if(typeof obj === 'object'){
        //不考虑数组
        for (const key in obj) {
            if (Object.hasOwnProperty.call(obj, key)) {
                console.log(key)
            }
        }
    }else{
        return
    }
}
fn({a:1})

题目：

｛a:[{id: xxx，parentId: xxx}]，b:[{id: xxx，parentId: xxx}，{id: xxx，parentId: xxx}]｝
删除对象中a，b数组中所有对象的id 和 parentID，并给每个对象添加一个isHstory属性
要的效果：｛a:[{isHistory: 1}]，b:[{isHistory: 1}，{isHistory: 1}］｝

解答：

function delId(obj) {
    //传入必须是对象，否则不处理
    if (typeof obj == "object" && (!Array.isArray(obj))) {
        //遍历对象中的每一项
        for (const key in obj) {
            if (Object.hasOwnProperty.call(obj, key)) {
                const item = obj[key];
                //找出对象中类型为数组的属性
                if (Array.isArray(item)) {
                    // 遍历数组
                    for (const val of item.values()) {
                        // 找出数组中类型是对象的所有成员，删除和添加属性即可
                        if (typeof val == "object"&&(!Array.isArray(val))) {
                            console.log(val)
                            // 1.删除对象的id 和 parentId属性
                            delete val.id;
                            delete val.parentId;
                            // 2.对象添加一个isHstory属性
                            val.isHistory = 1;
                        }
                    }
                }
            }
        }
    }
}
// 测试代码
const obj = {
    a: [{ id: 'xxx', parentId: 'xxx' }],
    b: [{ id: 'xxx', parentId: 'xxx' }, { id: 'xxx', parentId: 'xxx' }]
}
delId(obj);
console.log(obj);//｛a:[{isHistory: 1}]，b:[{isHistory: 1}，{isHistory: 1}］｝

关于JS赋值操作符描述错误的是？

A.赋值操作符的顺序是从左往右 B.i=j=k="hello"的含义是将三个变量都初始化为"hello" C.赋值表达式的顺序是从右往左 D.赋值表达式的值就是右操作数的值答案：A

关于this正确的是（多选）

A.this对象不能用于箭头函数中 B.apply和call能改变函数执行时的当天对象，让this指向其他对象 C.由于js的动态性，this的指向需要在运行时才能确定具体指啥 D.this总是指向当前的对象答案：BCD

关于JS函数说法错误的是？

A.函数可以通过定时器去调用 B.自执行函数可以形成一个独立的作用域 C.delete可以删除全局函数 D.如果函数无明确返回值，或者调用了没有参数的return语句，那么返回的都是undefined 答案：C

下面语句执行结果是什么？

console.log('111'<'33')
console.log(1>=-Infinity)
console.log('100'+'200')

答案：true true 100200

第191-200题

下面说法正确的是（多选）

A.直接调用Math.Max时它并不接受数组 B.对于系统内置对象，使用toString不会得到想要的结果，而是[object Objcet] C.函数中的length属性返回函数中的形参个数 D.arguments对象用于描述传递给函数的参数的类数组对象答案：ABCD

下面的代码的执行结果是什么？

function foo(a) {
    var b = a * 2
    function bar(c) {
        console.log(a,b,c)
    }
    bar(b*3)
}
foo(2)

答案：2 4 12

下面代码的执行结果是什么？

function foo(str,a){
    eval(str);
    console.log(a,b)
}
var b = 2
foo('var b = 3',1)

答案：1 3 解析：eval会将传递进来的字符串作为js语句并执行，会改变原本函数的作用域

下面代码的执行结果是什么？

function foo(str){
    'use strict';
    eval(str);
    console.log(a);
}
foo('var a = 1')

答案：ReferenceError：a is not defined 解析：在严格模式下，eval运行时有其自己的词法作用域，意味着其中的声明无法修改所在的作用域

下面代码的执行结果是什么？

var a = 1;
(function foo(){
    var a = 2;
    console.log(a)
})()
console.log(a)

答案：2 1

下面代码的执行结果是什么？

var a = 1;
(function foo(lobal){
    var a = 2;
    console.log(a)
    console.log(lobal.a)
})(window)
console.log(a)

答案：2 1 1

画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

画一个三角形？

div{
        width: 0;
        height: 0;
        border-width: 100px;
        border-style: solid;
        border-color: transparent #0099CC transparent transparent;
        transform: rotate(90deg); /*顺时针旋转90°*/
}

下面执行结果是？

function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);

答案：16 解析：es6通常用let const块级作用域代替，闭包缺点，ie中会引起内存泄漏，严格来说是ie的缺点不是闭包的问题

请问0.1+0.2等于多少？

答案：0.30000000000000004 解析：由于以下两个原因，导致0.1 + 0.2 != 0.3 1.在十进制转换为二进制的过程中，会产生精度的损失 2.二进制浮点数进行对阶运算时，也会产生精度的损失

花了200天整理的200道前端基础题及答案 | 适合小白

前言

第1-10题

第11-20题

第21-30题

第31-40题

第41-50题

第51-60题

第61-70题

第71-80题

第81-90题

第91-100题

第101-110题

第111-120题

第121-130题

第131-140题

第141-150题

第151-160题

第161-170题

第171-180题

第181-190题

第191-200题