es6学习记录

目录

第1节 环境部署与课程介绍

第3节 数组方法( foreach )

第4节 数组方法( map)

第5.1节 数组方法( filter )

第5.2节 数组方法( find  findIndex)

第6节 数组方法( every some)

第7节 数组方法( reduce)

第8节  let  与 const

第9节  模板字符串

第10节  箭头函数

第11节  增强对象字面量

第12节  函数参数默认值

第13节  展开运算符... (spread operator 更快 更便捷的操作数组)

第14节  解构

第15节  面向对象(class)

第16节  generator 生成器

第17节  新的数据结构 map

第18节  新的数据结构 set

第19节  promise 构造函数 (一个牛逼闪电的东西)

第20节  fetch Apis

第21节  封装 fetch 库(增删改查)

第22节  比Promise 更新的方法:  async  await (属于es7)

第23节  async  await 封装 fetch

 

积累

第1记. Object.assign

第2记  let  const    (Object.freeze 对象冻结)

第3记  字符串扩展。(includes(), startsWith(), endsWith() 

------------------------------------------------------------------------------------------------------------------------------------------------

第1节 环境部署与课程介绍

1. es版本  (es6又名es2015)

 

2.

es6不能兼容所有的浏览器,谷歌浏览器几乎能兼容所有es6语法

es5能兼容几乎所有浏览器

es6需要借助 Babel 转化为 es5

 

3. 安装软件  visual studio code

安装 扩展

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第3节 数组方法( foreach )

1.数组方法

 

2. foreach

    

 

3. 练习:数组遍历, 并计算总和

   

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第4节 数组方法( map)

Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。

1.练习:将数组A的值 双倍 放入数组B

 

2. 练习:对象数组A,将A中对象某个属性值存储在数组B中

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第5.1节 数组方法( filter ), 过滤一个或多个条件

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第5.2节 数组方法( find  findIndex)

1. find 只查找第一个符合条件的值

 

 

2. findIndex 

findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第6节 数组方法( every some)

 

注册form非空验证

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第7节 数组方法( reduce)

1. reduce求和

2. 将数组中对象的某个属性抽离到另一个数组中

3. 判断字符中括号是否符合规范,是否对称

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第8节  let(变量)  与 const(常量)

1.let 在花括号内产生作用域

2.var 与 let 对比

3. const 一个数组常量,不能直接赋值改变常量, 可以通过对数组push等操作改变该常量

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第9节  模板字符串

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第10节  箭头函数

箭头函数解决的问题:1. 缩减代码   2.改变this指向

1. 箭头函数缩减代码

 

2. 箭头函数 改变 this指向

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第11节  增强对象字面量  (解决问题: 缩减代码, 简化属性 与 函数)

1. 属性key value相同, 可简写

2.:function可省去;inventoryValue(){} 等同于 inventoryValue:function(){}

增强对象字面量示例1:

增强对象字面量示例2:

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第12节  函数参数默认值 (优化代码)

1.

2. babel es6 转 es5 :

 

3. 函数默认参数 示例 3

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第13节  展开运算符 ...(spread operator 更快 更便捷的操作数组)

1. 展开运算符示例一

 

2. 展开运算符示例二(拼接数组)

3. 展开运算符示例三

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第14节  解构(数组与对象)( 更快 更便捷)

1.解构示例一

2.解构示例二

 

3.解构示例三

4.解构示例四

5.解构示例五

6.解构默认值

7.如果变量名与属性名不一致,必须写成下面这样。

8.对象的解构也可以指定默认值。

 

解构的用处:

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第15节 面向对象

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第16节  generator 生成器(可以返回多次的函数)

1.function* numbers(){}

2.The yield keyword is used to pause and resume a generator function (function* or legacy generator function).

 

3. gengrator 生成器(斐波那契数列)

 

4. 迭代器还原生成器结构

5. 生成器示例:

6.生成器模拟id自增

 

7. 迭代器iterator 模拟相亲网

 

8.生成器 generator 模拟相亲网

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第17节  新的数据结构 map

数据结构: map

键值对:与对象不同的是键和值可以是任何类型

1. entries() 从数组 fruit 创建一个可迭代对象, 该对象包含了数组的键值对

 

2. new Map( ) 对象保存键值对。任何值(对象和原始值)都可以用作键或值。

3.Array.from( ) 从一个类似数组或可迭代对象中创建一个新的数组实例

4. map.size()、  map.keys( )、 map.values( )、 map.set(key, value)  

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第18节  新的数据结构 set

数据结构:set

集合:可以存储任何数据类型,并且是唯一的(不重复的值)

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第19节  Promise 构造函数 (一个牛逼闪电的东西)

1.Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

   Promise 三种状态: pending(进行中)、fulfilled(已成功)和rejected(已失败)

2. resolved 用 then 进行回调, then可以多次调用

   rejected 用 catch 进行回调

 

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第20节  fetch Apis

new http: fetch(一个基于Promise的请求方法,更简单,更便捷)

1.fetch 请求数据

 

2. fetct 请求三种数据格式

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第21节  封装 fetch 库(增删改查)

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第22节  比Promise 更新的方法:  async  await (属于es7)

1. async 将函数作为一个 Promise 返回

 

2. 模拟 error

await : 等待resolve 执行完毕之后,才会执行

 

3. 有无await的对比

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第23节  async  await 封装 fetch

 

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第24节  es6-promise应用

1. setTimeout 异步示例

 

2. callback回调函数  实现 异步操作

 

3. Promise 实现 异步操作

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

积累

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

第1记  Object.assign

Object.assign是ES6新添加的接口,主要的用途是用来合并多个JavaScript的对象。

1. assign的基本用法如下:

var target = {a : 1}; //目标对象
var source1 = {b : 2}; //源对象1
var source2 = {c : 3}; //源对象2
var source3 = {c : 4}; //源对象3,和source2中的对象有同名属性c
Object.assign(target,source1,source2,source3);
//结果如下:
//{a:1,b:2,c:4}

 

2. assign的设计目的是用于合并接口的,所以它接收的第一个参数(目标)应该是对象,如果不是对象的话,它会在内部转换成对象 。

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

 

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

第2记  let  const    (Object.freeze)

 

1.let  const    (Object.freeze)

2.es6 声明变量的6种方法 (var  function  let const  import  class)

3.顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。

顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一。

ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

第3记  字符串扩展。(includes(), startsWith(), endsWith() 、repeat 、 padStart(),padEnd()

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值