【面试题】 ES6知识点详细解析(一)

简介: 【面试题】 ES6知识点详细解析(一)

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

 

🍔let const 其他知识点补充

块级作用域的补充

  1. const 不可以在循环体里面声明变量

 

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

 

  1. ES6新增的遍历可迭代数组(对象)

for(var item of names)

for(let item of names)

for(const item of names)

暂时性死区

在ES6中,有一个概念叫做暂时性死区,它表达的意思是在一个代码中,使用let、const声明的变量,在声明之前,变量都是不可以访问的

我们称这种现象为 temporal dead zone (暂时性死区,TDZ)

var let const 的选择

var 的使用

  1. var 的问题

我们需要明白一个事实,var表现出来的特殊性:比如作用于提升,window全局对象,没有块级作用域等都是一些历史遗留问题,是JavaScript在设计之初的一种缺陷,所以在以后的开发中不再使用var来定义变量了

  1. 关于 let 和 const 声明变量的担心

构建工具的基础上创建项目\开发项目 webpack/vite/rallup

babel 工具会将我们的 ES6 代码转化成 ES5 代码 ES6-->ES5

let 和 const 如何选择

  1. 优先推荐 const

因为 const 可以保证数据的安全性,如果用 let 声明的变量,后续有可能自己不小心更改了,如果不确定后续更改不更改这个变量,优先推荐使用 const 声明,只有当我们明确知道一个变量后续需要被重新赋值的话,再使用 let

🍔字符串模板

🥗字符串模板的基本使用

ES6之前拼接字符串和其他标识符

ES6之后模板字符串

标签模板字符串的使用

🍔ES6中的参数默认值

在 ES5 里面实现函数参数默认值

ES6 里面的函数参数默认值

对象参数和默认值以及解构

有默认值的形参最好放在最后

有默认值的函数的 length 属性(函数中的length值是形参的个数)

🍔函数的剩余参数

ES6中引用了 rest parameter,可以将不定数量的参数放入到一个数组中

如果最后一个参数是...为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组

arguments 与 剩余参数有什么区别呢?

  1. 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参
  2. arguments 对象不是一个真正的数组,而rest 参数是一个真正的数组,可以进行数组的所有操作
  3. arguments 是早期的 ECMAScript 中为了方便去获取所有的参数提供的一个数据结构,而 rest 参数是 ES6 中提供并且希望以此来代替 arguments 的

🥗函数箭头参数的补充

  1. 箭头函数是没有显示原型的,所以不能作为构造函数,不能使用 new 来创建对象

👻

  1. 一句话答案:

因为箭头函数里面没有 [[Construct]] ****这个内部槽,箭头函数的本质是变量,所以没有call

  1. 进一步解释:

函数对象是一个支持[[Call]][[Construct]]内部方法的对象。每个支持[[Construct]]的对象必须支持[[Call]],也就是说,每个构造函数必须是一个函数对象。因此,构造函数也可以被称为 构造函数函数构造函数对象

所以,想要对某个对象使用 new,就得确保该对象具有[[Construct]]这个内部方法。而箭头函数没有[[Construct]]

  1. 为什么没有 [[Construct]]

因为箭头函数设计之初,就是为了设计一种更简短的函数并且不绑定 this。所以箭头函数不为参数 super、this 或 new.target 定义本地绑定。箭头函数中的 this、super、arguments 及 new.target 这些值由外围最近一层非箭头函数决定。

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 不一定是全局对象

  1. 普通函数会做一个操作,在 new 的时候会把构造函数的显示原型赋值给 new 出来新对象的隐式原型

箭头函数为什么没有显示原型

箭头函数返回一个对象

箭头函数与变量解构结合

React 与 Immutable 的技术选型中的应用

很多时候,你可能想不到要这样用,所以再来举个例子,比如在 React 与 Immutable 的技术选型中,我们处理一个事件会这样做:

箭头函数里面没有 this

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 但不一定是全局对象。箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值。

模拟一个实际开发中的例子:juejin.cn/post/684490…

我们的需求是点击一个按钮,改变该按钮的背景色。

为了方便开发,我们抽离一个 Button 组件,当需要使用的时候,直接:

看着好像没有问题,结果却是报错Uncaught TypeError: Cannot read property 'style' of undefined

这是因为当使用 addEventListener() 为一个元素注册事件的时候,事件函数里的 this 值是该元素的引用。所以如果我们在 setBgColorconsole.log(this),this 指向的是按钮元素,那 this.element 就是 undefined,报错自然就理所当然了。

也许你会问,既然 this 都指向了按钮元素,那我们直接修改 setBgColor 函数为:

确实可以这样做,但是在实际的开发中,我们可能会在 setBgColor 中还调用其他的函数,比如写成这种:

最终版本:

