js內置對象

JavaScript中的對象分爲3種：內置對象、瀏覽器對象、自定義對象

JavaScript 提供多個內置對象：Math/Array/Number/String/Boolean...

對象只是帶有屬性和方法的特殊數據類型。

學習一個內置對象的使用，只要學會其經常使用的成員的使用（經過查文檔學習）

能夠經過MDN/W3C來查詢

內置對象的方法不少，咱們只須要知道內置對象提供的經常使用方法，使用的時候查詢文檔。

MDN

Mozilla 開發者網絡（MDN）提供有關開放網絡技術（Open Web）的信息，包括 HTML、CSS 和萬維網及 HTML5 應用的 API。

• MDN

• 經過查詢MDN學習Math對象的random()方法的使用

如何學習一個方法？

1. 方法的功能

2. 參數的意義和類型

3. 返回值意義和類型

4. demo進行測試

Math對象

Math對象不是構造函數，它具備數學常數和函數的屬性和方法，都是以靜態成員的方式提供

跟數學相關的運算來找Math中的成員（求絕對值，取整）

Math

演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

Math.PI      // 圓周率
Math.random()    // 生成隨機數
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round()    // 取整，四捨五入
Math.abs()     // 絕對值
Math.max()/Math.min()  // 求最大和最小值
​
Math.sin()/Math.cos()  // 正弦/餘弦
Math.power()/Math.sqrt() // 求指數次冪/求平方根

案例

• 求10-20之間的隨機數

• 隨機生成顏色RGB

• 模擬實現max()/min()

Date對象

建立 Date 實例用來處理日期和時間。Date 對象基於1970年1月1日（世界標準時間）起的毫秒數。

// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf()); // 獲取距1970年1月1日（世界標準時間）起的毫秒數
​
Date構造函數的參數
1. 毫秒數 1498099000356  new Date(1498099000356)
2. 日期格式字符串  '2015-5-1' new Date('2015-5-1')
3. 年、月、日……     new Date(2015, 4, 1)   // 月份從0開始

• 獲取日期的毫秒形式

var now = new Date();
// valueOf用於獲取對象的原始值
console.log(date.valueOf()) 
​
// HTML5中提供的方法，有兼容性問題
var now = Date.now(); 
​
// 不支持HTML5的瀏覽器，能夠用下面這種方式
var now = + new Date();   // 調用 Date對象的valueOf() 

• 日期格式化方法

toString()  // 轉換成字符串
valueOf()  // 獲取毫秒值
// 下面格式化日期的方法，在不一樣瀏覽器可能表現不一致，通常不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

• 獲取日期指定部分

getTime()   // 返回毫秒數和valueOf()結果同樣，valueOf()內部調用的getTime()
getMilliseconds() 
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期幾 0週日   6周6
getDate()     // 返回當前月的第幾天
getMonth()    // 返回月份，***從0開始***
getFullYear() //返回4位的年份 如 2016

案例

• 寫一個函數，格式化日期對象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //若是date不是日期對象，返回
  if (!date instanceof Date) {
    return;
 }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}

• 計算時間差，返回相差的天/時/分/秒

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
 }
}

Array對象

• 建立數組對象的兩種方式

  • 字面量方式

  • new Array()

// 1. 使用構造函數建立數組對象
// 建立了一個空數組
var arr = new Array();
// 建立了一個數組，裏面存放了3個字符串
var arr = new Array('zs', 'ls', 'ww');
// 建立了一個數組，裏面存放了4個數字
var arr = new Array(1, 2, 3, 4);
​
​
// 2. 使用字面量建立數組對象
var arr = [1, 2, 3];
​
// 獲取數組中元素的個數
console.log(arr.length);

• 檢測一個對象是不是數組

  • instanceof

  • Array.isArray() HTML5中提供的方法，有兼容性問題

  函數的參數，若是要求是一個數組的話，能夠用這種方式來進行判斷

• toString()/valueOf()

  • toString() 把數組轉換成字符串，逗號分隔每一項

  • valueOf() 返回數組對象自己

• 數組經常使用方法

  演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 棧操做(先進後出)
push()
pop()   //取出數組中的最後一項，修改length屬性
// 2 隊列操做(先進先出)
push()
shift()  //取出數組中的第一個元素，修改length屬性
unshift()  //在數組最前面插入項，返回數組的長度
// 3 排序方法
reverse() //翻轉數組
sort();  //即便是數組sort也是根據字符，從小到大排序
// 帶參數的sort是如何實現的？
// 4 操做方法
concat()  //把參數拼接到當前數組
slice()  //從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
splice() //刪除或替換當前數組的某些項目，參數start, deleteCount, options(要替換的項目)
// 5 位置方法
indexOf()、lastIndexOf()   //若是沒找到返回-1
// 6 迭代方法 不會修改原數組(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將數組的全部元素鏈接到一個字符串中。
join()

