JS语法---异常、模块化、解构、Promise(异步请求)

冷不防 2023-08-17 17:39 85阅读 0赞

**异常**

**抛出异常**

**![1348316-20190814165940840-255894493.png][]**

![1348316-20190814170636466-807522722.png][]

![1348316-20190814170656861-2008153228.png][]

//捕获异常
    try{
        // throw new Error('new error');
        // throw new ReferenceError('new error');
        // throw new 1; 
        //下面类型不报错，正常抛出
        // throw new Number(100);
        // throw 'not ok';
        // throw [1,2,3];
        // throw {'a':1};
        throw () => {};
    }catch(error){
        console.log(error)
        console.log(error.constructor.name);
    }finally{
        console.log('===end===')
    }

**模块化**

**![1348316-20190814170739473-1870589014.png][]**

![1348316-20190814170806890-405930767.png][]

![1348316-20190814170821163-1754848357.png][]

![1348316-20190814170844154-1270276200.png][]

![1348316-20190814170857680-1228716954.png][]

![1348316-20190814170924723-123563602.png][]

**ES6模块化**

![1348316-20190814171702270-306685505.png][]

**导出**

![1348316-20190816141318360-142610529.png][]

//缺省导出
    export default class A{
        constructor(x){
            this.x = x;
        }
        show(){
            console.log(this.x);
        }
    }
    
    //导出函数
    export function foo(){
        console.log('foo function');
    }
    
    //导出常量
    export const CONSTA = 'AAA';

**导入**

**![1348316-20190816141342216-1839510580.png][]**

import {A,foo} from ".src/moda"
    import * as mod_a from "/src/moda"

![1348316-20190816141402218-2008326780.png][]

**转译工具**

![1348316-20190816141443508-351746425.png][]

**babel**

![1348316-20190816141508438-1264687485.png][]

![1348316-20190816141516505-707198364.png][]

function * counter(){
        let i=0;
          while (true){
              yield (++i);  
      }
    }
    g = counter();
    console.log(g.next().value);

**预设**

**![1348316-20190816141930413-1163542059.png][]**

![1348316-20190816142342798-557107313.png][]

**离线转译安装配置(\*)**

**1.初始化npm**

**![1348316-20190816145844921-1742633364.png][]**

![1348316-20190816145914425-2043689245.png][]

![1348316-20190816145929468-27281753.png][]

**2.设置镜像**

![1348316-20190816145953495-283415132.png][]

![1348316-20190816150027860-795550448.png][]

![1348316-20190816150042582-1978037.png][]

**3.安装**

![1348316-20190816150100881-1876129131.png][]

![1348316-20190816150119793-1561201041.png][]

**4.修改package.json**

![1348316-20190816150154433-1041417989.png][]

![1348316-20190816150229175-905709136.png][]

![1348316-20190816150243054-339904605.png][]

**5.准备目录**

![1348316-20190816150304550-1614334036.png][]

**6.配置babel和安装依赖**

![1348316-20190816150351632-1177912280.png][]

![1348316-20190816150409840-958209313.png][]

![1348316-20190816150429886-574273.png][]

![1348316-20190816145834702-1173187661.png][]

**7.准备js文件**

![1348316-20190816150505042-834923564.png][]

//######moda.js######
    //缺省导出
    export default function a(){
        console.log("moda.a()");
    }
    
    //导出函数
    export function b(){
        console.log('moda.b()');
    }
    
    //导出常量
    export let c = '100';
    export var d = 220;
    export const e = 300;

![1348316-20190816150605939-1587667081.png][]

//###index.js####
    // import a from "./moda";
    import {b,c,d,e} from "./moda";
    
    // a();
    b();
    console.log(c,d,e);

![1348316-20190816150641140-871588189.png][]

![1348316-20190816144917729-1759391798.png][]

![1348316-20190816150709319-2147058160.png][]

![1348316-20190816150716897-1233681497.png][]

**导入导出**

**![1348316-20190816150750711-1492484486.png][]**

