国产精品AV网站,欧美日韩78,日韩骚逼影院

字符串的新特性

多行字符串

使用``實現(xiàn)多行字符串

var content = `aaaa
bbbb
ccccc`;

編譯成js代碼為:

var content = "aaaa\nbbbb\nccccc";

字符串模板

其實和多行字符串差不多

var mynane = "jack";

var getName = function () {
    return "jack";
}

console.log(`<div>
<span>${mynane}</span>
<span>${getName()}</span>
</div>`);

console.log(`hello${mynane}`);
console.log(`hello${getName()}`);

編譯js代碼:

var mynane = "jack";
var getName = function () {
    return "jack";
};
console.log("<div>\n<span>" + mynane + "</span>\n<span>" + getName() + "</span>\n</div>");
console.log("hello" + mynane);
console.log("hello" + getName());

自動拆分字符串

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "jack";
var getAge = function () {
    return 18;
}

test`hello my name is ${myname},i'm${getAge()}`

打印結(jié)果:

自動拆分字符串,很神奇的用法

參數(shù)新特性之參數(shù)類型

參數(shù)類型:在參數(shù)名稱后面使用冒號來指定參數(shù)的類型
例如:string類型的,當賦值number類型時,報錯

string類型的,當賦值number類型時,報錯

2.類型推斷機制
例如:當我沒有指定類型時,第一次給變量賦值為string類型時,當我修改這個變量為number類型,就會報錯.

類型推斷機制
any類型
當我賦值任何類型時,都不會報錯;
上面的例子,當我把alias的類型指定為any時,就不會報錯了;

any類型
其他類型: number數(shù)字類型 , boolean布爾類型 , void類型

number類型

var age: number = 13;

boolean布爾類型

var man: boolean = true;

void類型: 用于定義函數(shù)返回類型等
定義函數(shù)的返回類型為void類型,當函數(shù)有返回值時,報錯!,說明他不需要有任何類型的返回值.

定義函數(shù)的返回類型為void類型

自定義類型
自定義一個對象類型

class Person {
    name: string;
    age: number;
}

var zhangsan: Person = new Person();
zhangsan.name = 'jack';
zhangsan.age = 18;

參數(shù)新特性之默認參數(shù)

在參數(shù)聲明后面用等號來指定參數(shù)的默認值

1.只要在等號后邊賦上默認值即可

var myname: string = "張三";

2.給方法的變量指定默認值

給方法參數(shù)指定類型

function test(a:string, b:string, c:string) {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx","yyy","zzz");

當調(diào)用上面的方法,如果少傳一個參數(shù),就會報錯

函數(shù)如果少傳一個參數(shù),就會報錯

如何解決上面函數(shù)報錯的問題呢? 可以給第三個參數(shù)指定一個默認值; 這樣如果第三個參數(shù)不填,就會調(diào)用默認值;

注意: 帶默認值的參數(shù)一定要聲明在"最后面";

函數(shù)參數(shù)指定默認值

參數(shù)新特性之可選參數(shù)

在方法的參數(shù)聲明后面用問號來標明此參數(shù)為可選參數(shù)

以上面的方法為例,在b參數(shù)后面寫上?,定義為可選參數(shù);

function test(a: string, b?: string, c: string = "jack") {
    console.log(a);
    console.log(b);
    console.log(c);
}

test("xxx");

可選參數(shù)如果不傳值,那么他就是undefined

注意:必選的參數(shù),不能在可選參數(shù)的后面

必選的參數(shù),不能在可選參數(shù)的后面

函數(shù)新特性

Rest and Spread操作符: ①.用來聲明任意數(shù)量的方法參數(shù)

function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    })
}

func1(1, 2, 3);  // 1,  2,  3
func1(5, 6, 7, 8, 9);  // 5, 6, 7, 8, 9

②.Rest and Spread操作符:另外一個作用:展開運算符
當然此語法TypeScript還不支持,會報錯,但是轉(zhuǎn)成js語法后可正常編譯.

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var args = [1, 2];
func1(...args);  //執(zhí)行結(jié)果: 1, 2, undefined

var args2 = [7, 8, 9, 10, 11];
func1(...args2);  //執(zhí)行結(jié)果: 7 , 8, 9

上述代碼編譯成js語法后

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var args = [1, 2];
func1.apply(void 0, args);
var args2 = [7, 8, 9, 10, 11];
func1.apply(void 0, args2);

generator函數(shù):控制函數(shù)的執(zhí)行過程, 手工暫停和恢復代碼執(zhí)行;
類似于斷點調(diào)試(目前ts還不支持,它是ES6的一部分)
在babel編輯器中

