js經常使用內置對象及方法

前言

經常使用內置對象及方法有：Array數組對象、Math方法、String方法、日期對象的方法。

1、Array 數組對象

一、push() 在數組尾部添加一個或者多個元素，而且返回數組的新長度

arr=[1,2,3]
 arr.push("a","b"); //插入字符串  arr.push(6); //在數組的尾部插入一個新元素  arr.push(6,7,8); //在數組的尾部插入多個新元素  a=arr.push(6,7,8); //經過添加到尾部元素後返回數組的新長度  console.log(arr);  console.log(a); 複製代碼

會返回數組的新長度

二、unshift() 在數組頭部添加一個或者多個元素，而且返回數組的新長度

arr=[1,2,3]
 arr.unshift(0); //在數組的頭部插入一個新元素  arr.unshift(-3,-2,-1,0); //在數組的頭部插入多個新元素  var a=arr.unshift(-3,-2,-1,0); //返回數組的新長度  console.log(arr);  console.log(a); 複製代碼

會返回數組的新長度

三、pop() 刪除數組尾部的最後一個元素，而且將這個被刪除的元素返回

arr=[1,2,3,4,5,6]
 arr.pop(); //pop中沒有參數,刪除數組的最尾部一個元素  var a=arr.pop(); //pop刪除數組 的最尾部一個元素，而且將被刪除的元素返回  console.log(arr);  console.log(a); 複製代碼

將這個被刪除的元素返回

四、shift() 刪除數組的第一個元素，而且返回被刪除的元素

arr=[1,2,3,4,5,6]
 arr.shift(); //將數組的第一個元素刪除  var a=arr.shift(); //將數組的第一個元素刪除，而且返回這個被刪除的元素  console.log(arr);  console.log(a); 複製代碼

返回被刪除的元素

無論刪除仍是添加都會改變數組的長度

五、concat() 數組的合併，合併後會返回一個新數組，原來的兩個數組不會變化

var arr=[1,2,3,4];
 var arr1=[5,6,7,8];  var arr2=arr.concat(arr1); // 數組的合併，合併後會返回一個新數組，原來的兩個數組不會變化  console.log(arr2);  var arr3=arr.concat(0,-1,-2); // 數組除了能夠合併數組，也能夠合併元素，將多個元素與原數組合並，返回新數組  console.log(arr3)  var arr4=arr.concat(0,arr1,["A","B"]); // concat既能夠合併元素，也能夠合併數組  console.log(arr4)  var arr5=arr.concat(); // 若是直接使用concat，就能夠完成數組的複製功能  console.log(arr5) 複製代碼

六、join() 將數組的每一個元素以指定的字符鏈接造成新字符串返回

var arr=[1,2,3,4,5]; // join就是將數組的每一個元素以指定的字符鏈接造成新字符串返回
 var str=arr.join( ); // 將數組合併爲字符串返回，默認使用逗號,鏈接  console.log(str);  var str=arr.join("|"); // 在這裏join的參數是字符串的鏈接符v  console.log(str);  var str=arr.join(""); // ""做爲鏈接符，會將數組元素首尾相連成爲字符串  console.log(str); 複製代碼

七、splice() 這個方法能夠從指定的位置刪除給定數量的元素，而且在這個位置插入須要的元素，而且返回被刪除的元素組成的新數組

splice(從什麼位置開始,刪除多少個元素,要插入的元素);

1）splice 刪除所有數組返回值

var arr1=arr.splice(); // 沒有任何參數時,返回一個空數組
 console.log(arr1);  第一個參數是0，表示從第0位開始，第二個參數刪除多少個沒有填，意味着刪除到尾部  var arr1=arr.splice(0); // 將全部數據轉移到新數組  console.log(arr1); 複製代碼

2）splice 能夠從前向後，也能夠從後向前

var arr1=arr.splice(0,3); // 從第0位開始刪除3個元素，返回到新數組arr1
 var arr1=arr.splice(-2); // 從第幾位開始能夠是負數，從後向前數（倒數）,由於沒有給要刪除的數量，所以刪除到尾部  var arr1=arr.splice(0,1,-1); // 從數組的第0位開始，刪除1個元素，而且在這個位置插入一個元素 -1,替換  var arr1=arr.splice(-1,1,0); // 數組的最後一位替換位0  var arr1=arr.splice(2,2,10,11); // 將數組中第二位開始兩位元素替換爲10，11 複製代碼

3）splice 能夠插入一個，能夠插入多個元素

