JavaScript經常使用對象

時間 2019-12-11

原文原文鏈接

1、建立對象

構造函數html

使用new操做符後跟Object構造函數

// 建立對象
var person = new Object();
// 給對象添加name和age屬性
person.name = 'jack';
person.age = 28;
// 給對象添加fav的方法
person.fav = function(){
    console.log('泡妹子');
}

// 特殊：
var person = {};    // 與new Object()相同

使用對象字面量表示法前端

對象字面量是對象定義的一種簡寫形式，目的在於簡化建立包含大量屬性的對象的過程

var person = {
    name : 'jack';
    age : 28,
    fav : function(){
        console.log('泡妹子');
    }
}

this指向
- 對象中的this指向當前對象
- 全局做用域中的this，必定指向window
- 函數中的this，通常狀況下，都指向window
  - 特殊狀況：使用call和apply，此時this指向傳入的對象
- 自執行函數中的this，必定指向window

var obj = {};
obj.name = 'mjj';
obj.fav = function(){        
    console.log(this);       // 此時this指向當前對象，即obj 
}

console.log(this);           // 此時this指向window
function  add(x,y) {
    console.log(this.name);
}
add();                      // 空值，此時this指向window
add.call(obj,1,2);           // 此時this指向傳入的對象，即obj
add.apply(obj,[1,2]);        // 此時this指向傳入的對象，即obj

(function () {
    console.log(this);       // 此時this指向window
})()

訪問對象中屬性的方法es6

點語法：用來訪問對象中的屬性

person.name;         // jack
person.fav();        // 泡妹子

括號表示法

person['name'];          // 至關於person.name;

遍歷對象數組

var obj = {};
for (var key in obj){
    obj[key]
}

面向對象app

// 使用構造函數來建立對象
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

// es6用class來建立對象
class Person{
    constructor(name,age){
        // 初始化
        this.name = name;
        this.age = age;
    }
    fav(){
        console.log(this.name);
    }
}
var p = new Person('mjj',18);
p.fav();

2、經常使用對象

2.1 數組：Array

數組的建立方式dom
- 跟object建立對象同樣，使用Array構造函數方式建立
```
var colors = new Array();
```
- 使用字面量方式建立數組
```
var colors = [];
```

Array.isArray()：肯定某個值究竟是否是數組函數

var colors = ['red','green','blue'];
Array.isArray(colors);       // true

toString()：返回由數組中每一個值以一個以逗號拼接成的字符串this

var colors = ['red','green','blue'];
alert(colors.toString());        // red,green,blue

join方法：返回由數組中每一個值以相同符號拼接成的字符串編碼

var colors = ['red','blue','green'];
colors.join('||');           // red||blue||green

棧方法：LIFO（後進先出）prototype
- push()：進，能夠接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度
```
var colors = [];
var count = colors.push('red','blue','green');
alert(count);                // 3
```
- pop()：出，從數組末尾移除最後一項，減小數組的length值，而後返回移除的項
```
var item = colors.pop();     // 取最後一項
alert(item);                 // green
alert(colors.length);        // 2
```

隊列方法：FIFO（先進先出）

unshift()：進，在數組前端添加任意個項並返回新數組的長度

var colors = [];
var count  = colors.unshift('red','green');  // 推入兩項
alert(count);                // 2
console.log(colors);         // ["red", "green"]

shift()：出，移除數組中的第一個項並返回該項，同時將數組長度減1

var colors = ['red','blue','green'];
var item = colors.shift();       // 取得第一項
alert(item);                 // "red"
alert(colors.length);        // 2

重排序方法

reverse()：反轉，翻轉數組項的順序

var values = [1,2,3,4,5];
values.reverse();
alert(values);           // 5,4,3,2,1

sort()：排序，默認是升序排列