ES5

为避免 addEventListener 的影响,使用 bind 强制绑定 setBgColor() 的 this 为实例对象,使用 ES6,我们可以更好的解决这个问题:

由于箭头函数没有 this,所以会向外层查找 this 的值,即 bindEvent 中的 this,此时 this 指向实例对象,所以可以正确的调用 this.setBgColor 方法, 而 this.setBgColor 中的 this 也会正确指向实例对象。

在这里再额外提一点,就是注意 bindEvent 和 setBgColor 在这里使用的是普通函数的形式,而非箭头函数,如果我们改成箭头函数,会导致函数里的 this 指向 window 对象 (非严格模式下)。

最后,因为箭头函数没有 this,所以也不能用 call()、apply()、bind() 这些方法改变 this 的指向,可以看一个例子:

箭头函数中没有 arguments

箭头函数中的 arguments 会去上层作用域查找 arguments

箭头函数没有自己的 arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的 arguments 对象:

那如果我们就是要访问箭头函数的参数呢?你可以通过命名参数或者 rest 参数的形式访问参数:

🥗Rest运算符

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

rest参数和arguments对象的区别

剩余参数和arguments对象之间的区别主要有三个:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sortmapforEachpop
  • arguments对象还有一些附加的属性 (如callee属性)
  • 题外知识点,arguments 转化为真正的数组: var arr = Array.prototype.slice.call(arguments);

从 arguments 到数组

解构剩余参数

剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中。请参阅解构赋值

数组中的应用

ES6中对数组以及对象使用解构(destructing)和rest参数语法

然而当使用rest参数的时候,你必须将它放置在最后一个位置:

当解构的参数个数超过了数组中元素个数的时候,多出来的参数的值会是undefined:

但是我们可以对参数设置默认值,这样就不用担心出现undefined啦:

利用rest可以实现的效果

rest在对象中的应用

【面试题】 ES6知识点详细解析(二):https://developer.aliyun.com/article/1413991

相关文章
|
14天前
|
存储 缓存 NoSQL
Redis常见面试题全解析
Redis面试高频考点全解析:从过期删除、内存淘汰策略,到缓存雪崩、击穿、穿透及BigKey问题,深入原理与实战解决方案,助你轻松应对技术挑战,提升系统性能与稳定性。(238字)
|
2月前
|
存储 安全 测试技术
Python面试题精选及解析
本文详解Python面试中的六大道经典问题,涵盖列表与元组区别、深浅拷贝、`__new__`与`__init__`、GIL影响、协程原理及可变与不可变类型,助你提升逻辑思维与问题解决能力,全面备战Python技术面试。
100 0
|
4月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
190 4
|
4月前
|
存储 安全 Java
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
2089 48
|
4月前
|
前端开发 JavaScript 开发者
2025 最新 100 道 CSS 面试题及答案解析续篇
本文整理了100道CSS面试题及其答案,涵盖CSS基础与进阶知识。内容包括CSS引入方式、盒模型、选择器优先级等核心知识点,并通过按钮、卡片、导航栏等组件封装实例,讲解单一职责原则、样式隔离、响应式设计等最佳实践。适合前端开发者巩固基础、备战面试或提升组件化开发能力。资源地址:[点击下载](https://pan.quark.cn/s/50438c9ee7c0)。
116 5
2025 最新 100 道 CSS 面试题及答案解析续篇
|
4月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
235 6
|
4月前
|
NoSQL Java 微服务
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
289 9
|
4月前
|
缓存 算法 NoSQL
校招 Java 面试高频常见知识点深度解析与实战案例详细分享
《2025校招Java面试核心指南》总结了Java技术栈的最新考点,涵盖基础语法、并发编程和云原生技术三大维度: 现代Java特性:重点解析Java 17密封类、Record类型及响应式Stream API,通过电商案例演示函数式数据处理 并发革命:对比传统线程池与Java 21虚拟线程,详解Reactor模式在秒杀系统中的应用及背压机制 云原生实践:提供Spring Boot容器化部署方案,分析Spring WebFlux响应式编程和Redis Cluster缓存策略。
125 1
|
4月前
|
设计模式 安全 Java
Java 基础知识面试题全解析之技术方案与应用实例详解
本内容结合Java 8+新特性与实际场景,涵盖函数式编程、Stream API、模块化、并发工具等技术。通过Lambda表达式、Stream集合操作、Optional空值处理、CompletableFuture异步编程等完整示例代码,助你掌握现代Java应用开发。附面试题解析与技术方案,提升实战能力。代码示例涵盖计算器、员工信息统计、用户查询、模块化系统设计等,助你轻松应对技术挑战。
112 9
|
4月前
|
缓存 Java 索引
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
900 6

推荐镜像

更多
  • DNS