ES6的新特性的深入理解

287 阅读4分钟

1.let const var的理解

var声明的变量 全局作用域 存在变量提升 const与let 块级作用域 不存在变量提升 存在暂时性死区 函数 函数局部作用域 关于暂时性死区的理解 :在声明该变量前,不能使用该变量

const let var的理解.png

const let var的输出结果.png

2.新增Symbol数据类型

原始的数据类型: Number(数字) String(字符串) Boolean(布尔值) Null(空对象指针) Undefined(声明的变量未被初始化时) Function(函数) Array(数组)

Symbol 表示独一无二的变量值,即每个Symbol类型的值都不相同 解决的问题:对象的属性名容易产⽣命名冲突,为保证键名的唯⼀性

复杂数据类型:Object(对象)

symbol类型的理解.png

symbol输出结果.png

3.解构赋值

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

解构赋值的操作.png

4.新增数组数据的一些操作方法

4.1 includes方法和repeat方法

includes方法主要针对于数组内放置的是字符串的形式 用于判断某个具体的字符是否存在 返回值是Boolean值

repeat方法主要针对的也是字符串的形式 返回值一个新字符串,表示将原字符串重复n次。

4.2模板字符串

模板字符串是增强版的字符串,用反引号来标识 主要功能点: 加强版的引号 内容中可以直接出现换行符会直接去进行解析 字符串中可以直接嵌入变量 可以保留空格

includes与repeat 以及模板字符串的解析.png

4.3扩展运算符的使用

...为Es6中新增的操作符 主要用途 深拷贝一维数组 分割数组 将数组转化为函数的参数形式去进行传递

扩展运算符的使用.png

扩展运算符的输出结果.png

4.4新增的数组方法操作

find和findIndex 具体查找数组当中的某一项值

  1. find方法的返回值 找到了是返回具体某一项的内容 没找到返回值是undefined
  2. findIndex方法的返回值 找到了返回值是在数组中具体的索引位置 没找到的返回值是-1
  3. filter方法 根据你具体的条件 去过滤出满足条件的数据项 来返回一个新的数组,如果数组中没有满足条件的数据项 那么返回值是一个空的数组
  4. flat方法 把一个二维数组转化为一维数组 返回值是一个数组
  5. map方法 会返回一个新的数组 里面的数据 是根据你返回的东西来决定

es6的新增数组方法.png

es6中新增方法的输出结果.png

4.5 Set新增的数组结构

数组的数据结构,可以理解为值的集合。它和数组的最⼤的区别就在于: 它的值不会有重复项。 主要用途:运用new Set()的形式 生成Set 用于数组的去重 额外知识点 运用Array.from(传入数组) 浅拷贝一个数组实例

Set数组结构.png

Set的输出结果.png

5.新增的一些对象数据的操作

  1. ...扩展运算符对简单对象的深拷贝 就是只拷贝第一层的数据
  2. 额外知识点 Object.assign 传入目标对象与源对象 与扩展运算符相似 相当于深拷贝简单对象把两个对象进行拼接 组成一个新的对象
  3. 对于对象方法以及属性的简写 简写的声明方式 属性名和变量名一样才可以进行
  4. Object.keys方法遍历对象里面的key值 Object.values方法遍历对象里面的values值 Object.entries遍历对象里面的每一项
  5. Map对象与WeakMap对象结构 通过构造函数的形式去创建 传入的是键值对的形式

es6中对象操作.png

es6中对象操作的打印结果.png

6.函数的知识点扩展

  1. 箭头函数 如果只有一个参数()可以省略 只有一条执行语句 {} 可以省略 没有arguements 如果执行打印arguements会报错 箭头函数没有this 默认this为上一层作用域的this
  2. arguements的解析 可以通过数组的形式去打印出函数传递的参数
  3. 函数参数可以设置默认值

箭头函数.png

箭头函数的打印输出.png

7.异步编程

JavaScript中为什么要引⼊异步这个概念 JavaScript是单线程的 同步代码会阻塞后⾯的代码 异步不会阻塞程序的运行 涉及的知识点较多 会单独出一篇文章来进行讲解 可以先去看看我对promise的理解

链接:juejin.cn/post/715861…

大佬勿喷 欢迎大家一起评论交流讨论