欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js去掉前后空格trim(去掉所有空格的用法)

程序员文章站 2023-11-29 21:46:34
1.promise 用于解决异步编程/* * 比如说 ajax 就是一个异步操作 , 之前的使用的回调函数的方式解决异步编程 * * $.ajax({ * url:’abc.comR...

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);