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>

</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 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;
　}

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
}