**缺省导入导出**

![1348316-20190816150813179-614675716.png][]

//缺省导出
    export default function(){
        console.log("default export function")
    }
    
    //缺省导出，命名函数
    export default function xyz(){
        console.log('default export function')
    }

//缺省导入
    import defaultFunc from './moda'
    defaultFunc();

![1348316-20190816151333730-55759204.png][]

**命名导入导出**

//命名导出函数
    export function foo(){
        console.log('regular foo()')
    }
    
    //函数定义
    function bar(){
        console.log('regular bar()')
    }
    
    //变量常量定义
    let x = 100;
    var y = 200;
    const z = 300;
    
    //导出
    export {bar,x,y,z};

//导入：as 设置别名
    import defaultCls,{foo,bar,x,y,z as CONST_C} from "./moda"
    
    foo();
    bar();
    console.log(x);
    console.log(y);
    console.log(CONST_C);
    new defaultCls(1000).show();

![1348316-20190816152229540-1148331474.png][]

import * as newmod from "./moda"
    newmod.foo();
    newmod.bar();
    console.log(newmod.x);
    new newmod.default(200).show();

**解构**

JS的解构很灵活，参考
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

**列表解构**

var parts = ['shoulder','knees'];
    var lyrics = ['head',...parts,'and','toes']; //使用...parts解构
    console.log(lyrics)

**参数解构**

//参数解构
    function f(x,y,z){
        console.log(x,y,z)
    }
    var args = [2,3,4];
    f(...args)

**数组解构**

**![1348316-20190817221947841-1008325666.png][]**

const arr= [100,200,300];
    let [x,y,z] = arr;
    console.log(1,x,y,z)    //1 100 200 300
    
    //丢弃
    const [,d,] = arr;
    console.log(2,d)        //2 200
    
    //少于数组元素
    const [e,f] = arr;
    console.log(3,e,f)      //3 100 200
    
    //多余数组元素
    const [i,j,k,l] = arr;
    console.log(4,i,j,k,l)  //4 100 200 300 undefined
    
    //可变变量
    const [o,...args] = arr;
    console.log(5,o);       //5 100
    console.log(5,args)     //5 [ 200, 300 ]
    
    //支持默认值
    const [q=1,w,,,r=10] = arr;
    console.log(6,q,w,r)    //6 100 200 10

![1348316-20190817222740911-509190067.png][]

**对象解构**

![1348316-20190817222817830-1660564489.png][]

//对象解构
    const obj = {
        a:100,
        b:200,
        c:300
    };
    
    let {x,y,z} = obj;
    console.log(1,x,y,z)    //1 undefined undefined undefined
    
    let {a,b,c} = obj;  //key名称
    console.log(2,a,b,c)    //2 100 200 300
    
    let {a:M,b:N,d:D='python'} = obj;//重命名、缺省值
    console.log(3,M,N,D)    //3 100 200 python

![1348316-20190817223509102-1540963476.png][]

**复杂结构**

![1348316-20190817223538714-1354933779.png][]

onst arr = [1,[2,3],4];
    
    const [a,[b,c],d] = arr;
    console.log(1,a,b,c,d)  //1 1 2 3 4
    
    const [e,f] = arr;
    console.log(2,e,f)      //2 1 [ 2, 3 ]
    
    const [g,h,i,j=18] = arr;
    console.log(3,g,h,i,j)  //3 1 [ 2, 3 ] 4 18
    
    const [k,...l] = arr;
    console.log(4,k,l)      //4 1 [ [ 2, 3 ], 4 ]

![1348316-20190817223842479-587612110.png][]

//对象
    var metadata ={
        title:'Scartch',
        translations:[
        {
            locale:"de",
            location_tags:[],
            url:"/de/docs/Tools/Scartch",
            title:'JavaScript-Umegebung'
        }
    ],
        url:"/etc/network/Scartch"
    }
    
    var {title:enTitle,translations:[{title:locationTitle}]} = metadata;
    console.log(enTitle)        //Scartch
    console.log(locationTitle)  //JavaScript-Umegebung

