ES6学习笔记(一)


概述

模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:

  1. 字符串中可以出现换行符;

  2. 可以使用 ${xxx} 形式引用变量

代码演示及相关说明:

应用场景

当遇到字符串与变量拼接的情况使用模板字符串

5 、简化对象和函数写法


概述

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁

代码示例及相关说明:

简化对象写法

6 、箭头函数


概述

ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义

箭头函数的注意点:

  1. 如果形参只有一个,则小括号可以省略;

  2. 函数体如果只有一条语句,则花括号可以省略,并省略return,函数的返回值为该条语句的执行结果;

  3. 箭头函数 this 指向声明时所在作用域下 this 的值;

  4. 箭头函数不能作为构造函数实例化;

  5. 不能使用 arguments;

特性

  1. 箭头函数的this是静态的始终指向函数声明时所在作用域下的this的值;
  1. 不能作为构造实例化对象;
  1. 不能使用 arguments 变量;

代码演示及相关说明

注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适;

箭头函数

需求-1:点击 div 2s 后颜色变成『粉色』

箭头函数的实践和应用场景

需求-2 从数组中返回偶数的元素:

箭头函数的实践和应用场景

场景

  1. 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调

  2. 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

7 、ES6中函数参数的默认值


概述

ES允许给函数的参数赋初始值;

代码示例及相关说明:

8、rest参数

概述:

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;

参考文章:https://www.jianshu.com/p/50bcb376a419

代码示例及相关说明:

函数参数默认值

</bod

8 、rest参数


概述

ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments

参考文章:https://www.jianshu.com/p/50bcb376a419

代码示例及相关说明:

rest参数

9 、扩展运算符


介绍:

... 扩展运算符

能将数组转换为逗号分隔的参数序列;

扩展运算符(spread)也是三个点(…)。它好比rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包

扩展运算符

应用

扩展运算符应用

10 、Symbol


概述

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的·第七种数据类型·,是一种类似于字符串的数据类型

参考文章:https://blog.csdn.net/fesfsefgs/article/details/108354248

特点

  1. Symbol 的值是唯一的,用来解决命名冲突的问题;

  2. Symbol 值不能与其他数据进行运算

  3. Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名;

基本使用:

symbol

Symbol创建对象属性

Symbol创建对象属性

Symbol内置值:

概述

除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方

法。可以称这些方法为魔术方法,因为它们会在特定的场景下自动执行;

方法:

Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值,表示该对象用于

Array.prototype.concat()时,是否可以展开。

Symbol.species 创建衍生对象时,会使用该属性

Symbol.match 当执行 str.match(myObject) 时,如果该属性存在,会调用它,返回该方法的返回值。

Symbol.replace 当该对象被 str.replace(myObject)方法调用时,会返回该方法的返回值。

Symbol.search 当该对象被 str. search (myObject)方法调用时,会返回该方法的返回值。

Symbol.split 当该对象被 str. split (myObject)方法调用时,会返回该方法的返回值。

Symbol.iterator 对象进行 for…of 循环时,会调用 Symbol.iterator 方法,返回该对象的默认遍历器

Symbol.toPrimitive 该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。

Symbol. toStringTag 在该对象上面调用 toString 方法时,返回该方法的返回值

Symbol. unscopables 该对象指定了使用 with 关键字时,哪些属性会被 with环境排除。

特别的: Symbol内置值的使用, 都是作为某个对象类型的属性去使用

演示:
Symbol内置属性

11 、迭代器


概述

遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作;

特性

ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for...of 消费

原生具备 iterator 接口的数据(可用 for of 遍历):

  1. Array;

  2. Arguments;

  3. Set;

  4. Map;

  5. String;

  6. TypedArray;

  7. NodeList;

工作原理

  1. 创建一个指针对象,指向当前数据结构的起始位置

  2. 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员

  3. 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员

  4. 每调用 next 方法返回一个包含 value 和 done 属性的对象

注:需要自定义遍历数据的时候,要想到迭代器;

代码示例及相关说明:

运行结果:

迭代器

迭代器自定义遍历对象:

代码实现:
迭代器自定义遍历数据

12 、生成器


概述

生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同

基本使用

生成器

生成器函数的参数传递

生成器函数的参数传递

生成器函数实例 1

生成器函数实例1

生成器函数实例 2

生成器函数实例2

13 、Promise


概述

Promise 是 ES6 引入的 ·异步编程的新解决方案 。语法上 Promise 是一个 构造函数 ,用来封装异步操作并可以获取其成功或失败的结果;

  1. Promise 构造函数: Promise (excutor) {};

  2. Promise.prototype.then 方法;

  3. Promise.prototype.catch 方法;

基本使用

Promise

Promise封装读取文件

Promise

Promise封装Ajax请求

原生请求
Promise封装Ajax请求
Promise封装Ajax请求

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)

最后

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里即可获取!!!


ead>

Promise

Promise封装Ajax请求

原生请求
Promise封装Ajax请求
Promise封装Ajax请求

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

[外链图片转存中…(img-RgnoiGhL-1711661476920)]

[外链图片转存中…(img-z3JEI1xR-1711661476921)]

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

[外链图片转存中…(img-zELxhvqI-1711661476921)]

由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)

最后

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里即可获取!!!

[外链图片转存中…(img-2bB7tdo1-1711661476921)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值