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

複製代碼