var arr=[1,2,3,4,5];
 arr.splice(2,0,-1); // 在數組的第二位插入一個元素 -1  console.log(arr);  arr.splice(2,0,-1,-2,-3,-4); // 在數組的第二位插入多個元素  console.log(arr); 複製代碼

八、slice(start,end) 按指定位置截取複製數組的內容，返回新數組，不會改變原數組

從下標 start 開始，截取到 end，包括 start 但不包括 end。第二個參數不寫，默認截取到尾部，只能從前向後截取

var arr1=arr.slice(1,4); // 從第1位開始截取到第4位以前
 var arr1=arr.slice(); // 複製數組arr  var arr1=arr.slice(0); // 複製數組  var arr1=arr.slice(3); //從第三位截取到尾部複製  var arr1=arr.slice(-2); //從倒數第二位開始截取到尾部  var arr1=arr.slice(-3,-1); //從倒數第三位到倒數第一位 複製代碼

九、indexOf(要查詢得元素,從什麼位置開始查詢) 位置就是下標

在數組中查找元素，找到返回元素下標，找不到返回-1，查詢到第一個後，就返回下標再也不繼續查詢

1）不能查詢對象

var arr=[{a:1},{a:2},{a:3},{a:4}];
 var index=arr.indexOf({a:1}); // 這是錯誤得，查找不到，由於查找得是新對象,地址不一樣  console.log(index); 複製代碼

查詢不到返回-1

2）查詢全部相同的元素

var arr=[1,3,1,2,3,5,2,3,4,6];
 var index=arr.indexOf(3); // 這樣只能查詢到第一個3 （下標爲1）  console.log(index);  var index=arr.indexOf(3,2); // 這樣只能查詢到第二個3 （下標爲4）  console.log(index); 複製代碼

查詢所有相同的元素利用循環查詢

var arr=[1,3,1,2,3,5,2,3,4,6];
 var index=0; // 使用循環，查詢到數組中全部爲3的元素，並打印下標  while(true){  index=arr.indexOf(3,index);  console.log(index);  if(index===-1) break; // 查詢到最後，查不到時返回-1 若是爲-1 跳出循環，再也不查詢  index++;  } 複製代碼

十、Array.from(相似於數組的列表) 轉爲數組

1）根據標籤名獲取到標籤列表 （獲取到的是列表，不是數組，不能直接使用數組的方法

var divs=document.getElementsByTagName("div"); // 獲取html元素標籤名是div的元素
  divs.pop()；// 錯誤，不是數組不能直接使用數組的方法   var arr=Array.from(divs); // ES6 的寫法，把divs這個列表，轉爲數組  // ES5寫法 => var arr=Array.prototype.slice.call(divs); 複製代碼

2）給全部 div 元素添加點擊事件

var divs=document.getElementsByTagName("div");
 var arr=Array.from(divs); // 把獲取到的全部div轉成數組   for(var i=0;i<arr.length;i++){ // 遍歷數組給每一個div添加點擊事件  arr[i].onclick=clickHandler;  }  function clickHandler(){  console.log(this);  var index=arr.indexOf(this);  console.log(index); // 這樣就能夠判斷點擊得是列表中得第幾個元素  } 複製代碼

十一、lastIndexOf(查找得元素，從什麼位置開始查找) 從後向前查找

var arr=[1,3,1,2,3,5,2,3,4,6];
 var index=arr.lastIndexOf(3);  console.log(index); // 打印下標 7 複製代碼

十二、遍歷數組（forEach 和 map）

1）forEach

arr.forEach(function(數組中的元素，每一個元素對應的下標，數組自身){ })

var arr=[1,2,3,5,6,7,8,9];
 arr.forEach(function(a,b,c){  console.log(a,b,c);  }) 複製代碼

forEach沒有返回值，使用return無效

2）map會返回一個與原數組長度相等的新數組

arr.map(function(item,index,arr){ })

