TypeScript02 方法特性【參數種類、參數個數】、generate方法、析構表達式、箭頭表達式、循環

時間  2019-11-11
標籤 typescript02 typescript 方法 特性 參數種類、參數個數 generate 表達式 箭頭 循環 简体版
原文   原文鏈接

 

1 方法的參數

　　1.1 必選參數

　　　　調用方法時實參的個數必須和定義方法時形參在數量和類型上匹配數組

 1 /**
 2  * Created by Administrator on 2017/8/2 0002.
 3  */
 4 function test(x: number): number {
 5     return x + 10;
 6 }
 7 
 8 let y = test(210);
 9 console.log(y);
10 
11 // let y02 = test();  // 報錯：缺乏參數信息
1 /**
2  * Created by Administrator on 2017/8/2 0002.
3  */
4 function test(x) {
5     return x + 10;
6 }
7 var y = test(210);
8 console.log(y);
9 // let y02 = test();  // 報錯：缺乏參數信息
JS代碼

　　1.2 可選參數

　　　　調用方法時該參數能夠不傳入值app

/**
 * Created by Administrator on 2017/8/2 0002.
 */
function test(x?: number): number {
    if(x) {
        return x + 100;
    } else {
        return 999;
    }
}

let y = test(); // 不傳入參數
console.log(y);

let y02 = test(100); // 傳入參數
console.log((y02));
 1 /**
 2  * Created by Administrator on 2017/8/2 0002.
 3  */
 4 function test(x) {
 5     if (x) {
 6         return x + 100;
 7     }
 8     else {
 9         return 999;
10     }
11 }
12 var y = test(); // 不傳入參數
13 console.log(y);
14 var y02 = test(100); // 傳入參數
15 console.log((y02));
JS代碼

　　1.3 默認參數

　　　　調用方法時該參數能夠傳入，也能夠不傳入；不傳入時就使用默認值dom

 1 /**
 2  * Created by Administrator on 2017/8/2 0002.
 3  */
 4 function test(x: number = 100): number {
 5     return x + 100;
 6 }
 7 
 8 let y = test(899); // 傳入參數
 9 console.log(y);
10 
11 let y02 = test(); // 不傳入參數
12 console.log(y02);
 1 /**
 2  * Created by Administrator on 2017/8/2 0002.
 3  */
 4 function test(x) {
 5     if (x === void 0) { x = 100; }
 6     return x + 100;
 7 }
 8 var y = test(899); // 傳入參數
 9 console.log(y);
10 var y02 = test(); // 不傳入參數
11 console.log(y02);
JS代碼

　　1.4 參數的順序

　　　　必選參數 -> 可選參數 -> 默認參數ide

　　　　注意：可選參數必須在必選參數後面，默認參數沒有要求，可是若是默認參數在必選參數前面，那麼在不傳入默認參數時就須要傳入一個undefined去佔位置函數

 

2 參數個數

　　2.1 任意多個單數01

　　　　調用方法時能夠傳入任意多個參數，並且參數的類型沒有限定this

/**
 * Created by Administrator on 2017/8/2 0002.
 */
function test(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    });
}

test(1,"warrior",2,"fury",[11,22,33],"fury",{name:"warrior", age: 24});
/**
 * Created by Administrator on 2017/8/2 0002.
 */
function test() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
test(1, "warrior", 2, "fury", [11, 22, 33], "fury", { name: "warrior", age: 24 });
JS代碼

運行JS代碼的結果爲spa

　

　　2.2 任意多個單數02

　　　　將要傳入的任意多個實參組合成一個數組，而後再傳到方法中去3d

 1 /**
 2  * Created by Administrator on 2017/8/2 0002.
 3  */
 4 function test(...args) {
 5     args.forEach(function (arg) {
 6         console.log(arg);
 7     });
 8 }
 9 
10 // test(1,"warrior",2,"fury",[11,22,33],"fury",{name:"warrior", age: 24});
11 
12 var arg02 = [1,"warrior",2,"fury",[11,22,33],"fury",{name:"warrior", age: 24}];
13 test(...arg02);
/**
 * Created by Administrator on 2017/8/2 0002.
 */
function test() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
// test(1,"warrior",2,"fury",[11,22,33],"fury",{name:"warrior", age: 24});
var arg02 = [1, "warrior", 2, "fury", [11, 22, 33], "fury", { name: "warrior", age: 24 }];
test.apply(void 0, arg02);
JS代碼

　　運行JS代碼的結果爲code

　　　　

 

3 generate方法

　　調用不一樣，函數體遇到yield就會停下來對象

/**
 * Created by Administrator on 2017/8/2 0002.
 */
function* test() {
    console.log("start");
    yield console.log("second"); // 至關於設置了一個斷點，執行完yield後面的代碼就會停下來
    console.log("finish");
}

let foo = test(); // 不能直接用 test() 去調用方法
foo.next(); // 執行完yield後面的代碼就會停下來
// foo.next();
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
/**
 * Created by Administrator on 2017/8/2 0002.
 */
