JS中URLSearchParams的基本用法

 <!  DOCTYPE html  > 
 <  html  lang  ="en"  > 

 <  head  > 
     <  meta  charset  ="UTF-8"  > 
     <  meta  http-equiv  ="X-UA-Compatible"  content  ="IE=edge"  > 
     <  meta  name  ="viewport"  content  ="width=device-width, initial-scale=1.0"  > 
     <  title  > JS中URLSearchParams的基本用法 </  title  > 
     <  script  src  ="/lib/vue.js"  ></  script  > 
     <  script  src  ="/lib/axios.js"  ></  script  > 
 </  head  > 

 <  body  > 
     <  div  id  ="app"  > 
         <  input  type  ="button"  value  ="测试"  @click  ="testURLSearchParams"  > 
     </  div  > 

     <  script  > 
         var  vm  =   new  Vue({

            el:  '  #app  '  ,

            data: {

                msg:  '  Hello Vue!  '  },

            methods: {  //  测试URLSearchParams 
                 //  参考博文：https://www.cnblogs.com/zshno1/p/15993017.html 
 testURLSearchParams:  function  () {  var  _this  =   this  ;  //  方法中通过this关键字获取data中的数据 
                     var  url  =   new  URL(`https:  //  www.baidu.com?a=1&b=2`); 
                     var  searchParams  =   new  URLSearchParams(url.search);  //  1、toString() 返回适用在URL中的查询字符串 
 console.log(searchParams.toString());  //  输出：a=1&b=2 
 console.log(Object.fromEntries(searchParams.entries()));  //  输出：{a: '1', b: '2'} 

                     //  2、append(name,value) 插入一个指定的键/值对作为新的搜索参数 
 searchParams.append(  '  c  '  ,  3  );

                    console.log(searchParams.toString());  //  输出：a=1&b=2&c=3 
 console.log(Object.fromEntries(searchParams.entries()));  //  输出：{a: '1', b: '2', c: '3'} 

                     //  3、delete(name) 删除指定名称的所有搜索参数 
 searchParams.  delete  (  '  c  '  );  //  4、get(name) 获取指定搜索参数的第一个值 
 console.log(searchParams.get(  '  a  '  ));  //  输出：1 

                     //  5、getAll(name) 获取指定搜索参数的所有值，返回是一个数组 
 console.log(searchParams.getAll(  '  a  '  ));  //  输出：['1'] 

                     //  6、has(name) 判断是否存在此搜索参数 
 console.log(searchParams.has(  '  a  '  ));  //  输出：true 

                     //  7、set(name, value) 设置相关联的值，已存在则覆盖 
 searchParams.set(  '  a  '  ,  11  );

                    searchParams.set(  '  d  '  ,  4  );

                    console.log(Object.fromEntries(searchParams.entries()));  //  输出：{a: '11', b: '2', d: '4'} 

                     //  8、entries() 返回一个iterator可以遍历所有键/值对的对象 
                     var  paramArr  =  searchParams.entries();  for  (  var  item of paramArr) {

                        console.log(item);  //  依次输出：['a', '11'],['b', '2'],['d', '4'] 
 }  //  9、此外还有 keys()/values()/sort(name, value) 等方法，此处就不再一一列举了。 
 },  //  URLSearchParams实践 
 getData:  function  () {  var  _this  =   this  ;  var  params  =   new  URLSearchParams();

                    params.append(  "  action  "  ,  "  getData  "  );

                    params.append(  "  pageIndex  "  ,  1  );

                    params.append(  "  pageSize  "  ,  15  );

                    axios.post(  '  /Ashx/Epc/ThirdInterfaceDataHandler.ashx  '  , params)

                        .then(  function  (result) {

                            console.log(result);

                        })

                        .  catch  (  function  (error) {

                            console.log(error);

                        });

                }

            }

        });  //  C#中计算分页数 
         //  totalCount：总记录数；pageSize：页大小；totalPage：总页数 
         //  var totalPage = (totalCount + pageSize - 1) / pageSize; //计算分页数 
     </  script  > 
 </  body  > 

 </  html  > 

 //  totalCount：总记录数；pageSize：页大小；totalPage：总页数 
 var  totalPage = (totalCount + pageSize -  1 ) / pageSize;  //  计算分页数 

 var  fruits = ["Banana", "Orange", "Apple", "Mango" ];  if  (fruits.indexOf("Apple") > -1) {  //  存在 
    console.log(fruits.indexOf("Apple"));  //  输出：2 
}

链接：https: //  pan.baidu.com/s/1NLLD73m048F-59WMOtOTCw 
提取码：t0k8