ES6笔记

最新推荐文章于 2024-01-02 10:52:01 发布
最新推荐文章于 2024-01-02 10:52:01 发布
阅读量2.6k 收藏
点赞数
分类专栏： es6 文章标签： javascript 数据结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maryal/article/details/120207351
版权

ES6中可以利用rest参数的方式把对象转化成数组

// ES6引入 rest参数，用于获取函数的实参，用来代替 arguments/ / ES5 获取实参的方式
function date(){
console.log(arguments); }
 date( '白芷','阿娇','思慧');
// rest 参数
function date( ...args){
 console.log(args);// filter some every map// }
date('阿娇','柏芝','思慧'); //rest参数必须要放到参数最后

**『…』扩展运算符能将『数组』转换为逗号分隔的『参数序列』 **
在这里插入图片描述

symbol

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

Symbol特点

  1. Symbol 的值是唯一的，用来解决命名冲突的问题
  2. Symbol值不能与其他数据进行运算
    3)Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用
    Reflect.ownKeys来获取对象的所有键名

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作。

  1. ES6创造了一种新的遍历命令for…of循环，lterator接口主要供 for… fl哨消费2)原生具备iterator接口的数据(可用for of遍历)
    a)Array
    b)Argumentsc)Set
    d)Mape) Stringf)TypedArrayg)NodeList3)工作原理
    a)创建一个指针对象，指向当前数据结构的起始位置
    b)第一次调用对象的next方法，指针自动指向数据结构的第一个成员c)接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员

for in 前面的变量 表示的是键名

for of 前面的变量 表示的是键值
在这里插入图片描述在这里插入图片描述
生成器函数的声明和调用
在这里插入图片描述yield是函数代码的分隔符，可以把函数代码分成几块，三个yield可以把代码分成四块
在这里插入图片描述 在这里插入图片描述在这里插入图片描述

P22 22.尚硅谷_ES6-生成器函数实例

异步编程文件操作网络操作(ajax,request)数据库操作
1s后控制台输出111
2s后输出222
3s后输出333
回调地狱

setTimeout(() =>{
  console.log(111);
		setTimeout(() =>{
			console.log(222);
				setTimeout(() =>{
					console.log(333);
				}, 3000);
			}, 2000);
 },1000);

在这里插入图片描述在这里插入图片描述在这里插入图片描述

P23 23.尚硅谷_ES6-生成器函数实例-2

在这里插入图片描述在这里插入图片描述第二次调用，他的实参将作为第一个yield返回的结果

在这里插入图片描述

P24 24.尚硅谷_ES6-Promise介绍与基本使用

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

  1. Promise构造函数: Promise (excutor) {}
  2. Promise.prototype.then方法
  3. Promise.prototype.catch方法
    在这里插入图片描述

P25 25.尚硅谷_ES6-Promise封装读取文件

在这里插入图片描述在这里插入图片描述

P26 26.尚硅谷_ES6-Promise封装AJAX请求

P27 27.尚硅谷_ES6-Promise.prototype…then

在这里插入图片描述

P28 28.尚硅谷_ES6-Promise实践练习-多个文件内容读取

P29 29.尚硅谷_ES6-Promise对象catch方法

P30 30.尚硅谷_ES6-集合介绍与API Elements

在这里插入图片描述在这里插入图片描述
set可以自动去重，add可以添加 delete可以删除 has可以检测是否含有这个元素 有的话返回ture 没有的话返回false
clear（）可以清空

P31 31.尚硅谷_ES6-集合实践 top

1、数组去重

在这里插入图片描述2.交集

两种方式
在这里插入图片描述3.并集
在这里插入图片描述4.差集
和交集相反
在这里插入图片描述

P32 32.尚硅谷_ES6-Map的介绍与API在这里插入图片描述

P33 33.尚硅谷_ES6-class介绍与初体验

在这里插入图片描述
es5
在这里插入图片描述当我们使用new+类名的时候，就会自动执行实例对象上的construtor

在这里插入图片描述

P34 34.尚硅谷_ES6-class静态成员

实例对象和函数对象的属性不通

在这里插入图片描述

P35 35.尚硅谷_ES6-ES5构造函数继承在这里插入图片描述在这里插入图片描述

P36 36.尚硅谷_ES6-class的类继承在这里插入图片描述在这里插入图片描述在这里插入图片描述

P37 37.尚硅谷_ES6-子类对父类方法的重写