function test() {
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0:
                console.log("start");
                return [4 /*yield*/, console.log("second")];
            case 1:
                _a.sent(); // 至關於設置了一個斷點，執行完yield後面的代碼就會停下來
                console.log("finish");
                return [2 /*return*/];
        }
    });
}
var foo = test(); // 不能直接用 test() 去調用方法
foo.next(); // 執行完yield後面的代碼就會停下來
// foo.next();
JS代碼

　　運行JS代碼的結果爲

　　　　

　　3.1 generate方法小案例

　　　　模擬股票價格變化，當達到預約值後就進行買入操做

/**
 * Created by Administrator on 2017/8/2 0002.
 */
function* getStockPrice() {
    while(true) {
        yield Math.random()*100; // 產生隨機數來模擬股票價格
    }
}

let priceGenerate = getStockPrice();

let currentPrice = 150; // 設定一個當前價格
let limitPrice = 20; // 設定一個買入價格

while(currentPrice > limitPrice) { // 到上一時刻的價格大於買入價格時就獲取當前時刻的價格並打印當前時刻的價格
    currentPrice = priceGenerate.next().value;
    console.log(`當前股票的價格爲：${currentPrice}`);
}

console.log(`當前股票的價格已經低於${limitPrice},因此進行了自動買入操做。`); // 當股票價格低於買入價格時，就進行自動買入操做
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [0, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
/**
 * Created by Administrator on 2017/8/2 0002.
 */
function getStockPrice() {
    return __generator(this, function (_a) {
        switch (_a.label) {
            case 0:
                if (!true) return [3 /*break*/, 2];
                return [4 /*yield*/, Math.random() * 100];
            case 1:
                _a.sent(); // 產生隨機數來模擬股票價格
                return [3 /*break*/, 0];
            case 2: return [2 /*return*/];
        }
    });
}
var priceGenerate = getStockPrice();
var currentPrice = 150; // 設定一個當前價格
var limitPrice = 20; // 設定一個買入價格
while (currentPrice > limitPrice) {
    currentPrice = priceGenerate.next().value;
    console.log("\u5F53\u524D\u80A1\u7968\u7684\u4EF7\u683C\u4E3A\uFF1A" + currentPrice);
}
console.log("\u5F53\u524D\u80A1\u7968\u7684\u4EF7\u683C\u5DF2\u7ECF\u4F4E\u4E8E" + limitPrice + ",\u6240\u4EE5\u8FDB\u884C\u4E86\u81EA\u52A8\u4E70\u5165\u64CD\u4F5C\u3002"); // 當股票價格低於買入價格時，就進行自動買入操做
JS代碼

　　運行JS代碼的結果

　　　　

 

4 析構表達式

　　經過表達式將對象或者數組拆解成任意屬性的變量

　　4.1 對象析構表達式

　　　　注意：對象析構表達式的中變量的數量必須保持一致，並且變量名和對象的key值也要保持一致

let {nam, age ,address} = {nam:"warrior", age:24, address:"渝足"};
// let {nam, age ,address} = {nam:"warrior", age:24}; // 報錯
// let {nam, age} = {nam:"warrior", age:24, address:"渝足"}; // 報錯
console.log(nam)
console.log(age)
console.log(address)
var _a = { nam: "warrior", age: 24, address: "渝足" }, nam = _a.nam, age = _a.age, address = _a.address;
// let {nam, age ,address} = {nam:"warrior", age:24}; // 報錯
// let {nam, age} = {nam:"warrior", age:24, address:"渝足"}; // 報錯
console.log(nam);
console.log(age);
console.log(address);
JS代碼

　　運行JS代碼的結果

　　　　

　　　　4.1.1 變量名和對象的key值不一致時的解決辦法
let {nam: myName, age:myAge ,address:myAdress} = {nam:"warrior", age:24, address:"重慶"};
console.log(myName)
console.log(myAge)
console.log(myAdress)
var _a = { nam: "warrior", age: 24, address: "重慶" }, myName = _a.nam, myAge = _a.age, myAdress = _a.address;
console.log(myName);
console.log(myAge);
console.log(myAdress);
JS代碼

　　運行JS代碼的結果爲

　　　　

　　　　4.1.2 對象的一個key對應的value爲一個對象的狀況

let {
        nam: myName,
        age:myAge ,
        address:myAdress,
        habbit // :{habbit01,habbit02}
    } = {
            nam:"warrior",
            age:24,
            address:"重慶",
            habbit: {
                habbit01: "籃球",
                habbit02: "足球"
            }
        };


console.log(myName)
console.log(myAge)
console.log(myAdress)
console.log(habbit)
var _a = {
    nam: "warrior",
    age: 24,
    address: "重慶",
    habbit: {
        habbit01: "籃球",
        habbit02: "足球"
    }
}, myName = _a.nam, myAge = _a.age, myAdress = _a.address, habbit = _a.habbit // :{habbit01,habbit02}
;
console.log(myName);
console.log(myAge);
console.log(myAdress);
console.log(habbit);
JS代碼

　　運行JS代碼的結果爲

　　　　

　　　　4.1.3 將對象中某個key對應的對象中的數據拆解成變量

let {
        nam: myName,
        age:myAge ,
        address:myAdress,
        habbit :{habbit01,habbit02}, // 將對象中某個key對應的對象中的值拆解成變量
    } = {
            nam:"warrior",
            age:24,
            address:"重慶",
            habbit: {
                habbit01: "籃球",
                habbit02: "足球"
            }
        };


console.log(myName)
console.log(myAge)
console.log(myAdress)
console.log(habbit01)
console.log(habbit02)
var _a = {
    nam: "warrior",
    age: 24,
    address: "重慶",
    habbit: {
        habbit01: "籃球",
        habbit02: "足球"
    }
}, myName = _a.nam, myAge = _a.age, myAdress = _a.address, _b = _a.habbit, habbit01 = _b.habbit01, habbit02 = _b.habbit02;
console.log(myName);
console.log(myAge);
console.log(myAdress);
console.log(habbit01);
console.log(habbit02);
JS代碼

　　運行JS代碼的結果爲

　　　　

　　4.2 數組的析構表達式

　　　　4.2.1 變量個數和數組長度相等時

let arr = [1,2,3,4];

let [num1,num2,num3,num4] = arr;

console.log(num1)
console.log(num2)
console.log(num3)
console.log(num4)
var arr = [1, 2, 3, 4];
var num1 = arr[0], num2 = arr[1], num3 = arr[2], num4 = arr[3];
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
JS代碼

　　運行JS代碼的結果爲

　　　　

　　　　4.2.2 變量個數小於數組長度時

　　　　　　利用逗號站位便可

let arr = [1,2,3,4];

let [,,num3,num4] = arr;

// console.log(num1)
// console.log(num2)
console.log(num3)
console.log(num4)
var arr = [1, 2, 3, 4];
var num3 = arr[2], num4 = arr[3];
// console.log(num1)
// console.log(num2)
console.log(num3);
console.log(num4);
JS代碼

　　運行JS代碼的結果爲

　　　　

　　　　4.2.3 將數組的多個元素放到一個數組變量中

let arr = [1,2,3,4];

let [num1,num2,...args] = arr;

console.log(num1)
console.log(num2)
console.log(args)
// console.log(num3)
// console.log(num4)
var arr = [1, 2, 3, 4];
var num1 = arr[0], num2 = arr[1], args = arr.slice(2);
console.log(num1);
console.log(num2);
console.log(args);
// console.log(num3)
// console.log(num4)
JS代碼

　　運行JS代碼的結果爲

　　　　

 

5 箭頭表達式

　　用於聲明匿名錶達式

　　注意：參數只有一個是能夠不用寫括號，方法體只用一行時不用寫大括號

　　注意：箭頭表達式能夠有效的避免this的指向問題【詳情請參見「揭祕Angular2」】

let test = (x:number, y:number):number => {
    x += 10;
    y += 20;
    return x + y;
};

console.log(test(12,3))
var test = function (x, y) {
    x += 10;
    y += 20;
    return x + y;
};
console.log(test(12, 3));
JS代碼

　　運行JS代碼的結果

　　　　

　　

6 循環

　　6.1 forEach循環

　　　　會循環數組中的元素，可是會忽略掉數組中的屬性；並且不可以跳出循環；循環替代者的類型是數組元素原來的類型

let arr01 = [1,2,3,4]
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持

arr01.forEach((value) => {console.log(value)})
var arr01 = [1, 2, 3, 4];
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持
arr01.forEach(function (value) { console.log(value); });
JS代碼

　　運行JS代碼的結果爲

　　　　

　　6.2 for...in...循環

　　　　能夠循環元素和屬性，循環到的元素都變成了string類型；這種循環能夠被打斷

let arr01 = [1,2,3,4]
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持

for(var value in arr01) {
    if(value == "3") {
        break;
    }
    console.log(value);
}
var arr01 = [1, 2, 3, 4];
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持
for (var value in arr01) {
    // if (value == "3") { // 雖然數組中的元素都是number類型，可是循環替代者value是字符串類型
    //     break;
    // }
    console.log(value);
}
JS代碼

　　運行JS代碼的結果爲

　　　　

　　6.3 for...of...循環

　　　　會循環數組元素和數組屬性，還能夠被打斷；循環替代者的類型是數組元素的類型

let arr01 = [1,2,3,4]
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持

for(var value of arr01) {
    if(value == 3) {
        console.log("Hello Boy");
        break;
    }
    console.log(value);
}
var arr01 = [1, 2, 3, 4];
arr01.desc = "我是arr01數組的描述屬性喲。"; // ts不支持，可是js支持
for (var _i = 0, arr01_1 = arr01; _i < arr01_1.length; _i++) {
    var value = arr01_1[_i];
    if (value == 3) {
        console.log("Hello Boy");
        break;
    }
    console.log(value);
}
JS代碼

　　運行JS代碼的結果爲

　　　　

 

 七、類、接口、泛型、註解、類型定義文件

　　待更新...2017年8月2日17:58:51

　　能夠參見手冊或相關書籍

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程