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’ 理解

 

 

js中的this值在运行中才绑定的

箭头函数没有自己的this值，他的this值继承父作用域的，被调用也不会被改变

 

 

 

 

 

 

7. ES6 字符串模板(Template String/ Literals)

 

 

 大括号可以是变量，表达式或者函数

 

 

 

 

 

 

8. ES6 Template String Example 字符串模板示例

 

模板字符串可以嵌套

 

 

也可以返回，抽象出来，返回一个函数

 

 

 

 

 

9. ES6 Taggle Template Strings 标签模板字符串

 

 

 

 

 

 

 

 

10. Template String 中转义标签

 

过滤处理，净化

 

 

 

 

 

过滤内容

 

 

 

 

11. ES6  Default Arguments 参数默认值

 

默认

 

 

使用es6

 

 只给第一个和只给第二个

 

 

 

 

 

 

12. Arrow Function 指头函数不适用的场景

 

 

 

 

 

 

 

 

 什么时候不要使用箭头函数：

1. 默认绑定的时候，方法的调用。

2.当你真的需要this值的时候，交互事件

3. 当你想在函数使用arguments对象的时候

 

 

 

 

 13.  ES6 对象解构

 

 简单例子

 

 嵌套

 

 重命名father

 

 

 如果没有设置默认值，have no sister

 

 

 

 

例子：第三方库做法

 

 

 

 

 

15.   ES6 数组解构

1. 

 

 

 

 

2. 

 

 

3.   ...others只能在后面

 

 

4. 默认值

 

 

例子：交换变量

 

 

 

 

 16. ES6 for of 简介

 

for of 可以遍历所有可以遍历的数据结构，数组，字符串等

foreach循环不可以中止或者跳过

for in 遍历对象中可枚举属性

 

 

 

 

 

 

 

 

17.  ES6 for of 使用示例

 

 

 

 

 2.计算

 

 

3. 字符串

 

 4. dom

 

 

 

 

 

 

 

 

 

 

18. 来自和阵列的ES6阵列

 

Array  .from() and .of()  不是原型上的方法

要通过Array.form()调用，转换成真正的数组

 

 也可以改成这样

 

 

 

 

.of 出现是为了弥补构造函数上的不足

 

 

 

 

 

 

 

19. ES6更多的Array方法使用

 

 

.find() 

 

 

 

 

 

 

.findIndex() 

 

 

 

满足就返回true,后面停止执行

 

.some() 

 

 

 

 

 

 

所有满足才返回true,只有一个不会返回

 

..every()

 

 

 

 

 

 

 

20. ES6 剩余参数

 

 

 

例子：

 

 

 

 

21. 扩展运算符

 

 

 

 

例子：

 

 

这样赋值会被改变的

 

 解决

 

 

 

 

 

 

 22.  扩展运算符练习

 

 

 

 

 

 

23.  ES6 扩展运算符的例子

 

应用到DOM元素上

 

 

 

 

 

 

 

 

 

24. ES6扩展运算符在函数中的应用

 

 

 

 

 

25. ES6对象字面量的扩展