quiz JS基础测试35期

本期题目依然非常基础：

答题前不要看别人回答，答题后可以，但不能修改自己回答

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式。

```js
// 你的JS代码写在这里
 ```

其它：

首位答题者可获得直播翻牌机会；
本次答疑直播为7月27日上午10:00，大约30分钟；

Jul 24 '19 13:07 zhangxinxu

encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号; 而 encodeURIComponent()则会对它发现的任何非标准字符进行编码。
Object.keys(object1).map(key => key + "=" + object1[key]).join("&")
window.location.search
代码如下

// zxx: 有bug
    let str = window.location.search;
    let arr = str.substring(1).split("&");
    let res = {};
	arr.forEach(item => {
	    let o = item.split("=");
	    res[o[0]] = o[1];
	})
	console.log(res);

代码如下

    let str = window.location.search;
    let arr = str.substring(1).split("&");
    let res = {};
    arr.forEach(item => {
        let o = item.split("=");
		if(!res[o[0]]){
			res[o[0]] = [];
		}
        res[o[0]].push(o[1]);
    })
    console.log(res);

Jul 24 '19 14:07 guqianfeng

1.encodeURI无法产生适用于http中get和post请求的URI，因为一些请求中的特殊符号如&、=、#之类的符号，而encodeComponentURI会对这些字符进行编码

    //2.
    const object1 = {
        userid: 123,
        username: '王二',
        tel: '13208033621'
    }
    const query = Object.keys(object1).map(v => `${v}=${encodeURIComponent(object1[v])}`).join('&')
    //3.
    const urlQuery =location.search
    //4.
    // zxx: 有bug
    urlQuery.slice(1).split('&').reduce((res, val) => {
        const result = val.split('=');
        res[result[0]] = result[1];
        return res
    }, {})
    //5.
    urlQuery.slice(1).split('&').reduce((res, value) => {
        const result = value.split('=');
        const key = result[0]
        const val = result[1]
        if (key in res) {
            if (Array.isArray(res[key])) {
                res[key].push(val)
            } else {
                res[key] = [res[key], val]
            }
        } else {
            res[key] = val
        }
        return res
    }, {})

Jul 24 '19 14:07 livetune

const object1 = {
    userid: 123,
    username: '王二',
    tel: '13208033621'
}
// 1. encodeURI 和 encodeURIComponent 区别
encodeURIComponent 会对整个url中的符号进行编码； encodeURI 会保留协议，域名，端口，对参数等进行编码。
// 2
Object.keys(object1).map((key) => `${key}=${encodeURIComponent(object1[key])}`).join('&')
// 3
location.search
// 4
const queryString = {};
location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => queryString[k] = decodeURIComponent(v))
// 5
const queryString = {};
location.search.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => {
    if (queryString[k]) {
	queryString[k] = [queryString[k]]
	queryString[k].push(decodeURIComponent(v))
    } else {
	queryString[k]=decodeURIComponent(v)
    }
})

Jul 24 '19 15:07 ZhangXDong

encodeURI() 函数假设参数是完整的 URIs ，encodeURIComponent() 函数假设参数是 URI 中单独的一部分

因为这两种假设差异，encodeURI 不会将 URI 保留字符编码，encodeURIComponent 会忽略保留字符，把这些代码当作普通字符编码

使用 Object.entries 获取 kv 元组，其中对应 [key, value]

let entries = Object.entries(object1)

let kvList = entries.map(kv => {
    let [key, value] = [...kv]
    return `${key}=${encodeURIComponent(value)}`
})

let result = kvList.join('&')

一行版本：

Object.entries(object1).map(kv => `${kv[0]}=${encodeURIComponent(kv[1])}`).join('&')

当然是 location.search 啦~ 不过也可以用 new URL(location.href).search
利用 URLSearchParams 对象，使用 entries() 方法获得可迭代对象，然后迭代

let search = new URLSearchParams(location.search)
let entries = search.entries()
let next = entries.next()
let obj = {}
while (!next.done) {
    let [key, value] = [...next.value];
    obj[key] = value;
    next = entries.next();
}
// result is obj

修改 while 函数体中内容为：

let [key, value] = [...next.value];
if (obj.hasOwnProperty(key)) {
    if (obj[key] instanceof Array) {
        obj[key].push(value)
    } else {
        obj[key] = [obj[key], value]
    }
} else {
    obj[key] = value
}
next = entries.next();
// result is obj

Jul 24 '19 15:07 ghost

