前端
一点也不简单

vue全栈-所需es6知识点

es6简介

es6常用命令

👀函数的Rest参数和拓展

🤣Rest参数

<script>
        function sum (x,y,z) {
            let total = 0;
            if(x)total += x;
            if(y)total +=y;
            if(z)total +=z;
            console.log(`total:${total}`)
            return total;
        }

        sum(1,2,3)//6
        
        // Rest参数
        function sum2 (...m) {//Rest参数(不太确定的,动态的,不知道会传递多少个参数)
            let total = 0;
            for( let i of m){//for of
                total += i;
            }
            console.log(`total:${total}`)
        }

        sum2(4,8,3)//15

        let sum3 = (...m) => {
            let total = 0;
            for( let i of m){//for of
                total += i;
            }
            console.log(`total:${total}`)
        }

        sum3(3,3,3)//9
    </script>

🤣函数的扩展

<script>
        let [x,y] = [4,8]
        console.log(...[4,8])//4 8

        let arr1 = [1,3]
        let arr2 = [4,6]
        console.log(`concat:${arr1.concat(arr2)}`)//[1,3,4,6]
        // [...arr1,...arr2]

        //对数组的解构
        let [a,...b] = [1,2,3,4]  //a:1,b:[2,3,4]
        //对字符串的解构
        let [c,d,f] = "ES6"  //c:E,d:S,f:6

        let xy = [...'ES6']  //["E", "S", "6"]
    </script>

👀Promise使用

<script>
        let checkLogin = () => {
            return new Promise((resolve,reject)=>{
                let flag = document.cookie.indexOf("userId") > -1 ? true : false;
                if(flag=true){
                    resolve({
                        status:0,
                        result:true
                    })
                }else{
                    reject("error")
                }
            })
        }

        let getUserInfo = () => {
            return new Promise (( resolve,reject)=>{
                let userInfo = {
                    userId: '101',
                }
                resolve(userInfo)
            })
        }

        checkLogin().then((res)=>{
            if(res.status == 0){
                console.log('login success')
                return getUserInfo()
            }
        }).catch((err)=>{
            console.log(`err:${err}`)
        }).then((res2)=>{//链式调用
            console.log(`userId:${res2.userId}`)
        })

        Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2]) => {
            console.log(`res1:${res1.result},res2:${res2.userId}`)
        })

👀module.exports和ES6 import/export的使用

import和export

export let sum = (x,y) => {
    return x + y
}

export let minus = (m,n) => {
    return m - n
}
import { sum,minus } from './util'//两个是一样的效果
import * as util from './util'

console.log(`sum:${sum(1,3)}`)
console.log(`sum:${util.sum(1,3)}`)

import异步加载

import异步加载代码
import异步加载效果

AMD,CMD,CommonJs和ES6模块化对比

什么是AMD,CMD,CommonJS?

🤳AMD:(异步模块定义,特点:依赖前置)

requirejs模块化

🤳CMD:(同步模块,特点:即用即反)

commonjs模块化

🤳CommonJs(在node端(服务端)使用)

commonjs模块化

注意:服务端用CommonJs,浏览器端其他的随意

🤳ES6特性 export/import

es6特性模块化
赞(2) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » vue全栈-所需es6知识点

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