通過號`function xxx()`聲明 `generator`函數(shù)

function* doSomething(){
  console.log("start");
  yield; // 類似于一個斷點
  console.log("finish");
}

var func1 = doSomething();

func1.next(); // 代表函數(shù)執(zhí)行,第一次走,函數(shù)會停在yield斷點處;
func1.next();// 第二次走,會越過yield斷點繼續(xù)往下執(zhí)行;

又例如:下面的函數(shù),當價格小于limitPrice時,購買股票(點擊查看源碼)

function* getStockPrice(stock){
  while(true){
    yield Math.random()*100;
  }
}

var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;
var price = 100;

while(price > limitPrice){
  price = priceGenerator.next().value;
  console.log(`the generator return ${price}`);
}

console.log(`buying at ${price}`);

3.destructuring析構(gòu)表達式:通過表達式,將對象或者數(shù)組拆解成任意數(shù)量的變量

也就是之前了解的"結(jié)構(gòu)賦值"

①:對象中的使用

function getStock() {
    return {
        code: "IBM",
        price: 100
    }
}

// ES5
var stock = getStock();
var code = stock.code;
var price = stock.price;

// ES6
// var { code, price } = getStock();
// 也可以設(shè)置別名
var { code: codex, price } = getStock();
// 調(diào)用別名
console.log(codex); // IBM

對象中多層嵌套屬性

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2:400
        },
        aaa: "xixi",
        bbb: "hahah"
    }
}

// code: codex 設(shè)置別名
var { code: codex, price: { price1, price2 } } = getStock();
// 調(diào)用別名
console.log(codex); // IBM
console.log(price1); // 200

②. 數(shù)組中析構(gòu)表達式的使用

var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;

console.log(number1); // 1
console.log(number2); // 2

取數(shù)組中的后兩個值

var array1 = [1, 2, 3, 4];
var [, , number1, number2] = array1;
console.log(number1); // 3
console.log(number2); // 4

舉一反三

var array1 = [1, 2, 3, 4];
var [number1, , , number2] = array1;
console.log(number1); // 1
console.log(number2); // 4

析構(gòu)表達式和`Rest and Spread`操作符共同使用

var array1 = [1, 2, 3, 4];
var [number1, number2, ...others] = array1;

console.log(number1); // 1
console.log(number2); // 2
console.log(others); // 數(shù)組 [3, 4]

函數(shù)中的使用

var array1 = [1, 2, 3, 4];

function doSomething([number1, number2, ...others]) {
    console.log(number1); // 1
    console.log(number2); // 2
    console.log(others);  // 數(shù)組 [3, 4]
}

doSomething(array1);

表達式和循環(huán)

1.箭頭表達式:用來聲明匿名函數(shù),消除傳統(tǒng)匿名函數(shù)的this指針問題

簡單使用

//1.1 => 箭頭后面如果只有一行,不用寫大括號的 arg1 + arg2;
var sum1 = (arg1, arg2) => arg1 + arg2;

//1.2 如果是多行
var sum2 = (arg1, arg2) => {
    return arg1 + arg2;
}

//1.3 沒有參數(shù)的箭頭函數(shù)
var sum3 = () => {

}

//1.4 只有一個參數(shù)的箭頭函數(shù),參數(shù)可以省略()
var sum4 = arg1 => {
    console.log(arg1);
}

// 1.5 箭頭函數(shù)的簡單使用
var myArray = [1, 2, 3, 4];
// 篩選出數(shù)組中的偶數(shù)
console.log(myArray.filter(value => value % 2 == 0)); // 數(shù)組[2, 4]

消除傳統(tǒng)匿名函數(shù)的this指針問題

function getStock(name: string) {
    this.name = name;
    setInterval(function () {
        console.log(`name is ${this.name}`); //打印結(jié)果: name is ,this.name的值為空
    },1000);
}

var stock = new getStock("IBM");


function getStock2(name: string) {
    this.name = name;
    setInterval(() => {
       console.log(`name is ${this.name}`); //打印結(jié)果:name is IBM,這下this.name就有值了,這樣更符合開發(fā)者的編程習慣
    }, 1000);
}

var stock2 = new getStock2("IBM");

循環(huán) forEach(), for in 和 for of ,還有find()

forEach()

var myArray = [1, 2, 3, 4];
myArray.desc = "four number"; // 給數(shù)組添加屬性,ts語法不支持

//注意:
//1.1 forEach()循環(huán)會去循環(huán)數(shù)組里面的元素,把屬性忽略掉
//1.2 forEach()循環(huán)中間不能break(跳出循環(huán))