P38 38.尚硅谷_ES6-class中getter和setter. …在这里插入图片描述

set里面要传参数，在这里插入图片描述然后会触发这个方法
在这里插入图片描述在这里插入图片描述

P39 39.尚硅谷_ES6-ES6的数值扩展

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述正数返回1 负数返回-1 0返回0
在这里插入图片描述

P40 40.尚硅谷_ES6-ES6的对象方法扩展

object.is判断两个值是否完全相等，和全等又有一定的区别，NaN===NaN时，会返回false，但是用object.is就返回ture
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

P4141.尚硅谷_ES6-模块化介绍、优势以

在这里插入图片描述

P42 42.尚硅谷_ES6-浏览器使用ES6模块化引入模块在这里插入图片描述在这里插入图片描述

P4343.尚硅谷_ES6-ES6模块暴露数据语法汇总

分别暴露

在这里插入图片描述

统一暴露在这里插入图片描述默认暴露

在这里插入图片描述
在这里插入图片描述
输出结果
在这里插入图片描述

P44 44.尚硅谷_ES6-ES6引入模块数据语法汇总

1.通用的导入方式

在这里插入图片描述
2.解构赋值形式

在这里插入图片描述这里有来个school 会报错 这里可以用as+别名的形式

打印一下

在这里插入图片描述
在这里插入图片描述应对默认暴露

在这里插入图片描述这里不能直接用default 要用别名

3．简便形式 针对默认暴露

在这里插入图片描述

P4545.尚硅谷_ES6-浏览器使用ES6模块化方式二

第一种是直接写个标签，在标签里面写这个代码

在这里插入图片描述第二种方式是用标签引出一个src，类型是module

在这里插入图片描述

P46 46.尚硅谷_ES6-babel对ES6模块化代码转换在这里插入图片描述

P47 47.尚硅谷_ES6-ES6模块化引入NPM包

P48 48.尚硅谷_ES7-ES7新特性

在这里插入图片描述这个includes和之前学的indexOf的区别
indexOf 如果数组中不存在这个元素，返回的是-1，是数字

在这里插入图片描述2 的十次方可以用**来简化

P49 49.尚硅谷_ES8-async函数

在这里插入图片描述直接写return返回的也是一个promise对象
在这里插入图片描述
在这里插入图片描述

P50 50.尚硅谷_ES8-await表达式

在这里插入图片描述
await一般放置一个promise对象

在这里插入图片描述
在这里插入图片描述

P5151.尚硅谷_ES8-async与await结合读取文件内容在这里插入图片描述

P5252.尚硅谷_ES8-async与await结合发送Ajex请求

P53 53.尚硅谷_ES8-ES8对象方法扩展在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

P5454.尚硅谷_ES9-ES9扩展运算符与rest参数

在这里插入图片描述
host和post有分别对应的变量，而username，password等没有对应的变量，就会存到user这个变量当中
在这里插入图片描述
…（扩展运算符）的作用1在这里插入图片描述
…的作用2

在这里插入图片描述
在这里插入图片描述
把四个对象的属性放在了一个对象里面

P5555.尚硅谷_ES9-ES9正则扩展-命名捕获分组

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

P56 56.尚硅谷_ES9-ES9正则扩展-反向断言

正向断言
根据匹配后面的内容来判断前面的内容是否合法
在这里插入图片描述反向断言

在这里插入图片描述

P5757.尚硅谷_ES9-ES9正E则扩展-dotAll模式

dot本身有.的意思，. 指的是正则里面的元字符，代表着除换行符外的任意单个字符

P58 58.尚硅谷_ES10-对象扩展方法Object

P5959.尚硅谷_ES10-字符串方法扩展-trimStart-trimEnd

在这里插入图片描述

P60 60.尚硅谷_ES10-数组方法扩展-flat与fl…P6161.尚硅谷_ES10-Symbol.prototype.de…
P62 62.尚硅谷_ES11-私有属性
P63 63.尚硅谷_ES11-Promise.allSettled方法

P64 64.尚硅谷_ES11-String.prototype.matchAll方法

对于批量处理数据十分方便
在这里插入图片描述

在这里插入图片描述

P65 65.尚硅谷_ES11-可选链操作符

在这里插入图片描述

P66 66.尚硅谷_ES11-动态import

在这里插入图片描述
import函数返回的结果是个promise对象，promise对象成功的值就是这个模块中暴露出来的对象

打印module时
在这里插入图片描述

