您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2020-12-17 10:28:13  来源:  作者:

学习了一段时间的前端知识,日常中会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、ES7、ES8、ES9、ES10常用语法总汇

ES语法之解构

五、扩展运算符

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

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

ES语法之扩展运算符

六、异步编程

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

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

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

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

常用解决方案:

  • 1.callback

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

  • 2.Promise

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

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

Promise的整理如图:

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

ES语法之异步编程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方法有哪些呢,如图列举经常使用的方法:

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

数组操作方法集


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

Array方法汇

九、String方式

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

String方法集合

十、基本数据值类型

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

ES语法之基本数据类型-值类型

ES语法总汇图:

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

ES6、ES7、ES8、ES9、ES10新增语法特性图



Tags:ES6   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
学习了一段时间的前端知识,日常中会copy些语法使用规则,对于这些语法虽会简单的使用,但并不咋了解,因此决定对这些进行了一番系统的学习:一.声明变量现在JavaScript有三种不同关...【详细内容】
2020-12-17  Tags: ES6  点击:(289)  评论:(0)  加入收藏
ES6是什么,为什么要学习它,不学习ES6会怎么样?答:ES6是新一代的JS语言标准,对分JS语言核心内容做了升级优化,规范了JS使用标准,新增了JS原生方法,使得JS使用更加规范,更加优雅,更适...【详细内容】
2020-09-16  Tags: ES6  点击:(70)  评论:(0)  加入收藏
vue3.0中把响应式改成了proxy替代了以前的Object.defineProperty的形式;vue3.0的包目录截图; 其中:compiler-core:编译器核心compiler-dom:针对浏览器的编译模块compiler-ssr:针对...【详细内容】
2020-07-05  Tags: ES6  点击:(114)  评论:(0)  加入收藏
根据EV Sales公布的数据显示,2020年5月,全球共售出14.5万辆新能源乘用车,相比4月11.03万辆的销量,环比上涨31.1%,比2019年同期下降19.3%,但下滑幅度有所收窄。2020年1-5月,全球新能...【详细内容】
2020-07-04  Tags: ES6  点击:(131)  评论:(0)  加入收藏
Array.from()1.复制数组,如果传的是数组,将把数组复制一份传给新数组。let arr = [1,2,3,4,5];let arr2 = Array.from(arr);console.log(arr) // [1,2,3,4,5]console.log(arr2...【详细内容】
2019-08-14  Tags: ES6  点击:(315)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条