浅谈ES6初级语法以及使用

前言

ES6 ECMAScript6 是于2015年6月正式发布的 JavaScript 语言的标准 而不是你现在在搜索引擎中搜出来的蔚来 ES6 汽车型号。相信对于所有前端开发者来说已经很熟悉了 ES6 的内容非常多 本文就不一一介绍了。我将主要介绍一些在前端开发中使用到的 ES6 初级语法 本文针对初级前端开发 大佬们可以略过。如果发现文中有不准确的地方欢迎各位指出 同时也欢迎在评论区探讨。那话不多说 我们开始。

let 和 const 命令

let 和 const 大家用的已经很多了 毕竟现在很少看到还有人使用 var 去定义变量。let 和 const 的块级作用域、不存在变量提升、不允许重复声明等特点这里就略过了。下面先来两个思考题 看看两个 for 循环会以怎样的时间间隔在控制到打印出什么值。

还有一个暂时性死区的概念 暂时性死区是指在代码块内如果存在 let 和 const 命令 这个区块对这些命令声明的变量 从一开始就形成了封闭作用域 不可以在声明之前使用这些变量。

需要注意的是 const 命令声明的复合类型数据 数组和对象 本质上是变量指向的内存地址不能改变 这个指针指向的数据结构是可以改变的。所以我们在声明变量时能用 const 的就一定不使用 let。

解构赋值

解构赋值的使用场景非常多 字符串、数组、对象以及函数的参数都可以进行解构。这里就不过多赘述解构的语法了 下面将直接列举一些案例 文中出现的扩展运算符 ... 其实就是取出参数对象中的所有可遍历属性 拷贝到当前对象之中。

数组的解构赋值

数组的结构赋值很简单 你只要在使用时注意一些细节就行。

对象的解构赋值

需要注意的是 对象的解构赋值的内部机制 是先找到同名属性 然后再赋给对应的变量 真正被赋值的是后者 而不是前者。

所以当服务端接口返回的字段名不是我们前端想要的 傲娇的你又不想改自己的代码 或者本身这个字段名你已经在很多地方使用了 那么这个时候就可以使用别名来解构。最后你会看到下图中我们尝试打印 node 也报错了 这也符合对象解构赋值的机制。

函数参数的解构赋值

函数参数的解构无非就是把数组或者对象当作函数的参数传入 然后就是跟数组和对象一样是机制进行解构 下面以传入对象为例 同样也可以使用默认值 重命名。

字符串的扩展

ES6 中字符串还是新增了很多 API 比如 includes() startsWith() endsWith() repeat() padStart() padEnd() 等 我觉得使用频率都不是很高 你只要知道就行 如果有不清楚的可以自行查阅。那这里我就重点介绍一下模版字符串了。

模版字符串

模板字符串(template string)是增强版的字符串 用反引号( )标识。它可以当作普通字符串使用 也可以用来定义多行字符串 或者在字符串中嵌入变量。

字符串插入变量和表达式。变量名写在 ${} 中 ${} 中可以放入JavaScript 表达式。

模板字符串中的换行和空格都是会被保留的。

数组的扩展

ES6 中新增了一些数组的 API 有些使用频率也是非常高的。

find()和findIndex()

find() 查找数组中符合条件的元素,若有多个符合条件的元素 则返回第一个元素。

findIndex( ) 查找数组中符合条件的元素索引 若有多个符合条件的元素 则返回第一个元素索引。

两个方法其实几乎一样 区别在于 find() 返回的是符合条件的元素 如果没有符合条件的元素 则返回undefined。而 findIndex( ) 返回的是符合条件的元素索引 如果没有符合条件的元素 则返回 -1。这两个方法被前端经常用来判断一组数据中是否有符合条件的值 要注意与数组的 indexOf() 和 some() 方法的区别。

find() 和 findIndex( ) 方法的回调函数可以接受三个参数 依次为当前的值、当前的位置和原数组 这里就不介绍了。这两个方法都可以接受第二个参数 用来绑定回调函数 this 对象。另外 这两个方法都可以发现 NaN 弥补了数组的 indexOf 方法的不足。上面我提到了 some() 方法 其实如果想要判断数组是否包含某个指定的值 ES6 提出了 includes() 方法 这将更加简洁明了。