var arr=[3,5,7,9,1,2,4];
 var arr2=arr.map(function(item,index,arr){  // console.log(item,index,arr);  // return "a";  return item+10; // 在map中使用return 就是在對應的下標中添加對應的數據  });  console.log(arr2); 複製代碼

// 遍歷數組arr，將大於4的元素生成一個新的數組（新數組中會有undefined）
 var arr=[1,3,5,7,2,4,6,8];  var arr1=arr.map(function(item){  if(item>4){  return item;  }  });  console.log(arr1); 複製代碼

map有返回值，與原數組等長的新數組，元素內容由return肯定，不寫return返回undefined

1三、arr.sort() 排序，僅能10之內數字

缺點：按字符排序 sort(function(後一項,前一項){}) 僅適用於數值

1）數值排序

var arr=[1,3,5,7,2,4,6,8];
 arr.sort(function(a,b){  return a-b; // 從小到大  // return b-a; // 從大到小  })  console.log(arr); 複製代碼

2）字符排序，先把字符轉換成Unicode編碼

var arr=["n","c","g","h","a","j","y","k"];
 arr.sort(function(a,b){ // 將字符排序  console.log(a.charCodeAt(0),b.charCodeAt(0)); // str.charCodeAt(0) => 將str字符串的第0項轉換爲Unicode編碼  return a.charCodeAt(0)-b.charCodeAt(0); // a-z  // return b.charCodeAt(0)-a.charCodeAt(0); // z-a  })  console.log(arr); 複製代碼

1四、some()

判斷數組中是否存在知足條件的元素，若是有就返回true，若是沒有就返回false
遍歷數組，若是有一個知足條件的元素，都會直接返回true，不繼續向後遍歷

var arr=[1,4,6,2,7,9,0];
 var bool=arr.some(function(item,index,arr){ // 遍歷數組，是否存在大於5的元素  return item>5;  });  console.log(bool); 複製代碼

1五、every()

var bool=arr.every(function(item,index,arr){ });
判斷數組中是否每個都知足條件，若是有一個不知足條件，直接跳出，全部都知足時返回爲ture

var arr=[1,4,6,2,7,9,0];
 var bool=arr.every(function(item,index,arr){ // 判斷數組中 是否全部的元素都大於2  return item>2;  });  console.log(bool); 複製代碼

1六、filter()

要求是將數組中大於5的返回到一個新數組
首先想到map，map只能實現原數組和新數組長度相同

var arr1=arr.filter(function(item,index,arr){
 return item>5;  });  console.log(arr1); 複製代碼

1七、reduce()

從數組的第1位開始遍歷，第0位沒有遍歷，下標從1開始
剛開始value是數組的第0項，後面每次value都是undefined
若是在函數中使用return 就會將返回值在下次數組的遍歷中賦予value

var arr=[10,3,4,7,3,5,8,9];
 arr.reduce(function(value,item,index,arr){  // 循環的次數是數組的個數-1  // value就是上次遍歷return的值，第0次遍歷時（最開始時是數組的第0項）  console.log(value);  return value+1  }) 複製代碼

累積相加數組元素求和
reduce返回的是一個值，就是遍歷到最後一次return出來的值

var arr=[10,3,4,7,3,5,8,9];
 var sum=arr.reduce(function(value,item){  return value+item;  });  console.log(sum); 複製代碼

但願求累積相加數組元素求和，在基數100的前提下，100就是初始值

var arr=[10,3,4,7,3,5,8,9];
 var sum=arr.reduce(function(value,item){  // 函數後面的參數就是累加的初始值  console.log(value);  return value+item;  },100); 複製代碼

1八、Array.isArray()

用來判斷是否是數組

var arr=[1,2,3,4];
 var obj={a:1};  console.log(typeof arr);  // 判斷元素是不是數組，若是是數組返回true不然返回false，ES6  console.log(Array.isArray(arr));  console.log(Array.isArray(obj)); 複製代碼

2、Math方法

一、π和根號2

Math.PI; // Π
 Math.SQRT2; // 根號2 常量，只能使用不能修改 複製代碼

二、取整

1）向下取整 Math.floor()

a=Math.floor(25.6);
 console.log(a); 複製代碼

2）向上取整 Math.ceil()

b=Math.ceil(25.6);
 console.log(b); 複製代碼

三、四捨五入 Math.round()

方法存在偏差

c=Math.round(25.5);
 console.log(c); 複製代碼

負數的四捨五入，通常都是轉換爲正數處理

四、最大值和最小值

1）最小值Math.min()

c=Math.min(4,7,8,3,1,9,6,0,3,2)
 console.log(c) 複製代碼

2）最大值 Math.max()

c=Math.max(4,7,8,3,1,9,6,0,3,2)
 console.log(c) 複製代碼

五、隨機數 Math.random

c=Math.random()*10+1; // 隨機1-10之間的任意數
 console.log(c) 複製代碼

隨機的數不是一個整數通常作取整處理

c=Math.random()*10+1;
 console.log(Math.floor(c)); // 向下取整 複製代碼

六、其餘的方法

3、String 字符串方法

一、charAt()

獲取下標位置的字符，和str[1]; 同樣的

var str="abcdef";
 console.log(str.charAt(3)); 複製代碼

二、charCodeAt()

將下標位置的字符轉爲Unicode編碼

var str="abcdef";
 console.log(str.charCodeAt(2)); 複製代碼

三、String.fromCharCode()

將Unicode編碼轉爲字符串

n=String.fromCharCode(65); // 將Unicode編碼轉爲字符串
 console.log(n); 複製代碼

四、str.concat()

鏈接字符串，效果等同於拼接符+

var str="abc";
 var str1="def";  var str2=str.concat(str1); // var str2=str+str1; 這個等同於concat  console.log(str2); 複製代碼

五、 indexOf() 、lastIndexOf()

和數組中indexOf相同查找字符所在下標

var arr=[
 {id:1001,name:"計算機",price:4999},  {id:1002,name:"電機",price:1999},  {id:1003,name:"記事本",price:9},  {id:1004,name:"課本",price:99},  {id:1005,name:"計算器",price:149},  ];   // 模糊查找  var arr1=arr.filter(function(item){  return item.name.indexOf("本")>-1  });  console.log(arr1); 複製代碼

六、replace()

替換，相似於數組中的splice();
replace不修改原字符的內容，會返回一個被修改後的新字符串
若是出現兩個相同的元素，那麼只修改第一次被查找到的元素

var str="abcdecf";
 var str1=str.replace("c","z");  str.replace()  console.log(str,str1); 複製代碼

七、slice(start,end)

slice (從下標幾開始，到下標幾以前結束) 截取複製字符串
容許有負值，負值表示從後向前

var str="abcdecf";
 var s=str.slice(1,2);  console.log(s); 複製代碼

八、substring()

var str="abcdecf";
 var s=str.substring(2,4); // 和slice類似  // substring不容許負數，全部的負值指0以前，所以負數都是0  // 能夠逆向截取賦值  var s=str.substring(4,2);  console.log(s); 複製代碼

九、substr (從下標幾開始，截取長度);

var str="abcdecf";
 var s=str.substr(-2,5); //從下標幾開始，截取長度  console.log(s); 複製代碼

十、split(分隔符) 將字符串以分隔符進行分割轉換爲數組

var str="a,b,c,d,e,f";
 var arr=str.split(",");  console.log(arr); 複製代碼

十一、reverse()；數組元素倒序或者反轉，這是一個數組方法

var str="abcdefg";
 var str1=str.split("").reverse().join(""); // 連綴  console.log(str1) 複製代碼

十二、字符串轉換大小寫

1）str.toLowerCase轉爲小寫

console.log("ABC".toLowerCase()); // 將字符串轉換成小寫
複製代碼

2）str.toUpperCase轉爲大寫

console.log("abc".toUpperCase()); // 將字符串轉換成大寫
複製代碼

3、日期對象

一、建立日期對象

var date=new Date(); // 建立日期對象
複製代碼

二、獲取日期

var date=new Date(); 
 date.getFullYear(); // 獲取年份  date.getYear(); // 獲取的年份是從1900年開始計算的，有問題  date.getMonth()+1; // 獲取月份 從0開始  date.getDate(); // 獲取日期  date.getDay(); // 獲取星期 從0開始 0就是星期日 1是星期1  date.getHours(); // 獲取小時  date.getMinutes(); // 獲取分鐘  date.getSeconds(); // 獲取秒  date.getMilliseconds()；// 獲取毫秒  console.log(date); 複製代碼

二、以上日期都可設置

var date=new Date(); 
 date.setFullYear(2021);  date.setMonth(12); // 1月，進位了年份+1 是從0開始的;  date.setDate(40); // 設置進位了  date.setHours(date.getHours() + 2); // 設置爲如今時間的2小時後  date.getUTCFullYear(); // 凡是帶有UTC都是格林尼治時間  date.toString(); // 直接轉換爲字符串  date.toLocaleString(); // 轉換爲本地（windows上）設置格式時間字符串  date.toUTCString(); // 轉換爲格林尼治時間字符串  console.log(date); 複製代碼

三、時間戳

date.getTime(); // 毫秒數，是計算從1970年1月1日 00：00：00 到如今的毫秒數 
複製代碼

時間會一直流逝，這個數據將會一直變大，每毫秒獲取值都不一樣，所以這個數字永遠不重複
瀏覽器認爲每次請求的地址若是相同時，會先查看瀏覽器緩存是否存在，若是有就用本地緩存
能夠經過時間戳使每次訪問的地址都不一樣，避免瀏覽器使用本地緩存

本文使用 mdnice 排版