**数组的操作**

**![1348316-20190817224408748-247902924.png][]**

const arr= [1,2,3,4,5];
    arr.push(6,7);
    console.log(arr);   //[ 1, 2, 3, 4, 5, 6, 7]
    arr.pop()
    console.log(arr);   //[ 1, 2, 3, 4, 5, 6 ]
    
    //map有返回值
    console.log(arr.map(x => x*x)); //[ 1, 4, 9, 16, 25, 36 ]
    
    //filter有返回值
    console.log(arr.filter(x => x%2==0));   //[ 2, 4, 6 ]
    // console.log(arr.filter(x => !(x%2)))
    
    //foreach无返回值
    const newarr = arr.forEach(x => x=10);
    console.log(newarr)     //undefined

**数组练习**

![1348316-20190817225024162-1600407620.png][]

![1348316-20190817225642313-227774801.png][]

const s = Math.sqrt(10)
    const arr = [1,2,3,4,5];
    
    //1
    console.log(arr.filter(x => !(x%2)).map(x => x*x).filter(x => x>10));
    
    //2
    console.log(arr.filter(x => !(x%2) && x>s).map(x => x*x))
    
    //3
    let newarr = []
    arr.forEach(x => {
        if (x>s && !(x%2)) newarr.push(x*x);
    })
    console.log(newarr)
    
    //先过滤再求值

**对象的操作**

![1348316-20190817230027807-1329792563.png][]

const obj = {
        a:100,
        b:200,
        c:300
    }
    
    console.log(Object.keys(obj))       //[ 'a', 'b', 'c' ]
    console.log(Object.values(obj))     //[ 100, 200, 300 ]
    console.log(Object.entries(obj))    //[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]
    
    //assign
    var metadata ={
        title:'Scartch',
        translations:[
        {
            locale:"de",
            location_tags:[],
            url:"/de/docs/Tools/Scartch",
            title:'JavaScript-Umegebung'
        }
    ],
        url:"/etc/network/Scartch"
    }
    
    var copy = Object.assign({}/*对象目标*/,metadata,
        {schoolName:'magedu',url:"www.magedu.com"},  // 增加新的属性，覆盖同名属性
        {translations:null}     //覆盖metadata的translations
    )
    console.log(copy)

**Promise**

**概念**

**![1348316-20190817231735707-866726466.png][]**

![1348316-20190817231801705-1374494281.png][]

**execotor**

![1348316-20190817231937955-839764687.png][]

**promise的状态**

![1348316-20190817232027799-1292674335.png][]

**Promise.then(onFulfilled,onRejected)**

![1348316-20190817232132306-30097152.png][]

//简单示例
    var myPromise= new Promise((resolve,reject) => {
        resolve('hello');   //执行，置状态为fulfilled
        console.log(`~~~~~~~~~`);
        reject('world');    //永远执行不到
    });
    
    console.log(myPromise)
    
    myPromise.then(
        /*如果成功则显示结果 */
        (value) => console.log(1,myPromise,value),
        /*如果失败则显示原因*/
        (reason) => console.log(2,myPromise,reason)
    );
    /*运行结果1：
    ~~~~~~~~~
    Promise { 'hello' }
    1 Promise { 'hello' } hello
    */
    /*运行结果2(屏蔽resolve('hello');)：
    ~~~~~~~~~
    Promise { <rejected> 'world' }
    2 Promise { <rejected> 'world' } world
    */

**catch(onRejected)**

![1348316-20190817233044709-948559051.png][]

**异步实例**

//异步实例
    function runAsync(){
        return new Promise(function(resolve,reject){
            //异步操作
            setTimeout(function(){
                console.log('do sth...');
                resolve(`ok...`);
            },3000);
        });
    }
    
    //调用
    runAsync().then(value => {
        console.log(value);
        return Promise.reject(value+'*');
    }).catch(reason => {
        console.log(reason);
        return Promise.resolve(reason+'*');
    }).then(value => {
        console.log(value);
        console.log('End')
    });
    console.log('~~~~~~~FIN~~~~~');
    /*输出结果：
    ~~~~~~~FIN~~~~~
    do sth...
    ok...
    ok...*
    ok...**
    End
     */

