ES6新特性总结

news2024/11/25 15:34:29

最近,在面试中也是经常被问道ES6关于新特性的面试题,那我也来个总结,记录下。

ES6新特性总结

  • let、const命令
      • (1)let
      • (2)const
  • 模板字符串
  • 增强的函数
      • (1)函数的参数可以设置默认值
      • (2)函数可以是参数
      • (3) es6的剩余参数,方法的形参
      • (4)扩展运算符…,方法的值传递
  • 扩张的对象、数组功能
      • (1)扩张的对象方法
      • (2)扩张的数组方法
      • (3)find() findIndex()
  • 解构赋值
        • 解构赋值是对赋值运算符的一种扩展,它针对数组和对象来进行操作,在vue中使用axios发请求会经常用到。
  • Symbol
  • Map和Set
      • (1)Set表示无重复的集合
      • (2)Set对象作用
      • (3)Map表示键值对集合
      • (4)Map对象作用
  • Promise对象
  • class类
  • module模块化
  • 箭头函数
      • (1)this的指向
      • (2)注意事项

let、const命令

(1)let

  1. let声明的变量是没有变量提升的。
  2. 是一个块级作用域
  3. 不能重复声明

(2)const

  1. 除了以上let的三点外,const声明的常量,一旦被声明是无法修改的。
  2. const声明对象常量的话,可以修改对象的属性,但不能修改对象。

在面试中说出以上几点一般是可以了,当然有时也会根据变量提升出笔试题。

模板字符串

在反引号中使用${}包裹变量。

特性:
基本的字符串格式化。
将表达式嵌入字符串中进行拼接。
用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。
ES6反引号(``)就能解决类模板字符串的功能

模板字符串倒是在字符串并接上使用比较多

增强的函数

(1)函数的参数可以设置默认值

在这里插入图片描述

(2)函数可以是参数

在这里插入图片描述输出结果:20

(3) es6的剩余参数,方法的形参

在这里插入图片描述输出结果:在这里插入图片描述

(4)扩展运算符…,方法的值传递

注:剩余运算符:把多个独立的项合并到一个数组中,一般是函数的形参。
扩展运算符:将一个数组分割,并将各个项作为分离的参数传递给函数。
在这里插入图片描述

扩张的对象、数组功能

ES6可以直接写入变量和函数,作为对象的属性和方法

(1)扩张的对象方法

  1. is() 比较两个值是否严格相等,特殊情况比较NaN,一般用===
  2. assign() 对象的合并,object.assign(目标对象,obj1,obj2等)

assing也算是个浅拷贝在这里插入图片描述结果:{a:1,b:2}

(2)扩张的数组方法

  1. from()将伪数组转化成真正的数组

通过扩展运算符也可以将伪数组转换成真正的数组

ES5写法:
在这里插入图片描述
结果:在这里插入图片描述

slice方法是对原数组截取一半进行浅拷贝

在这里插入图片描述结果:在这里插入图片描述from()还可以接受第二个参数,用来对每个元素进行处理,可以结合箭头函数。

  1. of()将任意的数据类型,转化成数组。
    在这里插入图片描述结果:在这里插入图片描述

(3)find() findIndex()

find()查找出第一个符合条件的数组成员,回调函数。
findIndex()查找出第一个符合条件的数组成员的索引。

解构赋值

解构赋值是对赋值运算符的一种扩展,它针对数组和对象来进行操作,在vue中使用axios发请求会经常用到。

优点:代码书写上简洁易读
在这里插入图片描述
同时我们也可以结合剩余运算符使用
在这里插入图片描述在这里插入图片描述
结果:在这里插入图片描述

也可以设置默认值(解构的默认值)
在这里插入图片描述

Symbol

Symbol原始数据类型,它表示是独一无二的值,没有new。
它也是JS中的第七种数据类型,与undefined、null、Number(数值)、String(字符串)、Boolean(布尔值)、Object(对象)并列。
在这里插入图片描述
结果:false

最大用途:用来定义对象的私有变量

注意点:
(1)没有办法遍历
(2)Object.keys(obj) 为[],获取不到

那怎么获取?
ES6新增的反射Reflect.ownKeys()方法
在这里插入图片描述
输出结果:在这里插入图片描述

加个笔试题
设计一个对象,键名的类型至少包含一个symbol类型,并且实现遍历所有key

在这里插入图片描述

Map和Set

(1)Set表示无重复的集合

  1. 使用add()添加元素
  2. 删除delete(元素)
  3. 查找has(元素),有返回true,无false
  4. 长度.size
  5. 将set变数组,扩展运算符。
  6. 清空clear()无参

(2)Set对象作用

  1. 去重
    在这里插入图片描述

  2. 求并集
    在这里插入图片描述

  3. 求交集
    在这里插入图片描述

  4. 求差
    在这里插入图片描述

(3)Map表示键值对集合

  1. 添加set(键,值)
  2. 获取get(键) 得到值
  3. 查找has(键)
  4. 删除delete(键)
  5. 清空clear()无参
  6. keys() 返回 Map 对象中键的数组。values() 返回 Map 对象中值的数组。

