去掉所有空格的用法「js去掉前後空格trim」

1.Promise 用於解決非同步編程
/* * 比如說 ajax 就是一個非同步操作 , 之前的使用的回調函數的方式解決非同步編程 * * $.ajax({ * url:’abc.com’, * success:function(res){ * * } * }) * * 場景: * 1.先獲取當前token是否已經失效 * 2.如果沒有失效,返回當前的token的用戶的基本信息(基本信息包含 uid ) * 3.根據uid 來查詢當前用戶的會員等級 * 4.再通過當前用戶的會員等級,來查詢當前用戶的特權(來檢測用戶是否有許可權來執行某個操作) * * 案例: * 已知a.txt 地址 ,然後需要根據a.txt 返回的結果進行下一次的查詢 ,逐一查詢到最後的結果d.txt內容 * */
//使用jQuery 實現 = > 造成一個 “回調地獄”

 $.ajax({
        url:"data/a.txt",
        success:function(res){
            console.log('第一次:',res);
            //再發出下一次請求
            $.ajax({
                url:res,
                success:function(res){
                    console.log('第二次',res);
                    $.ajax({
                        url:res,
                        success:function (res) {
                            console.log('第三次:',res);
                            $.ajax({
                                url:res,
                                success:function (res) {
                                    console.log("第四次:",res);
                                }
                            })
                        }
                    })
                }
            })
        }
    })

2. Promise 用於解決非同步編程的一種解決方案, 也可以理解是一個執行非同步操作的容器,在容器中封裝好了一套處理非同步的流程機制

* 1.有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。

* 2.一旦狀態改變，就不會再變，任何時候都可以得到這個結果。從pending – > fulfilled (成功) 或者 pending -> 和rejected (失敗) , 每次只能改變一次狀態

* * 常用方法

* all()

* race()

