es6 && typescript笔记

es6

ECMASceript6.0是js的标准。 日常喊法ES ≈ JS

var到const、let（块级作用域）

结构赋值：

1. 数组结构：let [x, y, z, l, m, n] = arr;
2. 对象结构：let {name, age=100} = {name:'liuhaoyu'};
3. 数组对象嵌套解构（只要左边结构和右边一样即可）

字符串方法扩展

1. str.inclueds("target",3);
2. str.repeat(3);
3. str.padStart(5,"cde");补在前面
4. str.padEnd(3,"ced");补在后面

模板字符串

`<div>ok</div>`

数组方法扩展

• a in arr
• arr.filter(function(item){})
• arr.find(function(item){})
• for(let item of arr){}
• Array(7).fill(1);

常用的一个tip：

如vue里面，定义时有这个标识 !: ，标识不能为空

对象扩展

let people = {sex,height};
let height="180"
let obj = {
    fn(){},
    str:height;
}

set和get

let obj={
    get height(){
        return 180;
    }
    //set sex(value){
    //    this.sex = value;//不能这么写，会一直调自己
    //}
}
obj.height;

对象扩展方法

判相等
Object.is(-0,0)

assign合并
Object.assign(obj1,obj2); //属性重复则覆盖

ES7中的 对象扩展运算符
let test = {...test1,...test2};

//getOwnPropertyDescrptor 
let sex = Object.getOwnPropertyDescriptor(man,sex);
let length = Object.getOwnPropertyDescriptor("777666",length);

proxy代理

let newUser = new Proxy({name:"我是原对象，后面参数是要做点啥的方法"}, {
    get: function(obj, prop) {
        if(prop === 'name') {
            return obj.fname + '.' + obj.lname;
        }
    }
});
newUser.name;

新 数据类型和对象

• symbol

一种类型，默认示例都是唯一的。判等为false；

const TYPE_MALE = 'MALE'
const TYPE_FEMALE = 'FEMALE'

const TYPE_MALE = Symbol()
const TYPE_FEMALE = Symbol()

其他用法：Symbol.for() & Symbol.keyFor() 

• Set  数据结构（不重复）
• Map 数据结构

Class和constructor()构造函数

let egcls= new class {
    constructor(name) {
        this.name = "name";
    }
}("testParam");

• 继承extends
• 静态方法static

函数方面的扩展

• 参数默认值，

// ES6支持参数列表中设置默认值
function fn(x='test', y='ES6'){};

• 结构赋值

// ES6参数列表还支持解构赋值
function fn1({name="test", age="16"}={}) {
    console.log(name);
    console.log(age);
}

• 变参

// arguments 类数组 实参集合
function fn4(...arg) {
    // ES5 获取实参 集合
    console.log(arguments); //对象
    // ES6 获取实参集合 参数列表中解构取值
    console.log(arg); // 数组
}
fn4(1,2,3,4,5);

• 扩展运算符

// 将非数组变成数组(类数组 length) [...]
let str = "123";
console.log([...str]);

// 将数组变成非数组
let arr1 = [1,2,3,4];
let arr2 = [10,20,30,40];
// 合并他们
newArr1 = arr1.concat(arr2); //可以用Array.concat()函数
newArr2 = [...arr1,...arr2]; //也可以使用扩展运算符把他们连起来

// 求数组最大值
let ary = [1,23,12,45,242,132];
// Math.max.apply(null, ary); //√
let max = Math.max(...ary); //把数组展开

TypeScript

函数参数 类型

• 必选  ：       
• 可选   ?:             
• 带默认值   =
• 非空断言操作符    !.

function test(a:string, b?:string, c:string='chochou') {
    // 如果你声明了可选参数，在有必要的情况下，请在函数内部处理当可选参数没填时候的情况
} 

• enum枚举 ---js没有
• tuple 元组     let tsTuple: [string, number] = ['AA', 222]；
• any               let tsListMix: any[] = ['A', 1, 'B', 2, { a: 12 }]；
• void   类java
• 断言  
• as 
• is   在JSX里面，不被允许

接口

定义属性: 先接口，后实现

interface SquareConfig {
  color?: string;
  width?: number;
}
 
function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}
 
let mySquare = createSquare({color: "black"});   //创建 可选参数?:  对象

interface Point {
    readonly x: number;  //用 readonly 来定义 只读属性
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };

interface QueryFunc {
    (source: string, subString: string): boolean;
}

let queryImp = function(str:string,substr:string){
    let result = str.search(substr);
    return result > -1;
}

interface StringArray {
    [index: number]: string;
}

let egArray : StringArray;
egArray = ["666","777"];
let myStr: string = egArray[0];  //通过index得到string

export interface State {    
    name: string;
    ...
}
export const state: State = {
    name: '',
    ...
};

interface OB {
  name: string;
  age?: number;
  readonly id: number;
  [propName: string]: any;   //任意属性实现
}

function gen_func1<T>(arg: T): T {
  return arg;
}
//可以把泛型变量作为类型的一部分
function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length); // Array has a .length, so no more error
  return arg;
}

// 调用方式
gen_func1<string>("Hello world");
loggingIdentity([1, 2, 3, "e"]);

let gen_func2: <U>(arg: U) => U = function(arg) {
  return arg;
};

// 调用方式
gen_func1<string>("Hello world");
gen_func2("Hello world");

// 我们还可以使用--带有--调用签名的--对象字面量来定义泛型函数：（!!!）
let myIdentity2: { <T>(arg: T): T } = function(arg) {
  return arg;
};

/**
 * 只能白话解释：
 * 比如我想在angular JS 里面用 jquery 
 * 直接写$符 ts是不懂得
 * 所以需要下载一个 jquery.d.ts （所有类型定义文件都以.d.ts结尾）
 * 下载地址是 gitHub上得 DefinetelyTyped（里面托管了几乎所有的.d.ts）
 * 也可以用 typings (npm install -g typings) **推荐**
 * typings seach 你要的类型定义文件
 * 在项目里安装 .d.ts文件 （typings install 文件名 --save） 通常框架里已经写好了package.json所以我们不用管--save写没写依赖关系进去
 */