myArray.forEach(value => console.log(value)); // 依次輸出1,2,3,4

for in

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 給數(shù)組添加屬性,ts語法不支持

for (var n in myArray) {
    // 注意 for in 循環(huán)的是集合的鍵,在此處指的是數(shù)組的下標
    console.log(n); // 0, 1, 2, 3, desc
    // 要想打印出數(shù)組的值
    console.log(myArray[n]);// jack, lucy, lily, tom, desc
}
// 注意:for in 循環(huán)可以把數(shù)組的屬性循環(huán)出來,這個行為很可能不是我們希望的行為

for of

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 給數(shù)組添加屬性,ts語法不支持

for (var name of myArray) {
    console.log(name); // jack, lucy, lily, tom  
}

// for of 和 for in的區(qū)別:for of可以忽略掉數(shù)組的屬性,for of循環(huán)的是集合的值, for in 循環(huán)的是鍵

for of循環(huán)是可以被打斷的

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 給數(shù)組添加屬性,ts語法不支持

for (var name of myArray) {
    if (name == "lily") break;// 當循環(huán)到name==lily時,跳出循環(huán)
    console.log(name); // jack, Lucy 
}

for of循環(huán)字符串

var myaddress = "Shanghai";
for (var char of myaddress) {
     console.log(char); // 打印結(jié)果: s ,h,a,,n,g,h,a,i
}

for of還可以循環(huán)對象,map等

find()函數(shù),通過條件查詢出符合條件的

  getStock(id: number): Stock {
    return this.stocks.find(stock => stock.id === id);
  }

TypeScript類

類 (class)
類是TypeScript的核心,使用Typescript開始時,大部分代碼都是寫在類里面的.

類的定義

class Person{
    name;
    eat() {
        console.log("i'm eatting");
    }
}

// 類的實例化
var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

// 一個類可以new出多個示例,他們擁有相同的屬性和方法,但是屬性的狀態(tài)不同!

類的訪問控制符: public, private, protected
public: 默認是訪問控制符,public的屬性和方法都是可以在類的內(nèi)部和外部訪問到的.
private: 私有的,只可以在類的內(nèi)部被訪問到,在類的外部是訪問不到的!
protected: 受保護的,受保護的屬性和方法可以在類的內(nèi)部和他的子類(繼承)里邊被訪問到.

private修飾的私有方法,不可以被外界訪問到,外界訪問直接報錯

類的構(gòu)造函數(shù)

constructor:在類被實例化的時候調(diào)用,而且只會被調(diào)用一次,在外部是訪問不到的!

例如:類的實例化時,必須傳進來一個名字

class Person{
    name;
    constructor(name:string) {
        this.name = name;
    }
    eat() {
        console.log(this.name);
    }
}

// 類的實例化
var p1 = new Person("batman");
p1.eat(); // batman

var p2 = new Person("superman");
p2.eat(); // superman

上面的方法等同于下面

class Person{
    //public name:string 等同于生命了一個name屬性
    constructor(public name:string) {
        
    }

    eat() {
        console.log(this.name);
    }
}

// 類的實例化
var p1 = new Person("batman");
p1.eat(); // batman

var p2 = new Person("superman");
p2.eat(); // superman

類的繼承

extends:用來聲明一種繼承關(guān)系.

class Person{
constructor(public name:string) {

}

eat() {
    console.log(this.name);
  }
}

// Employee繼承自Person,Employee類可以獲得Person類的所有的屬性和方法
class Employee extends Person{
// 可以指定新的屬性和方法
code: string;
work() {
    
  }
}

// el 同時擁有Person和Employee的屬性方法
var el = new Employee("meimei");
el.eat();
el.code = "123";
el.work();

super
調(diào)父類的構(gòu)造函數(shù)

class Person{
    constructor(public name:string) {
        console.log("哈哈");
    }

    eat() {
        console.log("I'm eatting");
    }
}

class Employee extends Person{
    constructor(name:string, code:string) {
        super(name);// 調(diào)用父類的構(gòu)造函數(shù)
        this.code = code;
        console.log("嘻嘻");

    }
    // 可以指定新的屬性和方法
    code: string;
    work() {
        // 在方法里面調(diào)用父類的方法
        super.eat();
        //調(diào)用自己方法
        this.dowork();
    }

    dowork() {
        console.log("I'm working");
    }
}

// el 同時擁有Person和Employee的屬性方法
var el = new Employee("meimei","123");

el.work();

執(zhí)行結(jié)果

面向?qū)ο?之泛型

泛型 (`generic`): 參數(shù)化的類型,一般用來限制集合的內(nèi)容.

