记录ES6++ 常用语法知识

226 阅读1分钟

记住这些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~~的旅行。