面试前端实习常问的关于【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.mzph.cn/pingmian/50059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言报错已解决】“Undefined Reference”

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引言: 在开发过程中,我们经常会遇到各种编译错误或运行时错误。其中,“Undefined Referenc…

Axure Web端元件库:从Quick UI到500+组件的飞跃

在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能&#x…

Rce漏洞复习(ctfshow29-50)

Rce漏洞简介思维导图 Web29 代码审计: if(!preg_match("/flag/i", $c)){ eval($c); 传参没有flag(大小写都没有出现) Payload: ?csystem("ls"); ?csystem("tac *lag.php"); Web30 代码…

文件上传漏洞(ctfshow web151-161)

Web151 F12修改源代码 exts后面png改为php 这样就可以上传php的文件了 Web152: 考点:后端不能单一校验 就是要传图片格式,抓个包传个png的图片 然后bp抓包修改php后缀解析 然后放包 Web153-web156 在php代码中可以使用“{}”代替“[]” …

WPF项目实战视频《二》(主要为prism框架)

14.prism框架知识(1) 使用在多个平台的MVVM框架 新建WPF项目prismDemo 项目中:工具-NuGet包管理:安装Prism.DryIoc框架 在git中能看Prism的结构和源代码:git链接地址 例如:Prism/src/Wpf/Prism.DryIoc.Wpf…

机器学习 | 回归算法原理——随机梯度下降法

Hi,大家好,我是半亩花海。接着上次的多重回归继续更新《白话机器学习的数学》这本书的学习笔记,在此分享随机梯度下降法这一回归算法原理。本章的回归算法原理还是基于《基于广告费预测点击量》项目,欢迎大家交流学习!…

uniapp中出现图片过小会与盒子偏离

结论&#xff1a;在image的父盒子中加上display: flex&#xff0c;原因不清楚 出问题的代码和图片如下&#xff1a; <template><view style" background-color: greenyellow; height: 10rpx;width: 10rpx;"><image :src"imgSrc.seatnull" …

嵌入式C++、MQTT、数据库、Grafana、机器学习( Scikit-learn):智能建筑大数据管理平台(代码示例)

项目概述 智能建筑管理系统&#xff08;Intelligent Building Management System, IBMS&#xff09;是一个集成多种技术的复杂系统&#xff0c;旨在通过智能化手段提升建筑的管理效率、节能效果和居住舒适度。该系统涉及嵌入式系统、物联网&#xff08;IoT&#xff09;、大数据…

光明乳业:以科技赋能品质,引领乳业绿色新未来

近日&#xff0c;光明乳业再次成为行业焦点&#xff0c;其在科技创新与绿色发展方面的卓越表现赢得了广泛赞誉。作为中国乳制品行业的领军企业&#xff0c;光明乳业始终坚守品质至上的原则&#xff0c;不断探索科技创新之路&#xff0c;致力于为消费者提供更高品质、更健康的乳…

vdb:虚拟数据库

将文件虚拟成数据库&#xff0c;序列化写入、反序列化读取、直接读取。

Adobe正通过数字体验改变世界

在当今这个数字化飞速发展的时代&#xff0c;Adobe公司正以其创新的技术和卓越的产品引领着创意设计领域的变革。从Adobe发布的生成式AI工具&#xff08;Adobe Firefly&#xff09;&#xff0c;到Illustrator和Photoshop的新AI功能&#xff0c;再到广受认可的Adobe国际认证&…

GLSL教程 第5章:光照和材质

目录 5.1 光照模型基础 5.2 Phong光照模型 5.3 Blinn-Phong光照模型 5.4 Cook-Torrance光照模型 5.5 Lambert光照模型 5.6 材质属性的深入讲解 小结 光照和材质是计算机图形学中至关重要的元素&#xff0c;它们共同决定了渲染图像的视觉效果。光照模型用于模拟光源与物体…

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署LivePortrait :通过缝合和重定向控制实现高效的肖像动画制作

目录 项目论文介绍 论文中实际开展的工作 非扩散性的肖像动画 基于扩散的肖像动画 方法论 基于Ubuntu的部署实践开始 1. 克隆代码并准备环境 2. 下载预训练权重 3. 推理 快速上手 驱动视频自动裁剪 运动模板制作 4. Gradio 界面 5. 推理速度评估 社区资源 政安…

electron安装及快速创建

electron安装及快速创建 electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 详细内容见官网&#xff1a;https://www.electronjs.org/zh/docs/latest/。 今天来记录下练习中的安装过程和hello world的创建。 创建项目文件夹&#xff0c;并执行npm 初始化命…

迅雷强制升级,漠视用户权力

用着迅雷&#xff0c;突然闪退&#xff0c;弹出升级界面。没有任何经过我的同意和操作&#xff0c;直接退出&#xff0c;强制升级。非常的蛮横和强硬。 升级完成之后&#xff0c;弹出一个提示框&#xff0c;提示框里有一个启动按钮&#xff0c;和一个加入开机自启的勾选框。意…

【Python实战】Google Chrome的离线小恐龙游戏

文章目录 Google Chrome的离线小恐龙游戏项目结构大纲 &#x1f4ca;&#x1f463;逐步编码过程 &#x1f9e9;&#x1f4a1;第一步&#xff1a;项目初始化与主程序框架第二步&#xff1a;实现T-Rex的跳跃功能第三步&#xff1a;添加障碍物和碰撞检测第四步&#xff1a;添加得分…

前端面试项目细节重难点分享(十三)

面试题提问&#xff1a;分享你最近做的这个项目&#xff0c;并讲讲该项目的重难点&#xff1f; 答&#xff1a;最近这个项目是一个二次迭代开发项目&#xff0c;迭代周期一年&#xff0c;在做这些任务需求时&#xff0c;确实有很多值得分享的印象深刻的点&#xff0c;我讲讲下面…

go语言学习文档精简版

Go语言是一门开源的编程语言&#xff0c;目的在于降低构建简单、可靠、高效软件的门槛。Go平衡了底层系统语言的能力&#xff0c;以及在现代语言中所见到的高级特性。 你好&#xff0c;Go package main // 程序组织成包import "fmt" // fmt包用于格式化输出数据// …

排序算法详解

​ &#x1f48e;所属专栏&#xff1a;数据结构与算法学习 &#x1f48e; 欢迎大家互三&#xff1a;2的n次方_ &#x1f341;1. 插入排序 &#x1f341;1.1 直接插入排序 插入排序是一种简单直观的排序算法&#xff0c;它的原理是通过构建有序序列&#xff0c;对于未排序数…

使用 Visual Studio 2022 自带的 cl.exe 测试编译 opencv helloworld

1. 参考博客&#xff1a;https://blog.csdn.net/yangSHU21/article/details/130237669( 利用OpenCV把一幅彩色图像转换成灰度图 )( 代码用的此博客的&#xff0c;就改了下图片文件路径而已 )。 2. 编译探索步骤&#xff1a; test.cpp&#xff1a; #include <iostream>…