重學前端之（6）內置對象

內置對象

JS內置對象就是指Javascript自帶的一些對象，供開發者使用，這些對象提供了一些經常使用的的功能。

常見的內置對象有Math、String、Array、Date等

內置對象有不少，咱們主要是記下這些內置對象的用法便可。可是同窗們也不可能一會兒記住這麼多的方法，所以當同窗們忘了某個方法該如何使用的時候，能夠經過如下方式查看。

• 火狐開發者網站MDN
• W3School網站

如何學習一個方法 ？

1. 方法的功能
2. 參數的意義和類型
3. 返回值意義和類型
4. demo進行測試

Math對象

Math對象中封裝不少與數學相關的屬性和方法。

• π

  Math.PI

• 最大值/最小值

  Math.max();
  Math.min();
  複製代碼

• 取整（★） [1.1 , 1.9, -1.1 , -1.9 , 1.5]

  Math.ceil();//天花板，向上取整
  Math.floor();//地板，向下取整
  Math.round();//四捨五入，若是是.5，則取更大的那個數
  複製代碼

• 隨機數（★★）

  Math.random();//返回一個[0,1)之間的數，能取到0，取不到1
  
  // 通常狀況看下,咱們不是要求隨機小數,通常整數,例如速記點名
  複製代碼

• 絕對值 (abs absolute 絕對)

  Math.abs();//求絕對值
  複製代碼

• 次冪和平方 (pow power 冪 sqrt:開方 )

  Math.pow(num, power);//求num的power次方
  Math.sqrt(num);//對num開平方
  複製代碼

• 練習

//1. 0-3的隨機整數
// 0-6的隨機整數
// 6-8的隨機整數

//2.封裝一個函數 隨機生成一個rgb顏色？
//2.1 0-255 取整
//2.2 
     function randomRGB() {

       var red = parseInt( Math.random() * 256 );
       var green = parseInt( Math.random() * 256 );
       var blue = parseInt( Math.random() * 256 );

       // return 'rgb(20,30,43)'
       return 'rgb('+ red + ',' + green + ',' + blue + ')';
     }
複製代碼

Date對象

Date對象用來處理日期和時間

• 建立一個日期對象

  var date = new Date();//使用構造函數建立一個當前時間的對象
  var date = new Date("2019-04-13");//建立一個指定時間的日期對象
  var date = new Date("2019-04-13 00:52:34");//建立一個指定時間的日期對象
  var date = new Date(2019, 04, 13, 0, 52, 34);
  var date = new Date(1523199394644);//參數：毫秒值
  
  Date構造函數的參數
  1. 毫秒數 1498099000356		new Date(1498099000356)
  2. 日期格式字符串  '2019-4-13'	 new Date('2019-4-13')
  3. 年、月、日……				 var date = new Date(2019, 4, 13, 0, 52, 34);月份從0開始
  複製代碼

• 日期格式化

  date.toLocalString();//本地風格的日期格式
  date.toLocaleDateString(); // 獲取日期
  date.toLocaleTimeString(); // 獲取時間
  複製代碼

• 獲取日期的指定部分 (★)

  getMilliseconds();//獲取毫秒值
  getSeconds();//獲取秒
  getMinutes();//獲取分鐘
  getHours();//獲取小時
  getDay();//獲取星期，0-6 0：星期天
  getDate();//獲取日，即當月的第幾天
  getMonth();//返回月份，注意從0開始計算，這個地方坑爹，0-11
  getFullYear();//返回4位的年份 如 2019
  
  //思考：
  //封裝一個函數，返回當前的時間，格式是：yyyy-MM-dd HH:mm:ss (2019-04-13 01:20:12)
  function getD() {
  
    var date = new Date();
    var year = date.getFullYear();
    var month =  date.getMonth() + 1;
    var day = date.getDate();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
  
    function addZero(num) {
       return num < 10 ? '0'+num : num;
    }
  
    return year+ '-'+ addZero(month) +'-'+  addZero(day) +' '+  addZero(h) +':' +  addZero(m) + ':' +  addZero(s);
  }
  複製代碼

