大学Web 前端开发基础（HTML/CSS/JavaScript）上册《面向对象与ES6+》练习题

共 27 道沉淀题 · AI 对照课标原创 · 三重审校答案可核对

需要完整试卷（Web 前端开发基础（HTML/CSS/JavaScript）上册《面向对象与ES6+》单元测试卷）？

按本单元考点 AI 生成整卷：正卷 + 答案页 + 逐题解析，PDF 精排 / Word 可编辑 / 打印装订寄到家。

本单元考点（5 个）

对象字面量与构造函数原型与继承let/const与模板字符串解构赋值与展开运算符箭头函数与Promise基础

本单元练习题（27 题）

填空题 ★ 精品详情 →

1. 已知对象 obj = { name: "web", tags: ["html", "css", "js"], meta: { year: 2024 } }，执行以下代码：const { name, tags: [first, , third], ...rest } = obj; const merged = { ...rest, meta: { ...rest.meta, year: 2025 } }; 则 name 的值为____，first 的值为____，merged.meta.year 的值为____。

登录查看答案

选择题 ★ 精品详情 →

2. 某函数定义为：const delay = (ms) => new Promise((resolve) => setTimeout(() => resolve('ok'), ms)); 若执行 delay(100).then((v) => console.log(v)); 后，关于输出结果及 Promise 状态变化的描述正确的是哪一项？A. 立即输出 'ok'，Promise 创建后立刻变为 fulfilled　B. 约 100ms 后输出 'ok'，Promise 由 pending 变为 fulfilled　C. 约 100ms 后输出 undefined，Promise 保持 pending　D. 永不输出任何内容，Promise 由 pending 变为 rejected

登录查看答案

判断题 ★ 精品详情 →

3. 判断：在 JavaScript 中，使用 ES6 的 class 定义类 A 并通过 class B extends A 继承后，若在 B 的实例上访问一个 B 未定义的方法，引擎会沿 B 实例的原型链查找到 A.prototype 上寻找该方法；这一查找机制与 ES5 中通过修改构造函数 prototype 实现继承时的原型链查找机制完全不同。

登录查看答案

判断题 ★ 精品详情 →

4. 判断：代码 const f = () => new Promise((_, reject) => setTimeout(() => reject(new Error('x')), 100)); f().then(v => console.log('成功', v)).catch(e => console.log('失败')); f().then(v => console.log('成功', v)); 运行完毕后，控制台共输出两行，且两行都是「成功」。

登录查看答案

选择题 ★ 精品详情 →

5. 已知如下代码： const src = [1, 2, 3, 4, 5]; const [p, ...mid] = src; const [q, ...rest] = [...mid].reverse(); console.log(p, q, rest); 则输出结果是（　） A. 1 2 [3, 4, 5] B. 1 5 [4, 3, 2] C. 2 5 [3, 4] D. 1 5 [3, 4, 2]

登录查看答案

判断题 ★ 精品详情 →

6. 判断：执行 `const base = {p: 2, q: 5}; const merged = {...base, p: 9}; const {p = 7, ...rest} = merged;` 后，`p` 的值是 7，`rest` 是 `{q: 5}`。

登录查看答案

选择题 ★ 精品详情 →

7. 在 JavaScript 中有如下代码：const proto = { skill: 'base' }; const mid = Object.create(proto); mid.skill = 'mid'; const leaf = Object.create(mid); delete mid.skill; console.log(leaf.skill); 的输出结果是什么？　A. undefined　B. mid　C. base　D. 抛出 TypeError

登录查看答案

判断题 ★ 精品详情 →

8. 判断：执行代码 const [a, {b}] = [10, {b: 20}]; const arr = [...[a, b], ...'ab']; 后，数组 arr 的长度为 3，其中展开运算符作用于字符串时会将字符串按字符逐个展开为字符数组元素。

登录查看答案

填空题 ★ 精品详情 →

9. 阅读如下代码：const check = (flag) => new Promise((resolve, reject) => { if (flag) resolve('A'); else reject(new Error('B')); }); check(false).catch((e) => e.message).then((v) => { console.log(v); return v.toLowerCase(); }).then((r) => console.log(r)); 则程序最终依次输出的两行内容分别是 ____ 和 ____。

登录查看答案

填空题 ★ 精品详情 →

10. 在 JavaScript 中，函数 F 的 prototype 对象上定义了方法 greet，另有对象 obj 通过 Object.create(F.prototype) 创建。执行 obj.greet() 时，引擎在 obj 自身查找 greet 失败，随后沿 ____ 链向上查找，最终在 ____ 上找到该方法。若执行 F.prototype = {}（整体替换原型对象）后再调用 obj.greet()，由于 obj 的内部原型仍指向替换前的旧对象，方法____（填：能/不能）被找到。

登录查看答案

填空题 ★ 精品详情 →

11. 填写空缺处，分别用对象字面量和构造函数创建具有同一组属性的电脑对象。对象字面量：const laptopA = ____；构造函数：function Laptop(name, price) { this.name = name; this.price = price; } const laptopB = new Laptop("轻薄本", 5000); 两个对象的 name 均为“轻薄本”，price 均为 5000。

登录查看答案

判断题 ★ 精品详情 →

12. 判断：对于箭头函数 () => ({ value: 1 })，由于箭头函数没有自己的 this，它内部 this 指向外层作用域的 this，因此即使通过 call 改变 this，其内部 this 也不会被改变；而 Promise 构造函数的 executor 函数会同步执行，其中调用 reject 之后若继续调用 resolve，Promise 的状态仍保持为 rejected 不变。