const object1 = {
  userid: 123,
  username: '王二',
  tel: '13208033621'
};

第 1 题：

一句话：两者都会对 URL 中的特殊字符进行编码，区别是两者编码的字符范围不一样，前者不会对属于 URI 的特殊字符进行编码，而后者会。

第 2 题：

Object.keys(object1)
  .map(key => `${key}=${encodeURIComponent(object1[key])}`)  // 转码
  .join('&');

第 3 题：

location.search;

第 4、5 题：

2019-07-25 修改：调整了函数和形参命名，使之更加语义化；增加了测试用例

// zxx: 有bug
function getQueryObj(queryStr = '') {
  // 移除前面的 ? 号（如有）
  queryStr = queryStr.indexOf('?') === 0 ? queryStr.substr(1) : queryStr;
  if (!queryStr) return {};

  return queryStr.split('&')
    .map(s => s.split('='))  // 拆解 key 和 value
    .reduce((obj, [key, value]) => {
      value = value ? decodeURIComponent(value) : '';  // 解码

      if (key in obj) {
        Array.isArray(obj[key]) ? obj[key].push(value) : obj[key] = [obj[key], value];
      } else {
        obj[key] = value;
      }
        
      return obj;
    }, {});
}

getQueryObj 测试用例：

getQueryObj();  // 参数为空

// 一般情况
getQueryObj('userid=123&username=%E7%8E%8B%E4%BA%8C&tel=13208033621');

// 空值（username 值为空）
getQueryObj('userid=123&username=&tel=13208033621');

// 多个重复的键名（tel、favorite）
getQueryObj('?userid=123&tel=13208033621&username=%E7%8E%8B%E4%BA%8C&favorite=rap&favorite=Hip%20hop&favorite=basketball&tel=15888888888&tel=18099999999');

Jul 24 '19 15:07 wingmeng

1.前者是对url字符转义(除了URI协议相关的符号比如:/?=&)，后者对url?后面的传参部分做转义（比如&=会被误认为参数分隔）

const object1={userid:123,username:'王二',tel:'13208033621'}
//2
var ans2=Object.entries(object1).map(o=>o.map(encodeURIComponent).join('=')).join('&')
//3
var ans3=location.search.split('&')[0]
//4 5
// zxx: encodeURIComponent画蛇添足啦
function search2obj() {
    var ans = {} , str = location.search.slice(1)
    if (str === '') return ans
    str.split('&').forEach(o =>{
        let [k, v] = o.split('=').map(encodeURIComponent)
        if (k in ans && ans[k].push) ans[k].push(v)
        else if (k in ans) ans[k] = [ans[k], v]
        else ans[k] = v
    })
   return ans
}
console.log(ans2,ans3,search2obj())

Jul 24 '19 15:07 Seasonley

encodeURI 一般用来转义整个URL, 只转义影响判断URL的字符； encodeURIComponent 一般用于转义URL包含的参数，会转义大多数特殊字符

Object.keys(object1).reduce((prev, current) => (prev + (!prev ? '' : '&') + current + '=' + encodeURIComponent(object1[current])), '');

var arr = /([?].*)/.exec(document.URL);
var result = !arr ? '' : arr[0];

4/5 .

//zxx: 有bug
var obj = [].slice.apply(result .slice(1).split('&')).filter(v => !!v && v.indexOf('=') > 0).reduce((prev, current) => {
	var kv = current.split('=');
	var k = decodeURIComponent(kv[0]);
	var v = decodeURIComponent(kv[1]);
	if (prev[k] === undefined) {
		prev[k] = v;
	} else if (prev[k] instanceof Array) {
		prev[k].push(v);
	} else {
		prev[k] = [].concat.apply([prev[k]],[v]);
	}
	return prev;
}, {});

Jul 24 '19 15:07 NeilChen4698

const object1 = {
  userid: 123,
  username: '王二',
  tel: '13208033621'
}
// 1. encodeURI 与 encodeURIComponent 的主要区别在需要转义的字符范围不一样

// 2.
var objString = new URLSearchParams(object1).toString()

// 3. 这个题目总分两分感觉不简单?
var urlString = window.location.search

// 4.
var urlSearchParams = new URLSearchParams(urlString)
var urlObj = {}
for (let [key, value] of urlSearchParams.entries()) {
  urlObj[key] = value
}