• 時間戳

• 實際項目中,用的最多的就是時間戳,,由於這個好計算,其餘的都很差算

var date = +new Date();//1970年01月01日00時00分00秒起至如今的總毫秒數
 //思考
 //如何統計一段代碼的執行時間？ 打印10000次
 // 開始 
 var start = +new Date();
 for ( var i = 1 ; i <= 1000 ; i++) {

     console.log(i);
 }
 // 結束
 var end = +new Date();

 console.log('時間戳 :' + (end-start));
複製代碼

Array對象

數組對象在javascript中很是的經常使用

• 數組轉換（★）--- join

  //語法：array.join(分隔符)
  //做用：將數組的值拼接成字符串,而且返回字符串
  
  var arr = [1,2,3,4,5];
  arr.join();//不傳參數，默認按【,】進行拼接
  arr.join("");//按【"】進行拼接
  arr.join("-");//按【-】進行拼接
  複製代碼

• 數組的增刪操做（★）

  var arr = ['zs','ls','ww']
  
  array.push(元素);//從後面添加元素，返回新數組的length
  array.pop();//從數組的後面刪除元素，返回刪除的那個元素
  array.unshift(元素);//從數組的前面的添加元素，返回新數組的長度
  array.shift();//從數組的最前面刪除元素，返回刪除的那個元素
  
  //總結:
  //1. shift 在前面 ,因此處理數組前面的
  //2. p+ 在後面,因此是處理後面的
  //3. unshift 比 shift 多個un,,因此就是加
  //4. 添加的都是返回長度
  //5. 刪除的都是返回刪除的元素
  //6. 添加要說明添加什元素,,刪除直接刪除
  
  //demo
  var arr = ["劉備"];
  //添加數據後變成：["趙雲","馬超","劉備","關羽","張飛"]
  //刪除數據後變成：["關羽","張飛"]
  
  //demo
  var arr = ["趙雲","馬超","劉備","關羽","張飛"];
  //把數組的最後一個元素變成數組的第一個元素
  //把數組的第一個元素變成數組的最後一個元素
  複製代碼

• 數組的翻轉與排序

  array.reverse();//翻轉數組
  array.sort();//數組的排序，默認按照 字母/首字符 順序排序 => 1 11 2 3
  var arr1 =  ['a','d','b','c'];
  var arr2 = [3, 6, 1, 5, 10, 2,11];
  
  //sort方法能夠傳遞一個函數做爲參數，這個參數用來控制數組如何進行排序
  arr.sort(function(a, b){
    //若是返回值>0,則交換位置
    return a - b;
  });
  
  記憶 : b比a高
  複製代碼

• 數組的拼接與截取

  //1. concat：數組合並，不會影響原來的數組，會返回一個新數組。
  var newArray = array.concat(array2);
  
  //2. slice:截取出來，既然是截取`出來`,,確定要有個東西接收
  //原來的數組不受影響，
  // - slice() 所有截取出來
  // - slice(begin) 從第begin日後截取出來
  // - slice(begin, end) 從第begin開始刪除,,不包括end [start, end)
  var arr = ['zs','ls','ww','zl','xmg'];
  var newArray = array.slice(begin, end);
  
  //3. splice : 數組任意地方刪除或者添加元素 
  var arr = ['zs','ls','ww','zl','xmg'];
  // 原來的數組影響
  //- splice(start, deletedCount) 刪除元素
  // - start 開始
  // - deletedCount 刪除個數
  //- splice(start, deletedCount , item) 刪除+添加, 第三個參數是在原來刪除的位置上新加幾個元素
  //- 特殊 : 
  // splice(start, 0 , item) 就是在某個位置新加元素
  
  複製代碼

• 數組查找元素

  //indexOf方法用來查找數組中某個元素 `第一次`出現的位置，若是找不到，返回-1
  array.indexOf(search, [fromIndex]);
  
  //lastIndexOf()方法用來查找數組中某個元素 `最後一次`出現的位置,若是找不到，返回-1
  array.lastIndexOf(search, [fromIndex]);
  
  var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  
  主要配合if語句的多
  複製代碼

