常见面试题总结-----（第1篇）-优快云博客

本文总结了前端开发中常用的JavaScript技巧，包括获取URL参数、数组与字符串操作、DOM节点管理及样式控制等，适合前端开发者学习参考。

以下是一些面试中经常会遇到的经典面试题以及自己在面试过程中遇到的一些问题，以做总结备用和分享～

1. 如何获取浏览器URL中查询字符串中的参数？

// 若测试地址为: http://www.waterlily.com/haha.html?name=lily&id=666

 1 function getWindowHref(){
 2    var sHref = window.location.href;   
 3     var args = sHref.split('?');     //["http://www.waterlily.com/haha.html", "name=lily&id=666"]
 4     if(args[0] == sHref){
 5         return "";
 6      }
 7     var arr = args[1].split('&');     //["name=lily", "id=666"]
 8     var obj = {};
 9     for(var i = 0;i< arr.length;i++){
10         var arg = arr[i].split('=');  //["name", "lily"] ["id", "666"]
11         obj[arg[0]] = arg[1];
12      }
13     return obj;
14 }
15 
16 var href = showWindowHref();  // obj
17 console.log(href['name']);  // lily
18 console.log(href.name);  // lily

2. js 数组操作函数

shift() : 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined （前删，返回值）

unshift() :将参数添加到原数组开头，并返回数组的长度（前增，返回长度）

pop() :删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined （后删，返回值）

push() :将参数添加到原数组末尾，并返回数组的长度（后增，返回长度）

reverse :将数组反序

sort(orderfunction) :按指定的参数对数组进行排序

concat(元素1，元素2) :返回一拼接新数组，是将参数添加到原数组中构成的

splice(start,deleteCount,val1,val2,...) : 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...

slice(start,end): 返回从原数组中指定开始下标到结束下标之间的项组成的切割新数组

join(separator): 将数组的元素组起一个分隔符拼接字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

3. js字符串操作函数

indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。

substring(开始索引,结束索引) – 返回字符串的一个子串。传入参数是起始位置和结束位置。
substr() 函数 -- 返回从string的startPos位置，长度为length的字符串。
slice() – 提取字符串的一部分，并返回一个新字符串。
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。

match() – 检查一个字符串是否匹配一个正则表达式。
replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323

search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。

length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
charAt() – 返回指定位置的字符。
toUpperCase() – 将整个字符串转成大写字母。
toLowerCase() – 将整个字符串转成小写字母。
trim() - 去除字符串首位空格

4. 原生js中，节点相关

 1）创建新节点

　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

 2）追加、插入、移除、替换

　　appendChild() //追加
   insertBefore() //插入
   removeChild() //移除　
   replaceChild() //替换

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性
   getElementsByClassName() //通过元素class，有兼容

4）节点关系

   1 父关系API 
     parentNode 父节点 
     parentElement父元素

   2 子关系API 
      children 子元素 （获取第一个子节点，会把他当换行和空格一起解）
      childNodes 子节点（通过childNodes获取子节点，数组，会把换行和空格也当成是节点信息）

      firstElementChild 第一个子元素 
 firstChild 第一个子节点

 lastElementChild 最后一个子元素 
 lastChild 最后一个子节点 

 3 兄弟关系的API 
 previousSibling 节点的上一个兄弟节点 
 previousElementSibling 节点的上一个兄弟元素（ie9以下不支持） 
 nextSibling 节点的下一个兄弟节点
 nextElementSibling 节点的下一个兄弟元素（ie9以下不支持）（通过children来获取子节点）

5 节点属性API
     setAttribute(name,value) 给元素设置属性
     getAttribute(name)   获取元素属性

5 原生js添加、修改样式


 1） 直接修改元素的样式
    elem.style.color = 'red';
    elem.style.setProperty('font-size', '16px');
    elem.style.removeProperty('color');

 2） 动态添加样式
    var style = document.createElement('style');
    style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
    document.head.appendChild(style);

 window.getComputedStyle