// 5.
var repeatUrlObj = {}
for (let [key, value] of urlSearchParams.entries()) {
  if (!repeatUrlObj[key]) {
    repeatUrlObj[key] = value
  } else if (
    repeatUrlObj[key] &&
    typeof repeatUrlObj[key] === 'string'
  ) {
    repeatUrlObj[key] = [repeatUrlObj[key]]
    repeatUrlObj[key].push(value)
  } else {
    repeatUrlObj[key].push(value)
  }
}

Jul 24 '19 17:07 Despair-lj

1 大概记得是encodeURI不会对:/?#=&等正常的url进行编码，而encodeURIComponent则会全部编码 2

const object1 = {
  userid: 123,
  username: '王二',
  tel: '13208033621'
}
var s = Object.entries(object1).map(([k,v])=>k+'='+encodeURIComponent(v)).join('&');
//console.log(s)

3

location.search

4

var s = decodeURIComponent(location.search);
var p = {}
s.replace(/([^?=&]+)=([^&]+)/g,($,k,v)=>p[k]=v);
//console.log(p)

test

var s =  'userid=123&username=王二&tel=13208033621';
var p = {}
s.replace(/([^?=&]+)=([^&]+)/g,($,k,v)=>p[k]=v);
console.log(p)

5

var p = {}
s.replace(/([^?=&]+)=([^&]+)/g,($,k,v)=>p[k]=p[k]?(Array.isArray(p[k])?[...p[k],v]:[p[k],v]):v);
//console.log(p)

test

var s =  'userid=123&username=王二&tel=13208033621&tel=2222&tel=333';
var p = {}
s.replace(/([^?=&]+)=([^&]+)/g,($,k,v)=>p[k]=p[k]?(Array.isArray(p[k])?[...p[k],v]:[p[k],v]):v);
console.log(p)

Jul 24 '19 17:07 XboxYan

/* 测试url使用 http://127.0.0.1:5501/test31.html?a=b&c=???&a=e&a=&d*/
/* 第一题 */
const first = "encodeURIComponent 比 encodeURI 多转义下列字符 ;,/?:@&=+$#";
console.log(first);
const object1 = {
    userid: 123,
    username: '王二',
    tel: '13208033621'
}
/* 第二题 */
const second = new URLSearchParams(object1).toString();
console.log(second);
/* 第三题 */
const third = location.search;
console.log(third);
/* 第四题  有个很严重的问题,当有重复的键的时候,后面的值会把前面的值给覆盖掉,这里我就把当有重复值的时候,所有的重复的值使用逗号连接在一起了*/
// zxx: 是会有问题的，如果值本身就带有逗号
const forth = [...new URL(location.href).searchParams.entries()].
reduce((target, [key,value]) => {
    target[key] = target[key]?target[key]+","+value:value;
    return target
}, {});
console.log(forth);
/* 第五题 */
const searchParams = new URL(location.href).searchParams;
const keys = [...new Set(searchParams.keys())];
const sixth = keys.reduce((target,key)=>{
    let values = searchParams.getAll(key);
    values = values.length>1?values:values[0];
    target[key] = values;
    return target;
},{});
console.log(sixth);

Jul 25 '19 02:07 liyongleihf2006

1、一个编码整个URI，一个只编码部分

2、

     function encodeObj(obj) {
            let str = ''
            for(let prop in obj) {
                if(obj.hasOwnProperty(prop)){
                    str += prop + '=' + encodeURIComponent(obj[prop]) + '&'
                }
            }
            return str.slice(0, -1);
      }

3、

     function getQueryStr() {
            const reg = /\?[^?]*/
            const res = location.search.match(reg)
            return res ? deocdeURIComponent(res[0]) : null
      }

4、

//zxx: 有 bug 也
    const queryStr = getQueryStr().slice(1)
    function toObject(str) {
            const arr = str.split('&')
            const obj = {};
            for(let i = 0, len = arr.length; i < len; i++) {
                let pairs = arr[i].split('=')
                obj[pairs[0]] = pairs[1]
            }
            return obj
        }
       toObject(queryStr)

5、

      function toObjectArr(str) {
            const arr = str.split('&')
            const obj = {};
            for(let i = 0, len = arr.length; i < len; i++) {
                let pairs = arr[i].split('=')
                if(obj[pairs[0]]){
                    if(typeof obj[pairs[0]] === 'string') {
                        obj[pairs[0]] = [obj[pairs[0]]]
                        obj[pairs[0]].push(pairs[1])
                    } else{
                        obj[pairs[0]].push(pairs[1])
                    }
                }else {
                    obj[pairs[0]] = pairs[1]
                }
            }
            return obj
        }

