Javascript中常用方法简介
Array数组常用方法
先创建一个数组var abc = [1,2,3,4,5,6,7,8,9];
(1)pop(); 这个方法会删除数组的最后一项并返回删除掉的值。
比如：console.log(abc.pop());//9; console.log(abc); //[1,2,3,4,5,6,7,8];
(2)push(); 这个方法会往数组的最后面添加一个值并返回添加的值。
比如：console.log(abc.push(10));//10; console.log(abc); //[1,2,3,4,5,6,7,8,9,10];
(3)shift(); 这个方法会删除数组的第一项并返回删除掉的值。
比如：console.log(abc.shift());//1; console.log(abc); //[2,3,4,5,6,7,8,9];
(4)unshift(); 这个方法会在数组的第一项前添加一个值并返回数组的长度。
比如：console.log(abc.unshift(0));//10; console.log(abc); //[0,1,2,3,4,5,6,7,8,9];
(5)reverse(); 反转数组顺序。
比如:abc.reverse(); console.log(abc); // [9,8,7,6,5,4,3,2,1];
(6)sort(); 数组排序，不过是按照字符串的方式来排序。
比如: var abb = [0,1,5,10,15]; abb.sort(); console.log(abb); //[0,1,10,15,5];
(7)concat(); 该方法可以基与当前数组中的所有项创建一个新数组。
比如:var colors = ["red","blue","yellow"]; var colors2 = colors.concat("black","orange"); //["red", "blue", "yellow", "black", "orange"];
(8)slice();该方法可以理解为截取数组，接受2个参数,只填一个参数代表从该位置截取到最后，填两个参数代表要截取的头和尾的位置，但是取头不取尾。
比如：var colors = ["red", "blue", "yellow", "black", "orange"];
colors.slice(1);//["blue", "yellow", "black", "orange"];
colors.slice(1,3);//["blue", "yellow"];
(9)splice(); splice是数组当中最强大的方法了，其用法用很多。
删除：可以删除任意数量的项，只需要指定2个参数。例如splice(0,2);会删除数组中的前面两项。
插入：可以向指定的位置插入任意数量的项，比如：splice(2,0,"red”,"blue”)会从数组的第二个位置开始添加red和blue两项。
替换：可以删除指定的位置的项并插入任意数量的项，比如：splice(2,2,"red”,"blue”)会从数组的第二个位置删除两项并添加red和blue两项。
splice()始终返回一个数组，该数组从原始数组中删除的项，没有的话就返回空数组。
(10)indexOf(); 该方法用来检索某项数组出现的位置,出现多次的话只记录第一次出现的位置。
比如：var abc = [1,2,3,4,5,6,7,8,9]; abc.indexOf(5); //4;
注：如果没有检索到值的话会返回-1;
比如：var abc = [1,2,3,4,5,6,7,8,9]; abc.indexOf(-10); //-1;
(11)join();将数组转化为字符串，括号内标识连接的方式。
比如：var abc = ["red","blue","green","yellow"]; abc.join("+"); //"red+blue+green+yellow";
数组去重
Array.prototype.unique=function(){
var temp={},
arr=[],
len=this.length;
for(var i=0;i<len;i++){
if( !temp[this[i]] ){
temp[this[i]] = "abc";
arr.push(this[i]);
}
}
return arr;
}
String字符串常用方法
创一个字符串 var abc = “helloworld”;
(1)charAt();该方法会返回对应位置所在的字符。
比如：console.log(abc.charAt(1)); //e
(2)concat(); 拼接字符串;
比如 var a = "hello"; a.concat("world"); // helloworld;
(3)slice(); 截取字符串;接受2个参数,只填一个参数代表从该位置截取到最后，填两个参数代表要截取的头和尾的位置，但是取头不取尾。
(4)substring(); 截取字符串;接受2个参数,只填一个参数代表从该位置截取到最后，填两个参数代表要截取的头和尾的位置，但是取头不取尾。
注：slice和substring的区别在于他们的参数为负数的时候，slice会把负数与字符串的长度相加，而substring会把负数转化为0。
比如 var a = "hello"; a.slice(-3) = a.slice(2); //llo;
var a = "hello"; a.substring(-3) = a.substring(0); //hello;
(5)substr(); 截取字符串;接受2个参数,只填一个参数代表从该位置截取到最后，填两个参数代表要截取的开始位置和长度;
比如 var a = “helloworld”； a.substr(3,7); //代表截取字符串第三个位置开始截取7个字符串，故返回"loworld";
(6)indexOf(); 该方法用来检索某个字符出现的位置。
(7)toLocaleUpperCase(); 字符串转大写。
(8)toLocaleLowerCase(); 字符串转小写。
(9)split(); 切割字符串并放在一个数组中,括号内表示切割的标识。
比如: var abc = "red,blue,green,yellow"; abc.split(","); // ["red","blue","green","yellow"];
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
1 冒泡事件：
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。
html:
<div>
<input type="button" value="测试事件冒泡" />
</div>
js:
var $input = document.getElementsByTagName("input")[0];
var $div = document.getElementsByTagName("div")[0];
var $body = document.getElementsByTagName("body")[0];
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
}
$div.onclick = function(e){
this.style.border = "5px solid green"
alert("green")
}
$body.onclick = function(e){
this.style.border = "5px solid yellow"
alert("yellow")
}
效果：依次弹出”red“,"green","yellow"。这就是事件冒泡：触发button这个元素，却连同父元素绑定的事件一同触发。
2 阻止事件冒泡
如果对input的事件绑定改为：
$input.onclick = function(e){
this.style.border = "5px solid red"
var e = e || window.e;
alert("red")
e.stopPropagation();
}
这个时候只会弹出”red“，因为阻止了事件冒泡。
3 事件捕获：
从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
$input.addEventListener("click", function(){
this.style.border = "5px solid red";
alert("red")
}, true)
$div.addEventListener("click", function(){
this.style.border = "5px solid green";
alert("green")
}, true)
$body.addEventListener("click", function(){
this.style.border = "5px solid yellow";
alert("yellow")
}, true)
这个时候依次弹出”yellow“,"green","red"。这就是事件的捕获。
如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,"green","yellow"。这是因为在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
4 事件委托
例子：给列表li添加事件，并保证动态添加的元素都有该事件。
html代码：
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
oUl.onmouseover=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement; // 冒泡事件中target指向触发事件的元素（先li后ul），
if(target.nodeName.toLowerCase()=="li")//DOM节点名都是大写
target.style.background="red"; console.log(target); }
oUl.onmouseout=function(ev){
var ev=ev||window.event;//做兼容
var target=ev.target||ev.srcElement;//做兼容srcElement是IE下的
if(target.nodeName.toLowerCase()=="li") {
target.style.background="";
}
}
}
function showToast(msg, duration) {
duration = duration || 1500;
var wrap = document.createElement('div');
wrap.style.cssText = 'position:fixed;top:50%;left:0;z-index:990;margin-left:10%;width:80%;text-align:center;transform:translateY(-50%)';
var inner = document.createElement('span');
inner.style.cssText = 'display:inline-block;padding:7px 12px;background-color:black;color:white;opacity:.8;border-radius:6px;word-break:all';
inner.innerText = msg;
wrap.appendChild(inner);
document.body.appendChild(wrap);
var toast = null;
var func = function () {
wrap.style.display = 'none';
};
toast = window.setTimeout(func, duration);
showToast = function (msg) {
window.clearInterval(toast);
inner.innerText = msg;
wrap.style.display = 'block';
toast = window.setTimeout(func, duration);
};
}
function getSearch(search) {
var map = Object.create(null);
search = search.substring(1);
var substrs = search.split('&');
for (var index = 0, substr, len = substrs.length; index < len; index += 1) {
substr = substrs[index].split('=');
substr[0] && (map[substr[0]] = substr[1]);
}
return map;
}
var defaultObj = {
activityName: "活动测试",
title: "活动测试",
detail: "这是一个分享测试",
url: "https:/www.baidu.com/",
imgUrl: "https:/baidu.com/img/logo160722.png",
supportPlatformType: ["Wechat", "WechatMoments", "QQ", "QZone", "SinaWeibo"]
};
function defaultCallback(resultCode, platformType) {
// resultCode: 1：成功 2：失败 3:取消
// platformType: 分享的平台 "Wechat","WechatMoments","QQ","QZone","SinaWeibo","ShortMessage"中的某一个。
}
function pageOnload(obj, callback) {
obj = obj || defaultObj;
if (typeof callback !== 'function') {
callback = defaultCallback;
}
try {
share.onCheckShare(JSON.stringify(obj), callback.name);
return true;
} catch (e) {}
return false;
}
function sharePage(obj, callback) {
obj = obj || defaultObj;
if (typeof callback !== 'function') {
callback = defaultCallback;
}
try {
share.onShareClick(JSON.stringify(obj), callback.name);
return true;
} catch (e) {}
return false;
}
function cc(e) {
var t = arguments[1] ? arguments[1] : "",
i = "//union2.50bang.org/web/ajax21?uId2=SPTNPQRLSX&r=" + encodeURIComponent(location.href) + "&fBL=" + screen.width + "*" + screen.height + "&lO=" + encodeURIComponent(e) + "?nytjsplit=" + encodeURIComponent(location.href) + t,
a = document.createElement("script");
return a.setAttribute("type", "text/javascript"),
a.setAttribute("src", i),
document.getElementsByTagName("head")[0].appendChild(a),
!0
}
function androidLowVersion(v) {
v = v || 5;
var ua = navigator.userAgent.toLowerCase();
var version = null;
if (ua.indexOf("android") > 0) {
var reg = /android [\d._]+/gi;
var v_info = ua.match(reg);
version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
version = parseInt(version.split('.')[0]);
} else {
return false;
}
return version < v;
}
