1.变量声明const和let
在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:
functionaa(){if(bool){
var test ='hello man'}else{
console.log(test)
}}
以上的代码实际上是：
functionaa(){vartest// 变量提升if(bool) { test ='hello man'}else{//此处访问test 值为undefinedconsole.log(test) }//此处访问test 值为undefined}
所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？
1. 在一个函数内部
2. 在一个代码块内部
说白了 {}大括号内的代码块即为let 和 const的作用域。
看以下代码：
functionaa(){if(bool) {lettest ='hello man'}else{//test 在此处访问不到console.log(test) } }
let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
再来说说const
const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了。
constname ='lux'name ='joe'//再次赋值此时会报错
还有，如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行。
conststudent = { name:'cc'}// 没毛病student.name ='yy'// 如果这样子就会报错了student = { name:'yy'}
说一道面试题
varfuncs = []for(vari =0; i <10; i++) { funcs.push(function(){console.log(i) }) } funcs.forEach(function(func){func() })
这样的面试题是大家常见，很多同学一看就知道输出 10 十次
但是如果我们想依次输出0到9呢？
有两种解决方法。直接看一下代码。
// ES5告诉我们可以利用闭包解决这个问题varfuncs = []for(vari =0; i <10; i++) { funcs.push( (function(value){returnfunction(){console.log(value) } })(i) ) } funcs.forEach(function(func){func() })
// 再来看看es6怎么处理的
constfuncs = []for(let i =0; i <10; i++) { funcs.push(function(){console.log(i) }) } funcs.forEach(func => func())
达到相同的效果，es6简洁的解决方案是不是更让你心动！！！
2.模板字符串
es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//ES5 varname='lux'console.log('hello'+name)//es6const name='lux'console.log(`hello ${name}`)//hello lux
第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// ES5var msg ="Hi \
man!
"// ES6consttemplate=`
hello world
对于字符串ES6当然也提供了很多厉害也很有意思的方法说几个常用的。
// 1.includes：判断是否包含然后直接返回布尔值conststr='hahay'console.log(str.includes('y'))// true// 2.repeat: 获取字符串重复n次conststr='he'console.log(str.repeat(3))// 'hehehe'//如果你带入小数, Math.floor(num) 来处理// s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理// 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束conststr='hello world!'console.log(str.startsWith('hello'))// trueconsole.log(str.endsWith('!'))// true
3.函数
函数默认参数
在ES5我们给函数定义参数默认值是怎么样？
functionaction(num) {num=num||200 //当传入num时，num为传入的值 //当没传入参数时，num即有了默认值200returnnum}
但细心观察的同学们肯定会发现，num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
functionaction(num=200) {console.log(num) } action(0) // 0action() //200action(300) //300
箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数（Lambda表达式）。
箭头函数最直观的三个特点。
1. 不需要 function 关键字来创建函数
2. 省略 return 关键字
3. 继承当前上下文的 this 关键字
//例如：[1,2,3].map(x => x +1)//等同于：[1,2,3].map((function(x){returnx +1}).bind(this))
说个小细节。
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:
varpeople = name =>'hello'+ name//参数name就没有括号
作为参考
varpeople=(name, age)=>{constfullName ='hello'+ namereturnfullName }//如果缺少()或者{}就会报错
4 更多的数组和对象操作属性
比如assign
数组的include等
5.更方便的数据访问–解构
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5我们提取对象中的信息形式如下：
constpeople = { name:'lux', age:20}constname = people.nameconstage = 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 也是三个点儿...接下来就展示一下它的用途。
组装对象或者数组
//数组constcolor = ['red','yellow']constcolorful = [...color,'green','pink']console.log(colorful)//[red, yellow, green, pink]//对象constalp = {fist:'a',second:'b'}constalphabets = { ...alp,third:'c'}console.log(alphabets)//{"fist":"a","second":"b","third":"c"}
有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项
//数组constnumber = [1,2,3,4,5]const[first, ...rest] = numberconsole.log(rest)//2,3,4,5//对象constuser = {username:'lux',gender:'female',age:19,address:'peking'}const{ username, ...rest } = userconsole.log(rest)//{"address":"peking","age":19,"gender":"female"}
对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边
constfirst= {a:1, b:2, c:6, } constsecond= { c:3, d:4} const total = { ...first, ...second} console.log(total) // { a: 1, b: 2, c: 3, d: 4 }
7.import 和 export
import导入模块、export导出模块
//全部导入importpeople 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'// 导出默认, 有且只有一个默认exportdefaultApp// 部分导出exportclassAppextendComponent{};
以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：
当用export default people导出时，就用 import people 导入（不带大括号）
一个文件里，有且只能有一个export default。但可以有多个export。
当用export name 时，就用import { name }导入（记得带上大括号）
当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }
当一个文件里出现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(functionexecutor(resolve){console.log(2);for( vari=0;i<10000;i++ ){ i ==9999&& resolve(); }console.log(3); }).then(function(){console.log(4); });console.log(5);
10
11
12
13
Excuse me？这个前端面试在搞事！
当然以上promise的知识点，这个只是冰山一角。需要更多地去学习了解一下
