1、有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
主要考察字符串的split()的方法：把一个字符串分割成字符串数组。
- 语法：stringObject.split(separtor,howmany)
separtor：必需，字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。- 返回值：一个字符串数组。
该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。- 注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
代码.png
运行以后.png
2、看下面代码，给出输出结果
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i)
},0)
};
答案：4 4 4
原因：setTimeout会在js引擎空闲的时候再执行，JavaScript事件处理器在线程空闲之前不会运行。
如何让上述代码输出1 2 3？
for(var i=1;i<=3;i++){
//改成立即执行函数
setTimeout((function(a){
console.log(a);
})(i),0);
};
答案：1 2 3
3、数组去重
var arr=[1,2,3,1,3,2,3,5,6,5]
- 第一种方法（for循环的方法）
var result=[];
for(var i=0;i<arr.length;i++){
var flag=true;
for(var j=i;j<arr.length;j++){
if(arr[i]==arr[j+1]){
flag=false;
break;
}
}
if(flag){
result.push(arr[i]);
}
}
console.log(result);
- 第二种方法（对象的方法）
var arr1=[];
var obj={};
for(var i=0;i<arr.length;i++){
if(!obj[arr[i]]){
arr1.push(arr[i]);
obj[arr[i]]=1;
}
}
console.log(arr1);
- 第三种方法（用indexOf()）
var arr2=[];
for(var i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])===-1){
arr2.push(arr[i]);
}
}
console.log(arr2);
- 第四种方法（es6的Set数据结构）
let s = new Set(arr);
console.log(s);
4、去除字符串两头的空格
var str=" Hello World "
- 方法一（for循环）
//去掉头部空格
var str1;
for(var i=0;i<str.length;i++){
if(str[i]!=" "){
str1=str.substring(i);
break;
}
}
//去掉尾部空格
var str2;
for(var j=str1.length-1;j>=0;j--){
if(str1[j]!=" "){
str2=str1.substring(0,j+1);
//提取字符串substring(0,j+1) [)左闭右开；第一个参数是开始位置，第二个参数是结束位置
}
}
- 方法二（RegExp正则表达式）
var p=/^\s+|\s+$/g;
var s=str.replace(p,"");
console.log(s);
- 方法三（jquery）
需要先引入jquery库
var str1=$.trim(str);
console.log(str1);
5、倒计时
距离2018年还有多少天
- 第一种做法
<body>
<div id="time"></div>
<script type="text/javascript">
var time=document.getElementById("time");
function clock(){
var targetDate= new Date(2018,0,1);
var currentDate= new Date();
var remainTime=targetDate-currentDate;
//天数
remainDay=parseInt(remainTime/1000/60/60/24);
//小时
remainHours=parseInt(remainTime/1000/60/60%24);
//分钟
remainMinutes=parseInt(remainTime/1000/60%60);
//秒
remainSecond=parseInt(remainTime/1000%60);
time.innerHTML=remainDay+"天"+remainHours+"小时"+remainMinutes+"分钟"+remainSecond+"秒"
setTimeout(clock,1000);
}
clock();
</script>
</body>
- 第二种做法
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
var t=null
function clock(time){
var targetDate=new Date(time);
var nowDate=new Date();
var remainDate= targetDate-nowDate;
if(remainDate<0){
clearInterval(t);
}
//天数
var remainDay=parseInt(remainDate/1000/60/60/24);
//小时
var remainHours=parseInt(remainDate/1000/60/60%24);
//分钟
var remainMinute=parseInt(remainDate/1000/60%60);
//秒数
var remainSecond=parseInt(remainDate/1000%60);
box.innerHTML=remainDay+"天"+remainHours+"小时"+remainMinute+"分钟"+remainSecond+"秒"
}
clock("2018/1/1");
t=setInterval(clock,1000,"2018/1/1");
//定时器后面可以传值
</script>
</body>
- 第三种做法
<body>
<ul>
<li id="time_d"></li>
<li id="time_h"></li>
<li id="time_m"></li>
<li id="time_s"></li>
</ul>
<script src="lib/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
showTime();
});
function showTime(){
var time_start=new Date().getTime();//获取当前时间
var time_end=new Date("2018/10/1 00:00:00").getTime();//设置过去的时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day;
}
if(int_hour < 10){
int_hour = "0" + int_hour;
}
if(int_minute < 10){
int_minute = "0" + int_minute;
}
if(int_second < 10){
int_second = "0" + int_second;
}
// 显示时间
$("#time_d").html(int_day);
$("#time_h").html(int_hour);
$("#time_m").html(int_minute);
$("#time_s").html(int_second);
// 设置定时器
setTimeout("showTime()",1000);
}
</script>
</body>
6、cookies、sessionStorage与localStorage的区别
（1）cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
（2）存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 可以达到5M或更大。
（3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，localStorage：始终有效，窗口或浏览器关闭也一直保存，cookie只在设置的cookie过期时间之前一直有效
（4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
网友评论