ES6 面试题合并两个对象

方法一 ES6 Object.assign()

const obj1 = {a:1, b: 4}
const obj2 = {c:3, b: 2}

console.log(Object.assign(obj1, obj2)) //{ a: 1, b: 2, c: 3 }

方法二 ES6 扩展运算符

const obj1 = {a:1, b: 4}
const obj2 = {c:3, b: 2}

console.log({...obj1, ...obj2}) //{ a: 1, b: 2, c: 3 }

方法三 自己封装

const obj1 = {a:1, b: 4}
const obj2 = {c:3, b: 2}

function extend(target, source){
    for(var key in source){
        target[key] = source[key]
    }
    return target
}
console.log(extend(obj1, obj2)) //{ a: 1, b: 2, c: 3 }

### JavaScript ES6 常见重要面试问题及答案 #### 1. **ES6 是什么?为什么学习它很重要?** ES6 是新一代的 JavaScript 语言标准,对 JavaScript 的核心内容进行了升级和优化,规范了其使用标准,并增加了许多新的原生方法[^1]。通过学习 ES6,开发者能够编写更高效、更简洁的代码,这不仅提高了开发效率,还使代码更具可读性和维护性。 --- #### 2. **`let`, `var`, `const` 的区别是什么?** - 使用 `var` 定义变量存在变量提升的问题,可能会导致意外的行为。 - 使用 `let` 定义变量具有块级作用域,不会发生变量提升。 - 使用 `const` 定义常量,一旦赋就不能更改,同样也具有块级作用域[^2]。 --- #### 3. **如何利用 ES6 合并两个对象?** 可以通过解构语法实现对象合并: ```javascript const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; // 方法一:Object.assign() const mergedObj1 = Object.assign({}, obj1, obj2); // 方法二:扩展运算符 const mergedObj2 = { ...obj1, ...obj2 }; ``` 这两种方法都可以有效地将多个对象合并为一个新的对象。 --- #### 4. **`for...in` 和 `for...of` 的主要区别是什么?** - `for...in` 遍历的是对象自身的所有可枚举属性名(包括继承来的),通常用于遍历对象的键。 - `for...of` 遍历的是迭代器返回的序列,适用于数组或其他可迭代结构(如字符串、Map/Set 等)。 --- #### 5. **箭头函数与普通函数在处理 `this` 上有何不同?** - 普通函数内部的 `this` 绑定取决于调用它的上下文环境。 - 箭头函数没有自己的 `this`,而是捕获定义时所在上下文的 `this` ,因此适合用来绑定回调函数或事件处理器。 --- #### 6. **ES6 中如何定义模板字符串?有什么优势?** 模板字符串允许嵌入表达式并通过反引号 `` (`...) `` 来书写多行文本。例如: ```javascript const name = 'Alice'; const greeting = `Hello, ${name}!`; console.log(greeting); // 输出:"Hello, Alice!" ``` 相比传统的字符串拼接方式,模板字符串提供了更高的灵活性和更好的可读性。 --- #### 7. **`Array.prototype.map()` 和 `Array.prototype.filter()` 的相同点与区别是什么?** - 相同点:两者都接受一个回调函数作为参数并对数组中的每一项执行操作。 - 不同点: - `map()` 返回新数组,其中包含每次回调的结果; - `filter()` 返回满足条件的新数组,而未匹配的部分会被过滤掉。 --- #### 8. **Promise 中的 `.then()` 是否同步执行?其工作机制是怎样的?** `.then()` 总是在微任务队列中异步执行,即使 Promise 已经处于 resolved 或 rejected 状态。这是因为 JavaScript 运行时遵循事件循环机制,在当前宏任务完成后才会进入微任务队列处理待办事项。 --- #### 9. **Symbol 数据类型的用途是什么?** `Symbol` 表示独一无二的,主要用于创建对象属性的私有标识符以防止命名冲突。例如: ```javascript const sym = Symbol('description'); const obj = {}; obj[sym] = 'Private Value'; console.log(obj[sym]); // 访问私有属性 ``` 此外,某些内置方法依赖于特定符号来触发行为调整。 --- #### 10. **`reduce` 方法的功能及其应用场景有哪些?** `reduce` 将累积计算结果逐步应用于整个数组上的每一步逻辑判断过程之中。基本形式如下所示: ```javascript array.reduce((accumulator, currentValue) => { return accumulator + currentValue; }, initialValue); ``` 典型例子包括求和、扁平化二维数组或者统计频率分布表等复杂需求场景。 --- #### 11. **Class 类中的 `super`, `get`, `set` 关键字分别起何作用?** - `super`: 调用父类的方法或访问父类的属性。 - `get/set`: 自定义获取/设置某个属性的操作流程以便增加额外验证逻辑等功能支持。 --- #### 12. **Async/Await 的优点和局限在哪里?** 优点在于简化异步编程模型使其看起来像顺序执行;缺点则可能隐藏错误链路追踪困难等问题。 --- #### 13. **Iterator 接口的意义是什么?怎样手动添加 Iterator 支持给自定义集合类型呢?** 提供了一种统一的标准协议让任何容器都能被标准化地逐一访问成员元素。具体做法如下: ```javascript function* createIterator(items){ for (let item of items){ yield item; } } const iterator = createIterator([1, 2, 3]); console.log(iterator.next().value); // Output: 1 ``` --- #### 14. **浏览器端常见的本地存储技术都有哪些种类?它们之间又存在什么样的差异之处?** 主要包括 localStorage 和 sessionStorage 。前者持久保存直到主动清除为止后者仅限单次会话期间有效。 --- #### 15. **数组方法 `find()` 和 `findIndex()` 的功能分别是啥?** - `find()`: 查找第一个符合条件的元素本身。 - `findIndex()`: 获取该位置索引而非实际数据实体。 --- #### 16. **ES6 如何动态向对象添加 key-value 键对关系?** 借助方括号表示法即可完成这一目标: ```javascript const dynamicKey = 'newProperty'; const obj = {[dynamicKey]: 'Dynamic Value'}; console.log(obj.newProperty); // Dynamic Value ``` --- #### 17. **JSON 数据的本质含义为何物?** 它是轻量化格式用来交换信息的一种通用媒介载体。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值