一.变量声明const和let
- 变量提升：在ES6之前，我们都是用
var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } } //等价于 function aa() { var test // 变量提升，函数最顶部 if(flag) { test = 'hello man' } else { //此处访问 test 值为 undefined console.log(test) } //此处访问 test 值为 undefined } //所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。
-
通常用
let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。即：在一个函数内部或者在一个代码块内部。说白了只要在{}花括号内的代码块即可以认为let和const的作用域。function aa() { if(flag) { let test = 'hello man' } else { //test 在此处访问不到 console.log(test) } //let
//作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。
//不能重复声明
//TDZ暂时性死区const声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。const name = 'aa'; name = 'bb' //再次赋值会报错 //如果const的是一个对象，对象不可变，但是对象所包含的值是可以被修改的 //就是对象所指的地址不能改变，变量成员可以修改
//常在引入模块时使用
const student = { name: 'cc' } // 没毛病 student.name = 'yy' //会报错 student = { name: 'yy' } -
TDZ暂时性死区，JS引擎扫描代码时，如果发现变量声明，用
var声明变量时会将声明提升到函数或全局作用域的顶部。但是let或者const，会将声明关进一个小黑屋也是TDZ(暂时性死区)，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。{ console.log(value) // 报错 let value = 'lala' }
-
应用
var funcs = [] for (var i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(function(func) { func() }) //会输出十次10 // ES5知识，我们可以利用“立即调用函数”解决这个问题 var funcs = [] for (var i = 0; i < 10; i++) { funcs.push( (function(value) { return function() { console.log(value) } })(i) ) } funcs.forEach(function(func) { func() }) // 再来看看es6怎么处理的 const funcs = [] for (let i = 0; i < 10; i++) { funcs.push(function() { console.log(i) }) } funcs.forEach(func => func())
二.字符串
- 模板字符串：第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//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>`
- 新增方法：
// 1.includes：判断是否包含然后直接返回布尔值 const str = 'hahay' console.log(str.includes('y')) // true // 2.repeat: 获取字符串重复n次 const str = 'he' console.log(str.repeat(3)) // 'hehehe' //如果你带入小数, Math.floor(num) 来处理 // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理 // 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束 const str = 'hello world!' console.log(str.startsWith('hello')) // true console.log(str.endsWith('!')) // true // 4. padStart 和 padEnd 填充字符串，应用场景：时分秒 setInterval(() => { const now = new Date() const hours = now.getHours().toString() const minutes = now.getMinutes().toString() const seconds = now.getSeconds().toString() console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`) }, 1000)
三.函数
- 函数默认参数设置：
//es5时 function action(num) { num = num || 200 //当传入num时，num为传入的值 //当没传入参数时，num即有了默认值200 return num } //但是，num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样 //ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。 function action(num = 200) { console.log(num) } action(0) // 0 action() //200 action(300) //300
- 箭头函数：不需要function关键字创建函数，省略return关键字，继承上下文的this关键字，this绑定的是所定义的作用域
//例如： [1,2,3].map(x => x + 1) //等同于： [1,2,3].map((function(x){ return x + 1 }).bind(this))
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；
var people = name => 'hello' + name //参数name就没有括号 //相对的 var people = (name, age) => { const fullName = 'hello' + name return fullName } //如果缺少()或者{}就会报错
例如：函数表达式：
//参数不传参 必须加括号 var fn2 =()=>2; //参数传一个 参数代替括号 var fn2 =a=>a+2; //参数传两个 必须加括号 var fn2 =（a,b）=>a+b; //返回对象时，返回处要加括号 var fn2 =（a,b）=>({num:a+b}); //返回值要加判断，大括号里加return var fn2 =（a,b）=>{ if(a>10){ a= 0} return a+b}; - 不可以当做new构造函数（区别于函数声明与函数表达式），不能使用argument对象。
- 因为不能使用arguments这个类数组，使用rest参数替代显示。
function fn（a,...arr）{//rest参数把剩下的实参放到数组中，此为真数组 console.log(arr.push) }
四.拓展的对象功能
- 对象初始化简写：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 objA = { name: 'cc', age: 18 } const objB = { address: 'beijing' } const objC = {} // 这个为目标对象 const obj = 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)
五.数据访问解构
数组和对象是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'
-
应用：
var body = request.body var username = body.username var password = body.password //重新解构 const { body, body: { username, password } } = request
六.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"}
- 获取数组或者对象除了前几项或者除了某几项的其他项（反写+rest）
//数组--rest必须放在最后 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 }
七.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
八.Promise
在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，扁平化的代码机构，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。-------用同步的方式去写异步代码
- 图片的加载写成Promise对象：
var preloadImage = function (path) { return new Promise(function (resolve, reject) { var image = new Image(); image.onload = resolve; image.onerror = reject; image.src = path; }); };
- 异步数据获取：
// 第一部分 数据获取和加工阶段 var getUserName = function(){ return new Promise(function(resolve,reject){ $.get('xxx.com/getUserName',function(data){ resolve(data); }); }; var getMobile = function(userName){ return new Promise(function(resolve,reject){ $.get('xxx.com/getUserMobile?user='+userName,function(data){ resolve(data); }); }); } // 第二部分 业务逻辑部分 getUserName().then(function(userName){ return getMobile(userName); }).then(function(mobile){}); } - 注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数
runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return runAsync3(); }) .then(function(data){ console.log(data); });
View Codefunction runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; }
- 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了，比如我们把上面的代码修改成这样：
runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return '直接返回数据'; //这里直接返回数据 }) .then(function(data){ console.log(data); }); //执行数据2的时候直接返回不再执行下去
- reject：前面的例子都是只有“执行成功”的回调，还没有“失败”的情况，reject的作用就是把Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
function getNumber(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的随机数 if(num<=5){ resolve(num); } else{ reject('数字太大了'); } }, 2000); }); return p; } getNumber() .then( function(data){ console.log('resolved'); console.log(data); }, function(reason, data){ console.log('rejected'); console.log(reason); } ); //getNumber函数用来异步获取一个数字，2秒后执行完成，如果数字小于等于5，我们认为是“成功”了，
//调用resolve修改Promise的状态。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。 - catch:其实它和then的第二个参数一样，用来指定reject的回调，效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
getNumber() .then(function(data){ console.log('resolved'); console.log(data); console.log(somedata); //此处的somedata未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); });
在resolve的回调中，我们console.log(somedata);而somedata这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了，这与我们的try/catch语句有相同的功能。
- all：romise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
Promise .all([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });
用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。
- race：all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：
Promise .race([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });
在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。于是再过1秒后，输出了他们结束的标志。使用场景还是很多的，比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，
View Code//请求某个图片资源 function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; } //延时函数，用于给请求计时 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('图片请求超时'); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });
requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。
九.Generators
生成器（ generator）是能返回一个迭代器的函数。生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。
Generators最主要的特点就是单线程执行，同步风格的代码编写，同时又允许你将代码的异步特性隐藏在程序的实现细节中。这使得我们可以用非常自然的方式来表达程序或代码的流程，而不用同时还要兼顾如何编写异步代码。
也就是说，通过generator函数，我们将程序具体的实现细节从异步代码中抽离出来（通过next(..)来遍历generator函数），从而很好地实现了功能和关注点的分离。
一个最简单的例子，generator函数内部不需要任何异步执行代码即可完成整个异步过程的调用。
假设你有下面这段代码：
function makeAjaxCall(url,cb) { // ajax请求 // 完成时调用cb(result) } makeAjaxCall( "http://some.url.1", function(result1){ var data = JSON.parse( result1 ); makeAjaxCall( "http://some.url.2/?id=" + data.id, function(result2){ var resp = JSON.parse( result2 ); console.log( "The value you asked for: " + resp.value ); }); } );
如果使用generator函数来实现上面代码的逻辑：
function request(url) { // 这里的异步调用被隐藏起来了， // 通过it.next(..)方法对generator函数进行迭代， // 从而实现了异步调用与main方法之间的分离 makeAjaxCall( url, function(response){ it.next( response ); } ); // 注意：这里没有return语句！ } function *main() { var result1 = yield request( "http://some.url.1" ); var data = JSON.parse( result1 ); var result2 = yield request( "http://some.url.2?id=" + data.id ); var resp = JSON.parse( result2 ); console.log( "The value you asked for: " + resp.value ); } var it = main(); it.next(); // 开始
方法request(..)是对makeAjaxCall(..)的封装，确保回调能够调用generator函数的next(..)方法。请注意request(..)方法中没有return语句（或者说返回了一个undefined值），后面我们会讲到为什么要这么做。
Main函数的第一行，由于request(..)方法没有任何返回值，所以这里的yield request(..)表达式不会接收任何值进行计算，仅仅暂停了main函数的运行，直到makeAjaxCall(..)在ajax的回调中执行it.next(..)方法，然后恢复main函数的运行。那这里yield表达式的结果到底是什么呢？我们将什么赋值给了变量result1？在Ajax的回调中，it.next(..)方法将Ajax请求的返回值传入，这个值会被yield表达式返回给变量result1！
是不是很酷！这里，result1 = yield request(..)事实上就是为了得到ajax的返回结果，只不过这种写法将回调隐藏起来了，我们完全不用担心，因为其中具体的执行步骤就是异步调用。通过yield表达式的暂停功能，我们将程序的异步调用隐藏起来，然后在另一个函数（ajax的回调）中恢复对generator函数的运行，整个过程使得我们的main函数的代码看起来就像是在同步执行一样。
原文：https://www.cnblogs.com/jaxu/p/6493291.html；
原文：https://www.cnblogs.com/lvdabao/p/es6-promise-1.html；
原文：https://www.jianshu.com/p/287e0bb867ae；
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
