# JavaScript 核心基础，阶段测试题

TIP

汇总了部分 JavaScript 核心基础阶段的相关知识，作为同学们的 JS 基础阶段学习的自我检测使用，可先尝试再不查阅资料的情况下来完成。

待大家完成后，会更新答案

# 一、选择题

TIP

选择正确的答案，并给出答案解析

# 1、以下说法正确的是？（多选）

A、isNaN(1.23);的返回结果为 false
B、isNaN(NaN)的返回结果是 true
C、null === undefined 返回结果为 true
D、Number('124a') 返回结果为 124

自己先分析，再点击查看正确答案

正确答案：A、B

# 2、已知 `x=2、y=0、z=3` 以下选项中说法错误的是？（单选）

A、x||y||z返回结果为 0
B、z&&y&&x 返回结果为 0
C、 (y-z)%4 返回结果为结果为 -3
D、(z++)+(--x)-y返回结果为 4

自己先分析，再点击查看正确答案

正确答案：A

# 3、以下代码运行后的最终结果是？（单选）

var a = 2;
var b = a++;
console.log(++a);
console.log((b += ++a));

A、3，6
B、4，7
C、4，6
D、3，5

自己先分析，再点击查看正确答案

正确答案：B

# 4、以下说法错误的是？（单选）

A、二进制数110011011 转换为对应的 10 进制是一个偶数
B、二进制数110011011 >> 6位，得到 10 进制 6
C、'5' == 5 返回值为 true
D、null == undefined 返回值为 true

自己先分析，再点击查看正确答案

正确答案：A

# 5、以下代码的输出是？（单选）

function fn(a, b, c) {
  console.log(a + b + c);
}
fn(1, 2);

A、NaN
B、 3
C、3+undefined
D、1+2+undefined

自己先分析，再点击查看正确答案

正确答案： A

# 6、阅读下列代码，选择结论正确的有（多选）

var str = "www.icodingedu.com";
console.log(str.substring(4, 13));
console.log(str.substring(-9, -4));
console.log(str.substring(-7, 4));
console.log(str.slice(-11, -4));

A、第一个console.log打印出来 icodingedu
B、第二个console.log打印出来是空
C、第三个console.log打印现来的是空
D、第四个console.log打印出来的是 dingedu

自己先分析，再点击查看正确答案

正确答案： B D

# 7、以下代码的输出结果是？（单选）

var person = {
  name: "xq",
  age: 18,
  address: "北京",
};
alert("toString" in person); // 结果是什么
alert("age" in person); // 结果是什么

A、 true false
B、 false false
C、 true true
D、 false true

自己先分析，再点击查看正确答案

正确答案：C

# 8、以下代码输出的正确结果是？（单选）

var myname = "清心";
function fn() {
  console.log(myname);
  var myname = "小红";
  function fn2() {
    myname = "小明";
  }
  fn2(myname);
  console.log(myname);
}
fn();
console.log(myname);

A、清心、小红、清心
B、清心、小明、清心
C、undefined 、小红、清心
D、undefined 、小明、清心

自己先分析，再点击查看正确答案

正确答案：D

# 9、以下代码输出的正确结果是？（单选）

function Fn() {
  getNum = function () {
    console.log(1);
  };
  this.getNum = function () {
    console.log(2);
  };
}
Fn.prototype.getNum = function () {
  console.log(3);
};
var getNum = function () {
  console.log(4);
};
function getNum() {
  console.log(5);
}
getNum();
var f = new Fn();
f.getNum();

A、5，3
B、5，2
C、4，3
D、4，2

自己先分析，再点击查看正确答案

正确答案：D

# 10、以下代码的输出结果是？（单选）

var a = 1;
var obj = {
  fn: function () {
    var a = 3;
    return this.fn2;
  },
  fn2: function () {
    var a = 4;
    console.log(this.a);
  },
  a: 2,
};
var obj1 = obj.fn();
obj1();

A、1
B、2
C、3
D、4

自己先分析，再点击查看正确答案

正确答案：A

# 11、当点击 box1 时，控制台的输出结果是？（单选）

<div class="box2">
  <div class="box1">box1</div>
</div>

<script>
  var box2 = document.querySelector(".box2");
  box2.addEventListener("click", function (e) {
    console.log(e.target.innerHTML);
  });

  box2.onclick = function (e) {
    console.log(e.currentTarget.innerHTML);
  };
