实用小知识点总结
1、JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
2、请用 js 去除字符串空格？
方法一：使用 replace 正则匹配的方法
去除所有空格: str = str.replace (/s*/g,"");
去除两头空格: str = str.replace (/^s|s$/g,"");
去除左空格： str = str.replace (/^s*/, “”);
去除右空格： str = str.replace (/(s*$)/g, "");
str 为要去除空格的字符串，实例如下：
var str = " 23 23 ";
var str2 = str.replace(/s*/g,"");
console.log(str2); // 2323
方法二：使用 str.trim () 方法
str.trim () 局限性：无法去除中间的空格，实例如下：
var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理，str.trimLeft ()，str.trimRight () 分别用于去除字符串左右空格。
方法三：使用 jquery,$.trim (str) 方法
$.trim (str) 局限性：无法去除中间的空格，实例如下：
var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming
3、你如何获取浏览器 URL 中查询字符串中的参数？
测试地址为：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23
实例如下：
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming
4、js 字符串操作函数
我这里只是列举了常用的字符串函数，具体使用方法，请参考网址。
concat () – 将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf () – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
charAt () – 返回指定位置的字符。
lastIndexOf () – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。
match () – 检查一个字符串是否匹配一个正则表达式。
substr () 函数 – 返回从 string 的 startPos 位置，长度为 length 的字符串
substring () – 返回字符串的一个子串。传入参数是起始位置和结束位置。
slice () – 提取字符串的一部分，并返回一个新字符串。
replace () – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
search () – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
split () – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase () – 将整个字符串转成小写字母。
toUpperCase () – 将整个字符串转成大写字母。
5、怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment () // 创建一个 DOM 片段
createElement () // 创建一个具体的元素
createTextNode () // 创建一个文本节点
2）添加、移除、替换、插入
appendChild () // 添加
removeChild () // 移除
replaceChild () // 替换
insertBefore () // 插入
3）查找
getElementsByTagName () // 通过标签名称
getElementsByName () // 通过元素的 Name 属性的值
getElementById () // 通过元素 Id，唯一性
6、写出 3 个使用 this 的典型应用
（1）、在 html 元素事件属性中使用，如：
<input type=”button” onclick=”showInfo (this);” value=” 点击一下”/>
（2）、构造函数
function Animal(name, color) {
this.name = name;
this.color = color;
}
（3）、input 点击，获取值
<input type="button" id="text" value="点击一下" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此处的this是按钮元素
}
</script>
(4)、apply ()/call () 求数组最值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458
Array 相关的属性和方法
这里只是做了相关的列举，具体的使用方法，请参考网址。
Array 对象属性
constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
Array 对象方法
concat () 连接两个或更多的数组，并返回结果。
join () 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop () 删除并返回数组的最后一个元素。
shift () 删除并返回数组的第一个元素
push () 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift () 向数组的开头添加一个或更多元素，并返回新的长度。
reverse () 颠倒数组中元素的顺序。
slice () 从某个已有的数组返回选定的元素
sort () 对数组的元素进行排序
splice () 删除元素，并向数组添加新元素。
toSource () 返回该对象的源代码。
toString () 把数组转换为字符串，并返回结果。
toLocaleString () 把数组转换为本地数组，并返回结果。
valueOf () 返回数组对象的原始值
什么是跨域？跨域请求资源的方法有哪些？
1、什么是跨域？
由于浏览器同源策略，凡是发送请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况：
网络协议不同，如 http 协议访问 https 协议。
端口不同，如 80 端口访问 8080 端口。
域名不同，如 http://qianduanblog.com 访问 http://baidu.com。
子域名不同，如 http://abc.qianduanblog.com 访问 http://def.qianduanblog.com。
域名和域名对应 ip, 如 http://www.a.com 访问 20.205.28.90.
2、跨域请求资源的方法：
(1)、porxy 代理
定义和用法：proxy 代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
实现方法：通过 nginx 代理；
注意点：1、如果你代理的是 https 协议的请求，那么你的 proxy 首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定义和用法：通过动态插入一个 script 标签。浏览器对 script 的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
特点：通过情况下，通过动态创建 script 来读取他域的动态资源，获取的数据一般为 json 格式。
实例如下：
<script>
function testjsonp(data) {
console.log(data.name); // 获取返回的结果
}
</script>
<script>
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
缺点：
1、这种方式无法发送 post 请求（这里）
2、另外要确定 jsonp 的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
sessionStorage 、localStorage 和 cookie 之间的区别
共同点：用于浏览器端存储的缓存数据
不同点：
(1)、存储内容是否发送到服务器端：当设置了 Cookie 后，数据会发送到服务器端，造成一定的宽带浪费；
web storage, 会将数据保存到本地，不会造成宽带浪费；
(2)、数据存储大小不同：Cookie 数据不能超过 4K, 适用于会话标识；web storage 数据存储可以达到 5M;
(3)、数据存储的有效期限不同：cookie 只在设置了 Cookid 过期时间之前一直有效，即使关闭窗口或者浏览器；
sessionStorage, 仅在关闭浏览器之前有效；localStorage, 数据存储永久有效；
(4)、作用域不同：cookie 和 localStorage 是在同源同窗口中都是共享的；sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；
Web Storage 与 Cookie 相比存在的优势：
(1)、存储空间更大：IE8 下每个独立的存储空间为 10M，其他浏览器实现略有不同，但都比 Cookie 要大很多。
(2)、存储内容不会发送到服务器：当设置了 Cookie 后，Cookie 的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而 Web Storage 中的数据则仅仅是存在本地，不会与服务器发生任何交互。
(3)、更多丰富易用的接口：Web Storage 提供了一套更为丰富的接口，如 setItem,getItem,removeItem,clear 等，使得数据操作更为简便。cookie 需要自己封装。
(4)、独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。