比如:下面的例子,尖括號里面的Person就是泛型,他約定這個數(shù)組里面只能放Person類型的數(shù)據(jù);

var workers: Array<Person> = [];

泛型的具體使用:

class Person{
    constructor(public name:string) {
        console.log("哈哈");
    }

    eat() {
        console.log("I'm eatting");
    }
}

class Employee extends Person{
    constructor(name:string, code:string) {
        super(name);// 調(diào)用父類的構(gòu)造函數(shù)
        this.code = code;
        console.log("嘻嘻");

    }
    // 可以指定新的屬性和方法
    code: string;
    work() {
        // 在方法里面調(diào)用父類的方法
        super.eat();
        //調(diào)用自己方法
        this.dowork();
    }

    dowork() {
        console.log("I'm working");
    }
}
/**********************泛型的具體使用***********************/
var workers: Array<Person> = []; //指定了 workers類型為數(shù)組,且數(shù)組只能放Person類型的數(shù)據(jù)
workers[0] = new Person("zhangsan");
workers[1] = new Employee("lisi", "2"); // Employee是繼承自Person,也可以放
workers[2] = 2;// 就會報紅色警告

面向?qū)ο?之接口(Interface)

接口(Interface):用來建立某種代碼約定,使得其他開發(fā)者在調(diào)用某個方法或者創(chuàng)建新的類時,必須遵循接口所定義的代碼約定;(js中沒有,只有`ts`中有)

Interface 聲明屬性

// 聲明接口
interface IPerson{
    name: string;
    age: number;
}

//聲明一個類
class Person{
    // 作用: 參數(shù)方法類型聲明
    // config: IPerson >>> IPerson類型的參數(shù)
    constructor(public config: IPerson) {
        
    }
}

// 實例化時,必須要傳一個IPerson類型的對象進去
// 注意:多傳一個屬性和多傳一個屬性都會報錯
var p1 = new Person({
    name: "zhangsan",
    age: 18
});

Interface 聲明方法

implements 實現(xiàn)的意思

// 聲明一個方法
interface Animal {
    eat();
}

// implements 作用:聲明 Sheep 這個類實現(xiàn) Animal 的接口
// 它必須實現(xiàn) Animal 的eat()方法
class Sheep implements Animal{
    eat() {
        console.log("I eat grass");
    };
}

class Tiger implements Animal{
    eat() {
        console.log("I eat meat");
    };
}

面向?qū)ο?之模塊

模塊(Module):模塊可以幫助開發(fā)者將代碼分割為可重用的單元.開發(fā)者可以自己決定將模塊中的哪些資源(類,方法,變量)暴露出去供外部使用,哪些資源只在模塊內(nèi)使用.

在a.ts中暴露一些屬性,方法和類

// 有兩個關(guān)鍵字支撐模塊的特性: export import

// 對外暴露一些東西
export var prop1;

// 不對外暴露
var prop2;

// 對外暴露一個方法
export function func1() {

}

// 不對外暴露方法
function func2() {

}

// 對外暴露一個類
export class Class1 {

}

// 不對外暴露一個類
class Class2 {

}

在b.ts中引用a的屬性,方法和類

// 一個模塊 既可以對外暴露(export)它的屬性、方法和類,也可以import別人的屬性、方法和類;
import {Class1, func1, prop1} from "./a";

console.log(prop1);

func1();

new Class1();

export function func3(){

}

面向?qū)ο?之注解

注解(annotation): 注解為程序的元素(類, 方法, 變量)加上更直觀更明了的說明, 這些說明信息與程序的業(yè)務(wù)邏輯無關(guān),而是供指定的工具或框架使用的;

面向?qū)ο?之類型定義文件(*.d.ts)

類型定義文件(*.d.ts):類型定義文件用來幫助開發(fā)者在`TypeScript`中使用已有的JavaScript的工具包. 如:JQuery

TypeScript常用的類型定義文件
 typings專門用于下載某個想用的類型定義文件

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

TypeScript學習

TypeScript學習

字符串的新特性

多行字符串

字符串模板

自動拆分字符串

參數(shù)新特性之參數(shù)類型

參數(shù)新特性之默認參數(shù)

在參數(shù)聲明后面用等號來指定參數(shù)的默認值

注意: 帶默認值的參數(shù)一定要聲明在"最后面";

參數(shù)新特性之可選參數(shù)

在方法的參數(shù)聲明后面用問號來標明此參數(shù)為可選參數(shù)

注意:必選的參數(shù),不能在可選參數(shù)的后面

函數(shù)新特性

