es6,es7,es8语法总结

20 May 2019

Reading time ~3 minutes

ES6

1、变量声明 var、let、const

var 声明没有块级作用域

let,const具有块级作用域，不具有变量提升

const 定义常量，不能被重新赋值

2、解构赋值

// 数组
let [a, b, c, d] = [1, 2, 3];

console.log(a); // 1

console.log(b); // 2

console.log(d); //undefined

// 对象（保持键名一致）
let { e, f } = { e: 1, f: 2 };

console.log(e);// 1

console.log(f);// 2

3、字符串的扩展

3.1 遍历字符串

let s = "hello world!";

for (let item of s) {
    console.log(item);// h,e,l,l,o, ,w,o,r,l,!
}

3.2 新增常见方法

JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

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

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

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

3.3 模板字符串

const name = 'sheng';

const age = 18;
console.log(`My name is  ${name} and is ${age} years old.`);

4 正则的扩展(做为了解知识)

RegExp 构造函数
字符串的正则方法
u 修饰符
y 修饰符
sticky 属性
flags 属性
s 修饰符：dotAll 模式
后行断言
Unicode 属性类
具名组匹配
String.prototype.matchAll

5、数值的扩展

// 如果参数类型不是数值，Number.isFinite一律返回false。
Number.isFinite(15); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
// 如果参数类型不是数值，Number.isNaN一律返回false。
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true

Number.isInteger(); //用来判断一个数值是否为整数。
Math.trunc // 方法用于去除一个数的小数部分，返回整数部分。
Number.isSafeInteger();//则是用来判断一个整数是否落在这个范围之内。

6、函数的扩展

6.1、默认值

function foo(x = 5) {};

6.2 rest参数

function add(...values) {
  console.log(values);// [ 2, 5, 3 ]
}
add(2, 5, 3);

6.3 箭头函数 this 将不会受到影响,可以直接用this调用父级的this

var f = v => v;

6.4 双冒号

foo::bar;
// 等同于
bar.bind(foo);

7、数组的扩展

7.1 扩展运算符

console.log(...[1, 2, 3]); // 1 2 3
// 扩展运算符还可以将字符串转为真正的数组。
[...'hello']// [ "h", "e", "l", "l", "o" ]

7.2 Array.from()

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

7.3 Array.of()

Array.of(3, 11, 8) // [3,11,8];

7.4 一些实例方法

find()
findIndex()
fill()
entries()
keys()
values()
includes()

8、对象的扩展

8.1 属性简写

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};


function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

8.2 实例方法

Object.is(); // 比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
Object.assign(); //方法用于对象的合并
Object.getOwnPropertyDescriptor; // 方法可以获取该属性的描述对象。
for...in; //循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
Object.keys; // 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
Object.getOwnPropertyNames(obj); // 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
Object.getOwnPropertySymbols(obj); //返回一个数组，包含对象自身的所有 Symbol 属性的键名。
Reflect.ownKeys(obj); // 返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
Object.keys(); // 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
Object.values(); // 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
Object.entries(); // 方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
super // 关键字 this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

9、Symbol

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

let s = Symbol();

typeof s
// "symbol"

10、Set和Map数据结构

10.1 Set

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

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

10.1.1 WeakSet

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。

首先，WeakSet 的成员只能是对象，而不能是其他类型的值。

10.2 Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const m = new Map();
const o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

10.2.1 WeakMap

只接受对象作为键名（null除外），不接受其他类型的值作为键名。

11 Proxy(操作对象)

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

11、class

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

12、Promise 对象

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

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

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

13、Generators

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

ES7

1、includes

let array = [1,2,3,4];
if(array.includes(2)) {
  console.log(true)
}

2、指数操作符

  2**3 == 8

ES8

1、object.entries()

let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) => {
  console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})

2、async&await

async fetchData(query) =>{
  try {
    const response = await axios.get(`/q?query=${query}`);
    const data = response.data;
    return data;
  }
  catch (error) {
    console.log(error)
  }
}
fetchData(query).then(data => {
  this.props.processfetchedData(data)
})

ES6