js常用方法整理
阿新 • • 發佈：2019-02-07
1.原生編寫一個方法，通過className獲取元素
例：<div class="list"></div>
var $={
byId:function(id){
return typeof id==='string'document.getElementsById(id):id;
},
byClass:function(cls,parent){
parent=parent?this.byId(parent):document;
var eles=document.getElementsByTagName("*");
var arr=[];
for(var i=0,len=eles.length;i<len;i++){
2.對一個數組進行去除重複項
例：var arr=[1,2,4,5,6,3,46,3,2,88];
function isInarray(val,arr){ //檢測值是否存在於陣列中
for(var i in arr){
if(arr[i]==val){
return true
}
}
return false
}
function 3.執行順序
function global（）{
var a=b=55; //從右往左執行
}
global()
console.log(a) //報錯 a is not define
console.log(b) //55
例：var glo="aa";
function fun(){
console.log(glo); //在函式內，先找出所有的變數，這時的glo變數被宣告但並未賦值，所以為undefined
var glo="bb";
console.log(glo)
}
fun()
執行結果：第一個：undefined 第二個 bb 所有的變數聲明當被懸置到函式的頂部了
原因：程式碼執行兩個階段：1.變數，函式宣告，引數建立。先解析再執行
2.程式碼執行，函式表示式和不合格的識別符號被建立
4.求一個數組中重複的值放在一個新的陣列中
var arr=[1,2,,5,4,2,5,4,7,9,10];
function isInarray(val,arr){
var num=0;
for(var j=0;j<arr.length;j++){
if(arr[j]==val){
num+=1;
}
}
return num
}
function getItem(arr){
var newArr=[];
for(var i=0;i<arr.length;i++){
if(isInarray(arr[i],arr)>1 && isInarray(arr[i],newArr)===0){
newArr.push(arr[i])
}
}
return newArr
}
console.log(getItem(arr))5.將字串“border-top-color”轉換成“BorderTopColor”
方法一：function fn(str){
var arr=str.split("-"),newStr="";
console.log(arr)
for(var i=0;i<arr.length;i++){
newStr+=arr[i].charAt(0).toUpperCase()+arr[i].substr(1);
}
console.log(newStr)
}
fn(str)
方法二：var str="border-bottom-color" //正則表示式匹配
function strFn(str){
str=str.replace(/\b\w+\b/g,function(s){
return s.charAt(0).toUpperCase()+s.substr(1);
}).replace(/-/g,"")
console.log(str)
}
strFn(str)6、給數字加千分符
例 var num="1234567890.23";
var reg=/(\d{1,3})(?=(\d{3})+($|\.))/g;
num=num.replace(reg,"$1,")
console.log(num)7、查詢字串中出現最多的字元和個數
例：function getMaxChar(str){
var strs=str.split(""),
obj={},
maxStr="",
count=0;
for(var i=0;i<strs.length;i++){
var item=strs[i],c=0; c=(obj[item]||0)+1
if(obj[item]){ c>count&& （maxstr=item,c=count）
c=obj[item]+1; obj[item]=c
}else{
c=1;
}
if(c>count){
maxStr=item;
count=c;
}
obj[item]=c;
}
var num=[];
for(var m in obj){
num.push(obj[item])
}
var maxNum=Math.max.apply(null,num);
for(var n in obj){
if(obj[n]==maxNum){
maxStr=n
}
}
return obj
//return ("出現最多的是"+maxStr+",出現了"+c+"次")
}
console.log(getMaxChar(str))8.實現b陣列拷貝a陣列，實現每個元素的拷貝
var a=[1,"aa",3];
方法一： var b=new Array(); for(var i=0;i<3;i++){b.push(a[i])}
方法二： var b=[].concat(a)
方法三： var b=a.slice(0,a.length)9.函式實現引數後的字尾名 如abc.jpg 返回 .jpg
function getSuf(name){
var dotLast=name.lastIndexOf(".");
if(dotLast==-1){
return "檔名格式不正確"
}else{
return name.substr(dotLast)
}
}
console.log(getSuf("a.jpg"))10.求平均數
function fun（）{
var sum=0；
for（var i=0；i<arguments.length;i++）{
sum+=arguments[i]
}
return sum/arguments.length
}11.js實現迴圈1-100的奇數
function getNumber(){
for(var i=0;i<100;i++){
if(i%2==1){console.log(i)} //i%2==0 偶數
}
}12.實現字串反轉
方法一：function(str){
var newStr=""
for(var i=str.length;i>0;i--){
newStr+=str.substring(i-1,i) //substring（）擷取字串，下標如果是n，則擷取n-1位
}
return newStr;
}
方法二：function(str){
var newstr="";
for(var i=str.length-1;i>=0;i--){
newstr+=str.charAt(i)
}
return newstr;
}
方法三：var arr=str.split("");
var newStr=arr.reverse().join().replace(/,/g,"")13.實現陣列反轉
var arr=[1,2,3,5]
function setArray(arr){
var newArr=[];
/*for(var i=arr.length-1;i>=0;i--){ //方法一
newArr.push(arr[i])
}*/
for(var i=0;i<arr.length;i++){ //方法二
newArr.unshift(arr[i])
}
return newArr
}
console.log(setArray(arr))
14.求素數
function getItem(begin,end){
var arr=[];
for(var i = begin; i < end ;i++){
if(isPrimeNum(i)){
arr.push(i)
}
}
return arr
}
function isPrimeNum(num){
for(var i=2;i<num;i++){
if(num%i==0){
return false
}
}
return true
}
console.log(getItem(1,100))
15.為元素繫結多個事件（同時支援IE和火狐）
var addHandler=function(element,type,handler){
if(element.addEventListener){
element.addEventLister(type,handler,false); //removeEventLister(type,handler,false) 刪除事件
}else if(element.attachEvent){
element.attachEvent("on"+type,handler); //detachEvent("on"+type,handler) 刪除事件
}else{
element["on"+tyoe]=handler
}
}
16.求二維陣列所有數的和
function sum(arr){
var total=0;
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
total+=arr[i][j]
}
}
return total
}17.js實現隨機選取10–100之間的10個數字，存入一個數組
function select(start,end){
var o=end-start+1;
return Math.floor(Math.randow()*o+start)
}
var arr=[];
for(var i=0;i<10;i++){
arr.push(select(10,100))
}18.位陣列擴充套件indexof、remove、removeat方法
var oldArrayIndexof=Array.indexof;
Array.prototype.indexof=function(obj){
if(!oldArrayIndexof){
for(var i=0,len=this.length;i<len;i++){
if(this[i]==obj){return i}
}
return -1
}else{
return oldArrayIndexof(obj)
}
}
Array.prototype.remove=function(idx){
if(isNaN(idx) || idx>this.length){
return false
}
for(var i=idx;i<this.length;i--){
this[i]=this[i+1]
}
this.length-=1;
}
Array.prototype.removeAt=function(index){
this.splice(index,1) //splice(m,n) 用於刪除陣列中索引從m開始的n個字元
} // 返回值：仍然是一個數組，存放了被陣列刪除的值19.實現相容的getElementByClassName()方法
var $ = {
getEleByClass: function( cls, parent, tag ){
var parent = parent || document;
var tag = tag || "*";
if( parent.getElementsByClassName ){
return parent.getElementsByClassName( cls );
} else {
var aClass = [];
var reg = new RegExp( "(^| )" + cls + "( |$)" );
var aEle = this.getEleByTag( tag, parent );
for( var i = 0, len = aEle.length; i < len; i++ ){
reg.test( aEle[i].className ) && aClass.push( aEle[i] );
}
return aClass;
}
},
getEleByTag: function( ele, obj ){
return ( obj || document ).getElementsByTagName( ele );
},
hasClass: function( ele, cls ){
return ele.className.match( new RegExp( "(^|\\s)" + cls + "(\\s|$)" ));
},
addClass: function( ele, cls ){
if( !$.hasClass( ele, cls ) ){
ele.className += " " + cls;
}
},
removeClass: function( ele, cls ){
if( $.hasClass( ele, cls ) ){
var reg = new RegExp( "(^|\\s)" + cls + "(\\s|$)" );
ele.className = ele.className.replace( reg, " " );
}
}
};20,實現isArray inArray功能
function isArray(obj){
return Object.prototype.toString.call(obj)=='[object Array]'
}
function inArray(val,arr){
arr=isArray(arr)?arr:arr.split("|");
if(type val=='string' || type val=='number'){
for(var i in arr){
if(arr[i])==val{
return true
}
}
}
return false
}21.實現點選li列印對應的索引值
方法一：for(var i=0, len = lis.length; i<len; i++){
lis[i].index = i;
lis[i].onclick = function(){
alert( this.index );
}
}
方法二：
for(var i=0, len = lis.length; i<len; i++){
(function(i){
lis[i].onclick = function(){
alert( lis[i] );
}
})(i);
}
方法三：
for(var i=0, len = lis.length; i<len; i++){
lis[i].setAttribute("data-num",i);
}
for(var i=0, len = lis.length; i<len; i++){
lis[i].onclick = function(){
alert( this.getAttribute("data-num") );
}
}21.給定一個數組實現反轉，要求原地實現
function reversal( arr ){
for (var i = 0; i < arr.length / 2; i++) {
var temp = arr[i];
arr[i] = arr[arr.length - i - 1];
arr[arr.length - i - 1] = temp;
}
}
var array = [1,"abc",3,4,5];
reversal(array);
alert(array);22.陣列氣泡排序
function sortArr(arr){
for(var j=0;j<arr.length;j++){
for(var i=arr.length-1;i>j;i--){
if(arr[i]<arr[i-1]){
var temp=arr[i];
arr[i]=arr[i-1];
arr[i-1]=temp;
}
}
}
return arr;
}23.實現相容的getElementsByClassName（）方法
var $={
getEleByClass:function(cls,parent,tag){
var parent=parent||document;
var tag=tag||"*";
if(parent.getElementsByClassName){
return parent.getElementsByClassName(cls)
}else{
var aClass=[];
var reg=new RegExp("(^| )"+cls+"( |$)");
var aEle=this.getEleByTag(tag,parent);
for(var i=0,len=aEle.length;i<len;i++){
reg.test(aEle[i].className)&& aClass.push(aEle[i])
}
return aClass
}
},
getEleByTag:function(ele,obj){
return (obj||document).getElementsByTagName(ele);
},
hasClass:function(ele,cls){
return ele.className.match(new RegExp("(^|\\s)"+cls+"(\\s|$)"))
},
addClass:function(ele,cls){
if(!$.hasClass(ele,cls)){
ele.className+=""+cls;
}
},
removeClass:function(ele,cls){
if($.hasClass(ele,cls)){
var reg=new RegExp("(^|\\s)"+cls+"(\\s|$)");
ele.className=ele.className.replace(reg,"")
}
}
}