ES6常用的都在这里

114 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第8天,点击查看活动详情

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。

img

下面逐一为大家详解常用的ES6新特性:

let/const

let和const简而概括就是不一样的变量声明。

let

let表示声明局部变量,相较于之前的var声明,主要有以下几个区别: 1.不存在变量提升

image-20201231134555712.png 2.存在暂时性死区,预编译时不能被访问 3.不允许重复声明,同一作用域内只能声明一次

image-20201231133514401.png

4.存在块级作用域,,作用域之外不能访问里面声明的变量(块级作用域:只要存在花括号就是块级作用域)

image-20201231133200209.png

const

const声明常量,其使用规则除了声明之后不能修改之外,其他特性和let一样,另外const 在声明时必须被赋值。

image-20201231134005998.png

ES6字符串方法

includes()

判断字符串中,是否包含某个字符

image-20201231135026620.png

startsWith()

字符串是否以某个字符开头

image-20201231135254398.png

for of遍历

image-20201231135929528.png

注意:for of 不能遍历对象

字符串拼接模板

字符串使用反引号``,变量使用${}。

image-20201231140647369.png

注意:常规拼接不支持换行,ES6的拼接支持。

箭头函数(Arrow Functions)

ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体。

箭头函数最直观的三个特点:

  • 不需要 function 关键字来创建函数
  • 省略 return 关键字
  • 箭头函数中this没有明确指向,会向上一级(宿主对象)寻找

image-20201231141216642.png

  • 注意:

    当你的函数有且仅有一个参数的时候,是可以省略掉括号的。

    当你的没有参数的函数应该写成一对圆括号()。

    当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;

\

解构赋值

将值从数组或属性从对象提取到不同的变量中

image-20201231141512922.png

img

image-20201231141714037.png

img

还可以这么用:

image-20201231142007131.png

也可以获取系统自带属性的方法,如获取Math对象中的方法:

image-20201231142212221.png

Symbol类型

symbol类型是ES6中新增的原始数据类型,表示独一无二的值。

声明方法:let id = Symbol();

image-20201231142806308.png

注意点:

1、symbol值不能进行隐式转换,因此它与其他类型的值进行运算会报错。

2、symbol值可显示地转化成字符串

image-20201231143120329.png

3、可以转化成Boolen,但不能转成数值

image-20201231143128950.png

set对象

ES6提供了新的数据结构SetSet对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的(也就是可以去除重复值),因此我们可以利用这一唯一特性进行数组的去重工作。

\

image-20201231143525800.png

属性

setObj.size 返回Set对象的值的个数

方法

setObj.add(value) 在Set对象尾部添加一个元素。返回该Set对象。

setObj.clear() 移除Set对象内的所有元素。

setObj.delete(value) 移除Set的中与这个值相等的元素

setObj.has(value) 返回一个布尔值,表示该值在Set中存在与否。

setObj.forEach(v=>{console.log(v)}) 遍历,按照插入顺序,为Set对象中的每一个值调用一次callBackFn。

注意:在向set加入值时候,set不会转换数据类型。

Map集合,即映射

Map 是 ES6 中新增的数据结构,Map 类似于对象,但普通对象的 key 必须是字符串或者数字,而 Map 的 key 可以是任何数据类型。

值的储存、获取和遍历

image-20201231144538676.png

bind方法

函数.bind(新的this指向,实参1,实参2)

作用:

1 返回一个新的函数

2 改变新函数中this的指向,this指向bind的第一个参数 let fn1 = fn.bind(obj);

image-20201231144903023.png

图片.png

class的写法与继承

在ES6中新增加了类的概念,可以使用 class 关键字声明一个类,该关键字的出现使得其在对象写法上更加清晰,更像是一种面向对象的语言。不过,ES6的class不是新的对象继承模型,它只是原型链的语法糖表现形式。

constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法。

image-20201231145604179.png

extends 子类继承父类,拥有父类所有的属性和方法 声明B类,继承了A类,new B 同时就new A

image-20201231145706520.png

img