讲真,ECMAScript的ES6新特性汇总!!前端快来学习!!

之前看到同学写的前端代码,没看懂,经过我一番度娘,终于了解了ECMAScript的ES6新特性,接下来一起看看吧(后附思维导图)!

1 、ES6 新特性

现在使用主流的前端框架中,如ReactJS、Vue.js、angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性开始。

1.1、了解ES6

ES6,是ECMAScript 6的简称,它是 JavaScript 语言的下一代标准,己于 2015 年 6 月正式发 布。
它的目标是使 JavaScript语言可以用于编写复杂的大型应用程序,成为企业级开发语言。

1.1.1.什么是ECMAScript?

来看下前端的发展历程:
web1.0时代:
最初的网页以 HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务的到客户端单向流通。开发人员
也只关心页面的样式和内容即可。
web2.0时代:
1995 年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996 年,微软发布了JScript,其实是JavaScript的逆向工程实现。
1997 年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了
ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者,随后各大浏览器厂商纷纷实现了
ECMAScript 标准。
所以,ECMAScript是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript则是规范的具体实现。

1.2、let 和 const 命令

var
之前,我们写js定义变量的时候,只有一个关键字: var
var 有一个问题,就是定义的变量有时会莫名奇妙的成为全局变量。
例如这样的一段代码:
在这里插入图片描述
运行打印的结果是如下:
在这里插入图片描述这样,就把变量的 i的作用域控制在了循环内部
const

const 声明的变量是常量,不能被修改,类似于java中final关键字。
在这里插入图片描述

1.3、字符串扩展

在ES6中,为字符串扩展了几个新的API:
includes() :返回布尔值,表示是否找到了参数字符串。
startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部。
实验一下:
在这里插入图片描述
在两个 `之间的部分都会被作为字符串的值,可以任意换行。

1.3 、解构表达式

什么是解构? – ES6中允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构 (
Destructuring)。比如有一个数组:
在这里插入图片描述
在这里插入图片描述

1.3.2、对象解构

例如有个person对象:
在这里插入图片描述
在这里插入图片描述
如过想要用其它变量接收,需要额外指定别名:
在这里插入图片描述

{name:n} :name是person中的属性名,冒号后面的n是解构后要赋值给的变量。

1.4、函数优化

在ES6中,对函数的操作做了优化,使得我们在操作函数时更加的便捷。

1.4.1、函数参数默认值

在ES6以前,我们无法给一个函数参数设置默认值,只能采用变通写法:
在这里插入图片描述

1.4.2、箭头函数

ES6中定义函数的简写方式:
一个参数时:
在这里插入图片描述
代码不止一行,可以用 {} 括起来。
在这里插入图片描述

1.4.3、对象的函数属性简写

在这里插入图片描述

1.4.4、箭头函数结合解构表达式

在这里插入图片描述

1.5、map和reduce

ES6中,数组新增了map和reduce方法。
在这里插入图片描述

1.5.1、reduce

reduce() :接收一个函数(必须)和一个初始值(可选),该函数接收两个参数:

第一个参数是上一次 reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理,并把处理的结果作为下次reduce的第一个参数。如果是第一次,会把前两个元素作为计算参数,或者把用户指定的初始值作为起始参数
举例:
在这里插入图片描述

1.6 、扩展运算符

扩展运算符(spread)是三个点(…), 将一个数组转为用逗号分隔的参数序列 。
用法:

 console.log (...[1, 2, 3]); //1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
  function add(x, y) {
    return x + y;
 }
  var numbers = [1, 2];
  console.log(add(...numbers)); // 3
  // 数组合并
  let arr = [...[1,2,3],...[4,5,6]];
  console.log(arr); //[1, 2, 3, 4, 5, 6]
  // 与解构表达式结合
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest) //1  [2, 3, 4, 5]
  //将字符串转成数组
  console.log([...'hello']) //["h", "e", "l", "l", "o"]

1.7、Promise

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法
上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样
的方法进行处理。
我们可以通过Promise的构造函数来创建Promise对象,并在内部封装一个异步执行的结果。
语法:
在这里插入图片描述
示例:

const p = new Promise(function (resolve, reject) {
  // 这里我们用定时任务模拟异步
  setTimeout(() => {
    const num = Math.random();
    // 随机返回成功或失败
    if (num < 0.5) {
      resolve("成功!num:" + num)
   } else {
      reject("出错了!num:" + num)
   }
 }, 300)
})
// 调用promise
p.then(function (msg) {
  console.log(msg);
}).catch(function (msg) {
  console.log(msg);
})

在这里插入图片描述

1.8 、set和map

ES6提供了Set和Map的数据结构。
Set,本质与数组类似。不同在于Set中只能保存不同元素,如果元素相同会被忽略。和java中的Set集合非常相似。
构造函数:
在这里插入图片描述
map,本质是与Object类似的结构。不同在于,Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即:
object 是 <string,object>集合
map 是<object,object>集合
构造函数:在这里插入图片描述

1.9、class(类)的基本语法

JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念,通过class关键字自定义
类。
基本用法:
在这里插入图片描述
类的继承:在这里插入图片描述

1.10、Generator函数

Generator 函数是 ES6 提供的 一种异步编程解决方案,语法行为与传统函数完全不同 。
Generator函数有两个特征: 一是 function命令与函数名 之间有一个星号: 二是 函数体内部使用 yield吾句定义不同的
内部状态。
用法:
在这里插入图片描述
可以看到,通过hello()返回的h对象,每调用一次next()方法返回一个对象,该对象包含了value值和done状态。直到遇到return关键字或者函数执行完毕,这个时候返回的状态为ture,表示已经执行结束了。

1.11、for…of循环

通过for…of可以循环遍历Generator函数返回的迭代器。
用法:
在这里插入图片描述

1.12、修饰器(Decorator)

修饰器(Decorator)是一个函数, 用来修改类的行为。 ES2017 引入了这项功能, 目前 Babel 转码器己经支持。
使用:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

参考地址:https://blog.csdn.net/Marion158/article/details/99219058

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值