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 是相對單位，可以使用階層的方式設定讓網頁中的文字能放大和縮小。
Style

Css Animation 動態

animation: name duration delay infinite linear;

口訣：animation: 名字 持續時間 延遲 無限 功能

name => @keyframes name{}

1
2
3
4
5
6
7
animation: mymove 5s 2s infinite linear;

//名字
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

animation-duration => 持續時間

1
2
3
4
5
6
7
//animation-duration 持續時間:預設：0
normal,reverse反向,alternate交替 ,alternate-reverse交替反向
animation-duration: 3s;
animation-duration: normal;
animation-duration: reverse; //反向
animation-duration: alternate; //交替
animation-duration: alternate-reverse ; //交替反向

animation-delay 動畫延遲

1
2
3
4
5
6
7
8
9
10
預設：0s
animation-delay:2s;

# animation-iteration-count //動畫迭代計數
預設：1
animation-iteration-cout:3 // number
animation-iteration-cout:infinite //無限
animation-iteration-coutinitial ,//初始
animation-iteration-cout ：inherit //繼承

animation-timing-function 動畫定時功能

1
2
3
4
5
6
7
8
9
10
11
12
預設：ease
linear: 開始與結束相同動畫
ease:輕鬆,默認值 動畫有一個緩慢的開始，然後是快速的，然後是緩慢的結束
ease-in： 動畫啟動緩慢
ease-out：動畫結束緩慢
ease-in-out：動畫既有緩慢的開始，也有緩慢的結束
step-start：相當於步驟（1，開始）
step-end：Equivalent to steps(1, end) 相當於步驟（1，結束）
steps(int,start|end)：
指定一個步進函數，有兩個參數。 第一個參數指定函數中的間隔數。 它必須是一個正整數（大於 0）。 第二個參數是可選的，是值“start”或“end”，並指定在區間內發生值變化的點。 如果省略第二個參數，則賦予其值“end”
cubic-bezier(n,n,n,n)：
在貝塞爾函數中定義您自己的值 可能的值是從 0 到 1 的數值

animation-play-state 動畫播放狀態

1
2
3
4
5
6
7
8
9
10
11
12
paused 暫停 /running 跑步

注意：一定要指定animation-duration屬性，否則duration為0，永遠不會播放。

# animation-fill-mode 動畫填充模式
預設：nane
none： 默認值。 動畫在執行之前或之後不會對元素應用任何樣式
forwards：轉發 元素將保留最後一個關鍵幀設置的樣式值（取決於動畫方向和動畫迭代計數）
backwards：向後獲取由第一個關鍵幀設置的樣式值（取決於動畫方向，並在動畫延遲期間保留此值
both：兩個都 動畫將遵循向前和向後的規則，在兩個方向上擴展動畫屬性
initial：最初的 將此屬性設置為其默認值。 閱讀關於初始
inherit：繼承 從其父元素繼承此屬性。 閱讀關於繼承