玩轉ECMAScript 6 ~

時間 2019-12-06

原文原文鏈接

開發環境搭建

安裝babel-cli、babel-preset-envvue
根目錄下配置.babelrcwebpack
```
{
 	"presets": ["env"]
 }
複製代碼
```
轉換web
```
babel xx.js -o xx.js
複製代碼
```

固然咱們也能夠藉助webpack、gulp來實現轉換json

let、const

let關鍵字提供了除var之外另外一種變量聲明方式，能夠將變量綁定到所在的任意做用域中(一般是{...}內部)，換句話說，let爲其聲明的變量隱式地劫持了所在的塊級做用域。gulp

{
	let bar = 2
}
console.log(bar) //ReferenceError
複製代碼

let進行的聲明不會在做用域中進行提高數組

{
	console.log(bar) //ReferenceError
	let bar = 2
}
複製代碼

let不容許重複命名promise

let bar = 2
let bar = 3 // error
複製代碼

let循環babel

for (let i=0; i<3; i++) {
 	console.log(i)
 }
 console.log(i) // ReferenceError
 /*let不只將i綁定到for循環塊中，並從新綁定到循環的每一迭代中，確保上一個循環迭代結束時的值從新賦值*/
複製代碼

const 一樣能夠建立塊級做用域，可是以後任何試圖修改的操做都會報錯數據結構

const bar = 2
bar = 4 // ReferenceError
複製代碼

變量的解構賦值（模式匹配）

數組：元素按次序排列，變量取值由位置決定函數

let [a, b, c] = [1, 2, 3] // a-1, b-2, c-3
let [a, ...b] = [1, 2, 3] // a-1, b-[2, 3]
複製代碼

對象：變量名必須和屬性名相同

let {foo, bar} = {foo: 1, bar: 2} // foo-1, bar-2
複製代碼

字符串

const [a, b, c, d, e] = 'devin' // a-d, b-e, c-v, d-i, e-n
let {length: len} = 'devin'     // len-5 length屬性
複製代碼

函數

function foo([x, y]) { do sth } 
foo([1, 2])
複製代碼

擴展運算符和rest運算符

擴展運算符

let arr1 = [1, 2, 3]
let arr2 = [...arr1]
console.log(arr2) // [1, 2, 3]

let {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4} // x-1, y-2, z-{a: 3, b: 4}
複製代碼

rest運算符

function foo (...arg) {
	console.log(arg.length)
}

foo(1, 2, 3) // 3
複製代碼

字符串擴展

模版字符串

const name = 'welllee'

console.log(`hello ${name}, how r u ?`) // hello welllee, how r u ?
複製代碼

字符串遍歷

const name = 'welllee'

for (let item of name) {console.log(item)} // w e l l l e e

// 補充for...of
1.區別於forEach(),能夠正確響應return, break, continue

2.遍歷map, set對象（需解構）
	for (let [key, value] of xxx) {console.log(key, value)}
	
3.不支持普通對象（使用Object.keys()）
	for (let key of Object.keys(xxx)) {
		console.log(key, xxx[key])
	}
複製代碼

'welllee'.at(1) // e  相似charAt()
複製代碼

includes 查找字符串

'welllee'.includes('w') // true 相似indexOf()
複製代碼

startsWith & endsWith 開頭&結尾是否存在xxx

'welllee'.startsWith('w') // true
'welllee'.endsWith('e') // true
複製代碼

repeat 複製字符串

'welllee'.repeat(2) // wellleewellee
複製代碼

數值的擴展

Number.isFinite() 數字驗證

Number.isNaN() NaN驗證

Number.parseInt() 整型轉換

Number.parseFloat() 浮點型轉換

Number.isInteger() 數值是否爲整數

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

Math.sign() 判斷一個數是整數，負數，仍是0。正數返回+1,負數返回-1，0返回0， -0返回-0，其餘返回NaN

數組的擴展

Array.from() 將僞數組轉爲數組

還能夠用[].slice.call()
複製代碼

Array.of() 將一組值專爲數組

Array.of(1, 2, 3) // [1, 2, 3]
複製代碼

find() 找出數組中的成員

[1, 2, 3].find((value, index, array) => {
	return value > 1
}) // 2
找到後就return,中止查找
複製代碼

fill(value, start, end) 使用給定值填充數組

[1, 2, 3].fill('a', 1, 2) // [1, 'a', 3]
複製代碼

entries()鍵值對遍歷、keys()鍵名遍歷、 values()鍵值遍歷

for (let [index, elem] of ['a', 'b'].entries()) {
	console.log(index, elem) // 0 'a', 1 'b'
}

for (let index of ['a', 'b'].keys()) {
	console.log(index) // 0, 1
}

for (let elem of ['a', 'b'].values()) {
	console.log(elem) // 'a', 'b'
}
複製代碼