(4)Map对象作用

  1. Map与Array的转化:from转成二维键值对数组
    在这里插入图片描述
  2. Map的克隆
    在这里插入图片描述
  3. Map的合并
    在这里插入图片描述

Promise对象

Es6关于异步编程提供了三种方案:
(1) generator
(2) promise
(3) async、await

Promise是异步编程的一种解决方案。所谓promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

Promise对象有以下两个特点:
(1)对象的状态不受外界影响。 Pending–进行、fulfilled–成功、Rejected–失败
(2)一旦状态改变就不会再变,任何时候都可以得到这个结果。 Promise对象的状态改变,只有两种可能:从pending变为resolved和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再改变,会一直保持这个结果。
【如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。】

class类

ES6的class可以看作是一个语法糖,它的绝大部分功能ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。
在这里插入图片描述结果:在这里插入图片描述

类的继承extends
在这里插入图片描述
上面示例中,constructor()方法和toString()方法内部,都出现了(线波)super关键字。super在子类里表示父类的构造函数,用来新建一个父类的实例对象。

ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。
这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。
在这里插入图片描述上面代码中,ColorPoint继承了父类Point,但是它的构造函数没有调用super(),导致新建实例时报错。

module模块化

两个命令:
(1) export导出
(2) impor导入

export两种写法:
(1)
在这里插入图片描述在这里插入图片描述
(2)
在这里插入图片描述
下面是一个circle.js文件,它输出两个方法area和circumference。

在这里插入图片描述现在,加载这个模块。import写法:
在这里插入图片描述

箭头函数

(1)this的指向

一个总原则:谁调用就指向谁

箭头函数是没有this指向,箭头函数内部的this值只能通过查找作用域链来确定,没有自己的作用域。

也就是箭头函数所在的结构是没有this指向的,这个结构在那个作用域内,这个作用域内的this就是箭头函数的this。

(2)注意事项

  1. 没有自己的this和arguments
  2. 箭头函数不能new作为构造函数使用
  3. 箭头函数没有prototype
  4. call()、apply()、bind()等方法不能改变箭头函数中this的指向。

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

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

相关文章

6.4.4 GLSL实现奶牛颜色动态变化

#include <osg/Program> #include <osgDB/ReadFile> #include <osgViewer/Viewer>static const char* vertSource {"varying vec3 normal;\n"//易变量 用于着色器之间的传值"void main()\n""{\n"" normal normalize…

Kscan-简单的资产测绘工具

下载地址&#xff1a;https://github.com/lcvvvv/kscan 简介 &#xff1a; Kscan是一款纯go开发的全方位扫描器&#xff0c;具备端口扫描、协议检测、指纹识别&#xff0c;暴力破解等功能。支持协议1200&#xff0c;协议指纹10000&#xff0c;应用指纹20000&#xff0c;暴力破…

UNI-APP_subNVue原生子窗口使用,web-view层级问题解决

subNVues文档 app-subnvues文档 subNVues开发指南 需求&#xff1a;在pages/cloud_control/index页面使用subNVue原生子窗口 1.pages文件配置 "app-plus": {"bounce": "none","subNVues":[{"id": "control_popup&qu…

Mongodb基础及应用、部署(超详细)

目录 一、简介 二、应用场景 三、概念 四、安装部署 1、关闭防火墙和selinux 2、指定一个进程同一时间最多可开启的文件数 3、用户最多可开启的进程数目 4、安装版本下载地址 5、创建数据目录&#xff0c;日志文件及目录并创建相应配置文件 6、启动MongoDB数据库&#xff0c…

接口自动化你一定能要知道的基本流程和测试思路

接口自动化大致步骤&#xff1a; 1、发送请求 2、解析结果 3、验证结果 定义三个和业务相关的类 1、一个用来封装HTTPclient&#xff0c;用来发送请求 2、解析结果xml的类 3、一个用于比较测试结果和期望值的类&#xff0c;用于验证 4、自动生成报告的类&#xff1a;自…

Nerf-Wild代码学习笔记Neural Radiance Fields for Unconstrained Photo Collections

前言&#xff1a; 本文为记录自己在Nerf学习道路的一些笔记&#xff0c;包括对论文以及其代码的思考内容。公众号&#xff1a; AI知识物语 B站讲解&#xff1a;出门吃三碗饭 本篇文章主要针对其代码来学习其内容&#xff0c;关于代码的理解可能会有出入&#xff0c;欢迎批评指…

如何使用P-One的全链路压测工具来定位问题节点和分析性能问题

首先&#xff0c;简单介绍一下&#xff0c;性能测试平台P-One。 PerformanceOne&#xff08;简称&#xff1a;P-One&#xff09;是泽众软件自主研发的一套一站式性能测试平台软件产品。 该产品采用 B/S 架构开发&#xff0c;实现了集管理、设计、压测、监控以及分析于一体的全方…

(06)ATF代码导读之BL31

