ES6新特性总结

最近,在面试中也是经常被问道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.hqwc.cn/news/9123.html

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

相关文章

网络安全技术入门(1):简介

文章目录 1.前言2.什么是网络安全技术?3.列举一些常见的网络安全技术3.1 防火墙3.2 加密技术3.3 身份认证和访问控制3.4 恶意软件防护3.5 网络监控和日志管理3.6 威胁情报和漏洞管理3.7 安全培训和意识教育 4.网络安全研究的关键技术5.网络安全防护技术有哪些&#…

IP路由协议(RIP、IGRP、OSPF、IS-IS、BGP)

文章目录 1、路由分类2、RIP协议1)RIP的工作原理2)RIP路由表的更新过程3)RIP路由表的更新原则4)RIP的特性5)RIP协议的版本 4、IGRP协议1)IGRP路由表的更新2)IGRP的度量标准 5、OSPF协议1&#x…

基于matlab使用二维规范化互相关进行模式匹配和目标跟踪(附源码)

一、前言 此示例演示如何使用二维规范化互相关进行模式匹配和目标跟踪。该示例使用预定义或用户指定的目标以及要跟踪的类似目标的数量。归一化互相关图显示,当值超过设置的阈值时,将标识目标。 在此示例中,您使用规范化互相关来跟踪视频中…

FOF常用的七种投资策略全解析

从当前市场上的投资策略种类来看,大致有七种,包括核心*卫星投资策略、「杠铃」投资策略、反向投资策略、成本平均策略和时间分散化策略、买入并持有策略、美林投资时钟策略、Alpha/Beta投资策略。 投资策略一:美林投资时钟策略 美林投资时钟投资策略相信…

【后台管理框架】JAVA后台管理框架推荐

目录 若依 Guns 2.vue-element-admin 3.JEECG-BOOT 4.GIN-VUE-ADMIN 5.vue-admin-beautiful 6.Dcat-admin 7.RuoYi 8.renren-fast-vue 9.ant-design-pro 10.iview-admin 11.material-dashboard 参考资料 若依 若依管理系统 Guns Guns Tech. 后台管理系统是内容…

微信小程序如何读取本地云存储txt数据,避免乱码

第一步 找到你的txt文件,重命名为json文件 第二步 上传到云存储中,获取File ID 第三步 编写js代码 相关技术文档: https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.readFile.html onShow(){wx.cloud.d…

【UnityDOTS 九】Entity Command Buffer使用

Entity Command Buffer使用 前言 直接的创建,销毁Entity,以及对Entity的结构进行更改(比如增加删除Component)都要通过EntityManager等接口来实现。 在Job中,只能实现对Entity的Component组件进行数据修改的功能。 我…

PHP+MySQL:查询所有表格信息

效果 代码 $sql "SHOW TABLES"; $sql "SHOW TABLES"; $result DB_query($sql, $db); $myrow DB_fetch_array($result) echo <td> <a href" . $RootPath . /table_detial.php?table_name . $myrow[0] . "> . $myrow[0] . …

mysql 联合查询

mysql联合查询 联合查询&#xff1a;union&#xff0c;将多次查询(多条select语句)的结果&#xff0c;在字段数相同的情况下&#xff0c;在记录的层次上进行拼接。 基本语法 联合查询由多条select语句构成&#xff0c;每条select语句获取的字段数相同&#xff0c;但与字段类…

【花雕】全国青少年机器人技术一级考试备考实操搭建手册7

随着科技的不断进步&#xff0c;机器人技术已经成为了一个重要的领域。在这个领域中&#xff0c;机械结构是机器人设计中至关重要的一部分&#xff0c;它决定了机器人的形态、运动方式和工作效率。对于青少年机器人爱好者来说&#xff0c;了解机械结构的基础知识&#xff0c;掌…

量子 能源,节能减排还是另有“端倪”?

光子盒研究院 前言&#xff1a;如今&#xff0c;量子技术早已走出实验室、广泛赋能电力、化学、医学等各个领域&#xff1b;创新赛道上&#xff0c;加速奔跑的量子产业&#xff0c;将带来无限可能。现在&#xff0c;光子盒特开启「量子」专栏&#xff0c;解读量子技术将为下游应…

(六)python实战——使用Redis库完成redis基本数据类型数据的操作案例

前言 本节内容主要介绍一下在python环境下&#xff0c;使用Redis库实现redis基本数据类型String、List、Set、Zset、Hash等数据的操作&#xff0c;通过案例的演示&#xff0c;学习python环境下&#xff0c;redis缓存数据库的基本使用和操作。 正文 ①使用pip命令安装Redis依…