Jul 25 '19 02:07 fzpijl

encodeURI 通常对整个URI编码并且不影响URI本身的特殊字符，encodeURIComponent 会对所有特殊字符编码，通常用于对查询字符串编码；

   Object.entries(object1).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&')

   const queryStr = decodeURIComponent(location.search)

  // zxx: Object.fromEntries是什么？
   Object.fromEntries(queryStr.split("?")[1].split("&").map(item => item.split('=')))
   // 写到5题发现这题就有问题了，如果有重复的键就会被覆盖，所以4，5一起再写

4，5.

  const arr = queryStr.split("?")[1].split("&").map(item => item.split('='))
  var res = {}
  arr.forEach(item => {
    if (!res[item[0]]) {
      res[item[0]] = item[1]
    } else {
      res[item[0]] = (res[item[0]]+','+item[1]).split(',')
    }
  })
  console.log(res)

Jul 25 '19 02:07 JaimeCheng

const object1 = {
  userid: '123',
  name: '王二',
  tel: '13208033621'
}

/*1.*/ console.log('第一题','encodeURI 对&,+,=, 不会进行编码, 而encodeURIComponent 会')


function contactObj (obj) {
  let result = ''
  for(let item in object1) {
    if (object1.hasOwnProperty(item)) {
      result += `${item}=${object1[item]}&`
    }
  }
  return encodeURI(result).replace(/&$/, '')
}

/*2.*/console.log('第二题',contactObj(object1))

/*3.*/ console.log('第三题',document.location.search)

//zxx: 测试显示有 bug
function parseSearch (search) {
  if (!search.match(/[&=]/)) {
    throw Error('argument must be regular search')
  }
  if (search.startsWith('?')) {
    search = search.substr(1)
  }
  return search.split('&').reduce((prev,item) => {
     var key_value = item.split('=')
     if (prev[key_value[0]]) {
       if (Array.isArray(prev[key_value[0]])) {
          prev[key_value[0]].push(key_value[1])
        } else {
          prev[key_value[0]] = [prev[key_value[0]], key_value[1]]
        }
      } else {
        prev[key_value[0]] = key_value[1]
      }
      return prev
   }, {})
}
/*4.*/ console.log('第四题',parseSearch(document.location.search))

/*5.*/ console.log('第五题',parseSearch('?name=gg&name=hh&name=ll'))

Jul 25 '19 03:07 les-lee

encodeURI用于转码整个URL，会将URL中的元字符(/、;、:等)和语义字符(字母数字，连字符，下划线等)以外的字符全部转义。 encodeURIComponent不能用来转义整个URL，会把除语义字符之外的所有字符转义。

const object1 = {
    userid: 123,
    username: '王二',
    tel: '13208033621'
    };
    var params = new URLSearchParams(object1);
    console.log('第二题', params.toString());

console.log('第三题', location.search)

var params = new URLSearchParams(location.search);
    const obj = {};
    for (key of params) {
      obj[key[0]] = key[1];
    }
    console.log('第四题', obj);

var params = new URLSearchParams('?userid=123&username=王二&tel=132&userid=234');
    console.log('第五题', params.getAll('userid'))

Jul 25 '19 04:07 wj0075

// 1
`对于 URL 中的特殊含义符号(; / ? : @ & = + $ , #), encodeURI 不进行编码操作, encodeURIComponent 进行编码操作`
// 2
// zxx：并无空格, word排版问题
const keys = Object.keys(object1)
const values = Object.values(object1)
const arr = []
for (let i = 0; i < keys.length; i++) {
    let k = keys[i]
    let v = values[i]
    let s = `${k} =${encodeURIComponent(String(v))}&`
    arr.push(s)
}
let result = arr.join(' ')
// 3
let queryStr = location.search
// 4, 5
const queryStrToObj = (string, object) => {
    let [k, v] = string.split('=')
    if (object[k] === undefined) {
        object[k] = v
    } else {
        object[k] = [...object[k], v]
    }
}

let pairs = queryStr.slice(1).split('&')
let o = {}
for (let i = 0; i < pairs.length; i++) {
    let pair = pairs[i]
    queryStrToObj(pair, o)
}

Jul 25 '19 04:07 ghost