</script>

A、<div class="box1">box1</div>
B、box1
C、box1，<div class="box1">box1</div>
D、<div class="box1">box1</div>，box1

自己先分析，再点击查看正确答案

正确答案：C

# 二、简答题

TIP

根据所学知识和自己的理解，给出答案解析

# 1、JavaScript 有几种数据类型，分别是什么？

自己先分析，再点击查看正确答案

答案解析：

在 ES5 版本中，Javascript 有 6 种数据类型，分别是 5 种数据类型和 Object 引用类型

5 基本数据类型：undefined、null、boolean、number、string
Object 引用类型：function、object、array
其中 typeof 检测 null 得到的结果为 object

# 2、写出以下代码输出的结果？

var obj1 = { num: 1 };
var obj2 = obj1;
obj1.num = 2;
console.log(obj2.num);

obj1 = { num: 4 };
console.log(obj2.num);

obj1.num = 5;
console.log(obj2.num);

自己先分析，再点击查看正确答案

正确答案：2，2，2

# 3、写出以下代码输出的结果？

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

自己先分析，再点击查看正确答案

正确答案：undefined、0、0、0

# 4、说说 break、continue、return 语句之间不同？并例举相应的代码来验证

自己先分析，再点击查看正确答案

break、continue、return 语句之间对比，如下

关键字	说明
break	break 语句用于立即退出当前循环，他只能用在循环语句中，如 for 循环和 while 循环中都可以
continue	continue 用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代，（如：for 循环，while 循环）
return	return 关键字，只能出现在函数体中不仅能退出循环，退出函数体，还能将 return 语句中的值返回，其返回值为函数返回值

代码

for (var i = 0; i < 5; i++) {
  if (i === 3) {
    break; // 退出当前for循环
  }
  console.log(i); // 0 1 2
}

for (var i = 0; i < 5; i++) {
  if (i === 3) {
    continue; // 跳过本次迭代，并继续执行循环中的下一个迭代
  }
  console.log(i); // 0 1 2 4
}

function fn() {
  for (var i = 0; i < 5; i++) {
    if (i == 3) {
      return i; // 退出当前for循环，同时将i的值返回作为函数的返回值
    }
    console.log(i);
  }
}
var result = fn(); // 0 1 2
console.log(result); // 3

# 5、说说 new 调用构造函数的 5 步曲，并用代码写出每一步执行的过程

自己先分析，再点击查看正确答案

当用 new 调用构造函数时，会经历以下 5 步

第一步：会在函数体内自动创建一个空对象，即 var obj = {};
第二步：把对象 obj 的__proto__指向构造函数的 prototype 属性;
第三步：把函数体内部的 this 指向这个新对象，即 this = obj;
第四步：从上往下执行函数体内的代码，相当于给新创建的空对象 obj 添加属性
第五步：函数体内代码执行完，会自动将新创建的对象 obj，作为返回值返回。（前提是构造函数内部没有 return 语句，或 return 语句的返回值不是引用类型）

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var xiaoming = new Person("小明", 22, "男");

// new Person('小明',22,'男') 时，内部会经历以下5步
// 1、创建空对象 var obj={}
// 2、建立原型链 obj.__proto__=Person.prototype;
// 3、this指向   this=obj
// 4、创建属性  this.name="小明"  this.age=22  this.sex="男"   相当于 obj={name:'小明'，age:22,sex:'男'}
// 5、返回obj ，即 return obj;
// 所以最后 xiaoming===obj==={name:'小明'，age:22,sex:'男'}

# 6、补充以下表格，说说 8 种不同场景下的 this 指向？

函数的调用方式	this 指向
`对象.函数()`
`函数()`
IIFE 立即执行函数
`数组[下标]()`
`fn.call(thisArg,arg1,arg2)`
`fn.apply(thisArg,arry)`
`fn.bind(thisArg,arg1,arg2)`
定时器中的回调函数
`element.onclick = function(){ // this指向 }` DOM 事件处理函数
`var obj = new 函数()`

自己先分析，再点击查看正确答案

答案解析

函数的调用方式	this 指向
`对象.函数()`	对象
`函数()`	window
IIFE 立即执行函数	window
`数组[下标]()`	数组
`fn.call(thisArg,arg1,arg2)`	thisArg
`fn.apply(thisArg,arry)`	thisArg
`fn.bind(thisArg,arg1,arg2)`	thisArg
定时器中的回调函数	window
`element.onclick = function(){ // this指向 }` DOM 事件处理函数	element
`var obj = new 函数()`	obj