// 升序
function compare(v1,v2){
    if(v1 < v2){
        return -1;
    }else if (v1 > v2){
        return 1;
    }else{
        return 0;
    }
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);           // 0,1,5,10,15
// 降序
function compare(v1,v2){
    if(v1 < v2){
        return 1;
    }else if (v1 > v2){
        return -1;
    }else{
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);           // 15,10,5,1,0

操做方法
- concat()：數組合並方法，一個數組調用concat()方法去合併另外一個數組，返回一個新的數組，接收的參數是能夠是任意的
  - 參數爲一個或多個數組，會將這些數組中每一項都添加到結果數組中。
  - 參數不是數組，這些值就會被簡單地添加到結果數組的末尾
```
var colors = ['red','blue','green'];
colors.concat('yello');                   // ["red", "blue", "green", "yello"]
colors.concat({'name':'張三'});           // ["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);  
// ["red", "blue", "green", {…}, "black", "brown"]
```
- slice()：基於當前數組中一個或多個項建立一個新數組，能夠接受一或兩個參數，要返回項的起始和結束位置
  - 一個參數的狀況下，返回從該參數指定位置開始到當前數組默認的全部項
  - 兩個參數的狀況下，返回起始和結束位置之間的項，但不包括結束位置的項
```
var colors = ['red','blue','green','yellow','purple'];
// 正值狀況下
colors.slice(1);     // ["blue", "green", "yellow", "purple"]
colors.slice(1,4);      // ["blue", "green", "yellow"]
// 負值狀況下
colors.slice(-2,-1); // ["yellow"] 
colors.slice(-1,-2); // []
```
- splice()：給數組插入、刪除、替換項
  - 插入：向指定位置插入任意數量的項，只需提供3個參數：起始位置，0（要刪除的個數），要插入的項
  - 刪除：刪除任意數量的項，只需指定2個參數：要刪除的第一項的位置，要刪除的個數
  - 替換：向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置，要刪除的項數，要插入的任意數量的項
```
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); 
alert(colors);       // green,blue 
alert(removed);  // red，返回的數組中只包含一項
removed = colors.splice(1, 0, "yellow", "orange"); 
alert(colors);       // green,yellow,orange,blue 
alert(removed);  // 返回的是一個空數組
removed = colors.splice(1, 1, "red", "purple"); 
alert(colors);       // green,red,purple,orange,blue 
alert(removed);  // yellow，返回的數組中只包含一項
```

位置方法

indexOf()：從數組的開頭(索引位置0)開始向後查找
lastIndexOf()：從數組的末尾開始向前查找

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.indexOf(4);          // 3
numbers.lastIndexOf(4);      // 5
numbers.indexOf(4,4);        // 5
numbers.lastIndexOf(4,4);    // 3
var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
people.indexOf(person);   // -1
morePeople.indexOf(person);  // 0

迭代方法

filter()：利用指定的函數肯定是否在返回的數組中包含某一項

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult);    // [3,4,5,4,3]

map()：返回一個數組，而這個數組的每一項都是在原始數組中的對應項上執行函數的結果

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult);    // [2,4,6,8,10,8,6,4,2]

forEach()：對數組中的每一項執行函數，沒有返回值，本質上與使用for循環迭代數組同樣，只能在數組中使用

//執行某些操做,至關於for循環
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});

2.2 字符串：String

字符串的建立方式
```
var stringValue = "hello world";
```

length屬性

var stringValue = "hello world"; 
alert(stringValue.length);            // "11"

字符方法

charAt()：返回給定位置的那個字符

var stringValue = "hello world"; 
alert(stringValue.charAt(1));         // "e"

charCodeAt()：返回給定位置的那個字符所對應的編碼

var stringValue = "hello world";
alert(stringValue.charCodeAt(1));     // 輸出"101"

字符操做方法

concat()：用於將一或多個字符串拼接起來，返回拼接獲得的新字符串
+或${}，也能夠拼接字符串

var stringValue = "hello ";
var result = stringValue.concat("world"); alert(result);           // "hello world" 
alert(stringValue);      // "hello"

// concat()方法能夠接受任意多個參數，也就是說能夠經過它來拼接任意多個字符串
var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result);           // "hello world!"

// 拼接字符串
// 通用方式：
var name = 'wusir', age = 28;
var str = name + '今年是' + age + '歲了，快要結婚了，娶了個黑姑娘';
// es6的模板字符串，使用``（Tab上面的那個鍵）
var str2 = `${name}今年是${age}歲了，快要結婚了，娶了個黑姑娘`;

slice()，substr()，substring()：基於子字符串建立新字符串的方法

var stringValue = "hello world";
// 正值狀況下
stringValue.slice(3);          // "lo world"
stringValue.substring(3);      // "lo world"
stringValue.substr(3));        // "lo world"
stringValue.slice(3, 7);       // "lo w"
stringValue.substring(3,7);    // "lo w"
stringValue.substr(3, 7);      // "lo worl
// 負值狀況下
stringValue.slice(-3);         // "rld" 
stringValue.substring(-3);     // "hello world"
stringValue.substr(-3);        // "rld"
stringValue.slice(3, -4);      // "lo w" 
stringValue.substring(3, -4);  // "hel"
stringValue.substr(3, -4);     // ""(空字符串)

字符串位置方法

indexOf()：從字符串的開頭向後搜索子字符串
lastIndexOf()：從字符串的末尾向前搜索子字符串

var stringValue = "hello world";
alert(stringValue.indexOf("o"));            // 4
alert(stringValue.lastIndexOf("o"));        // 7
alert(stringValue.indexOf("o", 6));         // 7
alert(stringValue.lastIndexOf("o", 6));     // 4

trim()：刪除字符串的先後空格

var stringValue = "   hello world   ";
stringValue.trim();       // "hello world"

字符串大小寫轉換方法

