es6,es7,es8语法总结

ES6

一、变量声明 var、let、const

var 声明没有块级做用域

let,const具备块级做用域，不具备变量提高

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

复制代码

二、解构赋值

// 数组
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.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

复制代码

五、数值的扩展

// 若是参数类型不是数值，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.一、默认值

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.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.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，指向当前对象的原型对象。
复制代码

九、Symbol

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

let s = Symbol();

typeof s
// "symbol"
复制代码

十、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
复制代码

十一、class

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

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

复制代码

十二、Promise 对象

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

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

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

复制代码

1三、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

一、includes

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

复制代码

二、指数操做符

2**3 == 8

复制代码

ES8

一、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
})

复制代码

二、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)
})

复制代码