通過號`function xxx()`聲明 `generator`函數(shù)

也就是之前了解的"結(jié)構(gòu)賦值"

析構(gòu)表達式和`Rest and Spread`操作符共同使用

簡單使用

消除傳統(tǒng)匿名函數(shù)的this指針問題

TypeScript類

類的定義

類的構(gòu)造函數(shù)

面向?qū)ο?之泛型

泛型 (`generic`): 參數(shù)化的類型,一般用來限制集合的內(nèi)容.

面向?qū)ο?之接口(Interface)

接口(Interface):用來建立某種代碼約定,使得其他開發(fā)者在調(diào)用某個方法或者創(chuàng)建新的類時,必須遵循接口所定義的代碼約定;(js中沒有,只有`ts`中有)

面向?qū)ο?之模塊

模塊(Module):模塊可以幫助開發(fā)者將代碼分割為可重用的單元.開發(fā)者可以自己決定將模塊中的哪些資源(類,方法,變量)暴露出去供外部使用,哪些資源只在模塊內(nèi)使用.

面向?qū)ο?之注解

注解(annotation): 注解為程序的元素(類, 方法, 變量)加上更直觀更明了的說明, 這些說明信息與程序的業(yè)務(wù)邏輯無關(guān),而是供指定的工具或框架使用的;

面向?qū)ο?之類型定義文件(*.d.ts)

類型定義文件(*.d.ts):類型定義文件用來幫助開發(fā)者在`TypeScript`中使用已有的JavaScript的工具包. 如:JQuery

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

TypeScript學習

字符串的新特性

多行字符串

字符串模板

自動拆分字符串

參數(shù)新特性 之 參數(shù)類型

參數(shù)新特性 之 默認參數(shù)

在參數(shù)聲明后面用等號來指定參數(shù)的默認值

注意: 帶默認值的參數(shù)一定要聲明在"最后面";

參數(shù)新特性 之可選參數(shù)

在方法的參數(shù)聲明后面用問號來標明此參數(shù)為可選參數(shù)

注意:必選的參數(shù),不能在可選參數(shù)的后面

函數(shù)新特性

通過*號function* xxx()聲明 generator函數(shù)

也就是之前了解的"結(jié)構(gòu)賦值"

析構(gòu)表達式和Rest and Spread操作符共同使用

簡單使用

消除傳統(tǒng)匿名函數(shù)的this指針問題

TypeScript類

類的定義

類的構(gòu)造函數(shù)

面向?qū)ο?之 泛型

泛型 (generic): 參數(shù)化的類型,一般用來限制集合的內(nèi)容.

面向?qū)ο?之 接口(Interface)

接口(Interface):用來建立某種代碼約定,使得其他開發(fā)者在調(diào)用某個方法或者創(chuàng)建新的類時,必須遵循接口所定義的代碼約定;(js中沒有,只有ts中有)

面向?qū)ο?之 模塊

模塊(Module):模塊可以幫助開發(fā)者將代碼分割為可重用的單元.開發(fā)者可以自己決定將模塊中的哪些資源(類,方法,變量)暴露出去供外部使用,哪些資源只在模塊內(nèi)使用.

面向?qū)ο?之 注解

注解(annotation): 注解為程序的元素(類, 方法, 變量)加上更直觀更明了的說明, 這些說明信息與程序的業(yè)務(wù)邏輯無關(guān),而是供指定的工具或框架使用的;

面向?qū)ο?之 類型定義文件(*.d.ts)

類型定義文件(*.d.ts):類型定義文件用來幫助開發(fā)者在TypeScript中使用已有的JavaScript的工具包. 如:JQuery

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

參數(shù)新特性之參數(shù)類型

參數(shù)新特性之默認參數(shù)

參數(shù)新特性之可選參數(shù)

通過號`function xxx()`聲明 `generator`函數(shù)

析構(gòu)表達式和`Rest and Spread`操作符共同使用

面向?qū)ο?之泛型

泛型 (`generic`): 參數(shù)化的類型,一般用來限制集合的內(nèi)容.

面向?qū)ο?之接口(Interface)

接口(Interface):用來建立某種代碼約定,使得其他開發(fā)者在調(diào)用某個方法或者創(chuàng)建新的類時,必須遵循接口所定義的代碼約定;(js中沒有,只有`ts`中有)

面向?qū)ο?之模塊

面向?qū)ο?之注解

面向?qū)ο?之類型定義文件(*.d.ts)

類型定義文件(*.d.ts):類型定義文件用來幫助開發(fā)者在`TypeScript`中使用已有的JavaScript的工具包. 如:JQuery