1. 遇到保留字符和#，encodeURIComponent会转义，而encodeURI不会。
2. Object.keys(object1).map(key => `${key}=${encodeURIComponent(object1[key])}`).join('&')
3. location.search
4. 
// zxx: 有bug
decodeURIComponent(location.search).match(/([^?=&]+)=([^&]+)/g).reduce((obj, item) =>  {
  let [key, val] = item.split('=')
  obj[key] = val
  return obj
},{})
5. 
decodeURIComponent(location.search).match(/([^?=&]+)=([^&]+)/g).reduce((obj, item) =>  {
  let [key, val] = item.split('=')
  if (obj.hasOwnProperty(key)){
    Array.isArray(obj[key]) ? obj[key].push(val) : obj[key] = [obj[key], val]
  } else {
    obj[key] = val
  }
  return obj
},{})

Jul 25 '19 04:07 asyncguo

const object1 = {
	userid: 123,
	username: '王二',
	tel: '13208033621'
};

/*
1、 encodeURI 和 encodeURIComponent 都是编码URI的
	但是encodeURIComponent可编码的字符集更广一点
*/

//2、
let arr = [];
for (let i in object1) {
	arr.push(`${i}=${object1[i]}`);
}
encodeURI(arr.join('&'));

//3、
let url = window.location.href;
let query = url.slice(url.indexOf('?'));

//4、
// zxx: 严重bug，object2返回格式类似{0: undefiend, 1: undefined, ...}
let objectArr = query.slice(1).split('&');
let object2 = {};
let splitCon;
for (let item in objectArr) {
	splitCon = item.split('=');
	object2[splitCon[0]] = splitCon[1];
	splitCon = [];
}

//5、
let object3 = {};
for (let item in objectArr) {
	splitCon = item.split('=');
	if (object3.hasOwnProperty(splitCon[0])) {
		Array.isArray(object3[splitCon[0]])
		? object3[splitCon[0]].push(splitCon[1])
		: object3[splitCon[0]] = [object3[splitCon[0]], splitCon[1]];
	} else {
		object3[splitCon[0]] = splitCon[1];
	}
	splitCon = [];
}

Jul 25 '19 07:07 zzzluyan

1.encodeURI 部分转译，而encodeURIComponent会全部转译非普通字符

2.encodeURI(Object.entries(object1).reduce(function(str,cur){
   str+=`${cur[0]}=${cur[1]}&`
   return str 
},'').slice(0,-1))
3.window.location.search
//zxx: 有bug
4.var obj = {}
location.search.slice(1).split('&').forEach(i => obj[i.split('=')[0]] = decodeURI(i.split('=')[1]))
console.log(obj)
5.var obj = {}
console.log(location.search.slice(1).split('&'))
location.search.slice(1).split('&').forEach(i =>{
 obj[i.split('=')[0]] ===undefined ?
obj[i.split('=')[0]]= decodeURI(i.split('=')[1]): 
obj[i.split('=')[0]] = obj[i.split('=')[0]].split().concat(decodeURI(i.split('=')[1]))
})
console.log(obj)

Jul 25 '19 07:07 liuyueji

var object={
			userid:123,
			username:'王二',
			tel:'123082312'
		};
		//第一题
		encodeURI和encodeURIComponent方法两者都不会对  ASCII字母、数字、
		标点符号： - _ . ! ~ * ' ( ) 进行编码；
		这个字符：;/?:@&=+$,#  encodeURI不能编码而encodeURIComponent方法则可以编码,
		所以encodeURIComponent比encodeURI的编码范围更大;
        
        //第二题
        var fval={};
        for(var i in object){
           fval=fval+' & '+encodeURIComponent(object[i]);
        }
        console.log('2、',fval.replace(' & ',''));
        //第三题
        console.log('3、',location.search);
         
        //第四题
        var seachv = decodeURIComponent(location.search).slice(1).split("&");
		var newobj = {}
		for(var i=0;i<seachv.length;i++){
		  newobj=newobj+','+seachv[i].replace('=','：').replace(',','');
		}
	    console.log('4、',newobj.replace(',',''));
	    
	    // 第五题
		var pre5 = {}
		// 创建一个 URLSearchParams 对象
	    var searchParams = new URLSearchParams(decodeURIComponent(location.search).slice(1));
	      // 显示键/值对
		for(var [key,val] of searchParams.entries()) {
		 if(!pre5[key]) {
		   pre5[key] = val;
		 }else {
		   pre5[key] = [pre5[key]];
		   pre5[key].push(val);
		 }
		}
		console.log('5、',pre5);

Jul 25 '19 08:07 WGHwebitem

// 1. 猜测答案：encodeURIComponent比encodeURI多了component，即组件一词，
// 推测前者处理字符的能力是后者的一部分，后者是前者的超集。

