1、ES6快速入门
let和const
let
ES6新增了let命令，用于声明变量。其用法相似var，可是声明的变量只在let命令所在的代码块内有效。react
View Code
效果以下：git
var声明变量存在变量提高。也就是在声明变量以前就可使用该变量。es6
View Code
刷新页面，粘贴代码，效果以下：github
而let不会这样，let声明的变量不能在声明以前使用。面试
刷新页面，粘贴代码，效果以下：ajax
好比：typescript
function foo(){
let x = 10;
var x = 20;
}
foo(); // 报错
刷新页面，粘贴代码，效果以下：
再好比：
View Code
刷新页面，粘贴代码，效果以下：
View Code
刷新页面，粘贴代码，效果以下：
View Code
刷新页面，粘贴代码，效果以下：
var声明的变量会污染全局，因此在for循环外部能够打印i的值。for循环中的i最好使用let声明
ES6中的let声明变量的方式实际上就为JavaScript新增了块级做用域。
View Code
刷新页面，粘贴代码，效果以下：
此时，在foo函数内容，外层代码块就再也不受内层代码块的影响。因此相似for循环的计数变量咱们最好都是用let来声明。
let声明可以将变量限制在当前的块级做用域中
const
const用来声明常量。const声明变量必须当即初始化，而且其值不能改变。
const声明常量的做用域与let相同，只在生命所在的块级做用于内有效
const PI = 3.14；
举例：
const 用来声明一个常量，不能修改
全局对象的属性：
ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。
查看下面的示例代码：
View Code
刷新页面，粘贴代码，效果以下：
变量的解构赋值
ES6容许按照必定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被成为解构赋值
View Code
刷新页面，粘贴代码，效果以下：
对象的解构赋值：
View Code
刷新页面，粘贴代码，效果以下：
var和function声明的变量，默认会在windows对象上
let声明的变量默认不会出如今windows对象上
举例：
window.name1输出undefined
函数
箭头函数
箭头函数特色：
1.若是参数只有一个，能够省略小括号
2.若是不写return，能够不屑大括号
3.没有arguments
4.不改变this指向
其中箭头函数中this指向被固定化，不是由于箭头函数内部有绑定this的机制。实际缘由是箭头函数根本没有本身的this，致使内部的this就是外层代码块的this
能够查看下面两段代码输出的区别：
View Code
刷新页面，粘贴代码，效果以下：
和
View Code
刷新页面，粘贴代码，效果以下：
但凡用到箭头函数，不要用this
对象
属性简洁表示法
ES6容许直接写入变量和函数做为对象的属性和方法。
View Code
上面的写法等同于：
View Code
对象的方法也可使用简洁表示法：
View Code
等同于：
View Code
刷新页面，粘贴代码，效果以下：
Object.assign()
Object.assign方法用来将源对象（source）的全部可枚举属性复制到目标对象（target）。它至少须要两个对象做为参数，第一个参数是目标对象，第二个参数是源对象。
参数必须都是对象，不然抛出TypeError错误。
Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。
简单示例：
View Code
刷新页面，粘贴代码，效果以下：
注意：
Object.assign方法的其余用处，可查看文末连接。
面向对象：类
View Code
刷新页面，效果以下：
ES6 使用Class构造对象的方式：
修改test.html，js代码以下：
View Code
刷新页面，效果以下：
2、Vue
一、vue的介绍
（1）前端三大框架
（能够去github查看三个框架的 star星）：
vue 尤雨溪，渐进式的JavaScript框架
react Facebook公司，里面的（高阶函数 es6）很是多，对初学者不友好
angular 谷歌公司，目前更新到6.0，学习angular得须要玩一下typescript
（2）cdn方式引用
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
（3）下载到本地引用
<script src='./vue.js'></script>
（4）库和框架
上面vue.js文件是一个库，小而精；
框架是功能比较齐全，像Django，大而全，功能比较多；
（5）实例化对象
示例代码：
View Code
注意：若是是咱们本身定义的属性和方法，则所有暴露在外面，若是是vue实例对象本身属性和方法，会在前边加一个”$”进行区分。另外，data中有一个观察者Observer，在观察着一些数据是否发生了改变，若改变，则将改变后的值立马渲染到DOM中对应的地方，控制台查看data效果以下图：
二、vue的模板语法
<div id="app">
<!--模板语法-->
<h2>{{ msg1 }}</h2>
<h3>{{ 'haha' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2?'真的':'假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>
</div>
三、vue的思想：
数据驱动视图，设计模式MVVM（model view viewmodel）
四、vue的基本指令
（使用指令系统后边必定是字符串，且字符串中的变量必定是数据属性中已有的变量）
（1）vue的指令系统之v-text和v-html（***），以下：
View Code
效果以下图：
（2）条件渲染v-if和v-show，以下：效果以下图：
<div class="box1" v-show="isShow">hello</div> <div class="box2" v-if="isShow">hello</div>
分析：isShow为真则显示div，为假则不显示；
区别：v-show为假时至关于display:none；v-if为假时至关于移除该div，可是有一个占位的注释”<!-- -->”；
官网对v-if和v-show的区别：
1）v-if 是“真正”的条件渲染，由于它会确保在切换过程当中条件块内的事件监听器和子组件适当地被销毁和重建。
2）v-if 也是惰性的：若是在初始渲染时条件为假，则什么也不作——直到条件第一次变为真时，才会开始渲染条件块。
3）相比之下，v-show 就简单得多——无论初始条件是什么，元素老是会被渲染，而且只是简单地基于 CSS 进行切换。
4）通常来讲，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。所以，若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不多改变，则使用 v-if 较好。
v-if与v-else：可使用 v-else 指令来表示 v-if 的“else 块”：
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> // 注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，不然它将不会被识别。
（3）v-bind和v-on
v-bind：标签中全部属性，如img标签的src alt，a标签的href title id class等，以下：
<img v-bind:src="imgSrc" v-bind:alt="msg">
v-bind:class='{active:isActive}'表示若isActive（数据属性中定义的变量）为真，则对应div增长active类，不然不增长，以下：
<div class="box" v-bind:class='{active:isActive}'></div>
v-on：监听js中的全部事件，如click，mouseover，mouseout等，以下：
<button v-on:click="clickHandler">切换颜色</button>
v-bind的简便写法是":"，如：<div class="box" :class='{active:isActive}'></div>
v-on的简便写法是"@"，如：<button @click="clickHandler">切换颜色</button>
（4）列表渲染v-for（不只能够遍历数组，还能够遍历对象），以下：
View Code
总结：遍历数组时，一个参数是值，两个参数是（值，索引）；遍历对象时，一个参数是值，两个参数是（值，键）。
注意：必定要绑定一个标识（有id就绑定id，没有id绑定index），则值改变会直接经过key查找，而不用再去遍历查找，提高效率。
三、Vue应用示例
一、实现轮播图，代码以下：
View Code
二、Vue中使用ajax（created是组件建立完成时执行），代码以下：
View Code
页面运行效果以下图：
依次点击每一项，控制台效果以下图：
三、实现音乐播放器，代码以下：
View Code
四、Vue基础知识
一、计算属性（主要产生缓存的数据属性，防止DOM性能消耗）
模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板再也不是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message 的翻转字符串。当你想要在模板中屡次引用此处的翻转字符串时，就会更加难以处理。因此，对于任何复杂逻辑，你都应当使用计算属性。例如：
View Code
二、侦听器（watch）
虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。
watch能够监听单个属性，若是想监听多个属性，则声明多个属性的监听，以下：
View Code
注意：计算属性便可以监听单个属性，又能够监听多个属性，以下示例：
View Code
三、计算属性的应用（上例中音乐播放器改成计算属性实现）
修改audio标签的src属性值，以下：
computed:{
currentSong(){
// 既监听了musicList，又监听了currentIndex
return this.musicList[this.currentIndex].songSrc
}
}
总结：计算属性的方法便可以在模板语法中使用，又能够在指令系统中使用。
四、关于函数中this指向的问题
Vue实例对象中，通常methods和computed中定义的函数中的this是指当前Vue实例对象，而created中的ajax和定时器中定义的函数中的this是指ajax或者定时器对象，这时，ajax和定时器中的函数改成箭头函数，就能够改变this的指向，即this指向当前Vue实例对象。
5、补充知识点
一、查看接口，以下图：
二、json在线格式化工具：
三、本身查阅资料了解js中闭包。
es6快速入门
上次分享了es6开发环境的搭建，本次接着分享es6经常使用的特性。
1.变量声明let和const
咱们都是知道在ES6之前，var关键字声明变量。不管声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局做用域的最顶部)。这就是函数变量提高例如:
function aa() {
if(bool) {
var test = 'hello man'
} else {
console.log(test)
}
}
以上的代码其实是：
function aa() {
var test // 变量提高
if(bool) {
test = 'hello man'
} else {
//此处访问test 值为undefined
console.log(test)
}
//此处访问test 值为undefined
}
因此不用关心bool是否为true or false。实际上，不管如何test都会被建立声明。
接下来ES6主角登场：
咱们一般用let和const来声明，let表示变量、const表示常量。let和const都是块级做用域。怎么理解这个块级做用域？
- 在一个函数内部
- 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的做用域。
看如下代码：
function aa() {
if(bool) {
let test = 'hello man'
} else {
//test 在此处访问不到
console.log(test)
}
}
let的做用域是在它所在当前代码块，但不会被提高到当前函数的最顶部。
再来讲说const。
const name = 'lux'
name = 'joe' //再次赋值此时会报错
说一道面试题
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
})
这样的面试题是你们常见，不少同窗一看就知道输出 10 十次
可是若是咱们想依次输出0到9呢？两种解决方法。直接上代码。
// ES5告诉咱们能够利用闭包解决这个问题
var funcs = []
for (var i = 0; i < 10; i++) {
func.push((function(value) {
return function() {
console.log(value)
}
}(i)))
}
// es6
for (let i = 0; i < 10; i++) {
func.push(function() {
console.log(i)
})
}
达到相同的效果，es6简洁的解决方案是否是更让你心动！！！
2.模板字符串
es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5
var name = 'lux'
console.log('hello' + name)
//es6
const name = 'lux'
console.log(`hello ${name}`) //hello lux
第二个用途，在ES5时咱们经过反斜杠(\)来作多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5
var msg = "Hi \
man!
"
// es6
const template = `<div>
<span>hello world</span>
</div>`
对于字符串es6固然也提供了不少厉害的方法。说几个经常使用的。
// 1.includes：判断是否包含而后直接返回布尔值
let str = 'hahay'
console.log(str.includes('y')) // true
// 2.repeat: 获取字符串重复n次
let s = 'he'
console.log(s.repeat(3)) // 'hehehe'
//若是你带入小数, Math.floor(num) 来处理
3.函数
函数默认参数
在ES5咱们给函数定义参数默认值是怎么样？
function action(num) {
num = num || 200
//当传入num时，num为传入的值
//当没传入参数时，num即有了默认值200
return num
}
但细心观察的同窗们确定会发现，num传入为0的时候就是false， 此时num = 200 与咱们的实际要的效果明显不同
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
箭头函数
ES6颇有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特色。
- 不须要function关键字来建立函数
- 省略return关键字
- 继承当前上下文的 this 关键字
//例如：
[1,2,3].map( x => x + 1 )
//等同于：
[1,2,3].map((function(x){
return x + 1
}).bind(this))
说个小细节。
当你的函数有且仅有一个参数的时候，是能够省略掉括号的。当你函数返回有且仅有一个表达式的时候能够省略{}；例如:
var people = name => 'hello' + name
//参数name就没有括号
做为参考
var people = (name, age) => {
const fullName = 'h' + name
return fullName
}
//若是缺乏()或者{}就会报错
4.拓展的对象功能
对象初始化简写
ES5咱们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：
function people(name, age) {
return {
name: name,
age: age
};
}
键值对重名，ES6能够简写以下：
function people(name, age) {
return {
name,
age
};
}
ES6 一样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：
const people = {
name: 'lux',
getName: function() {
console.log(this.name)
}
}
ES6经过省略冒号与 function 关键字，将这个语法变得更简洁
const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()能够把任意多个源对象自身可枚举的属性拷贝给目标对象，而后返回目标对象。第一参数即为目标对象。在实际项目中，咱们为了避免改变源对象。通常会把目标对象传为{}
const obj = Object.assign({}, objA, objB)
5.更方便的数据访问--解构
数组和对象是JS中最经常使用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5咱们提取对象中的信息形式以下：
const people = {
name: 'lux',
age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
是否是以为很熟悉，没错，在ES6以前咱们就是这样获取对象信息的，一个一个获取。如今，解构能让咱们从对象或者数组里取出数据存为变量，例如
//对象
const people = {
name: 'lux',
age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'
6.Spread Operator 展开运算符
ES6中另一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展现一下它的用途。
组装对象或者数组
//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}
const alphabets = { ...alp, third: 'c' }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}
有时候咱们想获取数组或者对象除了前几项或者除了某几项的其余项
const number = [1,2,3,4,5]
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//对象
const user = {
username: 'lux',
gender: 'female',
age: 19,
address: 'peking'
}
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}
对于 Object 而言，还能够用于组合成新的 Object 。(ES2017 stage-2 proposal) 固然若是有重复的属性名，右边覆盖左边
const first = {
a: 1,
b: 2,
c: 6,
}
const second = {
c: 3,
d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
7.import 和 export
import导入模块、export导出模块
//所有导入
import people from './example'
//有一种特殊状况，即容许你将整个模块看成单一对象进行导入
//该模块的全部导出都会做为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())
//导入部分
import {name, age} from './example'
// 导出默认, 有且只有一个默认
export default App
// 部分导出
export class App extend Component {};
之前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工做中的总结：
1.当用export default people导出时，就用 import people 导入（不带大括号）
2.一个文件里，有且只能有一个export default。但能够有多个export。
3.当用export name 时，就用import { name }导入（记得带上大括号）
4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
5.当一个文件里出现n多个 export 导出不少模块，导入时除了一个一个导入，也能够用import * as example
8. Promise
在promise以前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。经过Promise机制，扁平化的代码机构，大大提升了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的下降了代码耦合性而提升了程序的可扩展性。
说白了就是用同步的方式去写异步代码。
发起异步请求
fetch('/api/todos')
.then(res => res.json())
.then(data => ({ data }))
.catch(err => ({ err }));
今天看到一篇关于面试题的颇有意思。
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
固然以上promise的知识点，这个只是冰山一角。须要更多地去学习应用。
9.Generators
生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可使用yield关键字,有意思的是函数会在每一个yield后暂停。
这里生活中有一个比较形象的例子。我们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一我的再次唤起才会继续吐票。
OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫作next的方法来帮助你重启generator函数并获得下一个值。next方法不只返回值，它返回的对象具备两个属性：done和value。value是你得到的值，done用来代表你的generator是否已经中止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。
// 生成器
function *createIterator() {
yield 1;
yield 2;
yield 3;
}
// 生成器能像正规函数那样被调用，但会返回一个迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
那生成器和迭代器又有什么用处呢？
围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于咱们来讲是很困难的事，咱们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（固然还有其余方案好比Promise好比Async/await）。
生成器可让咱们的代码进行等待。就不用嵌套的回调函数。使用generator能够确保当异步调用在咱们的generator函数运行一下行代码以前完成时暂停函数的执行。
那么问题来了，我们也不能手动一直调用next()方法，你须要一个可以调用生成器并启动迭代器的方法。就像这样子的
function run(taskDef) { //taskDef即一个生成器函数
// 建立迭代器，让它在别处可用
let task = taskDef();
// 启动任务
let result = task.next();
// 递归使用函数来保持对 next() 的调用
function step() {
// 若是还有更多要作的
if (!result.done) {
result = task.next();
step();
}
}
// 开始处理过程
step();
}
生成器与迭代器最有趣、最使人激动的方面，或许就是可建立外观清晰的异步操做代码。你没必要处处使用回调函数，而是能够创建貌似同步的代码，但实际上却使用 yield 来等待异步操做结束。
总结
ES6的特性远不止于此，但对于咱们平常的开发开说。这已是够够的了。还有不少有意思的方法。好比findIndex...等等。包括用set来完成面试题常客数组去重问题。我和个人小伙伴们都惊呆了!