在这里插入图片描述

P6767.尚硅谷_ES11-Bigint类型

P68 68.尚硅谷_ES11-绝对全局对象globalT

mayellce
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 模块
glenshappy的专栏
08-13 353
概述 在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。 ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6 的模块化分为导出（export） @与导入（import）两个模块。 特点 ES6 的模块自动开启严格模式，不管你有没有在模块头部加上use strict;。 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。 ..
es6笔记es6笔记es6笔记
04-03
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新特性，其中面向对象编程的改进是其一大亮点。本文将深入探讨ES6中的面向对象编程，包括类和对象、类继承以及面向对象的实践案例。 1. ...
es6 模块
斗地主7891的专栏
09-05 311
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。 // ES6模块 import { stat, exists, readFile } from 'fs'; 上面代码的实质是从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，
ES6模块
weixin_42169395的博客
04-21 1907
ES6模块 如前面所述，CommonJS和AMD都是运行时加载。ES6在语言规格层面上实现了模块功能，是编译时加载，完全可以取代现有的CommonJS和AMD规范，可以成为浏览器和服务器通用的模块解决方案。这里关于ES6模块我们项目里使用非常多，所以详细讲解。 ES6模块使用——export （1）导出一个变量 export var name = 'pengpeng'; （2）导出一个函数 export function foo(x, y){} （3）常用导出方式（推荐） // person.js co
es6笔记补充es6笔记补充
04-03
本篇笔记将着重补充关于ES6的知识点，包括数据类型、高级特性以及变量、数据和内存管理。 一、JS 数据类型 在ES6之前，JavaScript有两大类数据类型：基本类型（Primitive Types）和引用类型（Reference Types）。...
ES6笔记笔记笔记笔记笔记
11-15
ES6笔记笔记笔记笔记笔记
ES6笔记.txt
07-29
整理了以下关于ES6的笔记，虽然内容不是很多，也不全，但是基本的入门算是够了
ES6笔记！HTML5！CSS3！
02-11
这篇笔记主要涵盖了前端开发中的三大核心技术：ES6（ECMAScript 6），HTML5和CSS3，这些都是现代前端开发的基础。下面将详细阐述这三个领域的关键知识点。 首先，ES6（ECMAScript 6），是JavaScript语言的一个重大...
ES6 模块（module）
强者惜字如金，弱者废话连篇！
12-02 255
ES6 模块（module） 1.html文件 <!-- html文件 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模块（module）</title&
必备技能二、es6
weixin_30497527的博客
08-28 133
一、ES6模块 ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。 ES6 的模块化分为导出（export） @与导入（import）两个模块。 特点 ES6 的模块自动开启严格模式，不管你有没有在模块头部加上use strict;。 模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。 每个模块都有自己的上下...
ES6 模块系统
qq_40479190的博客
10-27 405
在ES6之前，我们用自己的方式来在 JavaScript 中实现模块。很长一段时间以来，像 RequireJS、Angular 的依赖注入和 CommonJS 这样的系统，配合着一些有用的工具，比如 Browserify 和 Webpack，一直在解决我们的需求。然而，到了2015 年，一个标准的模块系统早就应该发布了。我们马上就会看到，你很快会注意到 ES6 模块受到了 CommonJS 的很大
ES6模块化
hbmern的博客
01-05 495
1、什么是模块化？ 模块化是指将一个大的程序文件，拆分成许多个小的文件，然后将小文件组合起来。 2、模块化的好处： （1）防止命名冲突 （2）代码复用 （3）高维护性 3、模块化语法： 模块功能主要有两个命令构成：export和import export命令用于规定模块的对外接口 import命令用于输入其他模块提供的功能 4、举例： 1、使用export命令导出模块： 方式一、(分别暴露) //m1.js export let name="hbm" //导出name变量 e
ES6 Module详解
最新发布
俊刚的博客
01-02 1481
ES6模块是一种用于组织和管理JavaScript代码的模块化系统。它通过import和export关键字提供了一种简洁、可靠和可维护的方式来导入和导出模块。ES6模块具有模块化组织代码、避免命名冲突、提高性能和支持异步加载等作用。它的原理是基于静态分析和编译时优化。ES6模块可以在浏览器环境和Node.js环境中使用，通过``标签或import和export关键字来加载和使用模块。
pink es6 笔记
07-27
- *1* *3* [es6笔记](https://blog.csdn.net/weixin_42235173/article/details/115300118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值