數組的空位

forEach(), filter(), every() 和some()都會跳過空位

map()會跳過空位，但會保留這個值

join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串
複製代碼

函數的擴展

默認參數

function foo (a, b = 1) {
	return a + b
}

foo(1) // 2
複製代碼

擴展運算符和rest運算符(上文已說起)

主動拋出錯誤

{
	throw new Error('出錯啦～')
}
複製代碼

嚴格模式

'use strict'
在嚴格模式下使用默認參數會報錯
複製代碼

獲取須要傳遞參數的個數

function foo (a, b) {do sth}

foo.length // 2
複製代碼

箭頭函數

const foo = (a, b) =>  a + b

foo (1, 2) // 3

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。
（4）不可使用yield命令，所以箭頭函數不能用做Generator函數。
複製代碼

對象的擴展

Object.is(val1, val2) 比較兩個值是否相等

let a = {xx: 1}

let b = {xx: 1}

console.log(Object.is(a.xx, b.xx))  // true
複製代碼

Object.assign() 對象的合併，實行的是淺拷貝

let a = {xx: 1}

let b = Object.assign({}, a)

console.log(b) // {xx: 1}
複製代碼

Object.keys() object.values() object.entries()

參考上文數組的遍歷
複製代碼

set & map

set相似於數組，可是成員的值都是惟一的，能夠用來數組去重，set自己是一個構造函數，用來生產set數據結構。

數組去重複

const item =new Set([1,2,3,3]) 
console.log([...item])     // [1,2,3]
複製代碼

set屬性：

Set.prototype.constructor
Set.prototype.size
複製代碼

set方法:

add()   delete()  has()  clear()
複製代碼

遍歷：

keys()  values()  entries()  
複製代碼

map相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。

可使用擴展運算符（...）將Map轉換爲數組，反過來，將數組傳入 Map 構造函數，就能夠轉爲 Map了。

map方法：

set(key,value)
get(key)
delete(key)
has(key)
clear()
複製代碼

遍歷:

keys()  values()  entries()  forEach()
複製代碼

symbol

1.symbol能夠用symbol函數生成，能夠做爲對象的屬性名使用，保證不會與其餘屬性重名

let a = Symbol()
let b = Symbol()
let obj = {
	[a] : 'no 1'
}
obj[b] = 'no 2'
複製代碼

2.symbol函數能夠接受一個字符串做爲參數

let s = Symbol('a')
let q = Symbol('a')
console.log(s === q) // false
複製代碼

3.symbol值不能與其餘類型的值進行運算，可是能夠轉爲bool值

4.symbol做爲屬性名,不會被for-in,for-of遍歷獲得，不會被 object.keys(),json.stringify() object.getOwnPropertyNames()返回，可是能夠經過object.getOwnPropertySymbols()方法獲取對象的全部symbol 屬性名

類

class People {
	constructor (name) {   //構造函數
        this.name = name
   }

	say () {  //方法
		console.log('xxx')
	}
}

繼承
class Student extends People {
	constructor () {
	
	}
}
複製代碼

promise

一個容器，保存着將來纔會結束的事件

promise構造函數接受一個函數做爲參數，該函數的兩個參數(resolve,reject)也是函數

resolve 將promise對象狀態從未完成到成功，reject將promise對象狀態從未完成到失敗

function test (val) {
    return new Promise(function (resolve, reject) {
		if (條件) {
			resolve(結果)
		} else {
			reject(錯誤)
		}
	})
}
 
test('xxx').then(res => {
//
})
複製代碼

generator

由function*來定義，除了return 語句，還能夠用yield返回屢次

直接調用generator僅僅是建立了一個generator對象，並無去執行它

執行它有2個方法：

不斷的調用next()，每次遇到yield就返回一個對象{value:,done:true/false},當done的值是true就是返回return的值

for....of循環迭代generator對象的方法

function* fib(max)  {
 	var t, a=0, b=1, n=1;
 	while (n < max) {
 		yield a;
 		t = a +b;
 		a = b;
 		b =t;
 		n ++;
 	}
 	return a;
	}
	
	for (let x of fib(5)) {
		console.log(x) // 0, 1, 1, 2, 3
	}
複製代碼

用Proxy進行預處理

var target = {
   name: 'xxx'
 };

 var handler = {
   get: function(target, key) {
     console.log(`${key} 被讀取`);
     return target[key];
   },
   
   set: function(target, key, value) {
     console.log(`${key} 被設置爲 ${value}`);
     target[key] = value;
   }
 }
 
 var aaa = new Proxy(target, handler)
 
 aaa.name // name被讀取 'xxx'
 
 aaa.name = 'welllee' // name被設置爲welllee 'welllee'
 
 補充：vuejs 數據雙向綁定原理
複製代碼