转载于:https://www.cnblogs.com/xiaoshayu520ly/p/11353419.html

[1348316-20190814165940840-255894493.png]: /images/20230808/8f6bb78a01724bab9aada324d6f5f9d2.png
[1348316-20190814170636466-807522722.png]: /images/20230808/5c13c173216a48a39083a1aa99913168.png
[1348316-20190814170656861-2008153228.png]: /images/20230808/1f20b19e8dde4051b996368574b541db.png
[1348316-20190814170739473-1870589014.png]: /images/20230808/847b190004274f839dfc163222b9a3be.png
[1348316-20190814170806890-405930767.png]: /images/20230808/6cac3f54f79c457594de7317c2c36e00.png
[1348316-20190814170821163-1754848357.png]: /images/20230808/ac0b4ad6a21e44c5ba235c9a3734d58d.png
[1348316-20190814170844154-1270276200.png]: /images/20230808/b628d5172cd1485e8bc280d01826cd1d.png
[1348316-20190814170857680-1228716954.png]: /images/20230808/079310a019fa4f0888d647c99ee13e44.png
[1348316-20190814170924723-123563602.png]: /images/20230808/df470952f9dd4ad884baaec198b8d586.png
[1348316-20190814171702270-306685505.png]: /images/20230808/900b154d0522419a8f3c666711c05987.png
[1348316-20190816141318360-142610529.png]: /images/20230808/f5af9c63f58c418ead1cf32414c302ac.png
[1348316-20190816141342216-1839510580.png]: /images/20230808/6f0ea3681c304efcb4e49050ccb10737.png
[1348316-20190816141402218-2008326780.png]: /images/20230808/7c09ddf63bb0442c8c65b282bc53ffc5.png
[1348316-20190816141443508-351746425.png]: /images/20230808/f018cdb633c4422788ca326e473f13c0.png
[1348316-20190816141508438-1264687485.png]: /images/20230808/33b46ab6e4ea4b2593a4ebae8b12f320.png
[1348316-20190816141516505-707198364.png]: /images/20230808/edb745c7a19a4ec09292640192fae958.png
[1348316-20190816141930413-1163542059.png]: /images/20230808/d4552ce3504340ab8fe5fe3de544de5d.png
[1348316-20190816142342798-557107313.png]: /images/20230808/912bb265ae9d47c18b69fe474d63b627.png
[1348316-20190816145844921-1742633364.png]: /images/20230808/7593a17bc68c454894bb300db88afcbf.png
[1348316-20190816145914425-2043689245.png]: /images/20230808/b5dfb71957c34d85b73a17a2f3873bd0.png
[1348316-20190816145929468-27281753.png]: /images/20230808/c9b3360e8ccf4c1db6a74aa03689118c.png
[1348316-20190816145953495-283415132.png]: /images/20230808/d0893f27800e44e2855178f273bd68c9.png
[1348316-20190816150027860-795550448.png]: /images/20230808/ae850875e7eb402f8ffadcc91711b481.png
[1348316-20190816150042582-1978037.png]: /images/20230808/1eaf2dd02a854fae8f8d784729599f71.png
[1348316-20190816150100881-1876129131.png]: /images/20230808/6346be7fcfea4a48bb0f30a4de098eb9.png
[1348316-20190816150119793-1561201041.png]: /images/20230808/98c439d5aed4473098ed42730156455a.png
[1348316-20190816150154433-1041417989.png]: /images/20230808/8c0c6d4e0836460697410ecce33f4d4a.png
[1348316-20190816150229175-905709136.png]: /images/20230808/836db21f0ab84dd0a6cc24843f24aab6.png
[1348316-20190816150243054-339904605.png]: /images/20230808/8319c85d6f3b46b4bf0eb3ad9885b7d1.png
[1348316-20190816150304550-1614334036.png]: /images/20230808/55870925ca6a454abea582ae81ab5a14.png
[1348316-20190816150351632-1177912280.png]: /images/20230808/cef529a984dd4261aa9fde5807cf389c.png
[1348316-20190816150409840-958209313.png]: /images/20230808/dbcd8c912f9d4c03bfb77559ac262e16.png
[1348316-20190816150429886-574273.png]: /images/20230808/7534ab35214546d6b5f29d31d6e1265b.png
[1348316-20190816145834702-1173187661.png]: /images/20230808/95942805283248ee87f674040c71a869.png
[1348316-20190816150505042-834923564.png]: /images/20230808/e631c15e497c4aabafa2b29e632d1685.png
[1348316-20190816150605939-1587667081.png]: /images/20230808/aeb8c63499844d85a3b3fa7ebe20047f.png
[1348316-20190816150641140-871588189.png]: /images/20230808/eb2999e741a84f038c1966f39de0a5de.png
[1348316-20190816144917729-1759391798.png]: /images/20230808/fea23def12ae4254b8afbe8168d6791f.png
[1348316-20190816150709319-2147058160.png]: /images/20230808/04a34da32e3b450ab3c6bf1bb9a6fdbd.png
[1348316-20190816150716897-1233681497.png]: /images/20230808/ac7970f1d0104ef585ddbbad8cdbbed1.png
[1348316-20190816150750711-1492484486.png]: /images/20230808/3c962571a9604f7c9fba0b4fa8d03a7a.png
[1348316-20190816150813179-614675716.png]: /images/20230808/516f7f8d146a4067b0eef81859a1326b.png
[1348316-20190816151333730-55759204.png]: /images/20230808/d5bac7ba591e4256b91155e893fbb552.png
[1348316-20190816152229540-1148331474.png]: /images/20230808/88386446a87d4c4aa624b9d9c7170f4a.png
[1348316-20190817221947841-1008325666.png]: /images/20230808/3964a11685f042de99ea0b231777b887.png
[1348316-20190817222740911-509190067.png]: /images/20230808/c86e8b374e6e48f2ad0ecc3d1e3d1125.png
[1348316-20190817222817830-1660564489.png]: /images/20230808/057ea7c2f1794dc7813333aaa0cb9f33.png
[1348316-20190817223509102-1540963476.png]: /images/20230808/32ec6d94864049ce8094ce45b91179e9.png
[1348316-20190817223538714-1354933779.png]: /images/20230808/f259d026e204483c980d639a61c1fbc6.png
[1348316-20190817223842479-587612110.png]: /images/20230808/c3b425b620234b878edc7421f977bdef.png
[1348316-20190817224408748-247902924.png]: /images/20230808/401bc65d9ab744229f49301c740789b0.png
[1348316-20190817225024162-1600407620.png]: /images/20230808/dfa3aa9a54de4c0c8c5f82083081eb08.png
[1348316-20190817225642313-227774801.png]: /images/20230808/255938ec3e3b4006aaec20be975146db.png
[1348316-20190817230027807-1329792563.png]: /images/20230808/2b7bb069ccdb4f33890b36048a2e7cd5.png
[1348316-20190817231735707-866726466.png]: /images/20230808/7c4a64a61e1846acbac32324f15a16c2.png
[1348316-20190817231801705-1374494281.png]: /images/20230808/394c143c0d534c0ca0b0f630014a312a.png
[1348316-20190817231937955-839764687.png]: /images/20230808/8c9b5a53e3f649bfb707055d4e220fbd.png
[1348316-20190817232027799-1292674335.png]: /images/20230808/52c85258665a4bb299d12aa46a3680d8.png
[1348316-20190817232132306-30097152.png]: /images/20230808/1539b282c217478e9a3d40a1a0683b09.png
[1348316-20190817233044709-948559051.png]: /images/20230808/fb44e31e8fec4715809bfc2c80114d36.png