# 7、call、apply、bind 三者之间的区别和相同点

在表格空白处填写对应的答案

方法名	作用相同	传参方式不同	返回值不同
call
apply
bind

自己先分析，再点击查看正确答案

答案解析

方法名	作用相同	传参方式不同	返回值不同
call	用来改变函数内部this指向	fn.call(thisArg,arg1,arg2,arg3,...); arg1, arg2, ... 指定函数的参数列表	立即执行函数，返回值为原函数返回值
apply		fn.apply(thisArg,[arg1,arg2,arg3...]) ; [arg1,arg2,...] 一个包含多个函数参数的数组	立即执行函数，返回值为原函数返回值
bind		fn.bind(thisArg,arg1,arg2,arg3,...); arg1, arg2, ... 指定函数的参数列表	返回一个新函数，相当于原函数拷贝

function sum(a, b) {
  this.a = a;
  this.b = b;
}
// call方法
var obj1 = {};
sum.call(obj1, 1, 2);
console.log(obj1);

// apply 方法
var obj2 = {};
sum.apply(obj2, ["A", "B"]);
console.log(obj2);

// bind方法
var obj3 = {};
var fn = sum.bind(obj3, "a1", "b3");
console.log(obj3);
fn();
console.log(obj3);

# 8、说说以下代码的输出结果？

console.log(1);
setTimeout(function () {
  console.log(2);
}, 1000);

console.log(3);

setTimeout(function () {
  console.log(4);
}, 0);

console.log(5);

自己先分析，再点击查看正确答案

答案：1 3 5 4 2

# 9、说说你对类数组的理解，常见的类数组对象有哪些，同时将类数组转换为数组有几种方法

自己先分析，再点击查看正确答案

类数组它不是数组类型，但他是一个对象，同时具有以下特点：

具有 length 属性
可以通过[]括号书写下标的方式访问对象中的属性值，下标从 0 开始
但不拥有 Array 对象的的大部分方法，如push,pop,unshift,shift等

常见的类数组对象有

arguments 实参列表
HTMLCollection 元素集合
NodeList 节点集合

// NodeList 节点集合
var list = document.querySelectorAll("ul li");
console.log(list); // NodeList(5) [li, li, li, li, li]

// HTMLCollection 元素集合
var list = document.getElementsByTagName("li");
console.log(list); // HTMLCollection(5) [li, li, li, li, li]

类数组转换为数组的几种方法

将类数组转换为数组，本质是把类数组中的对应0-length-1的下标元素取也来，添加到一个新的空数组中。然后将这个新的数组返回，我们后面就可以通过这个新的数组来操作数据，同时能使用数组相关的所有方法。

将类数组转换为数组有以下 4 种方式

for 循环遍历
call 或 apply 结合数组的 slice 和 concat 方法
Array.from
Array.apply

Array.prototype.slice.call(arguments);
Array.prototype.concat.apply([], arguments);
Array.from(arguments);
Array.apply(null, arguments);

function sum() {
  console.log(arguments);
  // 以下代码，可以替换成上面4行中的任意一行
  var args = Array.prototype.slice.call(arguments);
  console.log(args);
  console.log(Array.isArray(args));
}
sum(1, 2, 3);

# 三、笔试题

TIP

通过书写代码完成以下相关题目的要求

# 1、编程代码，实现以下效果

初始数组var arr = [1,2,3,4,5]; 通过一系列数组方法改写成 ['a',1,2,'b','c',3,4];

自己先分析，并写出对应要求的代码，再点击查看正确答案

代码实现如下

var arr = [1, 2, 3, 4, 5];
arr.unshift("a");
arr.splice(3, 3, "b", "c", 3, 4);
console.log(arr);

# 2、下面的代码最终结果是不是 `0,1,2,3,4` ？如果不是请改写此代码是最终结果是上述情况

var arr = [];
for (var i = 0; i < 5; i++) {
  arr[i] = function () {
    console.log(i);
  };
}

arr[0]();
arr[1]();
arr[2]();
arr[3]();
arr[4]();

自己先分析，并写出对应要求的代码，再点击查看正确答案

答案解析：最终结果不是 0,1,2,3,4

