木灵鱼儿
阅读:2469
location.serach查询字符串参数
location.serach获取到链接地址中?后包括?的内容!
此时,假设我们的地址是:https://www.mulingyuer.com/测试/?id=5&search=ok
通过location.serach可以获得?id=5&search=ok这部分内容,如果我要分别拿到里面对应的内容,就需要使用字符操作了。
首先,?问好是第一个要被排除的对象,我们可以利用slice、substring、substr三个区域选择符进行操作。
- slice,好处是负数是通过总字符数+负数得到需要的区域!
- substring,好处是:当只有一个负数的时候,不裁剪区域,全出输出,当其中一个数为负数的时候,默认识别为0,并且如果后面的数字小于前面的数字,会进行前后调换,如(2,-1)=(2,0)=(0,2)!
- substr,好处是:当只有一个数且为负数,和slice一样,当两个数中其中一个为负数时,负数识别为0,但是不会像substring一样小的数字调换到前面,如(5,-2)=(5,0)
在这个例子中,我们只是需要去掉?而已,所以,三个哪个都很合适,我们随便来一个:
location.search.slice(1); 得到:id=5&search=ok 字符串;
其中我们还需要将它拆解为id=5,search=ok,这里又用到了查找替换并返回数组的split,于是我们加工下!
var box = window.location.search.slice(1);
var box2 = box.split('&');
alert(box2); 得到id=5,search=ok
这样还不行,我们最终的效果是直接输出id得到值和serach得到值,为此我们还需要将id=和serach=进行分解,我们可以利用重复语句分别得到box2[0]和box2[1],然后再对其进行查找替换返回数组,在通过分别调用数组中的下标来返回得到的值。
var box = window.location.search.slice(1);
var box2 = box.split('&');
var box3 = null;
for(var i = 0;i<box2.length;i++) {
box3 = box2[i].split('=');
alert(box3);
};
利用一个box3来临时保存得到的数组,此时已经可以输出 id,5 search,ok 这个时候,我们还需要使用数组来保存这个数据,并且对其进行封包处理。
数组的时候,曾经说过,数组的下标是可以使用字符串来命名的,但是调用的时候需要使用引号['字符串']来调用,并且在直接调用数组的时候,是没有值的,只能通过下标['字符串']才有值显示。
function box5() {
var box = location.search.length > 0 ? location.search.slice(1) : '';
var box2 = box.split('&');
var box3 = null,box4 = [],name = null,value = null;
for(var i = 0;i<box2.length;i++) {
box3 = box2[i].split('=');
name = box3[0];
value = box3[1];
box4[name] = value;
};
return box4;
};
var box6 = box5();
alert(box6['id'] + '|' + box6['search']);
创建变量name用来存储id和search,value用来存储5和ok,然后利用数组的下标可以使用字符的特性,将name直接传到下标中,然后在等于value值,这样一串代码,就可以创建两个数组了,最后,由于使用了封包,函数下创建的变量外边无法直接访问,于是我们return出这个box4.
为了方便点,我么新建了一个变量box6来运行函数,然后在box6['字符串']来调用对应的值,这样就可以了,值都单独拿出来了,你想怎么写就看自己的想法了是吧!
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
第四章 对象的创建
命名空间在ESM模块化还未出来之前,用于减少全局变量名污染的一种做法就是使用命名空间,其做法也非常简单,就是创建一个全局的变量,然后将内容都赋值给这个变量,从而减少对全局变量的使用。//创建命名空间 var MYAPP = {}; //构造函数 MYAPP.Parent = function(){}; MYAPP.Child = function(){}; // 一个变量 MYAPP.some_var =1; // 一个对象容器 MYAPP.modules ={}; // 嵌套的对象 MYAPP.modules.module1 ={}; MYAPP.modules.module1...
对象扁平化
前言后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适,逻辑清晰。要求将对象中的层级扁平化,改成如下格式:// 实现一个 flatten 函数,实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...
JSON 格式化对象,对象中存在函数的解决办法,JSON格式化函数
json在格式化对象是,如果是普通的键值对对象还是没有问题的,但是如果他的值是一个函数,在格式化之后,函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你!") } }; const b = JSON.stringify(a);当你输出变量b的时候,你得到的会是:"{\"name\":\"我爱你\"}"fn不见了!引用JSON.stringify()方法描述中的一段解释:undefined、任意的函数以及 s...
解决报错:Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.
这是一个奇葩的报错,因为他居然是因为模板vue文件没有设置name导致的。也就是说,如果要解决这个问题,在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

Object 对象的扩展
属性的简写es6允许对属性进行简写,可以直接使用变量,变量名直接成为了属性名。var a = "hello"; var b = {a}; //等同于 var b = { a:a }属性里的方法也可以简写var a = { b(){...} } //等同于 var a = { b: function(){ ... } }在CommonJS模块输出变量时,也就是node模块导出时,这种简写就显得十分方便,我们直接导致一个对象,对象里面使用简写。var a = {}; var b = {}; module.exports = {a,b}而属性的赋...
Ajax 表单序列化
什么是表单序列化呢?将所有表单的提交通过一个标准化的方法去获取并且提交出去,那就是序列化,也就是说不同的表单,如注册啊,登录啊,修改资料啊,这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求:不能发送禁用的表单字段;只发送勾选的复选框和单选按钮;不发送type是reset、submit、file、button以及字段集;多选选择框中的每个选中的值单独一个条目;对于select元素,如果有value值,就指定value作为发送的字段,如果没有,就指定text值;已经将ajax的代码作为单独的一个文件保存,而调用则使用ajax()的方法,之前也做了一个表单提交的方法,在所有条件...
终于给博客的搜索按钮加上了事件切换器
都是辛酸泪,这几天学这个头大,不过好在我搞定了,并且还不会冲突,兼容ie9以上,相当奈斯!2018-10-5 重新做了兼容,虽然没什么卵用,美名其曰优化代码!效果图:原理就是通过修改class的名字来达到隐藏和显示的效果,并且修复了原来动效不能显示的bug。代码部分(css部分我就不提供了):[hide]//兼容添加事件 function addEvent(obj,type,fn) { if(obj.addEventListener) { obj.addEventListener(type,fn,false); }else if(obj.attachEve...

自定义insertAfter() 在当前元素节点的后面添加新的内容
由于document中并没有insertAfter()这个功能,只有insertBefore()在当前元素节点的前面添加新的内容,在后面添加是没有的,但是我们可以自己做一个有这个功能得函数。首先有几点前提条件:该元素节点后面有其他同级得节点如果没有同级得节点他应该就是最后一个节点由于我们写html时会有换行得操作,导致产生了空白节点,所以我们还需要移除这个空白节点才能正常操作。我们先写一个简单得html代码:<body> /*这是该元素为最后一个节点*/ <div id="box"> <p>1</p> <...
对象与原型的继承组合模式中仿冒和继承不会冲突吗?
代码部分:function Box(name) { this.name = name; this.famil = ['爷爷','奶奶','爸爸','妈妈']; }; Box.prototype.run = function() { return this.name + this.famil; }; function Desk(name) { Box.call(this,name); }; Desk.prototype = new Box(); 通过对象仿冒,将Box的属性仿冒到Desk中,这样就可以传入参数,也可以算是继承了,但是后面我们又通过Des...
关于面向对象判断是否原型属性的疑问
首先我们需要创建一个构建函数,并为它添加一个实例属性(实例就是被运行的函数)。function Box() {}; var box1 = new Box(); box1.name = 'mu'; 每个函数都会有一个原型,原型里的数据是共享的,多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的,并且引用地址相同。加上就近原则,当实例属性中有对应的属性,会优先调用实例属性,如果没有,就会去原型中查找。那么我们要去判断这个属性是实例中的属性还是原型中的属性,有两个判断语法:hasOwnProperty() / inhasOwnProperty()是判断属性是否存在...
致役
FireFox Windows 10我是大帅比
木灵鱼儿
FireFox Windows 10呵呵