面试前端实习常问的关于【ES6新特性】的问题

ES6新特性

日常前端代码开发中,有哪些值得用 ES6 去改进的编程优化或者规范?

  1. 常用箭头函数来取代有this指向的函数
  2. 常用 let 取代 var 命令
  3. 常用数组/对象的结构赋值来命名变量(结构更清晰,语义更明确,可读性更好)
  4. 在长字符串多变量组合场合,用模板字符串来取代字符串
  5. 用 class 类取代传统的构造函数,来生成实例化对象。
  6. 在大型应用开发中,要保持 module 模块化开发思维,分清模块之间的关系,常用 import、export 方法。

ES6新特性有那些?

新增命令let、const

  1. 新增声明命令 let 和 const
    • let 和 const 都是块级作用域,let 表示变量、const 表示常量;
    • 以{ }代码块作为作用域范围;
    • 只能在代码块里面使用不存在变量提升;
    • 只能先声明再使用,否则会报错;

模版字符串

  1. 模板字符串

    • 用一对反引号( `` )标识,它可以当作普通字符串使用,也可以用来定义多行字符串,也可以在字符串中嵌入变量js 表达式函数变量

    • js 表达式函数需要写在${ }中。

    • // 基本模板字符串
      const name = 'Alice';
      const greeting = `Hello, ${name}!`;
      console.log(greeting); // 输出: Hello, Alice!// 多行模板字符串
      const message = `Welcome to the site!Please enjoy your visit.`;
      console.log(message);// 输出:// Welcome to the site!// Please enjoy your visit.// 嵌入表达式
      const age = 25;
      const description = `I am ${age} years old.`;
      console.log(description); // 输出: I am 25 years old.
      

函数的扩展

函数的扩展

  1. ES6 为参数提供了默认值。(在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。)

  2. 箭头函数

    • 写法

      • 当函数体中只有一个表达式时,{ }和 return 可以省略。
      // 箭头函数,只有一个表达式,隐式返回结果
      const square = x => x * x;
      
      • 当函数体中形参只有一个时,( )可以省略。

      • 函数名=(形参)=>{……}
        
    • 特点

      • 箭头函数中的 this 始终指向箭头函数定义时的离 this 最近的一个函数,如果没有最近的函数就指向window。

      • 没有独立的this:箭头函数的 this 值在函数定义时就已经确定,而不是在函数调用时确定。

      • 不能够使用 arguments 对象;

        不能用作构造函数,这就是说不能够使用 new 命令,否则会抛出一个错误;

在传统函数中,this 的值取决于函数是如何被调用的:

const person = {name: 'Alice',greet: function() {console.log('Hello, ' + this.name);}
};const anotherPerson = {name: 'Bob'
};// 将 greet 方法赋值给 anotherPerson
anotherPerson.greet = person.greet;anotherPerson.greet(); // 输出: Hello, Alice

对于箭头函数,this 就不是指向 window,而是父级(指向是可变的)

const person = {name: 'Alice',greet: () => {console.log('Hello, ' + this.name);}
};const anotherPerson = {name: 'Bob'
};// 将 greet 方法赋值给 anotherPerson
anotherPerson.greet = person.greet;anotherPerson.greet(); // 输出: Hello, Bob

对象的扩展

对象的扩展

  1. 属性的简写:ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
  2. 方法的简写:省略冒号与 function 关键字。

for…of 循环

import 和 export

  • export 用于导出模块(对外输出本模块(一个文件可以理解为一个模块)变量的接口)
  • import 用于导入模块(在一个模块中加载另一个含有 export 接口的模块)

Promise 对象

  • Promise 是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来。
  • 避免了层层嵌套的回调函数,解决了回调地狱的问题。
  • Promise 的 3 种状态

