Vue

split():分割字符串

split():分割字符串

const str = 'The quick brown fox jumps over the lazy dog.';
const strSplit=str.split('');
console.log('strSplit',strSplit)
//'strSplit' ["T","h","e"," ","q","u","i","c","k"," ","b","r","o","w","n"," ","f","o","x"," ","j","u","m","p","s"," ","o","v","e","r"," ","t","h","e"," ","l","a","z","y"," ","d","o","g","."]
Vue

filter()：建立指定函式，由原陣列過濾指定函數產生新陣列

filter()：建立指定函式，由原陣列過濾指定函數產生新陣列

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => 
    word.length > 6
);

console.log(result);
//Array ["exuberant", "destruction", "present"]

Filter去掉重複的元素

1
2
3
4
5
6
7
8
9
let arr = ['B', 'A', 'E', 'C', 'A', 'F', 'G', 'E'];

let newArr = arr.filter( (element, index, arry)=> {
  //
  console.log('arry',arry)
 return arry.indexOf(element) === index;
});

console.log(newArr)
Typescript

TypeScript never和null类型

Typescript union type

1
2
3
4
5
6
7
8
9
10
let unionType: number | string  |  boonlean =12;
unionType:"12"; //string
unionType:true; //boonlean

//檢查類型 typeof
let checkType=88;
//=="引號"
if (typeof checkType=="number"   ){
    console.log(number)
}

unll & undefined

strick:true修改,嚴格模式

1
2
let myNull=null;
myNull=undefined;

不能將其他類型轉為never

never應用場景:拋出異常

1
2
3
function error( message:string ):never {
    throw new Error( message )
}

never應用場景:死循環

1
2
3
4
function loop():never{
    while( true ){
    }
}
Typescript

TypeScript 对象类型和type

Typescript object & type

1
2
3
4
5
6
7
8
let dataObject:{ name:string, age:number }= {
    name:'Jerry';
    age:31;
}
dataObject={
    name:'Hi';
    age:31;
}

複雜類型

1
2
3
4
5
6
7
8
let complex: { data: number[ ] , myFunc: ( item:number )=>number[] }={
    data:[ 1, 2 ,33],
    myFunc:function( item:number )=>number[]{
        this.data.push( item );
        return this.data;
    }
}

type 生成類型

1
2
3
4
5
6
7
8
9
10
type myType={ data: number[ ] , myFunc: ( item:number )=>number[] };

let complex2: myType={
    data:[ 1, 2 ,33],
    myFunc : function( item:number )=>number[]{
        this.data.push( item );
        return this.data;
    }
}

Typescript

Typescript 函数类型

Typescript 函數相關類型

1
2
3
4
function returnValue( ):string{
    return 'Hello';
}
console.log(returnValue( ))

Typescript 空

//空

1
2
3
function sayHello( ):void{
 console.log( "sayHello" )
}

Typescript 參數類型

1
2
3
4
function sumValue(value1:number,value2:number ){
    value1*value2
}
console.log( 2,3 ) //6

函數類型

1
2
3
4
5
6
let myFunc;
myFunc=sayHello;
myFunc(); //sayHello
let towFunc:(a:number,b:number)=>number;
towFunc=sumValue;
 console.log( towFunc(4,5) ) //20
Typescript

Typescript 数组&元组&枚举类型

Typescript 數組

1
2
3
4
5
6
7
8
9
//數組

let names: Array<string>=[ "henry" ,"bucky"];
console.log( names[0] )
names[0]='hello';//可以覆值同是string 的型別

//以下兩種相同
let numbers:Array <number>=[1 ,2];
let numbers:  number [] =[1 ,2];

Typescript 元組

1
let color:[ string,number ]=[ 'Hi',99 ];

Typescript enum:枚舉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
enum color {
    Black, //0
    Yellow, //1
    Red, //2
}

let myColor : color =Color.Yellow;
console.log( myColor ) //1

enum color {
Black, //0
Yellow=100, //100
Red, //101
}
Style

Css Animation 動態

  • px 像素(pixel)是絕對單位。 是螢幕上所顯示的最小單位，
  • pt 點(point)是絕對單位。 是一個標準的長度單位。
  • em 是相對單位，可以使用階層的方式設定讓網頁中的文字能放大和縮小。
  • % 是相對單位，可以使用階層的方式設定讓網頁中的文字能放大和縮小。
  • rem 是相對單位，可以使用階層的方式設定讓網頁中的文字能放大和縮小。