代码导读 关于平台相关的代码和函数均以qemu实现解读。 BL31 在BL2中触发安全监控模式调用后会跳转到BL31中执行&#xff0c;同理复位的入口函数为bl31_entrypoint。BL31最主要的两个功能&#xff1a;作为启动流程&#xff0c;初始化硬件和加载BL32、BL31等&#xff1b;启动…

scratch 角色移动

scratch 角色移动 这是本人的第一个scratch程序。入坑scratch是因为希望体验一下图形化编程并制作以动画为主的图形化程序。用的软件是Mind。Mind是由scratch改编的开源IDE&#xff0c;可以图形化开发Arduino程序&#xff0c;本人使用Mind的另一个原因是Mind提供快捷地在OLED屏…

【数据库】MySQL安装(最新图文保姆级别超详细版本介绍)

1.总共两部分&#xff08;第二部可省略&#xff09; 安装mysql体验mysql环境变量配置 1.1安装mysql 1.输入官网地址https://www.mysql.com/ 下载完成后&#xff0c;我们双击打开我们的下载文件 打开后的界面&#xff0c;如图所示 我们选择custom&#xff0c;点击nex…

ModaHub魔搭社区:腾讯云向量数据库为什么以独立产品形式推出?

自今年大模型趋势发生以来&#xff0c;向量数据库领域备受关注。 今年3月以后&#xff0c;多家向量数据库厂商拿下最新融资&#xff0c;其中Pinecone更是获得高达1亿美元的B轮融资。 腾讯云当然也注意到了这一趋势。 腾讯云数据库副总经理罗云表示&#xff0c;当时内部已经开…

华为OD机试真题 Java 实现【网上商城优惠活动(一)】【2022 Q4 100分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、补充说明五、Java算法源码六、效果展示1、输入2、输出3、说明 一、题目描述 某网上商城举办优惠活动&#xff0c;发布了满减、打折、无门槛3种优惠券&#xff0c;分别为&#xff1a; 1.每满100元优惠10元&#xff0c;无使用数限…

技术思维vs管理思维 程序员与项目经理5大思维差异

软件项目中&#xff0c;项目经理出身于程序员的情况较多&#xff0c;这样的项目经理在技术上拥有优势&#xff0c;但作为程序员的技术思维和作为项目经理的管理思维区别较大。因此如果不及时转换思维&#xff0c;往往造成过于纠结项目细节、忽视工期和成本压力&#xff0c;从而…

vmware虚拟机的12个使用技巧

1、增加虚拟机可用的物理内存 关闭虚拟机&#xff0c;设置内存&#xff1a; 2、硬件设备添加 一直选择下一步&#xff0c;直到这个界面进行磁盘大小分配&#xff1a; 3、控制权的切换 由于VMware的工作特点是在一台计算机中同时运行多个操作系统&#xff0c;因此这就存在一个…

排序算法-整理

1.【数据结构】带你玩转排序&#xff1a;堆排序、希尔排序、插入排序、选择排序、冒泡排序、快排(多版本)、归并排序 【数据结构】带你玩转排序&#xff1a;堆排序、希尔排序、插入排序、选择排序、冒泡排序、快排(多版本)、归并排序http://t.csdn.cn/fCXSo 2.十大基础算法 …

培训小程序首页开发

目录 1 定义变量2 欢迎语搭建3 分类导航搭建4 搭建底部导航总结 我们本篇来开发一下我们小程序的首页&#xff0c;先看一下原型 1 定义变量 因为我们首页展示的分类信息&#xff0c;现在分类信息已经存到了数据源里&#xff0c;我们要通过变量读取出来。 先打开我们创建的自…

Zabbix之部署

Zabbix 6.0 一.Zabbix介绍 1.zabbix 的含义 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案zabbix 能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff1b;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各…

matlab用histfit画直方图+拟合曲线

matlab画直方图拟合曲线 成图效果1 数据格式2 绘制步骤3 后话 成图效果 1 数据格式 应该准备一个double的数组&#xff0c;如果是csv或者xlsx直接拖进matlab是table型&#xff0c;这是无法作为绘图参数的 如果是table型&#xff0c;可以使用table2array(data)进行转换 2 绘制…

广东程序员,今年28岁,4年经验月薪13K,仍一事无成

之前认识的一位工作很努力的广州程序员朋友&#xff0c;前天深夜微信拍了拍我——“在吗&#xff1f;播妞”。 他把对未来的迷茫一股脑的倒了出来&#xff1a; 对方拍了拍你的“隐形翅膀” 我在&#xff01; 长夜漫漫无心睡眠&#xff0c;我以为只有我睡不着觉&#xff0c;…

Unity 之 超级详细的隐私问题解决方案

Unity 之 助力游戏增长 -- 解决隐私问题 一&#xff0c;平台测试隐私问题二&#xff0c;解决方式一2.1 勾选自定义Mainifest2.2 修改自定义Mainifest2.3 隐私协议弹窗逻辑 三&#xff0c;解决方式二3.1 导出安卓工程3.2 创建上层Activity3.3 配置AndroidManifest 四&#xff0…