当前位置:首页 > 技术分析 > 正文内容

ES6、ES7、ES8、ES9、ES10常用语法总汇

ruisui885个月前 (02-03)技术分析22

学习了一段时间的前端知识,日常中会copy些语法使用规则,对于这些语法虽会简单的使用,但并不咋了解,因此决定对这些进行了一番系统的学习:

一.声明变量

现在JavaScript有三种不同关键字声明变量:var、let、const;在ES6之前使用的一直是var,ES6是添加了let、const;

  1. var声明的变量作用域为全局作用域
  1. let声明的变量作用域为块级作用域
  1. const声明的变量是不允许改变(即只读,通常以大写字母命名)

二、箭头函数

举例:

const array=[1,2,3,4,5];
const odd=array.filter(arr => arr%2 ==0 )

像这样带有“=>”箭头的函数写代码的时候会经常接触到,这样的函数称为箭头函数,是ES6中新增的特性,可以使代码看上去更加简洁,但同时对于不了解这种写法的人来说就不是较容易理解了。若不使用这种带箭头的写法:

const array=[1,2,3,4,5];
const odd=array.filter(function(arr){arr => return arr%2 ==0; })

三、字符串拼接

字符拼接是我们经常使用到的,通常情况下,代码会这么写

let name='张三';
console.log(name+'你好!');

ES6语法中使用 ` ` 字符拼接:

let name='张三';
console.log(`${name}你好!`);

四、解构赋值

解构赋值主要用于数组和对象赋值

//对象解构赋值
let obj = {
 'name': 'admin',
 'age': 22
 };
let {name , age}=obj;//name='admin';age=22
//数组解构赋值
let [a , b , c]=[1, 2, 3];//a=1; b=2; c=3

对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量,如图,列举了些更详细的用法:

五、扩展运算符

扩展运算符就是三个点( ... ),这是ES6新增的语法,作用是将一个数组转成用逗号分隔的参数序列;ES8将这个运算符引入了对象:

六、异步编程

在实际编码过程中,经常会遇到JavaScript代码异步执行,怎样处理好异步编程带来的问题非常重要。

异步问题:回调地狱捕获异常

试想一个场景,我们需要在一个方法运行结束后再运行另一个方法,最常见的就是在调用方法的最后调用下一个方法,但这种情况一个方法里面调用另一个放,另一个方法中又再调用其它方法...,有很多这样的方法的话就会形成回调地狱。

在异步代码中捕获异常比较麻烦,可能需要手动配置捕获方式,但何时捕获是个问题,书写时会引起维护上的困难。

常用解决方案:

  • 1.callback

通过回调函数的方式处理异步,即将函数作为参数传入另一个函数中。

  • 2.Promise

Promise翻译为“承诺”,简单的思考为当一个异步代码执行后,我们不需管代码何时结束、出错,我只需按照它的承诺去处理就行。

Promise有四种状态fulfiled(成功)、rejected(失败)、pending(进行中),之后新增Settled(最终状态);resolve修改成功状态,reject修改失败状态,

Promise的整理如图:

  • 3.Generator

ES6新引入了Generator,generator是一个构造器,函数执行时不会执行函数体的内部而是返回一个构造器对象,通过next方法调用函数主体,遇到yield会暂停执行。

function* generatorTest() {
  console.log(yield '1')  //test1
  console.log(yield '2')  //test2
  console.log(yield '3')  //test3
}
const gen = generatorTest();
gen.next()
gen.next('test1')
gen.next('test2')
gen.next('test3')
  • 4.co

为解决Generator需手动执行next方法的问题,网上也有很多封装,最常见的就是co函数库,但不便的是使用时需额外引入一个模块。

  • 5.async/await

ES7提供了更加方便的asyc函数和await命令,async返回一个promise对象,await后面接受一个promise实例。

async/await实际上是对Generator的封装。

七、幂运算

ES7中引入了幂运算符**

console.log(3**2); // = 9
//等同于
Math.pow(3,2); // = 9

八、查询数组元素

ES7中添加了数组includes()方法,用来普安段数组中是否执行指定的值。

['a','b','c'].includes('a'); // ture
//等同于
['a','b','c'].indexOf('a')>=0; // ture

数组是日常中经常使用的,对于数组操作的Array方法有哪些呢,如图列举经常使用的方法:

九、String方式

十、基本数据值类型

ES语法总汇图:

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/688.html

分享给朋友:

“ES6、ES7、ES8、ES9、ES10常用语法总汇” 的相关文章

智能计费、综合管控,爱博精电帮您快速构建水电费预付费管理系统

近年来,随着企业经营管理意识的加强,商业建筑的物业管理部门对于水电费的收缴越来越重视,在实际运营中,因为服务、管理或其他方面的纠纷,商户拖欠电费的情况时有发生,管理部门为了消除收费难、垫付水电费过多、偷窃电等诸多难题,急需改变传统水电费收缴方式。但是常规的水电预付费改造面临着改造难度大、改造周期长、...

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理系统。由于其通用性、安全性、用户友好性和多样性,它的受欢迎程度超过了其他操作系统。在本文中,我们将从...

我的VIM配置

写一篇关于VIM配置的文章,记录下自己的VIM配置,力求简洁实用。VIM的配置保存在文件~/.vimrc中(Windows下是C:\Users\yourname \_vimrc)。VIM除了自身可配置项外,还可插件扩展。VIM的插件一般用vundle或vim-plug来管理,但我力求简单,不打算装太...

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

雅马哈TMAX 560 TECH MAX 外媒深度测评

应雅马哈(Yamaha)的邀请,在葡萄牙埃斯托里尔对全新的Yamaha TMAX 560 Tech Max踏板车进行了测试,在这里TMAX 560 Tech Max售价为11649英镑。雅马哈TMAX长期以来一直站在踏板车的顶端,就声誉和知名度而言,它是当之无愧的大踏板界NO.1。2020 TMAX...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出 JavaScript 中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可以像这样得到数组的长度:const arr = [1, 2, 3]; console.log(a...