所以当你发现很多数组的方法都能实现你的某一个需求 但是怎么快速的敲出最好的那个 API 这就要我们对每个 API 都足够了解 平时多总结 毕竟让自己的代码变得优雅是每位程序员的追求。

includes()

该方法返回一个布尔值 表示某个数组是否包含给定的值。方法支持两个参数 第一个参数表示搜索的值 第二个参表示搜索的起始位置 默认为0。如果第二个参数为负数 则表示倒数的位置 如果这时它大于数组长度 比如第二个参数为-4 但数组长度为3 则会重置为从0开始。

数组的扩展其实还有其他的内容 我这里就不介绍了 你可以自己查阅教程。

对象的扩展属性简写和属性名表达式

ES6 中对象的属性简写和属性名表达式大家应该都知道。在上面讲到的对象解构赋值其实就是一个属性简写。

在开发中一定要注意简写的地方 当你在使用某些组件的 API 或者改别人代码时 要知道哪里他是使用了简写 如果你的变量名有改变就一定要改过来 不然当你看到控制台的报错你就匪夷所思了 这代码为什么之前可以跑 现在为什么又跑不了

assign()

ES6新增了一个操作 Object.assign() 下面列举三个常见用途。

函数的扩展函数参数的默认值

ES6 可以直接在参数上设置默认值 这比 ES5 只能在函数内为参数设置默认值友好得多。具体用法我们其实在上面讲 函数参数的解构赋值时已经有介绍了。这里就拿官方的例子列举一下。

箭头函数

箭头函数因其写法而得名 我们可以用 去定义函数。

当箭头函数函数体有多行语句 用 {} 包裹起来 表示代码块 当只有一行语句 并且需要返回结果时 可以省略 {} , 结果会自动返回。同样这里的 return 简写你也要注意 当你函数的代码块不止一行时 你就该补上 return 了。

官方给出了几个使用箭头函数的注意点

(1)函数体内的this对象 就是定义时所在的对象 而不是使用时所在的对象。

(2)不可以当作构造函数 也就是说 不可以使用new命令 否则会抛出一个错误。

(3)不可以使用arguments对象 该对象在函数体内不存在。如果要用 可以用Rest参数代替。

(4)不可以使用yield命令 因此箭头函数不能用作Generator函数。

箭头函数中this 指向的固定化 并不是因为箭头函数内部有绑定 this 的机制 实际原因是箭头函数根本没有自己的 this 导致内部的 this 就是外层代码块的 this 。正是因为它没有 this 所以也就不能用作构造函数。

Set 和 Map 数据解构Set

ES6 提供了新的数据结构 Set。它类似于数组 但是成员的值都是唯一的 没有重复的值。它的一些 API 我就直接通过下面的例子说明了

Map

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。Map 对象在日常的开发中使用的也是非常多 因为 Object 结构提供了“字符串—值”的对应 Map 结构提供了“值—值”的对应 是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构 Map 比 Object 更合适。

有使用过乐高、低代码平台的同学知道 在低代码项目的开发中我们会经常处理复杂的数据 Map 对象基本是必不可少。下面举个简单的例子

这样我们就将对象中的某个字段值和这个对象本身给联系起来了 方便我们快速去匹配。

最后

那么关于 ES6 的基...基...基础就先到这里了 前面的内容也不是很全面 包括 ES6 的 Class 类、模块、Promise对象、Generator函数以及 async 函数等这里就先不介绍了。一方面是我的水平还不足以和大家分享这方面知识 另一方面也是因为每个知识点的内容都很多 适合做专题分享。这里贴两个 ES6 教程的链接

https://es6.ruanyifeng.com/ 阮一峰《ECMAScript 6 教程》是一本开源的 JavaScript 语言教程 全面介绍 ECMAScript 6 新引入的语法特性。

https://www.runoob.com/w3cnote/es6-tutorial.html ES6教程 菜鸟教程

当然你要是想要阮一峰老师的《ECMAScript 6 教程》第三版的pdf版电子书 你可以直接钉钉私信我 月杋 。

本文转自网络，原文链接：https://developer.aliyun.com/article/784821
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！