// 2. 
const obj = {
	'userid': 123,
	'username': '王二',
	'tel': '13223453456'
}
let arr = [], firstAns = '';
for (let key in obj) {
	arr.push(key+'='+obj[key]);
} 
firstAns = arr.join('&');
console.info(firstAns)  // userid=123&username=王二&tel=13223453456

// 3.
let secondAns = '', hrefStr = window.location.href;
secondAns = '?' + hrefStr.split('?')[0];

// 4.  有bug哦
let thirdAns = {}, arr3 = [];
arr3 =  hrefStr.split('?').map(val => val.split('='));
thirdAns = new Map(arr3);

// 5.
let fourthAns = {};
let arr4 = [];
arr3.map((val, index) => {
   arr3.map((secVal, secIndex) => {
     if (val[0]===secVal[0]){
	    fourthAns[val[0]] = [val[1]];
	 } else {
	    fourthAns[val[0]] = val[1];
	 }
   })
})

Jul 25 '19 08:07 EmmaYXY

1

encodeURI主要用于对整个URI进行编码，对于URI的特殊字符，会忽略对其的编码，
encodeURIComponent主要用于对URI后的参数进行编码，不会忽略对特殊字符的编码。

2

Object.keys(object1).map(function(index){
         str.push(index+'='+encodeURIComponent(object1[index]))
    });
    var str1=str.join('&')
console.log(str1)

3

   location.search

4,5

//zxx: 有bug 例如?a=1&b=2&url=a.html?b=1，b=1应该忽略
 var str2 = decodeURIComponent(location.search).slice(1).split('&');
        var obj = {}
        for (var i = 0; i < str2.length; i++) {
            var arr = str2[i].split('=');
            var key = arr[0];
            var value = arr[1];
            if (!obj[key]) {
                obj[key] = value;
            } else {
                console.log(value);
               // 有致命问题，如果value本身内容有逗号
                obj[key] = (obj[key] + ',' + value).split(',')
                console.log(obj[key]);
            }
        }

Jul 25 '19 09:07 whrice

1.encodeURL是对整个url进行编码(合法字符不会被编码)，encodeURLComponent编码时，将URL分成不同的部分(比如协议、域名、端口、地址、查询字符串)，对分隔各个部分的字符及查询字符串进行编码

let keys = Object.keys(object1);
let values = Object.values(object1);
let newString = '';
for(var i = 0; i < values.length; i++) {
    newString += keys[i] + '=' + encodeURI(values[i]) + '&'
}
newString = newString.slice(0,newString.length - 1)
console.log(newString)

window.location.search

// zxx: 和上一位bug一样，下面也是
let query = window.location.search;
let arr = query.slice(1,query.length).split("&");
let obj = {};
arr.map(item => {
    let newItem = item.split("=");
    obj[newItem[0]] = newItem[1]
})
console.log(obj)

let query = window.location.search;
let arr = query.slice(1,query.length).split("&");
let obj = {};
arr.map(item => {
     if(item) {
         let newItem = item.split("=");
         let keys = Object.keys(obj);
         if(keys.indexOf(newItem[0]) > -1) {
             let value = obj[newItem[0]].split(",");
             value.push(newItem[1])
             obj[newItem[0]] = value
         } else {
             obj[newItem[0]] = newItem[1]  
         }
     }
})
console.log(obj)

Jul 25 '19 11:07 ylqlalala

第一题

编码范围不一样 encodeURI 不编码 # ? / @，encodeURIComponent 会

第二题

var obj={
    userid: 123,
    username: '王二',
    tel: '13838384388'
}

Object.keys(obj).map(key => key + "=" + encodeURIComponent(obj[key])).join("&")

第三题

location.search

第四题

// zxx: 有bug
let search = location.search.substr(1)
let search_arr = search.split("&")
let ret = {};
search_arr.forEach(v=>{
    let arr = v.split('=')
    ret[arr[0]] = decodeURIComponent(arr[1])
})
console.log(ret)

第五题

let search = location.search.substr(1)
let search_arr = search.split("&")
let ret = {};
search_arr.forEach(v=>{
    let arr = v.split('=')
    if(ret[arr[0]]){
        let temp = ret[arr[0]] 
        ret[arr[0]] = [];
        ret[arr[0]].push(temp,arr[1])
    }else{
        ret[arr[0]] = decodeURIComponent(arr[1])
    }
})
console.log(ret)

