ES6补充知识

ES6箭头函数

1
2
3
4


const fn = (参数1, 参数2, ...) => {
 // 函数体
 return 返回值;
};

参数只有一个时，可以省略()

1

const quare = x => x * x;

函数体只有一行返回句时，可以省略{}和return

1

const double = n => n * 2;

没有参数是，必须写()

1

const hello = () => console.log("Hello");

TypeScript

到底用类型断言、类型转换、类型声明还是泛型？TS早期为了解决模块化创造namespace，module表示内部模块，后来ES6使用了module，TS为了兼容ES6使用namespace替代了自己的module表示命名空间。然后ES6广泛使用，建议淘汰namespace，用module做模块化； 类型别名与字符串字面量类型都是使用 type 进行定义；

TS中⇒用来表示函数定义，左边是输入类型，右边是输出类型

数据类型

:指定变量类型，在编译时对类型进行静态检查，有错误编译会报错
TypeScript编译的时候即使报错了，还是会生成编译结果
数据类型：boolean、number、string、null、undefined、Symbol、BigInt
- new Boolean(1)返回Boolean对象，直接调用Boolean(1)返回boolean类型
- JavaScript没有空值概念，TS中可以用void表示没有任何返回值
- undefined和null是所有类型的子类型。也就是说undefined类型的变量，可以赋值给number类型的变量，但void不可以
声明变量未指定类型，默认为any，未明确指定类型，会进行类型推论
联合类型只能访问类型共有属性或方法
一个接口只能定义一个任意属性
函数的可选参数之后不能出现必选参数

类型断言

值 as 类型或<类型>值，在tsx语法中必须使用前者
一方面不能滥用 as any ，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡
类型断言不会影响到变量类型

常见的几种导出

在 ES6 模块系统中，使用export default可以导出一个默认值，使用方可以用import foo from 'foo'而不是import { foo } from 'foo'来导入这个默认值

export导出变量
export namespace导出（包含子属性的）对象
export defaultES6默认导出
export =commonjs 导出模块
只有function、class和interface可以直接默认导出，其他的变量需要先定义出来，再默认导出

泛型

在函数名后添加了<T>，其中T用来指代任意输入的类型，在后面的输入value: T和输出Array<T>中即可使用了。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function createArray<T>(length: number, value: T): Array<T> {
   let result: T[] = [];
   for (let i = 0; i < length; i++) {
       result[i] = value;
   }
   return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

// 也可以不指定类型 string，会自动推断
createArray(3, 'x'); // ['x', 'x', 'x']

多类型参数

1
2
3
4
5


function swap<T, U>(tuple: [T, U]): [U, T] {
   return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

泛型约束，eg.只允许这个函数传入那些包含length属性的变量

1
2
3
4
5
6
7
8


interface Lengthwise {
   length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
   console.log(arg.length);
   return arg;
}

React

JSX语法

定义虚拟DOM不写””
标签中混入js表达式用{}
标签中指定类名用className
标签中内联样式，{{ 小驼峰css }}
属性事件，on后面首字母大写（onClick）
虚拟DOM必须只有一个跟标签
标签开头小写，jsx编译为html标签
标签开头大写，jsx识别为组件

函数式组件

函数名必须大写
以标签方式调用且开头大写
参数为props

1
2
3


const VDOM = <h1 id="title">This is a Title</h1>;    // 创建虚拟DOM
// ReactDOM.render( 组件(虚拟DOM),  要绑定到哪个元素上 );
ReactDOM.render(VDOM, document.querySelector("#root"));

类式组件

必须继承React内置类Component
必须包含render()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 使用 ES6写法创建类式组件，并继承于 React.Component
class Demo extends React.Component{
   
   // 添加render() 函数（必须），返回值为组件的虚拟DOM
   render(){
       console.log(this);      // render() 函数的 this 指向组件的实例对象
       return <h1>This is a Title!</h1>
   }
}
ReactDOM.render(<Demo/>, document.querySelector("#root"));

前端学习笔记

这篇笔记是几年前的存档，无意间翻出来看了下，荒废至此，至今自己依然是个前端菜逼

ES6补充知识

ES6箭头函数

TypeScript

数据类型

类型断言

常见的几种导出

泛型

React

JSX语法

函数式组件

类式组件

📎 参考文章