ES6入门学习
2017-04-28 本文已影响12人
西兰花伟大炮
学到哪写到哪，就是不从let开始
ES6, 7知识点列表
- let, const
- 对象与数组解构
- Class继承的语法糖
- 模板字符串
- 箭头函数
- Set，Map数据结构
- Symbol数据类型
- 模块化import/export
- promise与async/await
- 同名对象字面了缩写
- for of循环迭代
（1）模板字符串
<body>
<div class="box"></div>
<script>
var name = "德玛西亚";
var str = `
<ul>
<li>${name}</li>
</ul>`;
var getbox = document.querySelector('.box');
getbox.innerHTML = str;
</script>
</body>
（是以tab键上那个键作为分隔）
向页面插入一个一个无序列表
- 德玛西亚
（2）清晰明白的字符串新增方法
es6字符串.PNG
startsWith() 是否以某个字符串开头
endsWith() 是否以某个字符串结尾
includes() 是否包含某个字符串
repeat( n ) 将字符串重复多少遍
都是见名知其意的函数
（3）Set
new一个Set赋值给变量，在圆括号传入数组，进行一些增删查操作，特点是会对传入的数组进行去重，元素是唯一的
set.PNG
（4）箭头函数
箭头函数与普通函数还有一个区别，那就是箭头函数中不能使用arguments
对象。可以使用 rest 参数和参数默认值
es6之前的function有一个特点：函数内部的上下文并不是由该函数写在那里决定的，而是由谁调用决定的，谁调用函数内部的this就指向谁。然后我们有些时候并不想让他这样，但又没办法，只能通过先保存this，或者call/apply，或者bind来调整上下文。箭头函数的出现解决了这个宁人苦恼的问题，因为箭头函数内的上线文(this)是由函数所处的对象来决定的，无论被哪个对象调用，上下文都不会改变
箭头函数的this指向
默认指向在定义它时,它所处的对象(宿主对象),而不是执行时的对象
箭头函数还可以简化return返回值
Array.from( [ ] , function(item){ return item });
（7）增强的对象字面量
对象中直接定义方法
var obj = {
printName(){
//code
}
}
obj.printName();
（8）let与const
- const声明的常量不得改变值，声明后必须立即初始化
- const的作用域与let相同，只在声明的块级作用域内有效
- let与const都没有变量提升，都不可以重复声明
（9）promise
image.png
image.png
（10）函数默认值
image.png
image.png
（11）可变参数
image.png
（12）Es6构造函数class
（13）如果是导出数组，引入要加{ 数组名 }
（14）
image.png
