ES6常用语法

ES6常用语法let它的作用类似于var用来声明变量但是所声明的变量只在let命令所在的代码块内有效。if(true){ var a 1; let b 2; } console.log(a); console.log(b); // 报错ReferenceError: b is not definedlet与var一样是用来声明变量的与var的区别是let所声明的变量只在let所在的代码块内有效。块级作用域不会污染上层函数。constconst声明的是常量一旦声明值将是不可变的。const指令指向变量所在的地址所以对该变量进行属性设置是可行的未改变变量地址。// 数值 const str str1; console.log(str); // str1 str str2; console.log(str); // 报错 // 对象 const obj {id: id, name: name1}; console.log(obj); // {id: id, name: name1} obj.name name2; console.log(obj); // {id: id, name: name2}模板字符串表示为反引号 ,模板字符串支持在字符串中插入变量。let a 星期一; let b 晴; let c 今天是${a}, 天气${b}; console.log(c); // 进行计算 let num1 1; let num2 2; let sum ${num1} ${num2} ${num1 num2}; // 1 2 3 console.log(sum); // 运用函数 let value1 10; let value2 20; biggerNum ${value1} 和 ${value2} 中 较大的是 ${Math.max(value1, value2)}; // 运用三元表达式 biggerNum ${value1} 和 ${value2} 中 较大的是 ${value1 value2 ? value1 : value2}; console.log(biggerNum); // 课程中的例子 let weekWeather [] for (let i 0;i 7; i ) { let date new Date() weekWeather.push({ day: dayMap[date.getDay()], date: ${date.getFullYear()}-${date.getMonth()1}-${date.getDate()}, temp: ${result[i].minTemp}° - ${result[i].maxTemp}°, iconPath: /images/${result[i].weather}-icon.png }); }解构赋值解构赋值主要分为对象的解构和数组的解构let person {name:swr,age:28, opt1: 1, opt2: 2} // ES5 let name person.name let age person.age let opt1 person.opt1 let opt2 person.opt2 // ES6 let {name,age} person console.log(name) // swr console.log(age) // 28 // 课程中 // ES5 let user ctx.state.$wxInfo.userinfo.openId; let username ctx.state.$wxInfo.userinfo.nickName; let avatar ctx.state.$wxInfo.userinfo.avatarUrl; // ES6 let {user, username, avatar} ctx.state.$wxInfo.userinfo;箭头函数箭头函数是使用(){}语法的函数简写形式。ES6 允许使用“箭头”定义函数。var f v v; // 等同于 var f function (v) { return v; };如果箭头函数不需要参数或需要多个参数就使用一个圆括号代表参数部分。var f () 5; // 等同于 var f function () { return 5 }; var sum (num1, num2) num1 num2; // 等同于 var sum function(num1, num2) { return num1 num2; };如果箭头函数的代码块部分多于一条语句就要使用大括号将它们括起来并且使用return语句返回。var sum (num1, num2) { let c num1 - num2; return c; }由于大括号被解释为代码块所以如果箭头函数直接返回一个对象必须在对象外面加上括号否则会报错。// 报错 let getTempItem id { id: id, name: Temp }; // 不报错 let getTempItem id ({ id: id, name: Temp });下面是一种特殊情况虽然可以运行但会得到错误的结果。let foo () { a: 1 }; foo() // undefined上面代码中原始意图是返回一个对象{ a: 1 }但是由于引擎认为大括号是代码块所以执行了一行语句a: 1。这时a可以被解释为语句的标签因此实际执行的语句是1;然后函数就结束了没有返回值。如果箭头函数只有一行语句且不需要返回值可以采用下面的写法就不用写大括号了。let fn () void doesNotReturn();普通functionthis绑定使用时所在的对象箭头函数this绑定定义时所在的对象。Array.map(), Array.filter(), Array.sort()map: 对数组中的每个元素进行处理得到新的数组filter: 对数组中的每个元素使用指定的函数测试并创建一个包含所有通过测试的元素的新数组。sort: 对数组中的每个元素使用指定的排序函数返回正的表示后一个数字在前 并返回派完序的新数组。const weathers [{weather:snow,temp:-2,id:0},{weather:lightrain,temp:9,id:1},{weather:overcast,temp:7,id:2},{weather:overcast,temp:9,id:3},{weather:lightrain,temp:0,id:4},{weather:overcast,temp:6,id:5},{weather:snow,temp:-5,id:6},{weather:sunny,temp:17,id:7}]; console.log(weathers); // 每天的温度 let temps weathers.map((weather) { return weather.temp; }); console.log(temps); // 温度是正的对象 let filteredWeathers weathers.filter((weather) { return weather.temp 0; }); console.log(filteredWeathers); // 温度从高到底排序对象 let sortedWeathers weathers.sort((w1, w2) { return w1 - w2; }); console.log(sortedWeathers); // 温度从高到底排序的正的温度数组 let sortedFilteredTemps weathers.sort((w1, w2) { return w1 - w2; }).filter((weather) { return weather.temp 0; }).map((weather) { return weather.temp; }); console.log(sortedFilteredTemps);Object.keys(), Object.values(), Object.entries()/用于遍历对象。它们都返回一个遍历器可以用for...of循环进行遍历唯一的区别是keys()是对键名的遍历、values()是对键值的遍历entries()是对键值对的遍历。Object.keys()ES5 引入了Object.keys方法返回一个数组成员是参数对象自身的不含继承的所有可遍历 enumerable 属性的键名。var obj { foo: bar, baz: 42 }; Object.keys(obj) for (let k of Object.keys(obj)) { console.log(k); } // [foo, baz]Object.values()Object.values方法返回一个数组成员是参数对象自身的不含继承的所有可遍历 enumerable 属性的键值。var obj { foo: bar, baz: 42 }; Object.values(obj) for (let v of Object.values(obj)) { console.log(k); } // [bar, 42]Object.entries()Object.entries方法返回一个数组成员是参数对象自身的不含继承的所有可遍历 enumerable 属性的键值对数组。var obj { foo: bar, baz: 42 }; Object.entries(obj) for (let [k,v] of Object.values(obj)) { console.log(k); } // [ [foo, bar], [baz, 42] ]属性的简洁表示法ES6允许直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。function f( x, y ) { return { x, y }; } // 等同于 function f( x, y ) { return { x: x, y: y }; } // 课程中 login({ success, fail, complete }) { } // 等于 login({ success: success, fail: fail, complete: complete }) { }扩展运算符扩展运算符spread是三个点...。其作用是将一个数组/对象转为用逗号分隔的参数序列。合并数组//ES5 [1,2].concat(more); //ES6 [1,2,...more] var arr1 [a, b]; var arr2 [c]; var arr3 [d, e]; //ES5的合并数组 arr1.concat(arr2,arr3); // [ a, b, c, d, e ] //ES6的合并数组 [...arr1,...arr2,...arr3] // [ a, b, c, d, e ]合并对象a {id: 1, name: name1} b {age: 20} let ab {...a,...b}; console.log(ab); // {id: 1, name: name1, age: 20} 和 是数值相等而要求数值和类型都相等let a 1 let b 1 console.log(a b) // true console.log(a b) // false!!!表示取反所以!!表示取反后再取反。js数据类型字符串、数字、布尔、数组、对象、Null、Undefinedvar a; if(a ! null a ! undefined a ! ){ //a有内容才执行的代码 } if(!!a){ //a有内容才执行的代码... } // 课程中 trolley.js let isInstantBuy !!ctx.request.body.isInstantBuy // isInstantBuys是从前台传过来的如果用户没有传则为undefined,经过!!为false只有nullundefined字符串逻辑值可以使用而对象数组数字不可以使用console.log(null, !null) // true console.log(undefined, !undefined) // true console.log(, !) // true console.log(false, !false) // true console.log([], ![]) // false console.log({}, !{}) // false console.log(0, !0) // true console.log(1, !1) // falsefunction function()这是一种处理传递函数参数的常用方式首先判断是否传递了function如果没有传则function为undefined则逻辑值为false则不会执行后面的代码如果传了则function为function类型逻辑值为true则会执行 后面的代码function加括号就会执行函数。login({ success, fail, complete }) { qcloud.login({ success: result { if (result) { userInfo result success success(userInfo) } else { // 如果不是首次登录不会返回用户信息请求用户信息接口获取 this.getUserInfo({ success, fail, complete }) } }, fail: () { fail fail() }, complete: () { complete complete() } }) }