var promise = new Promise(function(resolve,reject){//創建一個promise容器 , resolve 一個用於在處理非同步成功時調用的函數 , reject 處理非同步失敗的時候調用的函數 setTimeout(function(){ //通過延時定時器模擬非同步 , 2000ms 結束後就可以調用成功或者失敗 console.log(‘時間到了!!!’); resolve(123456); reject(12) },2000); }); //當實例化Promise之後(已經執行非同步操作) , (結果怎麼樣)然後呢? then() 編寫需要執行的回調業務 promise.then(function(res){ console.log(“執行成功!”,res); },function(err){ console.log(“執行失敗!”,err); });

3.使用promise 非同步編程封裝一個ajax模塊

 //使用promise 非同步編程封裝一個ajax模塊
    function Ajax(url){
        //創建一個Promise實例
      return  new Promise(function(resolve,reject){
            var xhr = new XMLHttpRequest();
            //綁定請求過程狀態改變事件
            xhr.onreadystatechange = function () {
                    if(xhr.readyState==4){
                        if((xhr.status >= 200 && xhr.status<=304)){
                            resolve(xhr.responseText);
                        }else{
                            reject(xhr.statusText);
                        }
                    }
            }
            //發起請求
            xhr.open("get",url);
            xhr.send(null);
        });
    }

    //使用

    // all() 可以同時擁有幾個非同步操作,  如果有一個失敗 ,則觸發失敗
    // Promise.all([Ajax('data/a.txt'),Ajax('data/b.txt'),Ajax('data/c3.txt')]).then(function (res) {
    //     console.log("成功:",res);
    // }).catch(function (err) {
    //     console.log("失敗:",err);
    // })


    //race() 競速
    Promise.race([Ajax('data/a.txt'),Ajax('data/b.txt'),Ajax('data/c3.txt')]).then(function (res) {
        console.log("成功:",res);
    }).catch(function (err) {
        console.log("失敗:",err);
    })

4.使用promise 非同步編程封裝一個ajax模塊

 function Ajax(url){
        //創建一個Promise實例
      return  new Promise(function(resolve,reject){
            var xhr = new XMLHttpRequest();
            //綁定請求過程狀態改變事件
            xhr.onreadystatechange = function () {
                    if(xhr.readyState==4){
                        if((xhr.status >= 200 && xhr.status<=304)){
                            resolve(xhr.responseText);
                        }else{
                            reject(xhr.statusText);
                        }
                    }
            }
            //發起請求
            xhr.open("get",url);
            xhr.send(null);
        });
    }

    //使用
    Ajax("data/a.txt")
      .then(function (res) {
           console.log("第一次成功:",res);
           //調用下一次
            return Ajax(res);
    }).then(function (res) {
            console.log("第二次成功:",res);
              return Ajax(res);
    }) .then(function (res) {
        console.log("第三次成功:",res);
        //調用下一次
        return Ajax(res);
    }).then(function (res) {
        console.log("第四次成功:",res);
    }).catch(function () {
       console.log("最後請求失敗!!!");
    })

    // promise().then(()=>{},()=>{})
    // promise().then(()=>{}).catch(()=>{})

5.語法糖 (提供一種代碼更加簡潔,方便的做法,與之之前的實現過程相比,感覺像是吃了糖一樣美滋滋)

// var a = 10;

// var b = 20;

// var c = 30;

// var d = 40;
//ES6實現 – 數組形式解構賦值

 let [a, b, c, d, e, f] = [10, 20, 30, 40, 50];


        //對象形式解構賦值 , 定義abc , hhh 變數 , 將等號右邊的foo的值賦值給abc , 等號右邊的bar的值賦值給hhh
        let { foo: abc, bar: hhh } = { foo: "啊啊啊啊啊", bar: "呵呵呵呵呵" }

        //es6的對象中有一個簡寫方式
        var name = "張三";
        var obj = {
            name, // 等於 name:name  ,在對象中如果屬性名與屬性值的變數名一樣 ,就可以簡寫
            run() {
                console.log('奔跑方法');
            }
        }

        let { foo, bar } = { foo: "啊啊啊啊啊", bar: "呵呵呵呵呵" };

        /*
        使用場景 :
            restFul API 規範的介面 

            {
                code:200,
                msg:"載入用戶餘額數據成功!",
                data:[
                    {
                        id:123123,
                        money:1000
                    },
                    {
                        id:123123,
                        money:1000
                    }
                ]
            }
        */
        var obj = {
            data: {
                res: {
                    code: 200,
                    msg: "載入用戶餘額數據成功!",
                    data: [
                        {
                            id: 123123,
                            money: 1000
                        },
                        {
                            id: 123123,
                            money: 1000
                        }
                    ]
                }
            }
        }

        //使用ES6 解構賦值快速搞定
        let { code , data , msg} = obj.data.res;
        //需要根據返回的狀態碼 ,做出對應的提示內容(彈窗) ,將數據列表輸出在控制台    
        // if (obj.data.res.code == 200) {
        //     alert(obj.data.res.msg);
        //     console.log(obj.data.res.data);
        // } 

         if (code == 200) {
            alert(msg);
            console.log(data);
        }     

6.字元串:

* 1.新增一些常用方法:

* includes() 用於檢測字元串中是否包含指定字元. , 返回布爾值

* startsWith() 用於檢測字元的開頭是否包含指定字元 , 返回布爾值

* endsWith() 用於檢測字元串的結尾是否包含指定字元 ,返回布爾值

* padStart(length,str) 對字元串進行length長度的前補位 ,不足使用str去補

padEnd(length,str) 對字元串進行length長度的後補位 ,不足使用str去補

repeat(times) 對字元串進行times 次重複
trimStart() 去除字元串開頭位置的空格

trimEnd() 去除字元串結束位置的空格

trim() 去除字元串前後的空格 * * * 2.模板字元串 * * */

var s = '10000';
    console.log(s.padStart(8,0));


    var studentName = '張三';
    var bookName = "<<且聽風吟>>";

    // document.write('<h3>'+studentName+"正在讀一本書,書名為"+bookName+'</h3>');

    //使用ES6的模板字元串
    document.write(`<h3>${studentName}正在讀一本書,書名為${bookName}</h3>`);

7.數據結構?? : 數據結構是計算機存儲、組織數據的方式。數據結構是指相互之間存在一種或多種特定關係的數據元素的集合
//數據類型:存儲的數據類型(boolean , string , undefined , null , number ,object , smybol) //Set() 集合

 var set = new Set([1,2,3,4,5,5,3]);
        console.log(set);

        //1.不能直接使用下標訪問 ,一般通過一些遍歷方式得到值

        //2.唯一性 : 在集合的內部 ,一個相同的值 只允許出現一次 (可以用來實現數組的去重)
        var arr = [10,20,30,40,50,50,40,30,20,10];
        var arr2 = new Set(arr);
        console.log(arr2); 
        arr = Array.from(arr2); //將一些集合類型數據轉換成數組



        //Map() 映射 , 為了解決傳統對象的鍵值對關係中, 鍵名只能以字元串數據類型的問題
        var obj = {
            20:'這是一個數字',
            true:"這是一個true"
            // [0,1,2]:'sssaadasad'
        }

8.proxy (代理) :在目標對象之前架設一層「攔截」，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫

  var man = {
            age: 8,
            state: '兒童',
            sex: '女',
            name: "張三"
        }

        //  man.age = -2500; //這樣設置無法對數據可靠性,安全性做出處理 ,很容易造成數據的混亂

        //攔截處理 : get(在獲取屬性時會自動觸發)  / set (在設置屬性時會自動觸發) , 在這種攔截機制中做出需要攔截的操作
        var hanlder = {
            set: function (target, key, value) {
                console.log('正在準備設置對象的屬性...',target, key, value);
                if(key == "age"){
                    if(value>=0 && value<=120){
                        target.age = value;
                        if(value>=0 && value<=12){ //實現在每次修改年齡的時候 ,根據修改年齡的數值決定對象屬性state的狀態 ,此處就與age屬性實現了數據的綁定,而不需要在每次設置age屬性的時候,都要去寫一遍判斷邏輯和操作state
                            target.state="兒童"
                        }else if(value>=13 && value <18){
                            target.state = "少年";
                        }else if(value>=19 && value <30){
                            target.state = "青年";
                        }else{
                            target.state = "老年人";
                        }
                    }else{
                        throw new Error('年齡輸入不合法!!');
                    }
                }
            },
            get: function (target, key) {
                // console.log('此處應該是獲取代理目標對象屬性的攔截操作...',target,key);
                switch (key) {
                    case "age":
                        if (target.sex == '女') {
                            return '女孩子的年齡一般不能問的!!';
                        } else {
                            return target.age;
                        }
                    break;
                    default:
                        return target[key];    
                }
                // return '數據保密!';
            }
        }

        //實例化一個proxy , 其實就是對外提供的一個操作代理對象(操作時修改的就是prxoy對象,但是它會將數據再修改到目標對象上)
        var proxy = new Proxy(man, hanlder);

        console.log('年齡為:', proxy.age); //此時會觸發proxy中的get ,因為在獲取age屬性

        proxy.age = 30;

9.async 函數 ,非同步函數 : 目的就將非同步操作變成同步操作的方式編寫
/** 使用關鍵字 async 聲明一個非同步函數 , 在調用非同步函數的之前使用await關鍵配合使用,來聲明當前執行的非同步需要等待 ,等await關鍵字中的函數執行完之後 ,才會執行後邊的代碼 */

 async function timeout(time) {
            return new Promise((resolve, reject) => {
                setTimeout(() => { //模擬一個非同步操作,比如說是一次ajax交互
                    resolve(123);
                }, time)
            })
        }

        async function hello(title, time) {
            let s = null;
            await timeout(time).then((res) => {
                // console.log(res);
                s = res;
            });

            console.log(title + s);

        }

        hello("教育改變生活!!!!", 5000);