es6学习理解及整理

最新推荐文章于 2024-09-10 14:19:01 发布

避于核桃之内自誉为无疆限之君主

最新推荐文章于 2024-09-10 14:19:01 发布

阅读量207

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/shenqikai0319/article/details/109679236

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

es6也出来好几年了只是会用其中的一些方法属性并没有对其做过全面的理解和学习，这次讲个人学习记录下。如果有理解上有问题的麻烦大家留意私信

1.Number.isInteger()

判断是否是整数,不用转字符串再判断是否包含.

2.Math.trunc()

直接获取整数部分，非数字类型也可以使用

3.Math.sign()

判断是否为负数

4.默认参数

function a(a={},b=()=>bc) 默认值可以设为一个参数，也可以通过逻辑运算符指向另一个函数

es5 function bc(){ a = a || {} }

5.rest参数

...array 也可以当做运算符for循环使用（实现了iterator迭代器） [...arr1, ...arr2, ...arr3] 数组合并（浅拷贝其中concat也是浅）

6.箭头函数

var f = v => v; 相对于return v (需要this对象缺外部获取不到的地方不能使用箭头函数)

箭头函数的方法可以是另一个箭头函数，箭头函数内不存在this。

不能再构造很熟内使用
内部没有arguments,但有rest
不能使用yield,因为不是generator

7.尾部优化

我理解就是方法互相调用持有引用，尽量放在最后面调用持有时间变短

8.Array

from() ：将具有iterator的数据（也就是说有length）转换为数组（转换为数组后就可以使用对应的数组方法）
of() ：数值转为数组
copyWithin ：内部复制元素替换 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) [4, 2, 3, 4, 5] [1, 2, 3, 4, 5].copyWithin(0, -2, -1)[4, 2, 3, 4, 5]
find() : find(element => element > 10)返回匹配数据
findIndex ：返回匹配索引
fill(string) : 替换数组中所有的数据

9.Object

entries() keys() values() : 遍历集合键值键值
includes() : 判断是否包含
flat() : 将单层数组过滤处理
flatMap ：将多层数组处理成单层
sort() : 数组内部排序
assign() : 对象合并，覆盖第一个参数对象并输出，基本数据浅拷贝，引用数据类型深拷贝
method ：替换,相当于_proto_

10.symbol

唯一对象（组件复用时的id，防止数据被污染）

11.消除魔术字降低耦合

area = .5 * options.width * options.height;（也就是少创建对象并引用）

12.Reflect.ownKeys(obj)

["enum", "nonEnum", Symbol(my_key)] 返回所有键名

13.set ,WeakSet,map,WeakMap

set : 去重类似数组结构有实现iterable
WeakSet : 弱引用（所指引的对象不计入垃圾回收机制（如果没用就直接回收））无法遍历，参数只能是对象数组[[1, 2], [3, 4]]
map可以用 ..直接转换为数组
WeakMap:只接收对象作为键名，所指引的对象不计入垃圾回收机制（如果没用就直接回收）

14.proxy拦截器

15.Reflect

就是Object。讲Object的执行性方法替换为Reflect的函数式方法

Reflect.apply(target, thisArg, args) 改变this指向
Reflect.construct(target, args) 等同于new
Reflect.get(target, name, receiver) 对象查找返回
Reflect.set(target, name, value, receiver) 对象设置参数
Reflect.defineProperty(target, name, desc) 添加新属性
Reflect.deleteProperty(target, name) 删除对象属性
Reflect.has(target, name) 判断包含
Reflect.ownKeys(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target) 获取prototyep属性
Reflect.setPrototypeOf(target, prototype) 设置prototyep属性

16.Promise

finally() : 最终会执行到的
race() : 将多个promise合并为一个新的promise 最返回最快执行完的
allSetted() : 将多个promise合并为一个新的promise 所有执行完才会返回

17.class

extends继承再项目中可以使用，方法前加上static关键字就让方法不会被继承（静态只能直接调用）
内部可以使用generator语法（用起来不方便，考虑是否可以使用async/await）
方法内独立有this
_bar _下划线就是私有方法（或者使用内部类方法）
#count=0 class内部私有属性也可以加到方法前变成私有方法，私有方法也可以加静态变成直接调用

18.浏览器加载

<script src="path/to/myModule.js" defer></script> 异步加载-渲染完再执行
<script src="path/to/myModule.js" async></script> 异步加载-下载完就执行
<script type="module" src="./foo.js"></script>  <script type="module" src="./foo.js" defer></script> module多次引入script也只会解析一次 .mjs

19.异步循环 await of

async function f() {

    for await (const x of createAsyncIterable(['a', 'b'])) {

        console.log(x);

    }
}

20.异步Generator函数（同步异步能使用同一套接口）

async function* gen() {

    yield 'hello';
}

const genObj = gen();

genObj.next().then(x => console.log(x));

async function* prefixLines(asyncIterable) {

    for await (const line of asyncIterable) {

    yield '> ' + line;

}}