失眠网 > es6去除重复项_ES6 常用知识总结

es6去除重复项_ES6 常用知识总结

时间：2024-05-21 04:58:11

相关推荐

es6去除重复项_ES6 常用知识总结

一、ES6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

二、新特性

1. let、const

新特性注意点let1. 不存在变量提升 2. 暂时性死区（块级作用域） 3. 不允许重复声明const声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。其只保证指针不发生改变，因此可以修改保存的对象的值

ES6 声明变量的6种方法：var function let const import class

// 取顶层对象// 方法一(typeof window !== 'undefined'? window: (typeof process === 'object' &&typeof require === 'function' &&typeof global === 'object')? global: this);// 方法二var getGlobal = function () {if (typeof self !== 'undefined') { return self; }if (typeof window !== 'undefined') { return window; }if (typeof global !== 'undefined') { return global; }throw new Error('unable to locate global object');};

2. 解构赋值

// 数组let [x, y='b'] = ['a'] // x=''a, y='b'// 对象let { foo:f, bar:l=2 } = { foo: 'aaa', bar: undefined } // f，l才是变量名f // aaal // 2// 字符串let {length: len} = 'hello'len // 5// 数组和布尔值的解构赋值// 只要等号右边的值不是对象或数组，就先将其转为对象。// 由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。// 函数参数解构function move({x = 0, y = 0} = {}) {return [x, y];}

作用：

(1) 交换变量的值:[x, y] = [y, x];

(2) 从函数返回多个值:let { foo, bar } = example();

(3) 函数参数的定义:function f([x, y, z]) { ... }

(4) 提取 JSON 数据:let { id, status, data: number } = jsonData;

(5) 函数参数的默认值

(6) 遍历 Map 结构constmap =newMap(); map.set('first', 'hello'); map.set('second', 'world');for(let [key, value] of map) { console.log(key + " is " + value); }// first is hello// second is world// 获取键名for(let [key] of map) {// ...}// 获取键值for(let [,value] of map) {// ...}

(7) 输入模块的指定方法:const { SourceMapConsumer, SourceNode } = require("source-map");

3. 字符串的扩展

(1) 字符的 Unicode 表示法

(2) 字符串的遍历接口

(3) 直接输入U+2028和U+2029

(4) Json的stringify()的改造

(5) 模版字符串

4. 字符串的新增方法

(1) String.fromCodePoint()：String.fromCharCode(0x20BB7) // "ஷ"

(2) String.raw():该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法

(3) codePointAt(): 能够正确处理 4 个字节储存的字符，返回一个字符的码点

(4) normalize(): 用来将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化

(5) includes()：返回布尔值，表示是否找到了参数字符串/

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false

(6)'x'.repeat(3) // "xxx"

(7) padStart()、padEnd(): ES 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全

(8) trimStart()、trimEnd():消除字符串头、尾部的空格

(9) matchAll(): 返回一个正则表达式在当前字符串的所有匹配

5. 正则的扩展

6. 数值的扩展

Number.isNaN()

Number.isFinite()

Number.isInteger():是否为整数

Number.EPSILON:极小的常量

Math.trunc(): 去除小数部分，返回整数部分

Math.sign()判断正负、0,其他值返回NaN、指数运算符**，2**3 // 8

7. 函数的扩展

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

箭头函数

使用注意点:

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。不适用场合：

（1）定义对象的方法，且该方法内部包括thisconstcat = { lives: 9, jumps: () => {this.lives--; } }// 对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

（2）需要动态this的时候，也不应使用箭头函数var button = document.getElementById('press'); button.addEventListener('click', () => {this.classList.toggle('on'); });

（3）如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。

尾调用优化、尾递归

8. 数组的扩展

扩展运算符：任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组，背后调用的是遍历器接口（Symbol.iterator）Array.from(): 用于将两类对象转为真正的数组: 类似数组的对象（array-like object,比如 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象，本质是具有length属性）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）// 对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代consttoArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();// Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]Array.of()方法用于将一组值，转换为数组。Array.of(3, 11, 8) // [3,11,8]copyWithin():[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // 将3号位复制到0号位 [4, 2, 3, 4, 5]find(): 用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined----[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10findIndex()与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1，弥补了indexOf的不足，可以发现NaN[NaN].findIndex(y => Object.is(NaN, y)) // 0fill():['a', 'b', 'c'].fill(7)// [7, 7, 7]newArray(3).fill(7)// [7, 7, 7]// 还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']entries()、keys()、values(): keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历includes(): 表示某个数组是否包含给定的值，与字符串的includes方法类似[1, 2, NaN].includes(NaN) // trueflat(): 将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响[1, [2, [3]]].flat(Infinity) // [1, 2, 3]flatMap(): 对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