toUpperCase()：小寫轉換成大寫
toLowerCase()：大寫轉換成小寫

var stringValue = "hello world";
stringValue.toUpperCase();       // "HELLO WORLD"
stringValue.toLowerCase();       // "hello world"

2.3 日期對象：Date

日期對象的建立方式
```
var myDate = new Date();
```
基本方法
- getDate()：返回指定日期對象的月份中的第幾天
- Date()：返回當天的日期和時間
- getMonth()：返回指定日期對象的月份
- getFullYear()：返回指定日期對象的年份
- getDay()：返回指定日期對象的星期中的第幾天
- getHours()：返回指定日期對象的小時
- getMinutes()：返回指定日期對象的分鐘
- getSeconds()：返回指定日期對象的秒數
日期格式化方法
- toLocaleString()：以特定於實現的格式顯示年月日，時分秒;
- toDateString()：以特定於實現的格式顯示星期幾、月、日和年
- toTimeString()：以特定於實現的格式顯示時、分、秒和時區;
- toUTCString()：以特定於實現的格式完整的 UTC 日期
```
var myDate = new Date();
myDate.toLocaleString();     // "2019/6/4 上午9:33:58"
myDate.toDateString();          // "Mon Apr 15 2019"
myDate.toTimeString();          // "10:11:53 GMT+0800 (中國標準時間)"
myDate.toUTCString();           // "Mon, 15 Apr 2019 02:11:53 GMT"
```

將今天的星期數顯示在網頁上，即寫入body中，使用document.write

var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`);

數字時鐘

示例：返回了用數字時鐘格式的時間

var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0)
    temp = "12";
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
alert(temp);

升級版：在網頁上顯示數字時鐘的動態效果

<body>
<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);
    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }
    setInterval(getNowTime, 20)
</script>
</body>

2.4 數學對象：Math

min()和max()方法

Math.min()：求最小值
Math.max()：求最大值

var max = Math.max(3, 54, 32, 16);
alert(max);    // 54
var min = Math.min(3, 54, 32, 16);
alert(min);    // 3

// 特殊：使用apply，找到數組中最大或最小值
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);

舍入方法
- Math.ceil()：天花板函數，只入不捨，至關於取整再加1
  - 執行向上舍入，即它老是將數值向上舍入爲最接近的整數
- Math.floor()：地板函數，只舍不入，至關於取整
  - 執行向下舍入，即它老是將數值向下舍入爲最接近的整數
- Math.round()：四捨五入，和數學中的取捨方式一致
  - 執行標準舍入，即它老是將數值四捨五入爲最接近的整數
```
var num = 25.7;
var num2 = 25.2;
Math.ceil(num);     // 26
Math.floor(num);    // 25
Math.round(num);    // 26
Math.round(num2);   // 25
```

random()方法

用來取隨機數
Math.random()：方法返回大於等於0小於1的一個隨機數

// 例1:獲取min到max的範圍的整數
function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

// 例2: 獲取隨機顏色
/* 產生一個隨機的rgb顏色
@return {String}  返回顏色rgb值字符串內容，如：rgb(201, 57, 96) */
function randomColor() {
 // 隨機生成rgb值，每一個顏色值在0-255之間
    var r = random(0, 256),
        g = random(0, 256),
        b = random(0, 256);
 // 鏈接字符串的結果
    var result = "rgb("+ r +","+ g +","+ b +")";
    // 返回結果
    return result;
}

// 例3: 獲取隨機驗證碼
function createCode(){
    //首先默認code爲空字符串
    var code = '';
    //設置長度，這裏看需求，我這裏設置了4
    var codeLength = 4;
    //設置隨機字符
    var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
    //循環codeLength 我設置的4就是循環4次
    for(var i = 0; i < codeLength; i++){
        //設置隨機數範圍,這設置爲0 ~ 36
        var index = Math.floor(Math.random()*36);
        //字符串拼接 將每次隨機的字符 進行拼接
        code += random[index]; 
    }
    //將拼接好的字符串賦值給展現的Value
    return code
}

3、字符串和數值之間的轉換

字符串轉數值

parseInt()：字符串轉整數
perseFloat()：字符串轉浮點型
Number()：字符串轉數值

var str = '123.0000111';         
console.log(parseInt(str));           // 123
console.log(typeof parseInt(str));     // number
console.log(parseFloat(str));         // 123.0000111
console.log(typeof parseFloat(str));  // number
console.log(Number(str));             // 123.0000111

數值轉字符串

toString()：數值轉字符串
數字+空的字符串：數值轉字符串

var num  = 1233.006;
// 強制類型轉換
console.log(String(num));
console.log(num.toString());
// 隱式轉換
console.log(''.concat(num));
// toFixed()方法會按照指定的小數位返回數值的字符串 四捨五入
console.log(num.toFixed(2));

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。