async、await`:使用 async/await, 搭配 Promise,可以通过编写形似同步的代码来处理异步流程

解构赋值

解构赋值:解构赋值是对赋值运算符的扩展,是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

  • 数组解构:当你有一个数组,并且想要将数组中的元素赋值给不同的变量时,可以使用数组解构。

    const numbers = [1, 2, 3];
    const [a, b, c] = numbers;console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
    

    对象解构:对象解构允许你从对象中提取属性值并赋给变量,变量名应与对象的属性名相对应。

    const user = {name: 'Alice',age: 25,country: 'Wonderland'
    };const { name, age, country } = user;console.log(name);    // Alice
    console.log(age);     // 25
    console.log(country); // Wonderland
    

Set 数据结构

Set 数据结构:类似数组。所有的数据都是唯一的,没有重复的值。(它本身是一个构造函数。)

  • Set 属性和方法

    • Size() 数据的长度
    • Add() 添加某个值,返回 Set 结构本身。
    • Delete() 删除某个值,返回一个布尔值,表示删除是否成功。
    • Has() 查找某条数据,返回一个布尔值。
    • Clear()清除所有成员,没有返回值。
  • 主要应用场景:数组去重

介绍下 Set、Map 的区别:

​ 应用场景 :Set 用于数据重组,Map 用于数据储存。

Set:

  • 成员不能重复
  • 只有键值没有键名,类似数组
  • 可以遍历,方法有 add, delete,has

Map:

  • 本质上是健值对的集合,类似集合
  • 可以遍历,可以跟各种数据格式转换

展开运算符

(展开运算符):可以将数组或对象里面的值展开;还可以将多个值收集为一个变量。

Symbol类型

Symbol类型:是一种基本类型。Symbol 通过调用 symbol 函数产生,它接收一个可选的名字参数,该函数返回的 symbol 是唯一的。

Proxy

Proxy:使用代理(Proxy)监听对象的操作

  1. 继承

ES6和ES5继承的区别

  • ES5 的继承是通过原型或者是构造函数机制来实现。

  • ES6 可以使用class关键字来定义类,并通过extends关键字实现继承。 【子类必须在 constructor 方法中调用 super 方法。】

    class Animal {	// 定义基类constructor(name) {this.name = name;}
    }class Dog extends Animal {	// 定义派生类,继承自 Animalbark() {return `${this.name} barks.`;}
    }const dog = new Dog('Buddy');	// 创建 Dog 类的实例console.log(dog.bark()); //使用派生类的方法输出: Buddy barks.
    

ES6 如何转化为 ES5?

为什么要转化?

因为有些浏览器对ES6的兼容程度并不友好。

使用Babel来实现转化:babel 是一个 ES6 转码器,可以将 ES6 代码转为 ES5 代码,以便兼容那些还没支持 ES6的平台。

步骤:

  1. 使用npm安装转换插件babel-cli,在js文件中引入插件
  2. 创建babel-cli配置文件.babelrc,输入以下内容
    image-20240725183758655
  3. 在终端输入babelsrc/index.js-odist/index.js(src为开发路径,即ES6所在目录,dist为转换后ES5路径)

let、const、var的区别

  • var 声明变量可以重复声明,而 let 不可以重复声明

  • var 是不受限于块级的,而 let 是受限于块级

  • var 会与 window 相映射(会挂一个属性),而 let 不与 window 相映射

  • var 可以在声明的上面访问变量,而 let 有暂存死区,在声明的上面访问变量会报错

  • const 声明之后必须赋值,否则会报错

  • const 定义不可变的量,改变了就会报错

  • const 和 let 一样不会与 window 相映射、支持块级作用域、在声明的上面访问变量会报错

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1488352.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【ARM】MDK-ARM软件开发工具的最终用户许可协议获取

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 了解MDK-ARM系列产品内软件开发工具的最终用户许可协议的获取。 2、 问题场景 对于部分外企客户需要软件开发工具的最终用户许可协议作为产品资料,以便附录并说明。 3、软硬件环境 1)、软件…

mysql语法介绍

MySQL 语法主要基于 SQL(Structured Query Language)标准,用于管理和操作关系型数据库。以下是一些基本的 MySQL 语句: 1.创建数据库: CREATE DATABASE database_name; 1.选择数据库: USE database_name;…

极速下载!青苹果系统Win7旗舰版:稳定安全!

今天系统之家小编给大家带来了青苹果系统Win7旗舰版镜像,该版本系统离线制作而成,安全无病毒,还升级了防火墙功能,大家安装后时刻都能放心操作。同时,它是在保持原有的功能并适度优化,保留下来的功能轻松满…

算法 —— 暴力枚举

目录 循环枚举 P2241 统计方形(数据加强版) P2089 烤鸡 P1618 三连击(升级版) 子集枚举 P1036 [NOIP2002 普及组] 选数 P1157 组合的输出 排列枚举 P1706 全排列问题 P1088 [NOIP2004 普及组] 火星人 循环枚举 顾名思…

如何学习Presto:糙快猛的大数据之路(建立整体框架)

这个系列文章用"粗快猛大模型问答讲故事"的创新学习方法,让你轻松理解复杂知识!涵盖Hadoop、Spark、MySQL、Flink等大数据所有热门技术栈,每篇万字长文。时间紧?只看开头20%就能有收获!精彩内容太多&#xf…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中,欢迎阅读指正 在计算机编程中,函数有着重要的作用和意义,它可以实现封装,复用,模块化,参数等功能效果,在如何在CSS中写变量?一文带你了解前端样式利…

【网络安全学习】 SQL注入01:基础知识

💻 1. 什么是SQL注入 SQL注入是一种针对Web程序中数据库层的安全漏洞的攻击方式。它利用了程序对用户输入数据合法性的判断或过滤不严,允许攻击者在设计不良的程序中添加额外的SQL语句,从而执行计划外的命令或访问未授权的数据。攻击者可以通…

【MetaGPT系列】【MetaGPT完全实践宝典——多智能体实践】

目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent(ProductManager)2-3、多智能体系统介绍2-4、多智能体案例分析2-4-1、构建智能体团队2-4-2、动作/行为 定义2-4-3、角色/智…

如何定位线上OOM

造成OOM的原因 1一次性申请太多对象。如:从数据库获取大量数据。 解决方法:更改申请对象的数量。如:做个分页。 2内存资源使用完未释放。如:太多线程建立数据库连接而未释放。 解决方法:使用线程池。 3本身资源不够…

Python + PyQt 搭建可视化页面(PyCharm)

Python PyQt 搭建可视化页面(PyCharm) 配置PyQt5环境 1.1 安装PyQt5和PyQt5-tools pip install PyQt5pip install PyQt5-tools1.2 QtDesigner和PyUIC环境的配置 配置QTDesigner,用来打开QT可视化开发工具 在PyCharm中依次打开&#xff1a…

Java面试八股之Spring-boot-starter-parent的作用是什么

Spring-boot-starter-parent的作用是什么 spring-boot-starter-parent 是Spring Boot项目中的一个特殊POM(Project Object Model),它主要的作用是提供一系列默认的配置和依赖管理,以便简化项目的构建过程。以下是spring-boot-sta…

NET8部署Kestrel服务HTTPS深入解读TLS协议之Certificate证书

Certificate证书 Certificate称为数字证书。数字证书是一种证明身份的电子凭证,它包含一个公钥和一些身份信息,用于验证数字签名和加密通信。数字证书在网络通信、电子签名、认证授权等场景中都有广泛应用。其特征如下: 由权威机构颁发&…

SpringBoot中使用监听器

1.定义一个事件 /*** 定义事件* author hrui* date 2024/7/25 12:46*/ public class CustomEvent extends ApplicationEvent {private String message;public CustomEvent(Object source, String message) {super(source);this.message message;}public String getMessage() …

支持4K高分辨率,PixArt-Sigma最新文生图落地经验

PixArt-Sigma是由华为诺亚方舟实验室、大连理工大学和香港大学的研究人员共同开发的一个先进的文本到图像(Text-to-Image,T2I)生成模型。 PixArt-Sigma是在PixArt-alpha的基础上进一步改进的模型,旨在生成高质量的4K分辨率图像。…

Mongodb文档和数组的通配符索引

学习mongodb,体会mongodb的每一个使用细节,欢迎阅读威赞的文章。这是威赞发布的第97篇mongodb技术文章,欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题,欢迎在文章下面点个赞,或者关…

老板电器发布首个烹饪AI模型,揭秘其如何引领厨电行业变革

数字发展日新月异,智慧产品迭代更新。当前,我们或许正身处一场连科学巨人也无法预见的深度变革之中。现代科技使得普通人无需深入学习数学或编程知识,也能借助手机或电脑,体验“苏格拉底式”的在线指导,或者与“乔布斯…

【LeetCode、牛客】链表分割、链表的回文结构、160.相交链表

Hi~!这里是奋斗的明志,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 🌱🌱个人主页:奋斗的明志 🌱🌱所属专栏:数据结构 📚本系列文章为个人学…

面试经典 114. 二叉树展开为链表

最近工作越来越难找,裁员越来越懂了,焦虑的睡不着,怎么办呢,只能刷面试题,卷死你们 今天这个题目没刷过,我思考了半天才只能用暴力,后来苦思冥想才想出来简单的方法,废话不多说&…

【音视频】RTSP、RTMP与流式传输

文章目录 前言RTSP与RTMPRTSP(Real-Time Streaming Protocol)RTMP(Real-Time Messaging Protocol)主要差异 什么是流式传输?流式传输的特点流式传输与传统下载的区别 使用VLC播放RTSP监控 总结 前言 在现代网络环境中…

uni-app声生命周期

应用的生命周期函数在App.vue页面 onLaunch:当uni-app初始化完成时触发(全局触发一次) onShow:当uni-app启动,或从后台进入前台时显示 onHide:当uni-app从前台进入后台 onError:当uni-app报错时触发,异常信息为err 页面的生命周期 onLoad…