9. 对象的扩展

let propKey = 'foo';let obj = {[propKey]: true,['a' + 'bc']: 123};

属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

属性的遍历方法有5种：

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象Object.is() ：用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是+0不等于-0，二是NaN等于自身。Object.assign()：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。注意点：

（1）浅拷贝

（2）同名属性的替换

（3）数组的处理Object.assign([1, 2, 3], [4, 5]) // [4, 5, 3]

（4）取值函数的处理:只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。Object.getOwnPropertyDescriptors() 返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象__proto__属性，Object.setPrototypeOf()，Object.getPrototypeOf() 、Object.keys()，Object.values()，Object.entries() 、Object.fromEntries()：Object.fromEntries([ ['foo', 'bar'], ['baz', 42] ])// { foo: "bar", baz: 42 }

10. Symbol:

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。Symbol 值不能与其他类型的值进行运算，会报错。但是，Symbol 值可以显式转为字符串。另外，Symbol 值也可以转为布尔值，但是不能转为数值。可用来消除魔法字符串、模块的Singleton模式

11. Set、Map 数据结构

Set类似于数组，但是成员的值都是唯一的，没有重复的值。

const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]// 去除数组的重复成员[...new Set(array)][...new Set('ababbc')].join('')// "abc"

在 Set 内部，两个NaN是相等。另外，两个对象总是不相等的。

方法：

Set.prototype.add(value)：添加某个值，返回 Set 结构本身。

Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。

Set.prototype.clear()：清除所有成员，没有返回值。

Set.prototype.keys()：返回键名的遍历器

Set.prototype.values()：返回键值的遍历器

Set.prototype.entries()：返回键值对的遍历器

Set.prototype.forEach()：使用回调函数遍历每个成员Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用 Set 保存一个回调函数列表，调用时就能保证按照添加顺序调用。WeakSet：WeakSet 结构与 Set 类似，也是不重复的值的集合。

但是，它与 Set 有两个区别：

（1）WeakSet 的成员只能是对象，而不能是其他类型的值。其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

（2）WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏Map: 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。constm =newMap();consto = {p: 'Hello World'}; m.set(o, 'content') m.get(o)// "content"m.has(o)// truem.delete(o)// truem.has(o)// false

Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

WeakMap: 首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

12. Proxy

在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写,很合适用来写 Web 服务的客户端。

13. Reflect

（1）将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。

（2）修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

（3）让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

（4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

方法：

Reflect.apply(target, thisArg, args)

Reflect.construct(target, args)

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)

Reflect.setPrototypeOf(target, prototype)

14. Promise

特点：

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。缺点：

首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

promise.then(result => {···}).catch(error => {···}).finally(() => {···});

Promise.all(): 用于将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.all([p1, p2, p3]);p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。

Promise.race():const p = Promise.race([p1, p2, p3]);只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。Promise.resolve()、Promis.reject()、Promise.try()

15. Iterator

任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

作用：

（1）为各种数据结构，提供一个统一的、简便的访问接口；

（2）使得数据结构的成员能够按某种次序排列；

（3）ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

16. Generator

Generator 函数是一个普通函数，但是有两个特征：

（1）function关键字与函数名之间有一个星号；

（2）函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。异步编程：

（1）回调函数

（2）事件监听

（3）发布/订阅

（4）Promise 对象

（5）Generator 函数

17. async

async函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器。

（2）更好的语义。

（3）更广的适用性： co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

18. Class

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。类的属性名，可以采用表达式。父类Foo有一个静态方法，子类Bar可以调用这个方法。静态方法也是可以从super对象上调用的。

为class加了私有属性。方法是在属性名之前，使用#表示。extends 继承，子类的构造函数必须执行一次super函数

19. Module

import、exportES6模块的好处：

（1）不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点。

（2）将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性。

（3）不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供。import(): 类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

（1）按需加载。（2）条件加载（3）动态的模块路径defer是“渲染完再执行”，async是“下载完就执行”浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

三、ES6 最佳实践

/#docs/style

四、辅助链接、工具

查看各浏览器对 ES6 的支持：https://kangax.github.io/compat-table/es6/检查各种运行环境对 ES6 的支持情况：ruanyf.github.io/es-checker ，es-checker命令查看支持程度ES6 在线编译器：http://google.github.io/traceur-compiler/demo/repl.html#