• 清空數組

// 方式1 推薦 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

• 將一個字符串數組輸出爲|分割的形式，好比「劉備|張飛|關羽」。使用兩種方式實現

function myJoin(array, seperator) {
  seperator = seperator || ',';
  array = array || [];
  if (array.length == 0){
    return '';
 }
  var str = array[0];
  for (var i = 1; i < array.length; i++) {
    str += seperator + array[i];
 }
  return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));
​
console.log(array.join('-'))

• 將一個字符串數組的元素的順序進行反轉。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實現。提示：第i個和第length-i-1個進行交換

function myReverse(arr) {
  if (!arr || arr.length == 0) {
    return [];
 }
  for (var i = 0; i < arr.length / 2; i++) {
    var tmp = arr[i];
    arr[i] = arr[this.length - i - 1];
    arr[arr.length - i - 1] = tmp;
 }
  return arr;
}
​
var array = ['a', 'b', 'c'];
console.log(myReverse(array));
​
console.log(array.reverse());

• 工資的數組[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除

// 方式1
var array = [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
 }
}
console.log(tmpArray);
// 方式2
var array = [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
 }
  return false;
});
console.log(array);

• ["c", "a", "z", "a", "x", "a"]找到數組中每個a出現的位置

var array = ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1);
  if (index != -1){
    console.log(index);
 }
} while (index > 0);

• 編寫一個方法去掉一個數組的重複元素

var array = ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
   }else{
      o[item] = 1;
   }
 }
  var tmpArray = [];
  for(var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
   }else{
      if(tmpArray.indexOf(key) == -1){
        tmpArray.push(key);
     }
   }
 }
  returm tmpArray;
}
​
console.log(clear(array));

 

基本包裝類型

爲了方便操做基本數據類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean

// 下面代碼的問題？
// s1是基本類型，基本類型是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
​
// 當調用s1.substring(5)的時候，先把s1包裝成String類型的臨時對象，再調用substring方法，最後銷燬臨時對象, 至關於：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;

// 建立基本包裝類型的對象
var num = 18;     //數值，基本類型
var num = Number('18');  //類型轉換
var num = new Number(18);  //基本包裝類型，對象
// Number和Boolean基本包裝類型基本不用，使用的話可能會引發歧義。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;  // 結果是什麼

String對象

• 字符串的不可變

var str = 'abc';
str = 'hello';
// 當從新給str賦值的時候，常量'abc'不會被修改，依然在內存中
// 從新給字符串賦值，會從新在內存中開闢空間，這個特色就是字符串的不可變
// 因爲字符串的不可變，在大量拼接字符串的時候會有效率問題

• 建立字符串對象

var str = new String('Hello World');
​
// 獲取字符串中字符的個數
console.log(str.length);

• 字符串對象的經常使用方法

  字符串全部的方法，都不會修改字符串自己(字符串是不可變的)，操做完成會返回一個新的字符串

// 1 字符方法
charAt()    //獲取指定位置處字符
charCodeAt()  //獲取指定位置處字符的ASCII碼
str[0]     //HTML5，IE8+支持 和charAt()等效
// 2 字符串操做方法
concat()     //拼接字符串，等效於+，+更經常使用
slice()     //從start位置開始，截取到end位置，end取不到
substring()  //從start位置開始，截取到end位置，end取不到
substr()     //從start位置開始，截取length個字符
// 3 位置方法
indexOf()    //返回指定內容在元字符串中的位置
lastIndexOf()  //從後往前找，只找第一個匹配的
// 4 去除空白   
trim()   //只能去除字符串先後的空白
// 5 大小寫轉換方法
to(Locale)UpperCase()  //轉換大寫
to(Locale)LowerCase()  //轉換小寫
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103); //把ASCII碼轉換成字符串

案例

• 截取字符串"我愛中華人民共和國"，中的"中華"

var s = "我愛中華人民共和國";
s = s.substr(2,2);
console.log(s);

• "abcoefoxyozzopp"查找字符串中全部o出現的位置

var s = 'abcoefoxyozzopp';
var array = [];
do {
  var index = s.indexOf('o', index + 1);
  if (index != -1) {
    array.push(index);
 }
} while (index > -1);
console.log(array);

• 把字符串中全部的o替換成!

var s = 'abcoefoxyozzopp';
do {
  s = s.replace('o', '');
} while (s.indexOf('o') > -1);
console.log(s);
​
console.log(s.replace(/o/ig, ''));

• 判斷一個字符串中出現次數最多的字符，統計這個次數

var s = 'abcoefoxyozzopp';
var o = {};
​
for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
 }else{
    o[item] = 1;
 }
}
​
var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
 }
}
​
console.log(max);
console.log(char);