Jul 25 '19 11:07 bugaosunihhh

const object1 = {
    userid: 123,
    username: '王二',
    tel: '13208033621'
}

// 1.encodeURI不会对'@#￥&,/?'进行编码，而encodeURIComponent会

// 2.
function getSearch(p) {
    const keys = Object.keys(p);
    let str = '';
    keys.forEach(key => {
        if (str) str += '&';
        str += `${key}=${encodeURIComponent(p[key])}`;
    })
    return str;
}
getSearch(object1);

// 3.
location.search

// 4.
// zxx: 有bug
function getParams() {
    const paramArr = location.search.slice(1).split('&');
    let obj = {};
    paramArr.forEach(item => {
        const keyVal = item.split('=');
        // 排除&&的情况，并且不重复
        if (keyVal[0] && !obj.hasOwnProperty(keyVal[0])) {
            obj[keyVal[0]] = keyVal[1] ? keyVal[1] : '';
        }
    })
    return obj
}
getParams()

// 5.
function getParams2() {
    const paramArr = location.search.slice(1).split('&');
    let obj = {};
    paramArr.forEach(item => {
        const keyVal = item.split('=');
        // 排除&&的情况
        if (keyVal[0]) {
            // 判断是否已有该属性
            if (obj.hasOwnProperty(keyVal[0])) {
                // 判断该属性的值是否为数组
                if (obj[keyVal[0]] instanceof Array) {
                    obj[keyVal[0]].push(keyVal[1] ? keyVal[1] : '');
                } else {
                    // 第二次出现同一参数的处理
                    obj[keyVal[0]] = [obj[keyVal[0]], keyVal[1] ? keyVal[1] : ''];
                }
            } else {
                // 第一次出现该参数的处理
                obj[keyVal[0]] = keyVal[1] ? keyVal[1] : '';
            }
        }
    })
    return obj
}
getParams2()

Jul 25 '19 12:07 xuejianrong

const object1 = {
	userid: 123,
	username: '王二',
	tel: '13208033621'
};

// 第一题
console.log("第一题:", 'encodeURIComponent 会转换英文符号，encodeURI不会');

// 第二题
let object1String = '';
for (let [key, value] of Object.entries(object1)) {
	object1String += (object1String === '' ? '' : '&') + key + '=' + encodeURI(value);
}
console.log("第二题:", object1String);

// 第三题
const searchString = location.search;
console.log("第三题:", searchString);

// 第四题 和 第五题

// 基于 & 拆分成数组
// zxx: 测试跑下来有bug，复杂的查询例如url=a.html?b=1被舍弃了
const searchArray = searchString.substr(1).split('&');

const searchObject = {};
for (var i = 0, len = searchArray.length; i < len; i++) {
	const itemArray = searchArray[i].split('=');

	// 如果有超出两个等号，则忽略
	if (itemArray.length !== 2) {
		continue;
	}

	const name = itemArray[0];
	const value = decodeURI(itemArray[1]);

	// 如果 name 和 value 有一个不存在则什么都不做
	if (!name || !value) {
		continue;
	}

	// 原来是否有数据
	const hadValue = searchObject[name];

	// 如果对象里面没有则直接设置
	if (!hadValue) {
		searchObject[name] = value;
		continue;
	}

	// 如果原始对象已经是个数组直接push 进去
	if (hadValue instanceof Array) {
		hadValue.push(value);
		continue;
	}

	// 如果原始对象已经存在让这个变成数组
	if (hadValue) {
		searchObject[name] = [hadValue, value];
	}
}

console.log("第四题，第五题:", searchObject);

Jul 25 '19 13:07 ziven27

1.encodeURI不转译特殊字符，而encodeURICompoent转译所有字符 2.

Object.keys(object1).map(key => key + "=" + encodeURIComponent(object1[key])).join("&")

location.search

const obj = {}
for (var p of new URLSearchParams(location.search).entries()){
 obj[p[0]]=p[1]
};
console.log(obj)

// 题意是如果只有1个值，还是字符串，多值才是数组
const obj1 = {}
const myParams = new URLSearchParams(location.search)
for (var p of myParams.keys()){
obj[p]=myParams.getAll(p)
};
console.log(obj1)
// zxx: 调整下
const obj1 = {}
const myParams = new URLSearchParams(location.search)
for (var p of myParams.keys()){
obj[p]=myParams.getAll(p).length > 1 ? myParams.getAll(p) : myParams.get(p);
};

Jul 25 '19 15:07 GitHdu

