js（六）——ECMAScript基礎之對象及內置對象

對象字面量

字面量：11 'abc' true [] {}等

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

思考：

如何把學生對象、老師對象、英雄對象改寫成字面量的方式

對象創建方式

• 1.對象字面量

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};   

• 2.new Object()創建對象

var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
  console.log('Hello,everyBody');
}

• 3.工廠函數創建對象

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('張三', 22, 'actor');

• 4.自定義構造函數

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
    console.log('Hello,everyBody');
  }
}
var p1 = new Person('張三', 22, 'actor');

屬性和方法

如果一個變量屬於一個對象所有，那麼該變量就可以稱之爲該對象的一個屬性，屬性一般是名詞，用來描述事物的特徵
如果一個函數屬於一個對象所有，那麼該函數就可以稱之爲該對象的一個方法，方法是動詞，描述事物的行爲和功能

new關鍵字

構造函數 ，是一種特殊的函數。主要用來在創建對象時初始化對象， 即爲對象成員變量賦初始值，總與new運算符一起使用在創建對象的語句中。

1. 構造函數用於創建一類對象，首字母要大寫。

2. 構造函數要和new一起使用纔有意義。

new在執行時會做四件事情

new會在內存中創建一個新的空對象
new 會讓this指向這個新的對象
執行構造函數  目的：給這個新對象加屬性和方法
new會返回這個新對象

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨着學習的深入，我們可以逐漸瞭解
現在我們需要掌握函數內部的this幾個特點
    1. 函數在定義的時候this是不確定的，只有在調用的時候纔可以確定
    2. 一般函數直接執行，內部this指向全局window
    3. 函數作爲一個對象的方法，被該對象所調用，那麼this指向的是該對象
    4. 構造函數中的this其實是一個隱式對象，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式對象身上，後續通過new關鍵字來調用，從而實現實例化

對象的使用

遍歷對象的屬性

通過for..in語法可以遍歷一個對象

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

刪除對象的屬性(delete)

function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

簡單類型和複雜類型的區別

基本類型又叫做值類型，複雜類型又叫做引用類型

值類型：簡單數據類型，基本數據類型，在存儲時，變量中存儲的是值本身，因此叫做值類型。

引用類型：複雜數據類型，在存儲是，變量中存儲的僅僅是地址（引用），因此叫做引用數據類型。

• 堆和棧

  堆棧空間分配區別：
  　　1、棧（操作系統）：由操作系統自動分配釋放 ，存放函數的參數值，局部變量的值等。其操作方式類似於數據結構中的棧；
  　　2、堆（操作系統）： 存儲複雜類型(對象)，一般由程序員分配釋放， 若程序員不釋放，由垃圾回收機制回收，分配方式倒是類似於鏈表。

• 注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以後的學習。

基本類型在內存中的存儲

複雜類型在內存中的存儲

基本類型作爲函數的參數

複雜類型作爲函數的參數

// 下面代碼輸出的結果
function Person(name,age,salary) {
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person) {
  person.name = "ls";
  person = new Person("aa",18,10);
}
​
var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);

思考：

//1. 
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);
​
//2. 
var num = 50;
function f1(num) {
    num = 60;
    console.log(num);
}
f1(num);
console.log(num);
​
//3. 
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
  num = 100;
  num1 = 100;
  num2 = 100;
  console.log(num);
  console.log(num1);
  console.log(num2);
}
​
f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);

內置對象

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

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

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

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

可以通過MDN/W3C來查詢

內置對象的方法很多，我們只需要知道內置對象提供的常用方法，使用的時候查詢文檔。

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()     // 求指數次冪/求平方根

 

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);