• 清空數組

  //1. array.splice(0,array.length);//刪除數組中全部的元素
  //2．array.length = 0;//直接修改數組的長度
  //3．array = [];//將數組賦值爲一個空數組，推薦
  複製代碼

• 數組綜合練習

  var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"]
  //1. 找到數組中第一個a出現的位置
  //2. 找到數組中最後一個a出現的位置
  //3. 找到數組中每個a出現的位置
  //4. 數組去重，返回一個新數組
  //5. 獲取數組中每一個元素出現的次數
  // 新方法 : if(arr[i] in obj) {} 判斷元素是否在對象中
    var obj = {};
    for ( var i = 0 ; i < arr.length ; i++) {
  
        if (arr[i] in obj) {
          obj[arr[i]] += 1;
        } else {
          obj[arr[i]] = 1;
        }
    }
    console.log(obj);
  複製代碼

基本包裝類型

簡單數據類型是沒有屬性和方法的。爲了方便操做基本數據類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean。

基本包裝類型：把基本類型包裝成複雜類型。

var str = 「abc」;
var result = str.indexOf(「a」);
//發生了三件事情
1. 把簡單類型轉換成複雜類型：var s = new String(str);
2. 調用包裝類型的indexOf方法：var result = s.indexOf(「a」);
3. 銷燬剛剛建立的複雜類型


總結 : js爲了咱們使用方便，瀏覽器容許使用簡單類型直接調用方法，會自動把簡單類型轉換成複雜類型。
複製代碼

Number對象

Number對象是數字的包裝類型，數字能夠直接使用這些方法

toFixed(2)//保留2位小數
toString();//轉換成字符串
複製代碼

Boolean對象

Boolean對象是布爾類型的包裝類型。

toString( );//轉換成字符串
複製代碼

undefined和null沒有包裝類型，因此調用toString方法會報錯

String對象

字符串能夠當作是一個字符數組（僞數組）。所以字符串也有長度，也能夠進行遍歷。String對象不少方法的名字和和Array的同樣。能夠少記不少的單詞。

注意: 注意 : 操做字符串的方法都不會改變原來的字符串,,因此須要返回

• 查找指定字符串

  //indexOf:獲取某個字符串第一次出現的位置，若是沒有，返回-1
  //lastIndexOf:獲取某個字符串最後一次出現的位置。若是沒有，返回-1
  複製代碼

• 去除空白

  trim();//去除字符串兩邊的空格，內部空格不會去除
  複製代碼

• 大小寫轉換

  //toUpperCase：所有轉換成大寫字母
  //toLowerCase：所有轉換成小寫字母
  複製代碼

• 字符串拼接與截取

  //字符串拼接
  //能夠用concat，用法與數組同樣，可是字符串拼串咱們通常都用+
  
  //`字符串截取`的方法有不少，記得越多，越混亂，所以就記好用的就行
  
  //slice ：截取出來 從start開始，end結束，而且取不到end。 `和 substring同樣`
  //substring ：從start開始，end結束，而且取不到end
  
  //substr ： ：從start開始，截取length個字符。 == 數組的 splice()
  
  總結 :優先使用 substr
  複製代碼

• 字符串切割

  //split:將字符串分割成數組（很經常使用）
  //功能和數組的join正好相反。
  var str = "張三,李四,王五";
  var arr = str.split(",");
  複製代碼

• 字符串替換

  var str = 'abcedabc'
  str = str.replace(/a/g,'c')
  replace(searchValue, replaceValue)  // replace(old, new)
  //參數：searchValue:須要替換的值 replaceValue:用來替換的值
  複製代碼

• 遍歷、獲取

var  str1 = 'abcoefoxyozzopp'
  for ( var i = 0 ; i < str1.length ; i++) {

      console.log(str1[i]);
   
  }

  str[0] == str.charAt(0)
複製代碼