es6

1.变量声明const和let

在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

functionaa(){if(bool) {vartest ='hello man'}else{console.log(test)    }  }

以上的代码实际上是：

functionaa(){vartest// 变量提升if(bool) {        test ='hello man'}else{//此处访问test 值为undefinedconsole.log(test)    }//此处访问test 值为undefined}

所以不用关心bool是否为trueorfalse。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：

我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？

在一个函数内部

在一个代码块内部

说白了{}大括号内的代码块即为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(leti =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)//es6constname ='lux'console.log(`hello${name}`)//hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// ES5varmsg ="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很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

不需要function关键字来创建函数

省略return关键字

继承当前上下文的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    }//如果缺少()或者{}就会报错

要不整一道笔试题？哈哈哈哈哈哈哈哈。我不管我先上代码了

// 请使用ES6重构以下代码varcalculate =function(x, y, z){if(typeofx != number) { x =0}if(typeofy != number) { y =6}vardwt = x % yvarresultif(dwt == z) { result =true}if(dwt != z) { result =false}returnresult    }

constcalculate =(x, y, z) =>{      x =typeofx !=='number'?0: x      y =typeofy !=='number'?6: yreturnx % y === z    }

4.拓展的对象功能

对象初始化简写

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

functionpeople(name, age){return{name: name,age: age        };    }

键值对重名，ES6可以简写如下：

functionpeople(name, age){return{            name,            age        };    }

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

constpeople = {name:'lux',getName:function(){console.log(this.name)        }    }

ES6通过省略冒号与function关键字，将这个语法变得更简洁

constpeople = {name:'lux',        getName () {console.log(this.name)        }    }

ES6 对象提供了Object.assign()这个方法来实现浅复制。

Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

constobjA = {name:'cc',age:18}constobjB = {address:'beijing'}constobjC = {}// 这个为目标对象constobj =Object.assign(objC, objA, objB)// 我们将 objA objB objC obj 分别输出看看console.log(objA)// { name: 'cc', age: 18 }console.log(objB)// { address: 'beijing' }console.log(objC)// { name: 'cc', age: 18, address: 'beijing' }console.log(obj)// { name: 'cc', age: 18, address: 'beijing' }// 是的，目标对象ObjC的值被改变了。// so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}Object.assign({}, objC, objA, objB)

5.更方便的数据访问--解构

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下：

constpeople = {name:'lux',age:20}constname = people.nameconstage = people.ageconsole.log(name +' --- '+ age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，解构能让我们从对象或者数组里取出数据存为变量，例如

//对象constpeople = {name:'lux',age:20}const{ name, age } = peopleconsole.log(`${name}---${age}`)//数组constcolor = ['red','blue']const[first, second] = colorconsole.log(first)//'red'console.log(second)//'blue'

要不来点儿面试题，看看自己的掌握情况？

// 请使用 ES6 重构一下代码// 第一题varjsonParse =require('body-parser').jsonParse// 第二题varbody = request.bodyvarusername = body.usernamevarpassword = body.password

// 1.import{ jsonParse }from'body-parser'// 2. const{ body,body: { username, password } } = request

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}consttotal = { ...first, ...second }    console.log(total)// { a: 1, b: 2, c: 3, d: 4 }

7.import 和 export

import导入模块、export导出模块

//全部导入importpeoplefrom'./example'//有一种特殊情况，即允许你将整个模块当作单一对象进行导入//该模块的所有导出都会作为对象的属性存在import*asexamplefrom"./example.js"console.log(example.name)console.log(example.age)console.log(example.getName())//导入部分import{name, age}from'./example'// 导出默认, 有且只有一个默认exportdefaultApp// 部分导出exportclassAppextendComponent{};

以前有人问我，导入的时候有没有大括号的区别是什么。下面是我在工作中的总结：

1.当用exportdefaultpeople导出时，就用importpeople 导入（不带大括号）2.一个文件里，有且只能有一个exportdefault。但可以有多个export。3.当用exportname 时，就用import{ name }导入（记得带上大括号）4.当一个文件里，既有一个exportdefaultpeople, 又有多个exportname 或者exportage时，导入就用importpeople, { name, age }5.当一个文件里出现n多个export导出很多模块，导入时除了一个一个导入，也可以用import*asexample

8. Promise

在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

说白了就是用同步的方式去写异步代码。

发起异步请求

fetch('/api/todos')      .then(res=>res.json())      .then(data=>({ data }))      .catch(err=>({ err }));

今天看到一篇关于面试题的很有意思。

setTimeout(function(){console.log(1)    },0);newPromise(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);

Excuse me？这个前端面试在搞事！

当然以上promise的知识点，这个只是冰山一角。需要更多地去学习了解一下。

9.Generators

生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

这里生活中有一个比较形象的例子。咱们到银行办理业务时候都得向大厅的机器取一张排队号。你拿到你的排队号，机器并不会自动为你再出下一张票。也就是说取票机“暂停”住了，直到下一个人再次唤起才会继续吐票。

OK。说说迭代器。当你调用一个generator时，它将返回一个迭代器对象。这个迭代器对象拥有一个叫做next的方法来帮助你重启generator函数并得到下一个值。next方法不仅返回值，它返回的对象具有两个属性：done和value。value是你获得的值，done用来表明你的generator是否已经停止提供值。继续用刚刚取票的例子，每张排队号就是这里的value，打印票的纸是否用完就这是这里的done。

// 生成器function*createIterator(){yield1;yield2;yield3;    }// 生成器能像正规函数那样被调用，但会返回一个迭代器letiterator = createIterator();console.log(iterator.next().value);// 1console.log(iterator.next().value);// 2console.log(iterator.next().value);// 3

那生成器和迭代器又有什么用处呢？

围绕着生成器的许多兴奋点都与异步编程直接相关。异步调用对于我们来说是很困难的事，我们的函数并不会等待异步调用完再执行，你可能会想到用回调函数，（当然还有其他方案比如Promise比如Async/await）。

生成器可以让我们的代码进行等待。就不用嵌套的回调函数。使用generator可以确保当异步调用在我们的generator函数运行一下行代码之前完成时暂停函数的执行。

那么问题来了，咱们也不能手动一直调用next()方法，你需要一个能够调用生成器并启动迭代器的方法。就像这样子的

functionrun(taskDef){//taskDef即一个生成器函数// 创建迭代器，让它在别处可用lettask = taskDef();// 启动任务letresult = task.next();// 递归使用函数来保持对 next() 的调用functionstep(){// 如果还有更多要做的if(!result.done) {                result = task.next();                step();            }        }// 开始处理过程step();        }

生成器与迭代器最有趣、最令人激动的方面，或许就是可创建外观清晰的异步操作代码。你不必到处使用回调函数，而是可以建立貌似同步的代码，但实际上却使用 yield 来等待异步操作结束。

作者：陈嘻嘻啊

链接：https://www.jianshu.com/p/287e0bb867ae

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。