ES6常用的都在这里

ES6常用的都在这里

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

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

img

let/const

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

let

let表示声明局部变量,相较于之前的var声明,主要有以下几个区别:

1.不存在变量提升
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdJBa150-1649222336388)(image-20201231134555712.png)]
2.存在暂时性死区,预编译时不能被访问

3.不允许重复声明,同一作用域内只能声明一次
请添加图片描述

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

const

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

ES6字符串方法

includes()

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

在这里插入图片描述

startsWith()

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

在这里插入图片描述

endsWith()

字符串是否以某个字符结束

在这里插入图片描述

for of遍历

在这里插入图片描述

注意:for of 不能遍历对象

字符串拼接模板

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

在这里插入图片描述

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

箭头函数(Arrow Functions)

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

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

  • 不需要 function 关键字来创建函数

  • 省略 return 关键字

  • 箭头函数中this没有明确指向,会向上一级(宿主对象)寻找

    在这里插入图片描述

    注意:

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

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

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

解构赋值

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

在这里插入图片描述

img

在这里插入图片描述

img

还可以这么用:

在这里插入图片描述

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

在这里插入图片描述

Symbol类型

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

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

在这里插入图片描述

注意点:

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

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

在这里插入图片描述

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

在这里插入图片描述

set对象

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

在这里插入图片描述

属性

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 可以是任何数据类型。

值的储存、获取和遍历

在这里插入图片描述

bind方法

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

作用:

1 返回一个新的函数

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

在这里插入图片描述

img

class的写法与继承

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

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

在这里插入图片描述

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

在这里插入图片描述
img

  • 获取千锋教育学习视频资料+源码笔记 ,进学习交流群

    请添加下方微信(备注CSDN推荐)
    请添加图片描述

  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值