Antd:
Ant Design简单总结:
Button按钮;Icon图标;Grid栅格;Layout布局;
Affix固钉;Breadcrumb面包屑;Dropdown下拉菜单;
Menu导航菜单;Pagination分页;Steps步骤条;
AutoComplete自动完成;Checkbox多选框;
Cascader 级联选择;Form表单;InputNumber数字输入框;
Mentiont提及;Radio评分;Radio单选框;Switch开关;
Slider滑动输入条Select选择器;TreeSelect树选择;
Transfer穿梭框;TimePicker时间选择框:Upload上传;
Data Display(数据一致)----------------------------------------------------------------------------------------
Avatar头像:用来代表用户或事物,支持图片、图标或字符展示
Badge徽标数:图标右上角的圆形徽标数字
Collapse折叠面板:可以折叠/展开的内容区域
Carousel走马灯:旋转木马,一组轮播的区域
Calendar日历:按照日历形式展示数据的容器
Popover气泡卡片:点击/鼠标移入元素,弹出气泡式的卡片浮层
Tree树形控件:文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构
Tooltip文字提示:简单的文字提示气泡框
Timeline时间轴:垂直展示的时间流信息
Tag标签:进行标记和分类的小标签
Tabs标签页:选项卡切换组件
Table表格:展示行列数据
Feedback----------------------------------------------------------------------------------------------------------
Alert警告提示:警告提示,展现需要关注的信息
Drawer抽屉:抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务
Modal对话框:模态对话框,弹出对话框
Message全局提示:全局展示操作反馈信息,弹出窗口
Notification通知提醒框:全局展示通知提醒信息。在系统四个角显示通知提醒信息
Progress进度条:展示操作的当前进度
Popconfirm气泡确认框:点击元素,弹出气泡式的确认框。
Spin加载中:用于页面和区块的加载中状态
Anchor锚点:用于跳转到页面指定位置。
Divider分割线。
BackTop回到顶部。
ES6:
let命令:let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
do 表达式:块级作用域是一个语句,将多个操作封装在一起,没有返回值。do表达式可以让其有返回值,使用do
定义的变量将会得到整个块级作用域的返回值。
const命令:const声明一个只读的常量。一旦声明,常量的值就不能改变。const的作用域与let命令相同,
只在声明所在的块级作用域内有效
顶层对象:浏览器环境指的是window对象,与全局变量是等价的
数组的解构赋值:数组和对象中提取值,对变量进行赋值,这被称为解构,如对abc赋值;var [a, b, c] = [1, 2, 3];
对象的解构赋值:对象的属性没有次序,变量必须与属性同名,如var { bar, foo } = { foo: "aaa", bar: "bbb" };
字符串的解构赋值:const [a, b, c, d, e] = 'hello'; a // "h";b // "e";c // "l";d // "l";e // "o"
let {length : len} = 'hello'; len//"hello"
数值和布尔值的解构赋值:解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
函数参数的解构赋值:function add([x, y]){ return x + y; } add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]
字符串----------------------------------------------------------------
codePointAt():JavaScript内部,字符以UTF-16的格式储存,每个字符固定为2个字节。
codePointAt方法,能够正确处理4个字节储存的字符,返回一个字符的码点。
String.fromCodePoint():从码点返回对应字符
charAt():返回字符串给定位置的字符。如'abc'.charAt(0) // "a"
includes(), startsWith(), endsWith():JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部
repeat():repeat方法返回一个新字符串,表示将原字符串重复n次。如'x'.repeat(3) // "xxx"
padStart(),padEnd():如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx' ; 'x'.padEnd(4, 'ab') // 'xaba'
模板字符串:用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
数值的扩展----------------------------------------------------------
Number.isFinite(), Number.isNaN():Number.isFinite()用来检查一个数值是否为有限的 Number.isFinite(15);
Number.isNaN()用来检查一个值是否为NaN
Number.isInteger():用来判断一个值是否为整数
Math.trunc():用于去除一个数的小数部分,返回整数部分。如Math.trunc(4.1) // 4
Math.sign():判断一个数是正数、负数、还是零。参数为正数,返回+1;负数,返-1;参数为0,返0;其他值,返NaN。
Math.imul():返回两个数以32位带符号整数形式相乘的结果。Math.imul(2, 4) // 8
数组的扩展----------------------------------------------------------
Array.from():将对象转为真正的数组
Array.of():用于将一组值,转换为数组 Array.of(3, 11, 8) // [3,11,8]
copyWithin():用这个方法,会修改当前数组.在当前数组内部,将指定位置的成员复制到其他位置
find():用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出
第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
[1, 4, -5, 10].find((n) => n < 0) // -5
findIndex():用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
fill():使用给定值,填充一个数组。['a', 'b', 'c'].fill(7) // [7, 7, 7]
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
entries(),keys()和values():用于遍历数组。keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) { console.log(index); } // 0 // 1
for (let elem of ['a', 'b'].values()) console.log(elem); } // 'a' // 'b'
for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem); } // 0 "a" // 1 "b"
includes():返回一个布尔值,表示某个数组是否包含给定的值
函数的扩展-------------------------------------------------------
length属性:将返回没有指定默认值的参数个数 (function (a) {}).length // 1; (function (a, b, c = 5) {}).length // 2
rest参数(形式为“...变量名”):用于获取函数的多余参数
运算符(spread)是三个点(...):rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。
name属性:返回函数的额函数名
箭头函数:
(1)ES6允许使用“箭头”(=>)定义函数。var f = v => v;
上面的箭头函数等同于:
var f = function(v) {
return v;
};
(2)如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5; // 等同于 var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
(3)箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
尾调用:函数的最后一步是调用另一个函数
尾递归:尾调用自身,就称为尾递归
对象的扩展----------------------------------------------------
Object.is():较两个值是否相等
Object.assign():将源对象,复制到目标对象。第一个参数是目标对象,后面的参数都是源对象
属性的遍历:
(1)for...in:循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。
(2)Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。
(3)Object.getOwnPropertyNames(obj):返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。
(4)Object.getOwnPropertySymbols(obj):返回一个数组,包含对象自身的所有Symbol属性。
(5)Reflect.ownKeys(obj):返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举
__proto__属性和Object.setPrototypeOf()方法:用来读取或设置当前对象的prototype对象
Object.getPrototypeOf():该方法与setPrototypeOf方法配套,用于读取一个对象的prototype对象 。如Object.getPrototypeOf(obj);
Object.keys()方法:返回一个数组,成员是参数对象自身的所有可遍历属性的 键名。
bject.values()方法:返回一个数组,成员是参数对象自身的所有可遍历属性的 键值。
Object.entries()方法:返回一个数组,成员是参数对象自身的所有可遍历属性的 键值对数组
扩展运算符(...):用于取出参数对象的所有可遍历属性,拷贝到当前对象之中
let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 }
Symbol-------------------------------------------------------------
symbol:表示独一无二的值(不可改变),JS第七种数据类型。前六种是:Undefined、Null、Boolean、String、数值(Number)、对象(Object)
Symbol.for():重新使用同一个Symbol值
Symbol.keyFor():方法返回一个已登记的 Symbol 类型值的key
var s1 = Symbol.for("foo"); Symbol.keyFor(s1) // "foo"
var s2 = Symbol("foo"); Symbol.keyFor(s2) // undefined
内置的Symbol值:S6还提供了11个内置的Symbol值
Set和map数据结构------------------------------------------------
数据结构Set:类似于数组,但是成员的值都是唯一.Set本身是一个构造函数,用来生成Set数据结构
WeakSet:结构与Set类似,但是WeakSet的成员只能是对象,而不能是其他类型的值;WeakSet不能遍历
Map构造函数:接受数组作为参数,类似于对象,也是键值对的集合
Proxy 和Reflect----------------------------------------------------
Proxy:用于修改某些操作的默认行为,等同于在语言层面做出修改.在目标对象之前架设一层“拦截”,外界对该对象的访问,
都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写
get():方法用于拦截某个属性的读取操作
set():方法用来拦截某个属性的赋值操作
apply():方法拦截函数的调用、call和apply操作
has():方法用来拦截HasProperty操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in运算符
construct():方法用于拦截new命令
deleteProperty():方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除
Reflect对象:与Proxy对象一样,也是ES6为了操作对象而提供的新API
Generator 函数---------------------------------------------------
Generator函数是一个状态机,封装了多个内部状态;还是一个遍历器对象生成函数;返回的遍历器对象可以遍历Generator函数内部每一个状态。
yield语句:Generator函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以提供可以暂停执行的函数,yield语句就是暂停标志。
Symbol.iterator():等于该对象的遍历器生成函数,调用该函数会返回该对象的一个遍历器对象。
for...of循环:for...of循环可以自动遍历Generator函数时生成的Iterator对象,且此时不再需要调用next方法
Generator.prototype.throw():Generator函数返回的遍历器对象,都有一个throw方法,可以在函数体外抛出错误,然后在Generator函数体内捕获
Generator.prototype.return():可以返回给定的值,并且终结遍历Generator函数。
yield*语句:在Generater函数内部,调用另一个Generator函数,默认情况下是没有效果的。要用yield语句
Promise------------------------------------------------------------
它是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,原生提供了Promise对象
Promise对象是一个构造函数,用来生成Promise实例。如var promise = new Promise(function(resolve, reject) {}
Promise.prototype.then()方法:作用是为Promise实例添加状态改变时的回调函数
Promise.prototype.catch():用于指定发生错误时的回调函数
Promise.all()和race()和reject():用于将多个Promise实例,包装成一个新的Promise实例。如var p = Promise.all([p1, p2, p3]);
Promise.resolve():将现有对象转为Promise对象
done():总是处于回调链的尾端,保证抛出任何可能出现的错误。
finally():方法用于指定不管Promise对象最后状态如何,都会执行的操作
异步操作和Async函数-----------------------------------------------
Generator函数:最大特点就是可以交出函数的执行权(即暂停执行),数可以暂停执行和恢复执行
async函数:将 Generator 函数和自动执行器,包装在一个函数里
for await...of:for...of循环用于遍历同步的Iterator接口。新引入的for await...of循环,则是用于遍历异步的Iterator接口
class---------------------------------------------------------------
通过class关键字,可以定义类。ES6的类,完全可以看作构造函数的另一种写法
constructor方法:是类的默认方法,通过new命令生成对象实例时,自动调用该方法一个类必须有constructor方法,
如果没有显式定义,一个空的constructor方法会被默认添加。
this的指向:类的方法内部如果含有this,它默认指向类的实例
Object.getPrototypeOf方法:可以用来从子类上获取父类。
Decorator--------------------------------------------------------
修饰器(Decorator)是一个函数,用来修改类的行为.,修饰器本质就是编译时执行的函数.修饰器不仅可以修饰类,还可以修饰类的属性。
修饰器只能用于类和类的方法,不能用于函数;用修饰器实现自动发布事件;在修饰器的基础上,可以实现Mixin模式。就是对象继承的一种替代方案
Trait:也是一种修饰器,效果与Mixin类似,但是提供更多功能,比如防止同名方法的冲突、排除混入某些方法、为混入的方法起别名等等。
export命令:用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取
模块内部的某个变量,就必须使用export关键字输出该变量
import命令:用于输入其他模块提供的功能。使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块
模块的整体加载:即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
export default命令:为模块指定默认输出。
编程风格-----------------------------------------------------------
let 取代 var:ES6提出了两个新的声明变量的命令:let和const。其中,let完全可以取代var
const:在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量
字符串:静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号
对象:单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾
数组:用扩展运算符(...)拷贝数组
函数:即执行函数可以写成箭头函数的形式。
Map结构:只有模拟现实世界的实体对象时,才使用Object。如果只是需要key: value的数据结构,使用Map结构
Class:总是用Class,取代需要prototype的操作。因为Class的写法更简洁,更易于理解