ES6 简单笔记1
https://www.youtube.com/watch?v=qjHNdaf3cpE&list=PLCRqr1mERvdJ0IZMD1U4oSB7k0gyAjyIx&index=2
- ES6是第6版,正式名称为ECMAScript 2015,于2015年6月完成。ES6为编写复杂的应用程序(包括类和模块)增加了重要的新语法,但在语义上与ECMAScript 5严格模式定义相同。浏览器对ES6的支持仍然不完整。然而,ES6代码可以转换为ES5代码,它在跨浏览器上具有更一致的支持。
- Typescript是Javascript的超集,可以编译成纯Javascript。它也是Angular 2使用的主要语言。
1. ES6 var let const 声明变量
2. ES6: let vs const 关键字
3.ES6 let 和 const的理解
4. ES6 Temporal Dead Zone (TDZ) 暂时性死区
5. Arrow Function 箭头函数的介绍
6. ES6 Arrow Function 箭头函数 ‘this’ 理解
7. ES6 字符串模板(Template String/ Literals)
8. ES6 Template String Example 字符串模板示例
9. ES6 Taggle Template Strings 标签模板字符串
10. Template String 中转义标签
11. ES6 Default Arguments 参数默认值
12. Arrow Function 指头函数不适用的场景
13. ES6 对象解构
15. ES6 数组解构
16. ES6 for of 简介
17. ES6 for of 使用示例
18. 来自和阵列的ES6阵列
19. ES6更多的Array方法使用
20. ES6 剩余参数
21. 扩展运算符
22. 扩展运算符练习
23. ES6 扩展运算符的例子
24. ES6扩展运算符在函数中的应用
25. ES6对象字面量的扩展
1. ES6 var let const 声明变量
var 在函数作用域中
let 和 const 的在块级作用域中
2. ES6: let vs const 关键字
var 可以重复定义(带来很大问题,不小心覆盖别人的变量)。
如果let或const在括号外面定义的名字,跟在括号里面定义的同名变量是两个不同的东西。
let可以重复赋值,const不可以。
如果const是对象,可以改变里面的属性,对象是引用类型。
const Jelly=Object.freeze(person);不可以对象改变属性值。
3.ES6 let 和 const的理解
声明变量是会被立即执行的,比如定义了name,那么可能覆盖window.name的值,所以我们使用立即执行函数里面,使得变量私有化。比如
(function(){ var name ="jelly"; })();
4. ES6 Temporal Dead Zone (TDZ) 暂时性死区
console.log(color); var color='yellow'; //会输出undefined //因为会变量提升,来不及赋值 var color; console.log(color); color='yellow'; //如果是let console.log(color); let color='yellow'; //报错,color is not defined,临时性死区
如何选择 var 、const、 let
默认选择const
变量需要重新绑定或更新使用 let
ES6中尽量不使用var
5. Arrow Function 箭头函数的介绍
1. 简明的语法
2. 可以隐式返回
3. 不绑定this
6. ES6 Arrow Function 箭头函数 ‘this’ 理解
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230225021925333-871972217.png)
js中的this值在运行中才绑定的
箭头函数没有自己的this值,他的this值继承父作用域的,被调用也不会被改变
7. ES6 字符串模板(Template String/ Literals)
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230225022558825-333489369.png)
大括号可以是变量,表达式或者函数
8. ES6 Template String Example 字符串模板示例
模板字符串可以嵌套
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230225235150100-926994444.png)
也可以返回,抽象出来,返回一个函数
9. ES6 Taggle Template Strings 标签模板字符串
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226000000987-1982298201.png)
10. Template String 中转义标签
过滤处理,净化
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226000828208-220559471.png)
过滤内容
11. ES6 Default Arguments 参数默认值
默认
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226001340956-2066486612.png)
使用es6
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226001413719-1937342008.png)
只给第一个和只给第二个
12. Arrow Function 指头函数不适用的场景
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226002302438-2128429489.png)
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226002615027-1960889875.png)
什么时候不要使用箭头函数:
1. 默认绑定的时候,方法的调用。
2.当你真的需要this值的时候,交互事件
3. 当你想在函数使用arguments对象的时候
13. ES6 对象解构
简单例子
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226003328667-2110677751.png)
嵌套
重命名father
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226003521132-1593832545.png)
如果没有设置默认值,have no sister
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230226003712271-2011684267.png)
例子:第三方库做法
15. ES6 数组解构
1.
2.
3. ...others只能在后面
4. 默认值
例子:交换变量
16. ES6 for of 简介
for of 可以遍历所有可以遍历的数据结构,数组,字符串等
foreach循环不可以中止或者跳过
for in 遍历对象中可枚举属性
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227231120960-1850012730.png)
17. ES6 for of 使用示例
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227231505061-1946354892.png)
2.计算
3. 字符串
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227231730676-569549028.png)
4. dom
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227231840204-1373484088.png)
18. 来自和阵列的ES6阵列
Array .from() and .of() 不是原型上的方法
要通过Array.form()调用,转换成真正的数组
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227234005442-484016184.png)
也可以改成这样
.of 出现是为了弥补构造函数上的不足
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227234417042-143155945.png)
19. ES6更多的Array方法使用
.find()
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230227235848070-1312102747.png)
.findIndex()
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228000004372-97965012.png)
满足就返回true,后面停止执行
.some()
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228000223820-1187732276.png)
所有满足才返回true,只有一个不会返回
..every()
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228000346101-325213645.png)
20. ES6 剩余参数
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228001841037-731452196.png)
例子:
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228001949218-1018056940.png)
21. 扩展运算符
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228003712552-2079215302.png)
例子:
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228004006710-1931499456.png)
这样赋值会被改变的
![](https://img2023.cnblogs.com/blog/2170636/202302/2170636-20230228004326859-298052345.png)
解决
22. 扩展运算符练习
![](https://img2023.cnblogs.com/blog/2170636/202303/2170636-20230302203235877-424800720.png)
23. ES6 扩展运算符的例子
应用到DOM元素上
![](https://img2023.cnblogs.com/blog/2170636/202303/2170636-20230302204402187-384525414.png)
24. ES6扩展运算符在函数中的应用
![](https://img2023.cnblogs.com/blog/2170636/202303/2170636-20230302204840373-412442010.png)
25. ES6对象字面量的扩展
![](https://img2023.cnblogs.com/blog/2170636/202303/2170636-20230302210759632-413047241.png)