// 正确代码
var arr = [];
for (var i = 0; i < 5; i++) {
  (function (i) {
    arr[i] = function () {
      console.log(i);
    };
  })(i);
}

# 3、筛选出以下数组中价格大于 4 元以上的蔬菜，同时按降序排序？

提示：利用数组的 filter 和 sort 方法来实现

var arr = [
  {
    name: "白菜",
    price: 3.2,
    type: "蔬菜",
  },
  {
    name: "萝卜",
    price: 5,
    type: "蔬菜",
  },
  {
    name: "西蓝花",
    price: 8,
    type: "蔬菜",
  },
  {
    name: "香蕉",
    price: 5.2,
    type: "水果",
  },
  {
    name: "芹菜",
    price: 4.5,
    type: "蔬菜",
  },
  {
    name: "苹果",
    price: 3.2,
    type: "水果",
  },
];

自己先分析，并写出对应要求的代码，再点击查看正确答案

代码实现如下

// 过滤数组中内容，只留下价格>4且是蔬菜的那些项
var result = arr.filter(function (item) {
  return item.price > 4 && item.type === "蔬菜";
});

// 对过滤留下来的内容，按价格来降序来排序
result.sort(function (a, b) {
  return b.price - a.price;
});
console.log(result);

# 四、面试题

注：

课程中每一个章节的面试题，是必需要掌握的，都需要自己能手动写出来

大家可以参考博客的重难点和面试题去复习

← JavaScript 正则表达式从入门到实践，正则相关工具 JavaScript 执行原理、闭包、垃圾回收、立即执行函数 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料

# JavaScript 核心基础，阶段测试题

# 一、选择题

# 1、以下说法正确的是 ？（多选）

# 2、 已知 x=2、y=0、z=3 以下选项中说法错误的是 ？（单选）

# 3、以下代码运行后的最终结果是 ？（单选）

# 4、以下说法错误的是 ？（单选）

# 5、以下代码的输出是 ？（单选）

# 6、阅读下列代码，选择结论正确的有（多选）

# 7、以下代码的输出结果是 ？（单选）

# 8、以下代码输出的正确结果是 ？（单选）

# 9、以下代码输出的正确结果是 ？（单选）

# 10、以下代码的输出结果是 ？（单选）

# 11、当点击 box1 时，控制台的输出结果是 ？（单选）

# 二、简答题

# 1、JavaScript 有几种数据类型，分别是什么 ？

# 2、写出以下代码输出的结果 ？

# 3、写出以下代码输出的结果 ？

# 4、说说 break、continue、return 语句之间不同 ？并例举相应的代码来验证

# 5、说说 new 调用构造函数的 5 步曲，并用代码写出每一步执行的过程

# 6、补充以下表格，说说 8 种不同场景下的 this 指向 ？

# 7、call、apply、bind 三者之间的区别和相同点

# 8、说说以下代码的输出结果 ？

# 9、说说你对类数组的理解，常见的类数组对象有哪些，同时将类数组转换为数组有几种方法

# 三、笔试题

# 1、编程代码，实现以下效果

# 2、 下面的代码最终结果是不是 0,1,2,3,4 ？如果不是请改写此代码是最终结果是上述情况

# 3、筛选出以下数组中价格大于 4 元以上的蔬菜， 同时按降序排序 ？

# 四、面试题

# 1、以下说法正确的是？（多选）

# 2、已知 `x=2、y=0、z=3` 以下选项中说法错误的是？（单选）

# 3、以下代码运行后的最终结果是？（单选）

# 4、以下说法错误的是？（单选）

# 5、以下代码的输出是？（单选）

# 7、以下代码的输出结果是？（单选）

# 8、以下代码输出的正确结果是？（单选）

# 9、以下代码输出的正确结果是？（单选）

# 10、以下代码的输出结果是？（单选）

# 11、当点击 box1 时，控制台的输出结果是？（单选）

# 1、JavaScript 有几种数据类型，分别是什么？

# 2、写出以下代码输出的结果？

# 3、写出以下代码输出的结果？

# 4、说说 break、continue、return 语句之间不同？并例举相应的代码来验证

# 6、补充以下表格，说说 8 种不同场景下的 this 指向？

# 8、说说以下代码的输出结果？

# 2、下面的代码最终结果是不是 `0,1,2,3,4` ？如果不是请改写此代码是最终结果是上述情况

# 3、筛选出以下数组中价格大于 4 元以上的蔬菜，同时按降序排序？