天天看点

ES6知识整理

1. 解构赋值

let obj = {off: bar} = {off: 2};
console.log(bar) // 2

字符串解构  const [a,b,c,d,e] = 'hello'; 	
数值和布尔值解构  解构出来的是原型上的方法
for in 是ES5的标准 遍历key  for of 是ES6的标准 遍历value
           

2. 字符串扩展

新增字符串的方法

includes()  // 返回布尔值 表示找到了参数字符串
startsWith()   // 返回布尔值 表示参数字符串是否在原字符串头部
endswith()   // 尾部
repeat()   // 返回一个新字符串 表示将原字符串重复N次 	
padStart()   // 头部补全
padEnd()   // 尾部补全
           

3. 函数扩展

函数的name属性

var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"
           

箭头函数

箭头函数有几个使用注意点

  • 函数体内的

    this

    对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 不可以当作构造函数,也就是说,不可以使用

    new

    命令,否则会抛出一个错误。
  • 不可以使用

    arguments

    对象,该对象在函数体内不存在。如果要用,可以用

    rest

    参数代替。
  • 不可以使用

    yield

    命令,因此箭头函数不能用作

    Generator

    函数。
  • 普通函数里面的this取决于谁调用,箭头函数里面的

    this

    是固定的
  • 箭头函数里面没有

    arguments

    const a = () => () => () {console.log(1)}   调用a()()();
    相当于function a(){return function(){return function(){console.log(1)}}};
               

4. 数组的扩展

扩展运算符

[...'hello'] //['h','e','l','l','o'] 合并数组 arr1.concat(arr2) [...arr1, ...arr2];

Array.from()

将类似数组转为真正的数组

Array.of()

将一组值转为数组,可以创建一个长度为1的数组,但是Array()不可以

copyWithin()

在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组

find()

用于找出第一个符合条件的数组成员。

[1, 4, -5, 10].find((n) => n < 0) // -5

findIndex()

返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

fill()

使用给定值,填充一个数组。

keys()

是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

includes()

返回一个布尔值,表示某个数组是否包含给定的值

数组的空位

ES5
    forEach(), filter(), reduce(), every() 和some()都会跳过空位。
    map()会跳过空位,但会保留这个值
    join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
ES6
	将空位转为undefined  Array.from()   (...)
	for of 也会遍历空位
           

5. 对象的扩展

(1)

const obj = { class () {} }; // 等同于 var obj = { 'class': function() {} };

(2)、

Object.js()

比较两个字是否相等,ES5 == ES6 更加严谨

(3)、

Object.assign()

用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

如果第一个参数为空 直接扩展 不会改变源对象 实行的是浅拷贝

(4)、属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

-

for...in

for…in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

-

Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含

Symbol 属性)的键名。

- Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames

返回一个数组,包含对象自身的所有属性(不含 Symbol

属性,但是包括不可枚举属性)的键名。

- Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols

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

- Reflect.ownKeys(obj)

Reflect.ownKeys

返回一个数组,包含对象自身的所有键名,不管键名是

Symbol 或字符串,也不管是否可枚举。 以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

首先遍历所有数值键,按照数值升序排列。 其次遍历所有字符串键,按照加入时间升序排列。 最后遍历所有 Symbol

键,按照加入时间升序排列。

(5)、 Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }
           

(6)、Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法

(7)、 **Object.setPrototypeOf()**用来设置一个对象的prototype对象,返回参数对象本身。

```
let obj = { x: 10 };
Object.setPrototypeOf(obj, {
	y: 20
});
console.log(obj.y); // 20
Object.getPrototypeOf()用于读取一个对象的原型对象。
```
           

(8)、 super关键字

this关键字总是指向函数所在的当前对象,super指向当前对象的原型对象

(9)、 Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组

(10)、一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

6. Set和Map数据结构

Set是一个构造函数 用来数组去重 new Set() 接收一个数组作为参数

Set的四个操作方法

add(value)

:添加某个值,返回 Set 结构本身。

delete(value)

:删除某个值,返回一个布尔值,表示删除是否成功。

has(value)

:返回一个布尔值,表示该值是否为Set的成员。

clear()

:清除所有成员,没有返回值。

Map数据结构 接收数组作为参数 返回数组

7. Promise对象

Promise对象有以下两个特点。

(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:

pending

(进行中)、

fulfilled

(已成功)和

rejected

(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是

Promise

这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从

pending

变为

fulfilled

和从

pending

变为

rejected

。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

注意,为了行文方便,后面的

resolved

统一只指

fulfilled

状态,不包含

rejected

状态。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于

pending

状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
 // ... some code

  if (/* 异步操作成功 */){
	resolve(value);
  } else {
	reject(error);
  }
});
           

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是

resolve

reject

resolve

函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从

pending

变为

resolved

),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从

pending

变为

rejected

),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用

then

方法分别指定

resolved

状态和

rejected

状态的回调函数。

.then()

它的作用是为 Promise 实例添加状态改变时的回调函数。

.catch()

方法是

.then(null, rejection)

的别名,用于指定发生错误时的回调函数

Promise.all

方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

8. Iterator 和 for…of 循环

for of

只要有iterator接口都可以用

for of

来遍历

9. async函数

async函数返回一个 Promise 对象,可以使用

then

方法添加回调函数。当函数执行的时候,一旦遇到

await

就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

10. class

Class 可以通过extends关键字实现继承 通过

super

调用父类的方法时,方法内部的this指向子类。

继续阅读