登录查看答案

选择题详情 →

13. 在 JavaScript 中，每个对象都有一个内部属性指向其原型。ES6 的 class 语法本质上是原型继承的语法糖，类的实例通过该内部属性查找属性和方法。关于对象 obj 与其构造函数 Constructor 的原型关系，下列说法正确的是（　　） A. obj.__proto__ === Constructor.prototype B. obj.__proto__ === Constructor C. obj.prototype === Constructor.prototype D. obj.__proto__ === Constructor.__proto__

登录查看答案

填空题详情 →

14. 将数组 [1, 2] 用箭头函数转换为 [2, 4]，再用 Promise.resolve() 包装转换结果并通过 then 获取结果。补全代码：Promise.resolve([1, 2].map(x => ____)).then(result => console.log(result));

登录查看答案

选择题详情 →

15. 已知： const a = {x: 1, y: 2}; const b = {y: 5, z: 7}; const c = {...a, ...b, x: 8}; const {x: p, y, ...rest} = c; 以下哪项准确表示变量 p、y 和 rest 的值？ A. p 为 1，y 为 5，rest 为 {z: 7} B. p 为 8，y 为 2，rest 为 {z: 7} C. p 为 8，y 为 5，rest 为 {z: 7} D. p 为 8，y 为 5，rest 为 {x: 8, z: 7}

登录查看答案

判断题详情 →

16. 在 JavaScript 中，对象字面量与构造函数都可以创建对象。判断以下表述是否正确：执行 let a = { name: 'A' }; function F(name) { this.name = name; } let b = new F('B'); 后，a.name 与 b.name 指向同一个属性，修改 a.name 会同时改变 b.name。

登录查看答案

判断题详情 →

17. 判断：设有代码 const g = (x) => Promise.resolve(x).then(v => v * 2).then(v => v + 1); 执行 g(5).then(r => console.log(r)) 后输出 11；同时，若将中间的箭头函数 v => v * 2 改为普通 function(v) { return v * 2; }，链式结果不变。该说法是否正确？

登录查看答案

填空题详情 →

18. 补全代码：将箭头函数赋值给变量 double，使其接收参数 x 并返回 x 的 2 倍，随后调用该函数并将返回值传入 Promise.resolve() 完成状态。代码片段：const double = ____ => 2 * x; Promise.____(double(5)).then(value => console.log(value)); 第一空填参数写法，第二空填创建已完成 Promise 的方法名。

登录查看答案

选择题详情 →

19. 执行以下代码后，控制台输出的内容是： const show = () => Promise.resolve('ES6').then(v => console.log(v)); show(); A. undefined　B. ES6　C. Promise { 'ES6' }　D. 报错

登录查看答案

选择题详情 →

20. 有如下代码：function Phone(brand){ this.brand = brand; this.call = function(){ return 'calling'; }; } const p1 = new Phone('X'); const p2 = { brand: 'X', call: function(){ return 'calling'; } }; 下列说法唯一正确的是：A. p1 与 p2 都是由对象字面量创建的对象 B. p1.call 与 p2.call 是同一个函数引用 C. p1 与 p2 的 brand 属性值相同，但 p1 由构造函数创建、p2 由对象字面量创建 D. p2 创建时会自动调用 Phone 构造函数

登录查看答案

选择题详情 →

21. 在 JavaScript 中，有如下代码： function Point(x) { this.x = x; this.y = 10; return { x: 20 }; } const p1 = new Point(5); const p2 = { x: p1.x, y: 10 }; 问：表达式 p2.x + p2.y 的值是多少？ A. 15　B. 30　C. 25　D. 20

登录查看答案

填空题详情 →

22. 已知 const badge = { id: 'M4', area: 'west' }; function Badge(id, area) { this.id = id; this.area = area; } 若要用构造函数创建一个独立对象，使其 id、area 与 badge 对应属性相同，请在空位填入调用构造函数所需的关键字：const copy = ____ Badge(badge.id, badge.area);

登录查看答案

选择题详情 →

23. 下列哪种写法可以使用构造函数创建一个具有 name 属性的对象？ A. const obj = { name: 'Tom' }; B. function Person(name) { this.name = name; } const obj = new Person('Tom'); C. const obj = new { name: 'Tom' }; D. const obj = function() { name: 'Tom' };

登录查看答案

填空题详情 →

24. 执行以下代码后，变量 packed 的值为 ____。 const [first = 6, second, ...remaining] = [undefined, 3, 8, 5]; const packed = [...remaining, second, first];

登录查看答案

判断题详情 →

25. 判断：在 JavaScript 中，通过 ES6 的 class 关键字定义的两个类之间不存在任何原型关联，只有使用函数和 prototype 手动实现继承时，子类实例才能沿原型链查找父类的方法。

登录查看答案

填空题详情 →

26. 在 JavaScript 中执行：const p = {}; const q = Object.create(p); const r = Object.create(q); const s = Object.create(r); p.flag = true; 若读取 s.flag，沿原型链查找时经过的原型链接数为 ___ 条。

登录查看答案

判断题详情 →

27. 判断：执行 `const original = [3, 6]; const copy = [...original];` 后，`copy` 与 `original` 是同一个数组。

登录查看答案

Web 前端开发基础（HTML/CSS/JavaScript）其他单元练习题

HTML 基础（9题）CSS 基础（27题）CSS 布局与响应式（27题）JavaScript 语法基础（27题）DOM 操作与事件（27题）表单与数据验证（27题）综合实战项目（27题）

题目由 AI 对照课标原创生成并经机审+人审，如发现质量问题可联系我们。