第一题

 encodeURI无法对";,/?:@&=+$#"这类字符进行编译

第二题

 const object1 = {
      userid: 123,
      username: '王二',
      tel: '13208033621',
    }
    let strUrl = '';
    for (let [key, value] of Object.entries(object1)) {
      strUrl += `${key}=${encodeURI(value)}&`
    }
    strUrl = strUrl.substring(0,strUrl.length-1);

第三题按照题目意思我觉得应该就是 query的值为当前URL地址栏中的第一的?后面查询的内容,这里的query就是我们需要的值

 let query = window.location.search.substring(1);

但是如果是将URL地址栏中的第一的?后面查询的内容转为json格式中的第一个键值对那么答案为：

 let vars = query.split('&');
    console.log(vars);
    let keyOne = vars[0].split('=')[0];
    let valOne = vars[0].split('=')[1];

第四题和第五题一起

// 虽然写了很多，可惜有bug
    const urlObj = {};
    vars.forEach( (item) => {
      // 根据urlObj是否含有相同key
      if( !urlObj[item.split('=')[0]] ){
        urlObj[item.split('=')[0]]= decodeURI(item.split('=')[1]);
      } else {
        // 这里不可以连续push 因为push返回的添加项后的数值长度
        // let arr = [].push(item.split('=')[1])
        let val = urlObj[item.split('=')[0]]
        let arr = [val];
       // console.log(val);
       // console.log(item.split('=')[1]);
        let newVal = arr.push(item.split('=')[1]);
        urlObj[item.split('=')[0]] = arr;
      }
    })

Jul 26 '19 01:07 zengqingxiao

1.encodeURI()是对整个URL进行编码，encodeURIComponent()是对URL中的参数或者URL后面的一部分进行编码。 2. Object.keys(object1).map(key => key + "=" + encodeURIComponent(object1[key])).join("&") 3. window.location.search

4 var key = Object.keys(object1); var value = Object.values(object1); let str = ''; for(var i = 0; i < value.length; i++) { str += keys[i] + '=' + value[i] + '&' } str1 = str.slice(0,str.length - 1)//去除最后一个&

//等待大神讲解的细一点

Jul 26 '19 02:07 347235420

// 1.encodeURI是对URI进行完整的编码，不能转义分隔URI各个部分的标点符号，
// 而encodeURIComponent可以转义用于分隔URI各个部分的标点符号，常用于查询参数特殊字符的转义

// 2.
var paramStr = Object.keys(object1).map(i => `${i}=${encodeURIComponent(object1[i])}`).join('&')
console.log(paramStr)

// 3.
var searchStr = location.search
console.log(searchStr)

// 4.
// 有bug
var object2 = {}
searchStr.slice(1).split('&').forEach(item => {
    var o = item.split('=')
    object2[o[0]] = o[1]
})
console.log(object2)

// 5.
var object3 = {}
searchStr.slice(1).split('&').forEach(item => {
    var o = item.split('=')
    if (object3.hasOwnProperty(o[0])) {
        object3[o[0]] = [].concat(object3[o[0]], o[1])
    } else {
        object3[o[0]] = o[1]
    }
})
console.log(object3)

Jul 26 '19 02:07 zy017

1. encodeURL()不会对本身属性url的特殊字符进行编码，例如“冒号、正斜杠、问号、井号”；而encodeURLComponent()则会对它发现的任何非标准字符进行编码。
2. 
let url1 = encodeURI(JSON.stringify(object1).replace(/:/g,'=').replace(/[{}""]/g,'').replace(/,/g,'&'))
3.
let param = document.location.search
// 因为url中有hash并且在前面时获取不到所以重置
if(!param){
  param ='?'+ document.location.hash.split('?')[1]
}
4.
//zxx: 有bug
let obj = {}
param.split('?')[1].split('&').forEach(item=>{
   let arr = item.split('=')
   obj[arr[0]]=arr[1]
})
5.
let obj = {}
param.split('?')[1].split('&').forEach(item=>{
   let arr = item.split('=')
   if(Object.keys(obj).includes(arr[0])){
     obj[arr[0]]=[].concat(obj[arr[0]],arr[1])
   }else{
    obj[arr[0]]=arr[1]
   }
})

Jul 26 '19 02:07 sghweb

quiz quiz copied to clipboard

JS基础测试35期

第 1 题：

第 2 题：

第 3 题：

第 4、5 题：

第一题

第二题

第三题

第四题

第五题

quiz
quiz copied to clipboard