记住这些ES6+知识,在实际开发中基本OK了:
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments import export async/await
详细的解说,可以参考这个链接,哎哟不错!!segmentfault.com/a/119000000…
自己开发的实际应用:
(1)let, const:声明变量 有{} 和 let 就形成了一个块(独立),这样内部是独立的个体。
let name = 'out'
if (true) {
let name = 'inner'
console.log(name) // inner
}
console.log(name) // out 为什么开发中少用或者不用var?使用var不利的地方:
第一种场景就是内层变量覆盖外层变量。 第二种场景是循环变量泄露为全局变量。
(2)arrow functions 箭头函数:解决了this的指向问题,this指向箭头函数的上下文。
箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(3)template string: 模板字符串
${} 就这玩意完成看字符串的拼接、不多解释。
(4)destructuring:解构赋值,rest:运算符
解构赋值:
let obj = {name:'helo', age: 10}
let key = "keys"
let data = {
[key]:{...obj}
}
console.log(data) // {keys:{name: "helo", age: 10}}
console.log(data[key]) // {name: "helo", age: 10} rest运算符...
function rest(...data){
console.log(data)
}
rest('A', 'B', 'C') // ["A", "B", "C"]扩展运算符... 求数组最大值:
Math.max(...[1,2,3,45,6,6]) // 45 不解释来一个骚包的操作:数组一元化,数组去重,数组排序
[...new Set([[12,2],[10,2],[5,5]].flat())].sort((a,b) => {return a-b}) // [2, 5, 10, 12] (5)es6自己的module:import export 会这招就行了:
创建es6Test.js文件写入并导出文件
export const A = () => { console.log('a') }
export default function () { console.log('b') }
export function C () { console.log('c') } 创建.vue页面并引入
import * as from '@/comjs/es6Test' // import BDefault, {A, C as CC}from '@/comjs/es6Test'
console.log(A()) //a console.log(BDefault()) //b console.log(CC()) //c解释引入方式:
默认方式引入:BDefault、解构方式引入:{A}、解构方式引入并且替换变量名:{C as CC}、全局方式引入:*
当然为了减少文件体积最好局部引入:import {A} from '@/comjs/es6Test'在使用webpack打包的时候,加上Tree-shaking,意思就是摇树,打包前就会把没有用到的代码给摇掉。减少了代码体积。
(6)async/await 实际开发运用把异步操作为类似同步执行
async insertInsureInfo() {
let isCheckTrue = await this.fechSpecialCardValue()
}
fechSpecialCardValue() {
const url = ${xxx};
const specialObj = {};
return new Promise((resolve, reject) => {
wepy.request({
url: url,
data: specialObj,
method: 'POST',
success(res) {
if (res.statusCode === 200) {
resolve(true)
} else {
resolve(false)
}
}
});
})
} 运用目的就是:避免出现回调函数地狱:JS执行环境是“单线程”;使用回调函数来实现JS语言的异步编程;但如果出现多个回调函数嵌套;出现多重嵌套;代码很快就会乱成一团,这种情况就被称为“回调函数地狱” 。
详细学习参考:es6.ruanyifeng.com/#docs/async
总结 这些是开发的实际应用,都是简写。不会很详细说明。为了记录自己前端dog~~的旅行。